feat: functionsの実験(続き)

functions/greet.tsx

@@ -0,0 +1,11 @@
+import { ImageResponse } from "@cloudflare/pages-plugin-vercel-og/api";
+
+export const onRequest: PagesFunction = async () => {
+  return new ImageResponse(
+    <div style={{ display: "flex" }}>Hello, world!</div>,
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+};

functions/post/_middleware.tsx

@@ -101,7 +101,7 @@ const getFontData = async (url: string): Promise<ArrayBuffer> => {
   return await fetch(resource[1]).then(async (res) => await res.arrayBuffer());
 };
 
-export const onRequest = vercelOGPagesPlugin<OgImageProps>({
+export const onRequest: PagesFunction = vercelOGPagesPlugin<OgImageProps>({
   imagePathSuffix: "/og-image.png",
   component: ({ ogTitle }) => {
     return <OgImage ogTitle={ogTitle} />;
@@ -110,7 +110,7 @@ export const onRequest = vercelOGPagesPlugin<OgImageProps>({
     on: {
       'meta[property="og:title"]': (props) => ({
         element(element) {
-          props.ogTitle = element.getAttribute("content");
+          props.ogTitle = element.getAttribute("content") ?? "ゆっきーの砂場";
         },
       }),
     },

package.json

@@ -34,6 +34,7 @@
     "typescript-eslint": "^7.2.0"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240909.0",
     "@playwright/test": "^1.36.2",
     "@tailwindcss/typography": "^0.5.9",
     "@types/bun": "^1.0.8",

tsconfig.json

@@ -1,10 +1,9 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "include": ["**/*.ts", "**/*.tsx", "**/*.astro"],
   "compilerOptions": {
-    "types": [
-      "bun-types"
-    ],
+    "types": ["bun-types", "@cloudflare/workers-types/2023-07-01"],
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }
-}
+}

wrangler.toml

@@ -0,0 +1,4 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "yukky-sandbox"
+compatibility_date = "2024-09-02"
+pages_build_output_dir = "./dist"