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/utils/generateOgImage.tsx → 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,21 +136,42 @@ 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") {
+      const resvg = new Resvg(svg);
+      const pngData = resvg.render();
+      const pngBuffer = pngData.asPng();
+
+      const outputImage = `${post.slug}.png`;
 
-  // render png in production mode
-  if (import.meta.env.MODE === "production") {
-    const resvg = new Resvg(svg);
-    const pngData = resvg.render();
-    const pngBuffer = pngData.asPng();
+      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}`
+      );
 
-    console.info("Output PNG Image  :", `${mytext}.png`);
+      await writeFile(`./dist/${outputImage}`, pngBuffer);
+    }
+  });
 
-    await writeFile(`./dist/${mytext}.png`, pngBuffer);
-  }
+  // Wait for all image generation operations to complete
+  await Promise.all(imageGenerationPromises);
 
-  return svg;
+  return null;
 };
 
-export default generateOgImage;
+export default generateOgImages;