feat: generate og images in png format (#43)

* feat: generate og images in png format In production mode, generate og images from svg to png format. fix #40 * refactor: update og image format from svg to png Update OG image format in post detail to png. Update twitter og images to auto-generated dynamic og images.
satnaing · Mar 1, 2023 · 27507d1 · 27507d1
1 parent c40af43
commit 27507d1
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 11 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -33,4 +33,9 @@ export default defineConfig({
     },
     extendDefaultPlugins: true,
   },
+  vite: {
+    optimizeDeps: {
+      exclude: ["@resvg/resvg-js"],
+    },
+  },
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@astrojs/rss": "^2.1.0",
+    "@resvg/resvg-js": "^2.4.1",
     "astro": "^2.0.8",
     "fuse.js": "^6.6.2",
     "github-slugger": "^2.0.0",

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -24,8 +24,6 @@ const socialImageURL = new URL(
   ogImage ? ogImage : SITE.ogImage,
   Astro.url.origin
 ).href;
-
-const fallbackImageURL = new URL(SITE.ogImage, Astro.url.origin).href;
 ---
 
 <!DOCTYPE html>
@@ -54,12 +52,7 @@ const fallbackImageURL = new URL(SITE.ogImage, Astro.url.origin).href;
     <meta property="twitter:url" content={canonicalURL} />
     <meta property="twitter:title" content={title} />
     <meta property="twitter:description" content={description} />
-    <meta
-      property="twitter:image"
-      content={socialImageURL.endsWith(".svg")
-        ? fallbackImageURL
-        : socialImageURL}
-    />
+    <meta property="twitter:image" content={socialImageURL} />
 
     <!-- Google Font -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -16,7 +16,7 @@ const { title, author, description, ogImage, pubDatetime, tags } = post.data;
 
 const { Content } = await post.render();
 
-const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
+const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
   .href;
 ---
 

diff --git a/src/utils/generateOgImage.tsx b/src/utils/generateOgImage.tsx
@@ -1,5 +1,7 @@
 import satori, { SatoriOptions } from "satori";
 import { SITE } from "@config";
+import { writeFile } from "node:fs/promises";
+import { Resvg } from "@resvg/resvg-js";
 
 const fetchFonts = async () => {
   // Regular Font
@@ -133,7 +135,21 @@ const options: SatoriOptions = {
   ],
 };
 
-const generateOgImage = async (mytext = SITE.title) =>
-  await satori(ogImage(mytext), options);
+const generateOgImage = async (mytext = SITE.title) => {
+  const svg = await satori(ogImage(mytext), 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();
+
+    console.info("Output PNG Image  :", `${mytext}.png`);
+
+    await writeFile(`./dist/${mytext}.png`, pngBuffer);
+  }
+
+  return svg;
+};
 
 export default generateOgImage;
-Original file line number
+Diff line change
@@ Expand Up @@
     const { Content } = await post.render();
-    const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
+    const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
       .href;
     ---
@@ Expand Down @@