From 09063806e15dd5a8bb2c2d33a880805d42699244 Mon Sep 17 00:00:00 2001
From: arrow2nd <44780846+arrow2nd@users.noreply.github.com>
Date: Thu, 23 Nov 2023 12:02:59 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20=E7=89=B9=E6=AE=8A=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E3=81=8CTofu=E3=81=AB=E3=81=AA=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[id]/opengraph-image.tsx | 53 ++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/app/[id]/opengraph-image.tsx b/app/[id]/opengraph-image.tsx
index a393c11..e24953f 100644
--- a/app/[id]/opengraph-image.tsx
+++ b/app/[id]/opengraph-image.tsx
@@ -4,6 +4,8 @@ import { getPoem, splitPoemText } from "libs/utils";
 
 import { SiteInfo } from "data/site";
 
+import { Poem } from "types/poem";
+
 export const runtime = "edge";
 
 export const alt = SiteInfo.description;
@@ -22,17 +24,19 @@ export default async function Image({ params }: { params: { id: string } }) {
     });
   }
 
-  const kiwiMaru = fetch(
-    new URL(
-      "https://fonts.bunny.net/kiwi-maru/files/kiwi-maru-japanese-400-normal.woff"
-    )
-  ).then((res) => res.arrayBuffer());
+  const kiwiMaru = await fetchFont(poem);
+  if (!kiwiMaru) {
+    return new Response("Failed to fetch font", {
+      status: 500
+    });
+  }
 
   const lines = splitPoemText(poem.text);
 
   return new ImageResponse(
     (
       <div
+        lang="ja-JP"
         style={{
           color: "#4C7ABE",
           width: "100%",
@@ -76,10 +80,47 @@ export default async function Image({ params }: { params: { id: string } }) {
       fonts: [
         {
           name: "Kiwi Maru",
-          data: await kiwiMaru,
+          data: kiwiMaru,
           style: "normal"
         }
       ]
     }
   );
 }
+
+/**
+ * Google Fonts からポエムの表示に必要なフォントを取得する
+ * 参考: https://github.com/vercel/satori/blob/29fe2e4a9676a1ba41c361ec1a547d6de329b039/playground/pages/api/font.ts#L86
+ * @param poem ポエム
+ * @returns フォントデータ
+ */
+async function fetchFont({
+  clothesName,
+  idolName,
+  text
+}: Poem): Promise<ArrayBuffer | null> {
+  // Kiwi Maru
+  const API = `https://fonts.googleapis.com/css2?family=Kiwi+Maru&text=${encodeURIComponent(
+    clothesName + idolName + text
+  )}`;
+
+  const css = await (
+    await fetch(API, {
+      headers: {
+        // Make sure it returns TTF.
+        "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) return null;
+
+  const res = await fetch(resource[1]);
+
+  return res.arrayBuffer();
+}