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 = 'John Doe' }: 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>
);
}
|
