From af065c8eb19a7a810eaacf7088d4d5f99f67e723 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?= Date: Mon, 16 Sep 2024 17:48:12 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20404=E3=82=92=E5=AE=9F=E8=A3=85?= =?UTF-8?q?=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/functions/post/_middleware.tsx | 147 ----------------------------- src/pages/404.astro | 8 ++ 2 files changed, 8 insertions(+), 147 deletions(-) delete mode 100644 src/functions/post/_middleware.tsx create mode 100644 src/pages/404.astro diff --git a/src/functions/post/_middleware.tsx b/src/functions/post/_middleware.tsx deleted file mode 100644 index 43e7e10..0000000 --- a/src/functions/post/_middleware.tsx +++ /dev/null @@ -1,147 +0,0 @@ -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, - }, - }); -}; diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..248188e --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,8 @@ +--- +import Layout from "../layouts/Layout.astro"; +--- + + +

404 Not Found

+

ページが見つかりませんでした。

+ From dfe57c7516b72292f01156aaa664f1accf800bce 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?= Date: Mon, 16 Sep 2024 17:48:32 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20functions=E3=81=AE=E9=9A=8E?= =?UTF-8?q?=E5=B1=A4=E3=81=8C=E9=96=93=E9=81=95=E3=81=A3=E3=81=A6=E3=81=84?= =?UTF-8?q?=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- functions/post/_middleware.tsx | 147 +++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 functions/post/_middleware.tsx diff --git a/functions/post/_middleware.tsx b/functions/post/_middleware.tsx new file mode 100644 index 0000000..43e7e10 --- /dev/null +++ b/functions/post/_middleware.tsx @@ -0,0 +1,147 @@ +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, + }, + }); +};