From cc268ef2ac6fba498c94454bed4a242613999c40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=8C=E3=81=BF?= <kagami@kagami.me>
Date: Fri, 4 Oct 2024 00:30:20 +0800
Subject: [PATCH] feat: add og

---
 next.config.js                       |  2 +-
 playwright.config.ts                 |  3 ++
 src/app/[locale]/opengraph-image.tsx | 42 ++++++++++++++++++++++++++++
 src/app/[locale]/twitter-image.tsx   |  5 ++++
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/app/[locale]/opengraph-image.tsx
 create mode 100644 src/app/[locale]/twitter-image.tsx

diff --git a/next.config.js b/next.config.js
index df0536a..0e386f3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -16,7 +16,7 @@ const config = {
     ignoreBuildErrors: true,
   },
   experimental: {
-    testProxy: true,
+    testProxy: process.env.NODE_ENV === 'test',
   },
   trailingSlash: true,
   webpack: (config) => {
diff --git a/playwright.config.ts b/playwright.config.ts
index 0874dee..6d6a91d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,6 +1,9 @@
 import { devices } from '@playwright/test'
 import { defineConfig } from 'next/experimental/testmode/playwright.js'
 
+// @ts-expect-error - NODE_ENV is set for the test environment
+process.env.NODE_ENV = 'test'
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
diff --git a/src/app/[locale]/opengraph-image.tsx b/src/app/[locale]/opengraph-image.tsx
new file mode 100644
index 0000000..c929544
--- /dev/null
+++ b/src/app/[locale]/opengraph-image.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from 'next/og'
+
+const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const runtime = 'edge'
+
+const Image = async () => {
+  const logoSrc = await fetch(
+    new URL('../../assets/poi.png', import.meta.url),
+  ).then((res) => res.arrayBuffer())
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: '240px',
+          fontWeight: '600',
+          lineHeight: '1.2em',
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img src={logoSrc as unknown as string} height="400" />
+        <div>poi</div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  )
+}
+
+export default Image
diff --git a/src/app/[locale]/twitter-image.tsx b/src/app/[locale]/twitter-image.tsx
new file mode 100644
index 0000000..fb5d3cb
--- /dev/null
+++ b/src/app/[locale]/twitter-image.tsx
@@ -0,0 +1,5 @@
+import Image from './opengraph-image'
+
+export const runtime = 'edge'
+
+export default Image