@cloudflare/pages-plugin-vercel-ogで実装しなおしてみる

.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 test-results/
 playwright-report/
 playwright/.cache/
+
+.astro/

astro.config.mjs

@@ -15,7 +15,7 @@ export default defineConfig({
   site: "https://yukky-sandbox.dev/",
   vite: {
     optimizeDeps: {
-      exclude: ["fsevents"],
+      exclude: ["fsevents", "@cloudflare/pages-plugin-vercel-og"],
     },
   },
   output: "hybrid",

package.json

@@ -17,23 +17,21 @@
     "@astrojs/react": "^3.6.2",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/tailwind": "^5.1.0",
+    "@cloudflare/pages-plugin-vercel-og": "^0.1.2",
     "@formkit/tempo": "^0.1.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "astro": "4.15.6",
     "microcms-js-sdk": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "satori": "^0.11.0",
-    "sharp": "^0.33.5",
     "tailwindcss": "^3.3.3",
     "typescript-eslint": "^7.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.36.2",
     "@tailwindcss/typography": "^0.5.9",
     "@types/bun": "^1.0.8",
-    "@types/sharp": "^0.32.0",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",

src/pages/og/_OgImage.tsx → src/functions/post/_middleware.tsx

@@ -1,11 +1,11 @@
-import satori from "satori";
-import sharp from "sharp";
+import React from "react";
+import vercelOGPagesPlugin from "@cloudflare/pages-plugin-vercel-og";
 
 interface OgImageProps {
-  text: string;
+  ogTitle: string;
 }
 
-const OgImage = ({ text }: OgImageProps): JSX.Element => {
+const OgImage = ({ ogTitle }: OgImageProps): JSX.Element => {
   return (
     <div
       style={{
@@ -36,7 +36,7 @@ const OgImage = ({ text }: OgImageProps): JSX.Element => {
           paddingLeft: "48px",
         }}
       >
-        <h1>{text}</h1>
+        <h1>{ogTitle}</h1>
         <div
           style={{
             display: "flex",
@@ -82,31 +82,6 @@ const OgImage = ({ text }: OgImageProps): JSX.Element => {
     </div>
   );
 };
-export async function getOgImage(text: string): Promise<Buffer> {
-  const notoSansJpUrl = `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600`;
-  const reggeaeOneUlr =
-    "https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場";
-  const notoSansJpFontData = await getFontData(notoSansJpUrl);
-  const reggeaeOneFontData = await getFontData(reggeaeOneUlr);
-  const svg = await satori(<OgImage text={text} />, {
-    width: 800,
-    height: 400,
-    fonts: [
-      {
-        name: "Noto Sans JP",
-        data: notoSansJpFontData,
-        style: "normal",
-      },
-      {
-        name: "Reggae One",
-        data: reggeaeOneFontData,
-        style: "normal",
-      },
-    ],
-  });
-
-  return await sharp(Buffer.from(svg)).png().toBuffer();
-}
 
 const getFontData = async (url: string): Promise<ArrayBuffer> => {
   const css = await (
@@ -128,3 +103,45 @@ const getFontData = async (url: string): Promise<ArrayBuffer> => {
 
   return await fetch(resource[1]).then(async (res) => await res.arrayBuffer());
 };
+
+export const onRequest = async () => {
+  const notoSansJpUrl = `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600`;
+  const reggeaeOneUlr =
+    "https://fonts.googleapis.com/css2?family=Reggae+One&display=swap&text=ゆっきーの砂場";
+  const notoSansJpFontData = await getFontData(notoSansJpUrl);
+  const reggeaeOneFontData = await getFontData(reggeaeOneUlr);
+  return vercelOGPagesPlugin<OgImageProps>({
+    imagePathSuffix: "/og-image.png",
+    component: ({ ogTitle }) => {
+      return <OgImage ogTitle={ogTitle} />;
+    },
+    extractors: {
+      on: {
+        'meta[property="og:title"]': (props) => ({
+          element(element) {
+            props.ogTitle = element.getAttribute("content");
+          },
+        }),
+      },
+    },
+    options: {
+      width: 800,
+      height: 400,
+      fonts: [
+        {
+          name: "Noto Sans JP",
+          data: notoSansJpFontData,
+          style: "normal",
+        },
+        {
+          name: "Reggae One",
+          data: reggeaeOneFontData,
+          style: "normal",
+        },
+      ],
+    },
+    autoInject: {
+      openGraph: true,
+    },
+  });
+};