feat: functionsを通常のもので書き直した

Yoshino-Yukitaro · Sep 16, 2024 · fc4ce0b · fc4ce0b
1 parent df18fc9
commit fc4ce0b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 34 deletions.
diff --git a/functions/post/_middleware.tsx → functions/post/og/[ogtitle].tsx b/functions/post/_middleware.tsx → functions/post/og/[ogtitle].tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import vercelOGPagesPlugin from "@cloudflare/pages-plugin-vercel-og";
+import { ImageResponse } from "@cloudflare/pages-plugin-vercel-og/api";
 
 interface OgImageProps {
   ogTitle: string;
@@ -104,44 +104,26 @@ const getFontData = async (url: string): Promise<ArrayBuffer> => {
   return await fetch(resource[1]).then(async (res) => await res.arrayBuffer());
 };
 
-export const onRequest = async () => {
+export const onRequest = async (context) => {
   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");
-          },
-        }),
+  return new ImageResponse(<OgImage ogTitle={context.params.ogtitle} />, {
+    width: 800,
+    height: 400,
+    fonts: [
+      {
+        name: "Noto Sans JP",
+        data: notoSansJpFontData,
+        style: "normal",
       },
-    },
-    options: {
-      width: 800,
-      height: 400,
-      fonts: [
-        {
-          name: "Noto Sans JP",
-          data: notoSansJpFontData,
-          style: "normal",
-        },
-        {
-          name: "Reggae One",
-          data: reggeaeOneFontData,
-          style: "normal",
-        },
-      ],
-    },
-    autoInject: {
-      openGraph: true,
-    },
+      {
+        name: "Reggae One",
+        data: reggeaeOneFontData,
+        style: "normal",
+      },
+    ],
   });
 };
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -27,6 +27,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <meta property="og:url" content={Astro.url} />
     <meta property="og:site_name" content="ゆっきーの砂場" />
     <meta property="og:locale" content="ja_JP" />
+    <meta property="og:image" content={`https://yukky-sandbox.dev/post/og/${title}`} />
+    <meta property="og:image:width" content="800" />
+    <meta property="og:image:height" content="400" />
     <meta property="twitter:site" content="@Yu_yukk_Y" />
     <meta property="twitter:creator" content="@Yu_yukk_Y" />
     <meta property="twitter:title" content={title} />