feat(web): add PWA icons via Next.js ImageResponse (frontend-design)

This commit is contained in:
yiekheng 2026-05-02 21:02:58 +08:00
parent afc94e613e
commit b497e133bd
2 changed files with 98 additions and 0 deletions

49
web/app/apple-icon.tsx Normal file
View File

@ -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,
);
}

49
web/app/icon.tsx Normal file
View File

@ -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,
);
}