+54
src/app/opengraph-image.jsx
+54
src/app/opengraph-image.jsx
···
1
+
import { ImageResponse } from "next/og"
2
+
import { readFile } from 'node:fs/promises'
3
+
import { join } from 'node:path'
4
+
5
+
export const size = {
6
+
width: 1600,
7
+
height: 900,
8
+
}
9
+
export const alt = 'fixAO3'
10
+
11
+
export const contentType = 'image/webp'
12
+
13
+
export default async function Image() {
14
+
return new ImageResponse(
15
+
(
16
+
<div
17
+
style={{
18
+
backgroundColor: '#990000',
19
+
color: '#FFFFFF',
20
+
display: 'flex',
21
+
alignItems: 'center',
22
+
justifyContent: 'center',
23
+
width: '100%',
24
+
height: '100%',
25
+
fontFamily: 'Stack Sans Notch',
26
+
fontSize: 288,
27
+
fontWeight: 700
28
+
}}
29
+
>
30
+
{process.env.SITENAME}
31
+
</div>
32
+
),
33
+
{
34
+
fonts: [
35
+
{
36
+
name: 'Stack Sans Notch',
37
+
data: await readFile(
38
+
join(process.cwd(), '/fonts/StackSansNotch-Regular.ttf')
39
+
),
40
+
style: 'normal',
41
+
weight: 400
42
+
},
43
+
{
44
+
name: 'Stack Sans Notch',
45
+
data: await readFile(
46
+
join(process.cwd(), '/fonts/StackSansNotch-Bold.ttf')
47
+
),
48
+
style: 'normal',
49
+
weight: 700
50
+
}
51
+
]
52
+
}
53
+
)
54
+
}
-26
src/app/page.js
-26
src/app/page.js
···
1
-
import { ImageResponse } from "next/og"
2
1
import styles from "./page.module.css";
3
-
4
-
export const metadata = {
5
-
title: process.env.SITENAME,
6
-
description: process.env.DESCRIPTION,
7
-
openGraph: {
8
-
description: process.env.DESCRIPTION,
9
-
images: [new ImageResponse(
10
-
(
11
-
<div
12
-
style={{
13
-
backgroundColor: '#990000',
14
-
color: '#FFFFFF',
15
-
display: 'flex',
16
-
alignItems: 'center',
17
-
justifyContent: 'center',
18
-
width: '100%',
19
-
height: '100%'
20
-
}}
21
-
>
22
-
{process.env.SITENAME}
23
-
</div>
24
-
)
25
-
)]
26
-
}
27
-
}
28
2
29
3
export default function Index() {
30
4
return (