import { ImageResponse } from 'next/server'; export type Props = { title?: string; }; export default async function OpengraphImage(props?: Props): Promise<ImageResponse> { const { title } = { ...{ title: process.env.SITE_NAME }, ...props }; return new ImageResponse( ( <div tw="flex h-full w-full flex-col items-center justify-center bg-black"> <svg viewBox="0 0 32 32" width="140"> <rect width="100%" height="100%" rx="16" fill="white" /> <path fillRule="evenodd" clipRule="evenodd" fill="black" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" /> </svg> <p tw="mt-12 text-6xl font-bold text-white">{title}</p> </div> ), { width: 1200, height: 630, fonts: [ { name: 'Inter', data: await fetch(new URL('../fonts/Inter-Bold.ttf', import.meta.url)).then((res) => res.arrayBuffer() ), style: 'normal', weight: 700 } ] } ); }