From b497e133bd25fd844ade7fe1c3656de9a18bc26b Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Sat, 2 May 2026 21:02:58 +0800
Subject: [PATCH] feat(web): add PWA icons via Next.js ImageResponse
 (frontend-design)

---
 web/app/apple-icon.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++
 web/app/icon.tsx       | 49 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 web/app/apple-icon.tsx
 create mode 100644 web/app/icon.tsx

diff --git a/web/app/apple-icon.tsx b/web/app/apple-icon.tsx
new file mode 100644
index 0000000..e90b987
--- /dev/null
+++ b/web/app/apple-icon.tsx
@@ -0,0 +1,49 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 180, height: 180 };
+export const contentType = "image/png";
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#facc15",
+          border: "8px solid #000000",
+          boxSizing: "border-box",
+          fontFamily:
+            '"Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace',
+          position: "relative",
+        }}
+      >
+        <span
+          style={{
+            color: "#000000",
+            fontSize: 110,
+            fontWeight: 900,
+            letterSpacing: "-5px",
+            lineHeight: 1,
+          }}
+        >
+          CM
+        </span>
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            right: 0,
+            width: 24,
+            height: 24,
+            background: "#000000",
+          }}
+        />
+      </div>
+    ),
+    size,
+  );
+}
diff --git a/web/app/icon.tsx b/web/app/icon.tsx
new file mode 100644
index 0000000..6f15855
--- /dev/null
+++ b/web/app/icon.tsx
@@ -0,0 +1,49 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 512, height: 512 };
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#facc15",
+          border: "24px solid #000000",
+          boxSizing: "border-box",
+          fontFamily:
+            '"Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace',
+          position: "relative",
+        }}
+      >
+        <span
+          style={{
+            color: "#000000",
+            fontSize: 320,
+            fontWeight: 900,
+            letterSpacing: "-16px",
+            lineHeight: 1,
+          }}
+        >
+          CM
+        </span>
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            right: 0,
+            width: 72,
+            height: 72,
+            background: "#000000",
+          }}
+        />
+      </div>
+    ),
+    size,
+  );
+}