import { Logo } from "@/components/logo"; import { ImageResponse } from "@vercel/og"; import { z } from "zod"; export const runtime = "edge"; const ogSchema = z.object({ heading: z.string(), mode: z.string(), type: z.string(), }); function GridPattern() { return ( ); } export async function GET(req: Request) { try { const geist = await fetch( new URL("../../../assets/Geist.ttf", import.meta.url), ).then((res) => res.arrayBuffer()); const geistMono = await fetch( new URL("../../../assets/GeistMono.ttf", import.meta.url), ).then((res) => res.arrayBuffer()); const ogData = { heading: "something", mode: "dark", type: "something", }; const url = new URL(req.url); const urlParamsValues = Object.fromEntries(url.searchParams); // this is used with the above example // const validParams = ogSchema.parse(ogData); const validParams = ogSchema.parse(urlParamsValues); const { heading, type, mode } = validParams; const trueHeading = heading.length > 140 ? `${heading.substring(0, 140)}...` : heading; const paint = mode === "dark" ? "#fff" : "#000000"; const fontSize = trueHeading.length > 100 ? "30px" : "60px"; return new ImageResponse(

{type}

{trueHeading}

Better Auth.

github.com/better-auth/better-auth

, { width: 1200, height: 630, fonts: [ { name: "Geist", data: geist, weight: 400, style: "normal", }, { name: "GeistMono", data: geistMono, weight: 700, style: "normal", }, ], }, ); } catch (err) { console.log({ err }); return new Response("Failed to generate the og image", { status: 500 }); } }