-
Notifications
You must be signed in to change notification settings - Fork 0
/
OgImage.tsx
71 lines (61 loc) · 1.61 KB
/
OgImage.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import satori from 'satori';
import sharp from 'sharp';
export async function getOgImage(title: string) {
const fontData = (await getFontData()) as ArrayBuffer;
const titleMaxNum = 38;
const titleLength = title.length;
if (titleLength >= titleMaxNum) {
title = title.substring(0, titleMaxNum);
title += '...';
}
const svg = await satori(
<main
style={{
position: 'relative',
height: '100%',
width: '100%',
backgroundColor: '#fffcf0',
color: '#100f0f',
border: '#100f0f 2rem solid',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '4rem',
}}>
<h1
style={{
fontSize: '5rem',
lineHeight: '1.3em',
}}>
{title}
</h1>
</main>,
{
width: 1200,
height: 630,
fonts: [
{
name: 'Sans-serif',
data: fontData,
style: 'normal',
},
],
},
);
return await sharp(Buffer.from(svg)).png().toBuffer();
}
async function getFontData() {
const API = `https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700`;
const css = await (
await fetch(API, {
headers: {
'User-Agent':
'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
},
})
).text();
const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
if (!resource) return;
return await fetch(resource[1]).then((res) => res.arrayBuffer());
}