From da7b36a4476aa71ea757af1386778e26b1ddc5f3 Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sat, 16 Mar 2024 12:20:37 +0900
Subject: [PATCH 1/2] =?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 | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/functions/src/ogp.js b/functions/src/ogp.js
index 559300a4aa..1e8c23cf15 100644
--- a/functions/src/ogp.js
+++ b/functions/src/ogp.js
@@ -23,13 +23,19 @@ const font = opentype.loadSync("./functions/src/KaiseiTokumin-Bold.ttf");
 exports.handler = async (event, context) => {
   console.log(event);
   console.log(context);
+  const rawData = Buffer.from(event.blobs, "base64");
+  const data = JSON.parse(rawData.toString("ascii"));
   const queryStringParameters = event.queryStringParameters;
 
   const title = queryStringParameters.title?.toString() || "Hello, World!";
   const user = `by ` + (queryStringParameters.user?.toString() || "tubone24");
 
   try {
-    const ogp = getStore("ogp");
+    const ogp = getStore({
+      name: "ogp",
+      token: data.token,
+      siteID: "3751ef40-b145-4249-9657-39d3fb04ae81",
+    });
     const ogpArrayBuf = await ogp.get(`${encodeURIComponent(title)}`, {
       type: "arrayBuffer",
     });

From d307fbdf0b7fba89458ed5815487c8f7d7f22e4f Mon Sep 17 00:00:00 2001
From: tubone <tubo.yyyuuu@gmail.com>
Date: Sat, 16 Mar 2024 12:49:06 +0900
Subject: [PATCH 2/2] =?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

---
 src/components/SEO/index.spec.tsx |  8 ++-
 src/components/SEO/index.tsx      | 84 +++++++++++++++++--------------
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/components/SEO/index.spec.tsx b/src/components/SEO/index.spec.tsx
index 0e7f2feb7a..aa32dbe58f 100644
--- a/src/components/SEO/index.spec.tsx
+++ b/src/components/SEO/index.spec.tsx
@@ -84,7 +84,9 @@ describe("SEO", () => {
     expect(twitterCreator).toBe("@meitante1conan");
     expect(twitterTitle).toBe("testTitle");
     expect(twitterDescription).toBe("testDescription");
-    expect(twitterImage).toBe("https://example.com/test.png");
+    expect(twitterImage).toBe(
+      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
+    );
   });
   it("should render metadata (not article)", () => {
     render(
@@ -166,6 +168,8 @@ describe("SEO", () => {
     expect(twitterTitle).toBe("testTitle");
     expect(twitterCreator).toBe("@meitante1conan");
     expect(twitterDescription).toBe("testDescription");
-    expect(twitterImage).toBe("https://example.com/test.png");
+    expect(twitterImage).toBe(
+      "https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=testTitle"
+    );
   });
 });
diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx
index 1c0ff241b5..04398a9722 100644
--- a/src/components/SEO/index.tsx
+++ b/src/components/SEO/index.tsx
@@ -97,48 +97,54 @@ const SEO = ({
   siteTitleAlt,
   isPost,
   tag,
-}: Props) => (
-  <Helmet>
-    <title>{title}</title>
+}: Props) => {
+  const ogpImageLink = `https://blog.tubone-project24.xyz/.netlify/functions/ogp?title=${encodeURI(
+    title
+  )}`;
+  return (
+    <Helmet>
+      <title>{title}</title>
 
-    {/* General tags */}
-    <meta name="description" content={description} />
-    <meta name="image" content={image} />
+      {/* General tags */}
+      <meta name="description" content={description} />
+      <meta name="image" content={image} />
 
-    {/* Schema.org tags */}
-    <script type="application/ld+json">
-      {JSON.stringify(
-        schemaOrgJSONLD({
-          url,
-          title,
-          siteTitleAlt,
-          isPost,
-          image,
-          description,
-          tag,
-        })
-      )}
-    </script>
+      {/* Schema.org tags */}
+      <script type="application/ld+json">
+        {JSON.stringify(
+          schemaOrgJSONLD({
+            url,
+            title,
+            siteTitleAlt,
+            isPost,
+            image,
+            description,
+            tag,
+          })
+        )}
+      </script>
 
-    {/* OpenGraph tags */}
-    <meta property="og:url" content={url} />
-    {isPost ? (
-      <meta property="og:type" content="article" />
-    ) : (
-      <meta property="og:type" content="website" />
-    )}
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={image} />
-    <meta property="fb:app_id" content="280941406476272" />
+      {/* OpenGraph tags */}
+      <meta property="og:url" content={url} />
+      {isPost ? (
+        <meta property="og:type" content="article" />
+      ) : (
+        <meta property="og:type" content="website" />
+      )}
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta property="og:locale" content="ja_JP" />
+      <meta property="fb:app_id" content="280941406476272" />
 
-    {/* Twitter Card tags */}
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:creator" content="@meitante1conan" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={image} />
-  </Helmet>
-);
+      {/* Twitter Card tags */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator" content="@meitante1conan" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={ogpImageLink} />
+    </Helmet>
+  );
+};
 
 export default SEO;