From fc4ce0be7b8cc5b09b2eb1a4db0164c6ffe45bc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E9=87=8E=E6=95=AC=E5=A4=AA=E9=83=8E?=
 <yoshinoyukitarou@yoshinokeitarounoMacBook-Pro.local>
Date: Mon, 16 Sep 2024 18:41:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20functions=E3=82=92=E9=80=9A=E5=B8=B8?=
 =?UTF-8?q?=E3=81=AE=E3=82=82=E3=81=AE=E3=81=A7=E6=9B=B8=E3=81=8D=E7=9B=B4?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{_middleware.tsx => og/[ogtitle].tsx}     | 50 ++++++-------------
 src/layouts/Layout.astro                      |  3 ++
 2 files changed, 19 insertions(+), 34 deletions(-)
 rename functions/post/{_middleware.tsx => og/[ogtitle].tsx} (98%)

diff --git a/functions/post/_middleware.tsx b/functions/post/og/[ogtitle].tsx
similarity index 98%
rename from functions/post/_middleware.tsx
rename to functions/post/og/[ogtitle].tsx
index 43e7e10..ec7dd6f 100644
--- a/functions/post/_middleware.tsx
+++ b/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
index aac05f6..2e5628f 100644
--- 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} />