153 lines
3.7 KiB
TypeScript
153 lines
3.7 KiB
TypeScript
import { ImageResponse } from "next/og";
|
|
import { type NextRequest } from "next/server";
|
|
|
|
export const runtime = "edge";
|
|
|
|
export async function GET(request: NextRequest) {
|
|
const { searchParams } = request.nextUrl;
|
|
const title = searchParams.get("title") || "Belgian Bitcoin Embassy";
|
|
const type = searchParams.get("type") || "default";
|
|
const subtitle =
|
|
searchParams.get("subtitle") ||
|
|
(type === "blog"
|
|
? "Blog"
|
|
: type === "event"
|
|
? "Event"
|
|
: "Bitcoin Meetups & Education in Belgium");
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
background: "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)",
|
|
fontFamily: "system-ui, sans-serif",
|
|
padding: "60px 80px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: "4px",
|
|
background: "#F7931A",
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: "24px",
|
|
maxWidth: "1000px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "16px",
|
|
marginBottom: "8px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: "48px",
|
|
height: "48px",
|
|
borderRadius: "12px",
|
|
background: "#F7931A",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "28px",
|
|
fontWeight: 700,
|
|
color: "#fff",
|
|
}}
|
|
>
|
|
B
|
|
</div>
|
|
<span
|
|
style={{
|
|
fontSize: "14px",
|
|
fontWeight: 600,
|
|
color: "#F7931A",
|
|
letterSpacing: "4px",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
{subtitle}
|
|
</span>
|
|
</div>
|
|
|
|
<h1
|
|
style={{
|
|
fontSize: title.length > 60 ? "40px" : title.length > 40 ? "48px" : "56px",
|
|
fontWeight: 800,
|
|
color: "#ffffff",
|
|
textAlign: "center",
|
|
lineHeight: 1.15,
|
|
margin: 0,
|
|
letterSpacing: "-1px",
|
|
}}
|
|
>
|
|
{title}
|
|
</h1>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
marginTop: "16px",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "16px",
|
|
color: "#666",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
belgianbitcoinembassy.org
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "40px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "13px",
|
|
fontWeight: 500,
|
|
color: "#F7931A",
|
|
letterSpacing: "4px",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
No hype, just signal
|
|
</span>
|
|
</div>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 630,
|
|
},
|
|
);
|
|
}
|