src/app/(main)/banner.png/og.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';
import { ImageResponse } from 'next/og';
import type { ReactElement } from 'react';

interface GenerateProps {
  title?: string;
  subtitle?: string;
}

export function generateOGImage(
  options: GenerateProps & ImageResponseOptions,
): ImageResponse {
  const { title, subtitle, ...rest } = options;

  return new ImageResponse(
    generate({
      title,
      subtitle,
    }),
    {
      width: 1200,
      height: 630,
      ...rest,
    },
  );
}

export function generate({ title = 'Bertrand Yuan' }: GenerateProps): ReactElement {
  return (
    <div
      tw='flex h-full w-full bg-black text-white'
      style={{ fontFamily: 'Geist Sans' }}
    >
      <div tw='flex border absolute border-stone-900 border-dashed inset-y-0 left-16 w-[1px]' />
      <div tw='flex border absolute border-stone-900 border-dashed inset-y-0 right-16 w-[1px]' />
      <div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] top-16' />
      <div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] bottom-16' />
      <div tw='flex items-center absolute w-[896px] justify-center inset-32'>
        <div
          tw='tracking-tight flex-grow-1 flex flex-col justify-center items-center leading-[1.1]'
          style={{
            textWrap: 'balance',
            fontWeight: 600,
            fontSize: title && title.length > 20 ? 64 : 80,
            letterSpacing: '-0.04em',
          }}
        >
          {title}
        </div>
      </div>
    </div>
  );
}