diff --git a/functions/post/_middleware.tsx b/functions/post/_middleware.tsx new file mode 100644 index 0000000..c4d5be9 --- /dev/null +++ b/functions/post/_middleware.tsx @@ -0,0 +1,144 @@ +import React from "react"; +import vercelOGPagesPlugin from "@cloudflare/pages-plugin-vercel-og"; + +interface OgImageProps { + ogTitle: string; +} + +const OgImage = ({ ogTitle }: OgImageProps): JSX.Element => { + return ( +
+
+

{ogTitle}

+
+

+ + + + + + ゆっきー +

+

+ ゆっきーの砂場 +

+
+
+
+ ); +}; +const getFontData = async (url: string): Promise => { + const css = await ( + await fetch(url, { + headers: { + "User-Agent": + "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1", + }, + }) + ).text(); + const resource = css.match( + /src: url\((.+)\) format\('(opentype|truetype)'\)/ + ); + if (resource === null) { + throw new Error("Font resource not found"); + } + + 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({ + imagePathSuffix: "/og-image.png", + component: ({ ogTitle }) => { + return ; + }, + 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, + }, + }); +};