61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { ImageResponse } from "next/og";
|
|
import { BRAND_NAME, BRAND_TAGLINE } from "@/lib/brand";
|
|
|
|
export const size = { width: 1200, height: 630 };
|
|
export const contentType = "image/png";
|
|
|
|
export default function OpenGraphImage() {
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
background: "#f4f1ea",
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
padding: 88,
|
|
}}
|
|
>
|
|
<svg
|
|
width="112"
|
|
height="112"
|
|
viewBox="0 0 32 32"
|
|
fill="none"
|
|
>
|
|
<path d="M14 4H8a4 4 0 0 0-4 4v6M18 4h6a4 4 0 0 1 4 4v6M28 18v6a4 4 0 0 1-4 4h-6M14 28H8a4 4 0 0 1-4-4v-6" fill="none" stroke="#3156c8" strokeWidth="2.5" strokeLinecap="round" />
|
|
<circle cx="21" cy="11" r="2" fill="#3156c8" />
|
|
<path d="m8.5 22 5-6.2a1.7 1.7 0 0 1 2.6-.1l2.6 2.9 1.7-1.8a1.7 1.7 0 0 1 2.5 0l1.6 1.8" fill="none" stroke="#3156c8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
<div
|
|
style={{
|
|
marginTop: 36,
|
|
fontSize: 92,
|
|
lineHeight: 1,
|
|
color: "#18181b",
|
|
fontFamily: "Georgia, serif",
|
|
fontWeight: 600,
|
|
letterSpacing: -5,
|
|
}}
|
|
>
|
|
{BRAND_NAME}
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginTop: 18,
|
|
fontSize: 28,
|
|
maxWidth: 760,
|
|
color: "#71717a",
|
|
lineHeight: 1.25,
|
|
letterSpacing: -1,
|
|
}}
|
|
>
|
|
{BRAND_TAGLINE}
|
|
</div>
|
|
</div>
|
|
),
|
|
size,
|
|
);
|
|
}
|