Merge branch 'main' into build/update_latest

# Conflicts:
#	CHANGELOG.md
#	docker-compose.yml
#	src/config.ts
#	src/data/blog/adding-new-post.md
#	src/data/blog/dynamic-og-images.md
#	src/data/blog/how-to-add-latex-equations-in-blog-posts.md
#	src/data/blog/how-to-configure-astropaper-theme.md
#	src/data/blog/how-to-integrate-giscus-comments.md
#	src/data/blog/how-to-update-dependencies.md
#	src/data/blog/predefined-color-schemes.md
#	src/data/blog/setting-dates-via-git-hooks.md
#	src/utils/loadGoogleFont.ts

Author: iamStephenFang

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-paper",
   "type": "module",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "scripts": {
     "dev": "astro dev",
     "build": "astro check && astro build && pagefind --site dist && cp -r dist/pagefind public/",

src/components/Header.astro

@@ -37,7 +37,7 @@ const isActive = (path: string) => {
   >
     <div
       id="top-nav-wrap"
-      class="relative flex w-full items-start justify-between bg-background p-4 sm:py-6"
+      class="relative flex w-full items-baseline justify-between bg-background p-4 sm:py-6"
     >
       <a
         href="/"

src/config.ts

@@ -9,44 +9,6 @@ export const SITE = {
   postPerPage: 4,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
   showArchives: true,
-  showBackButton: true
+  showBackButton: true,
+  dynamicOgImage: true,
 };
-
-export const SOCIALS = [
-  {
-    name: "Github",
-    href: "https://github.com/iamstephenfang",
-    linkTitle: ` ${SITE.author} on Github`,
-    active: true,
-  },
-  {
-    name: "Instagram",
-    href: "https://instagram.com/iamstephenfang",
-    linkTitle: `${SITE.author} on Instagram`,
-    active: true,
-  },
-  {
-    name: "Mail",
-    href: "mailto:fangxuanmiao@hotmail.com",
-    linkTitle: `Send an email to ${SITE.author}`,
-    active: true,
-  },
-  {
-    name: "X",
-    href: "https://x.com/fangxuanmiao",
-    linkTitle: `${SITE.author} on X`,
-    active: true,
-  },
-  {
-    name: "Telegram",
-    href: "https://t.me/stephenfang",
-    linkTitle: `${SITE.author} on Telegram`,
-    active: true,
-  },
-  {
-    name: "Jike",
-    href: "https://okjk.co/LZFasc",
-    linkTitle: `${SITE.author} on Jike`,
-    active: true,
-  },
-];

src/content.config.ts

@@ -13,12 +13,7 @@ const blog = defineCollection({
       featured: z.boolean().optional(),
       draft: z.boolean().optional(),
       tags: z.array(z.string()).default(["others"]),
-      ogImage: image()
-        .refine(img => img.width >= 1200 && img.height >= 630, {
-          message: "OpenGraph image must be at least 1200 X 630 pixels!",
-        })
-        .or(z.string())
-        .optional(),
+      ogImage: image().or(z.string()).optional(),
       description: z.string(),
       canonicalURL: z.string().optional(),
       editPost: z

src/layouts/Layout.astro

@@ -23,14 +23,14 @@ const {
   author = SITE.author,
   profile = SITE.profile,
   description = SITE.desc,
-  ogImage = SITE.ogImage,
+  ogImage = SITE.ogImage ? `/${SITE.ogImage}` : "/og.png",
   canonicalURL = new URL(Astro.url.pathname, Astro.url),
   pubDatetime,
   modDatetime,
   scrollSmooth = false,
 } = Astro.props;
 
-const socialImageURL = new URL(ogImage ?? SITE.ogImage ?? "og.png", Astro.url);
+const socialImageURL = new URL(ogImage, Astro.url);
 
 const structuredData = {
   "@context": "https://schema.org",

src/layouts/PostDetails.astro

@@ -24,7 +24,7 @@ const {
   title,
   author,
   description,
-  ogImage,
+  ogImage: initOgImage,
   canonicalURL,
   pubDatetime,
   modDatetime,
@@ -34,11 +34,24 @@ const {
 
 const { Content } = await render(post);
 
-const ogImageUrl = typeof ogImage === "string" ? ogImage : ogImage?.src;
-const ogUrl = new URL(
-  ogImageUrl ?? `/posts/${slugifyStr(title)}/index.png`,
-  Astro.url.origin
-).href;
+let ogImageUrl: string | undefined;
+
+// Determine OG image source
+if (typeof initOgImage === "string") {
+  ogImageUrl = initOgImage; // Remote OG image (absolute URL)
+} else if (initOgImage?.src) {
+  ogImageUrl = initOgImage.src; // Local asset
+}
+
+// Use dynamic OG image if enabled and no remote|local ogImage
+if (!ogImageUrl && SITE.dynamicOgImage) {
+  ogImageUrl = `/posts/${slugifyStr(title)}/index.png`;
+}
+
+// Resolve OG image URL (or fallback to SITE.ogImage / default `og.png`)
+const ogImage = ogImageUrl
+  ? new URL(ogImageUrl, Astro.url.origin).href
+  : undefined;
 
 const layoutProps = {
   title: `${title} | ${SITE.title}`,
@@ -47,7 +60,7 @@ const layoutProps = {
   pubDatetime,
   modDatetime,
   canonicalURL,
-  ogImage: ogUrl,
+  ogImage,
   scrollSmooth: true,
 };
 

src/pages/posts/[slug]/index.png.ts

@@ -2,8 +2,13 @@ import type { APIRoute } from "astro";
 import { getCollection, type CollectionEntry } from "astro:content";
 import { generateOgImageForPost } from "@/utils/generateOgImages";
 import { slugifyStr } from "@/utils/slugify";
+import { SITE } from "@/config";
 
 export async function getStaticPaths() {
+  if (!SITE.dynamicOgImage) {
+    return [];
+  }
+
   const posts = await getCollection("blog").then(p =>
     p.filter(({ data }) => !data.draft && !data.ogImage)
   );
@@ -14,7 +19,18 @@ export async function getStaticPaths() {
   }));
 }
 
-export const GET: APIRoute = async ({ props }) =>
-  new Response(await generateOgImageForPost(props as CollectionEntry<"blog">), {
-    headers: { "Content-Type": "image/png" },
-  });
+export const GET: APIRoute = async ({ props }) => {
+  if (!SITE.dynamicOgImage) {
+    return new Response(null, {
+      status: 404,
+      statusText: "Not found",
+    });
+  }
+
+  return new Response(
+    await generateOgImageForPost(props as CollectionEntry<"blog">),
+    {
+      headers: { "Content-Type": "image/png" },
+    }
+  );
+};

src/utils/loadGoogleFont.ts

@@ -1,8 +1,9 @@
 async function loadGoogleFont(
   font: string,
-  text: string
+  text: string,
+  weight: number
 ): Promise<ArrayBuffer> {
-  const API = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`;
+  const API = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}&text=${encodeURIComponent(text)}`;
 
   const css = await (
     await fetch(API, {
@@ -14,7 +15,7 @@ async function loadGoogleFont(
   ).text();
 
   const resource = css.match(
-    /src: url\((.+)\) format\('(opentype|truetype)'\)/
+    /src: url\((.+?)\) format\('(opentype|truetype)'\)/
   );
 
   if (!resource) throw new Error("Failed to download dynamic font");
@@ -25,8 +26,7 @@ async function loadGoogleFont(
     throw new Error("Failed to download dynamic font. Status: " + res.status);
   }
 
-  const fonts: ArrayBuffer = await res.arrayBuffer();
-  return fonts;
+  return res.arrayBuffer();
 }
 
 async function loadGoogleFonts(
@@ -42,16 +42,16 @@ async function loadGoogleFonts(
       style: "normal",
     },
     {
-      name: "Source Han Serif",
-      font: "Noto+Serif+SC:wght@700",
+      name: "IBM Plex Mono",
+      font: "IBM+Plex+Mono:wght@700",
       weight: 700,
       style: "bold",
     },
   ];
 
   const fonts = await Promise.all(
     fontsConfig.map(async ({ name, font, weight, style }) => {
-      const data = await loadGoogleFont(font, text);
+      const data = await loadGoogleFont(font, text, weight);
       return { name, data, weight, style };
     })
   );