| 13 | // return image.toString("base64"); |
| 14 | // }; |
| 15 | export async function GET(request: Request) { |
| 16 | try { |
| 17 | const { searchParams } = new URL(request.url); |
| 18 | const imagePrefix = process.env.VERCEL_URL ? `https://zod.dev` : "http://localhost:3000"; |
| 19 | |
| 20 | // Get dynamic params |
| 21 | const title = searchParams.get("title") || "Zod Documentation"; |
| 22 | const description = searchParams.get("description"); |
| 23 | |
| 24 | return new ImageResponse( |
| 25 | <div |
| 26 | style={{ |
| 27 | height: "100%", |
| 28 | width: "100%", |
| 29 | display: "flex", |
| 30 | flexDirection: "column", |
| 31 | alignItems: "flex-start", |
| 32 | justifyContent: "space-between", |
| 33 | backgroundColor: "#0F1117", |
| 34 | padding: "60px", |
| 35 | color: "white", |
| 36 | fontFamily: "Inter, sans-serif", |
| 37 | }} |
| 38 | > |
| 39 | {/* Logo in upper right corner */} |
| 40 | <div |
| 41 | tw="absolute top-[52px] right-[60px]" |
| 42 | style={{ |
| 43 | display: "flex", |
| 44 | alignItems: "center", |
| 45 | justifyContent: "center", |
| 46 | }} |
| 47 | > |
| 48 | <img width="150" height="125" alt="Zod logo" src={`${imagePrefix}/logo/logo.png`} /> |
| 49 | </div> |
| 50 | |
| 51 | {/* Main content */} |
| 52 | <div tw="flex flex-col w-full pr-52"> |
| 53 | {/* Added right padding to avoid text overlapping with logo */} |
| 54 | {/* <p tw="text-4xl font-bold tracking-tight text-white m-0 leading-none mb-6 border-b border-gray-700 pb-4"> |
| 55 | Zod |
| 56 | </p> */} |
| 57 | <h1 tw="text-7xl font-bold tracking-tight text-white m-0 leading-tight">{title}</h1> |
| 58 | {description ? <p tw="text-2xl text-gray-300 mt-6 max-w-4xl">{description}</p> : null} |
| 59 | </div> |
| 60 | |
| 61 | {/* Bottom section with divider */} |
| 62 | <div tw="flex flex-col w-full "> |
| 63 | {/* Divider line */} |
| 64 | <div tw="w-full h-px bg-gray-700 mb-[48px]" /> |
| 65 | |
| 66 | {/* Bottom row with breadcrumbs and project info */} |
| 67 | <div tw="flex justify-between items-center w-full"> |
| 68 | {/* Breadcrumbs */} |
| 69 | <p> </p> |
| 70 | {/* {path ? ( |
| 71 | <div tw="flex items-center gap-3"> |
| 72 | <div tw="flex items-center font-mono "> |