ark/app/api/og/route.tsx at 76bce58dc5f5409e3a11bc823c10630f42925491 · dev-wooyeon/ark · GitHub

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';
import { ImageResponse } from 'next/og';
import type { NextRequest } from 'next/server';
import { SITE_NAME } from '@/site/config/site';

export const runtime = 'nodejs';

const fontPath = join(process.cwd(), 'app', 'api', 'og', 'Pretendard-Bold.ttf');
let fontDataPromise: Promise<ArrayBuffer> | null = null;

function loadFontData(): Promise<ArrayBuffer> {
  if (!fontDataPromise) {
    fontDataPromise = readFile(fontPath).then(
      (font) =>
        font.buffer.slice(
          font.byteOffset,
          font.byteOffset + font.byteLength
        ) as ArrayBuffer
    );
  }

  return fontDataPromise;
}

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || SITE_NAME;
  const date = searchParams.get('date');
  const tags = searchParams.get('tags')?.split(',') || [];

  const fontData = await loadFontData();

  return new ImageResponse(
    <div
      style={{
        display: 'flex',
        height: '100%',
        width: '100%',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        backgroundImage: 'linear-gradient(to bottom right, #E0F2FF, #fff)',
        padding: '80px',
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          fontFamily: 'Pretendard',
        }}
      >
        {date && (
          <div
            style={{
              fontSize: '30px',
              color: '#6b7684',
            }}
          >
            {date}
          </div>
        )}
        <div
          style={{
            fontSize: '60px',
            fontWeight: 700,
            color: '#191f28',
            lineHeight: 1.2,
            wordBreak: 'keep-all',
          }}
        >
          {title}
        </div>
        {tags.length > 0 && (
          <div
            style={{
              display: 'flex',
              gap: '16px',
              marginTop: '10px',
            }}
          >
            {tags.map((tag) => (
              <div
                key={tag}
                style={{
                  display: 'flex',
                  backgroundColor: 'rgba(49, 130, 246, 0.1)',
                  color: '#3182f6',
                  padding: '8px 24px',
                  borderRadius: '50px',
                  fontSize: '24px',
                  fontWeight: 600,
                }}
              >
                #{tag}
              </div>
            ))}
          </div>
        )}
      </div>
      <div
        style={{
          position: 'absolute',
          bottom: '60px',
          right: '80px',
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
        }}
      >
        <div
          style={{
            fontSize: '32px',
            fontWeight: 700,
            color: '#3182f6',
            fontFamily: 'Pretendard',
          }}
        >
          {SITE_NAME}
        </div>
      </div>
    </div>,
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'Pretendard',
          data: fontData,
          style: 'normal',
          weight: 700,
        },
      ],
    }
  );
}