fix: update auto-gen OG images to allow special char usage in title

Update the implementation of og image generation code to allow special character usage in title.

fix #103, fix #88

src/layouts/PostDetails.astro

@@ -18,7 +18,7 @@ const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } =
 
 const { Content } = await post.render();
 
-const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
+const ogUrl = new URL(ogImage ? ogImage : `${post.slug}.png`, Astro.url.origin)
   .href;
 ---
 

src/pages/[ogImage].png.ts

@@ -0,0 +1,8 @@
+import generateOgImages from "@utils/generateOgImages";
+import type { APIRoute } from "astro";
+
+export const GET: APIRoute = async () => new Response(await generateOgImages());
+
+export const getStaticPaths = () => [
+  { params: { ogImage: "generating images with " } },
+];

src/pages/[ogTitle].svg.ts

@@ -1,17 +0,0 @@
-import { getCollection } from "astro:content";
-import generateOgImage from "@utils/generateOgImage";
-import type { APIRoute } from "astro";
-
-export const GET: APIRoute = async ({ params }) =>
-  new Response(await generateOgImage(params.ogTitle));
-
-const postImportResult = await getCollection("blog", ({ data }) => !data.draft);
-const posts = Object.values(postImportResult);
-
-export function getStaticPaths() {
-  return posts
-    .filter(({ data }) => !data.ogImage)
-    .map(({ data }) => ({
-      params: { ogTitle: data.title },
-    }));
-}

src/utils/generateOgImages.tsx

@@ -2,6 +2,7 @@ import satori, { type SatoriOptions } from "satori";
 import { SITE } from "@config";
 import { writeFile } from "node:fs/promises";
 import { Resvg } from "@resvg/resvg-js";
+import { getCollection } from "astro:content";
 
 const fetchFonts = async () => {
   // Regular Font
@@ -135,8 +136,17 @@ const options: SatoriOptions = {
   ],
 };
 
-const generateOgImage = async (mytext = SITE.title) => {
-  const svg = await satori(ogImage(mytext), options);
+const generateOgImages = async () => {
+  const postImportResult = await getCollection(
+    "blog",
+    ({ data }) => !data.draft
+  );
+  const posts = Object.values(postImportResult).filter(
+    ({ data }) => !data.ogImage
+  );
+
+  const imageGenerationPromises = posts.map(async post => {
+    const svg = await satori(ogImage(post.data.title), options);
 
     // render png in production mode
     if (import.meta.env.MODE === "production") {
@@ -144,12 +154,24 @@ const generateOgImage = async (mytext = SITE.title) => {
       const pngData = resvg.render();
       const pngBuffer = pngData.asPng();
 
-    console.info("Output PNG Image  :", `${mytext}.png`);
+      const outputImage = `${post.slug}.png`;
 
-    await writeFile(`./dist/${mytext}.png`, pngBuffer);
+      const LIGHT_BLUE = "\x1b[94m";
+      const DARK_GRAY = "\x1b[30m";
+      const RESET = "\x1b[0m";
+      console.info(
+        `  ${LIGHT_BLUE}└─${RESET} output png image:`,
+        `${DARK_GRAY}/${outputImage}${RESET}`
+      );
+
+      await writeFile(`./dist/${outputImage}`, pngBuffer);
     }
+  });
 
-  return svg;
+  // Wait for all image generation operations to complete
+  await Promise.all(imageGenerationPromises);
+
+  return null;
 };
 
-export default generateOgImage;
+export default generateOgImages;