From d1465d42a99a6a8c5ddd2d76f474804595b3cd25 Mon Sep 17 00:00:00 2001 From: tubone Date: Sat, 16 Mar 2024 11:03:22 +0900 Subject: [PATCH] =?UTF-8?q?netlify=20blob=E3=82=92=E4=BD=BF=E3=81=A3?= =?UTF-8?q?=E3=81=A6=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- functions/src/ogp.js | 24 +++++++++ package.json | 3 +- src/components/SEO/index.spec.tsx | 16 ++---- src/components/SEO/index.tsx | 84 ++++++++++++++----------------- 4 files changed, 69 insertions(+), 58 deletions(-) diff --git a/functions/src/ogp.js b/functions/src/ogp.js index 4e20e357aa..559300a4aa 100644 --- a/functions/src/ogp.js +++ b/functions/src/ogp.js @@ -3,6 +3,7 @@ import "@sentry/tracing"; import { ProfilingIntegration } from "@sentry/profiling-node"; import * as opentype from "opentype.js"; import sharp from "sharp"; +import { getStore } from "@netlify/blobs"; Sentry.init({ dsn: "https://3bba1fab248c0e15ece4294929ec4185@o302352.ingest.us.sentry.io/4506916048732160", @@ -28,6 +29,23 @@ exports.handler = async (event, context) => { const user = `by ` + (queryStringParameters.user?.toString() || "tubone24"); try { + const ogp = getStore("ogp"); + const ogpArrayBuf = await ogp.get(`${encodeURIComponent(title)}`, { + type: "arrayBuffer", + }); + + if (ogpArrayBuf !== null) { + transaction.finish(); + return { + statusCode: 200, + headers: { + "Content-Type": "image/png", + }, + body: new Buffer(Buffer.from(ogpArrayBuf)).toString("base64"), + isBase64Encoded: true, + }; + } + // SVGを生成 const svg = ` @@ -90,6 +108,12 @@ exports.handler = async (event, context) => { .png() .toBuffer(); + const arrayBuf = new Uint8Array(buffer).buffer; + + await ogp.set(`${encodeURIComponent(title)}`, arrayBuf, { + createdAt: new Date(), + }); + transaction.finish(); return { diff --git a/package.json b/package.json index 39b239860e..67260e4914 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "author": "tubone ", "dependencies": { "@loadable/component": "5.15.3", + "@netlify/blobs": "7.0.1", "@popperjs/core": "2.11.8", "@raae/gatsby-remark-oembed": "0.3.3", "@sentry/browser": "7.31.1", @@ -140,8 +141,8 @@ "devDependencies": { "@babel/core": "7.23.7", "@babel/eslint-parser": "7.23.3", - "@babel/preset-typescript": "7.23.3", "@babel/plugin-syntax-typescript": "7.23.3", + "@babel/preset-typescript": "7.23.3", "@cypress/code-coverage": "3.12.18", "@storybook/addon-a11y": "6.5.16", "@storybook/addon-actions": "6.5.16", diff --git a/src/components/SEO/index.spec.tsx b/src/components/SEO/index.spec.tsx index 08889ba153..0e7f2feb7a 100644 --- a/src/components/SEO/index.spec.tsx +++ b/src/components/SEO/index.spec.tsx @@ -78,17 +78,13 @@ describe("SEO", () => { expect(ogType).toBe("article"); expect(ogTitle).toBe("testTitle"); expect(ogDescription).toBe("testDescription"); - expect(ogImage).toBe( - "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle" - ); + expect(ogImage).toBe("https://example.com/test.png"); expect(fbAppId).toBe("280941406476272"); expect(twitterCard).toBe("summary_large_image"); expect(twitterCreator).toBe("@meitante1conan"); expect(twitterTitle).toBe("testTitle"); expect(twitterDescription).toBe("testDescription"); - expect(twitterImage).toBe( - "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle" - ); + expect(twitterImage).toBe("https://example.com/test.png"); }); it("should render metadata (not article)", () => { render( @@ -164,16 +160,12 @@ describe("SEO", () => { expect(ogType).toBe("website"); expect(ogTitle).toBe("testTitle"); expect(ogDescription).toBe("testDescription"); - expect(ogImage).toBe( - "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle" - ); + expect(ogImage).toBe("https://example.com/test.png"); expect(fbAppId).toBe("280941406476272"); expect(twitterCard).toBe("summary_large_image"); expect(twitterTitle).toBe("testTitle"); expect(twitterCreator).toBe("@meitante1conan"); expect(twitterDescription).toBe("testDescription"); - expect(twitterImage).toBe( - "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle" - ); + expect(twitterImage).toBe("https://example.com/test.png"); }); }); diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx index 06cc58d461..1c0ff241b5 100644 --- a/src/components/SEO/index.tsx +++ b/src/components/SEO/index.tsx @@ -97,54 +97,48 @@ const SEO = ({ siteTitleAlt, isPost, tag, -}: Props) => { - const ogpImageLink = `https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=${encodeURI( - title - )}`; - return ( - - {title} +}: Props) => ( + + {title} - {/* General tags */} - - + {/* General tags */} + + - {/* Schema.org tags */} - - - {/* OpenGraph tags */} - - {isPost ? ( - - ) : ( - + {/* Schema.org tags */} + - {/* Twitter Card tags */} - - - - - - - ); -}; + {/* OpenGraph tags */} + + {isPost ? ( + + ) : ( + + )} + + + + + + {/* Twitter Card tags */} + + + + + + +); export default SEO;