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/4] =?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/4] =?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, + }, + }); +}; From df18fc970012833a9eb23622a3235ccfb4be9e92 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 18:00:42 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20adapter=E3=81=AEdirectory=E3=83=A2?= =?UTF-8?q?=E3=83=BC=E3=83=89=E3=82=92=E6=9C=89=E5=8A=B9=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- astro.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index cb9c3ee..33f2adc 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -19,7 +19,7 @@ export default defineConfig({ }, }, output: "hybrid", - adapter: cloudflare(), + adapter: cloudflare({ mode: "directory" }), build: { inlineStylesheets: "auto", }, 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?= Date: Mon, 16 Sep 2024 18:41:38 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20functions=E3=82=92=E9=80=9A?= =?UTF-8?q?=E5=B8=B8=E3=81=AE=E3=82=82=E3=81=AE=E3=81=A7=E6=9B=B8=E3=81=8D?= =?UTF-8?q?=E7=9B=B4=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 => { 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({ - imagePathSuffix: "/og-image.png", - component: ({ ogTitle }) => { - return ; - }, - extractors: { - on: { - 'meta[property="og:title"]': (props) => ({ - element(element) { - props.ogTitle = element.getAttribute("content"); - }, - }), + return new ImageResponse(, { + 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); + + +