src/app/(main)/banner.png/route.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

import { generateOGImage } from '@/app/(main)/banner.png/og';

async function loadAssets(): Promise<
  { name: string; data: Buffer; weight: 400 | 600; style: 'normal' }[]
> {
  const [
    { base64Font: normal },
    { base64Font: mono },
    { base64Font: semibold },
  ] = await Promise.all([
    import('./fonts/geist-regular-otf.json').then((mod) => mod.default || mod),
    import('./fonts/geistmono-regular-otf.json').then(
      (mod) => mod.default || mod,
    ),
    import('./fonts/geist-semibold-otf.json').then((mod) => mod.default || mod),
  ]);

  return [
    {
      name: 'Geist',
      data: Buffer.from(normal, 'base64'),
      weight: 400 as const,
      style: 'normal' as const,
    },
    {
      name: 'Geist Mono',
      data: Buffer.from(mono, 'base64'),
      weight: 400 as const,
      style: 'normal' as const,
    },
    {
      name: 'Geist',
      data: Buffer.from(semibold, 'base64'),
      weight: 600 as const,
      style: 'normal' as const,
    },
  ];
}

export async function GET() {
  const [fonts] = await Promise.all([loadAssets()]);

  return generateOGImage({
    title: 'Bertrand Yuan',
    subtitle: 'Software Engineer',
    fonts,
  });
}