redirecter for ao3 that adds opengraph metadata
veryroundbird.house
1import { ImageResponse } from "next/og"
2
3export default async function OGImage ({ theme, baseFont, titleFont, image, addr, opts }) {
4 return new ImageResponse(
5 (
6 <div
7 style={{
8 display: "flex",
9 flexDirection: "column",
10 color: theme.color,
11 backgroundColor: theme.background,
12 fontFamily: baseFont,
13 fontSize: 24,
14 padding: 40,
15 width: "100%",
16 height: "100%",
17 }}
18 >
19 <div
20 style={{
21 display: "flex",
22 flexDirection: "column",
23 marginBottom: 20
24 }}
25 >
26 <div
27 style={{
28 textTransform: "uppercase",
29 display: "flex",
30 justifyContent: "center",
31 color: theme.accent
32 }}
33 >
34 {image.topLine}
35 </div>
36 <div
37 style={{
38 fontSize: 54,
39 justifyContent: "center",
40 fontFamily: titleFont,
41 fontWeight: "bold"
42 }}
43 >
44 {image.titleLine}
45 </div>
46 <div
47 style={{
48 fontSize: 42,
49 display: "flex",
50 justifyContent: "center",
51 fontFamily: titleFont
52 }}
53 >
54 {`by ${image.authorLine}`}
55 </div>
56 <div
57 style={{
58 fontStyle: "italic",
59 fontSize: 36,
60 fontFamily: titleFont,
61 display: "flex",
62 justifyContent: "center"
63 }}
64 >
65 {image.chapterLine}
66 </div>
67 </div>
68 <div
69 style={{
70 backgroundColor: theme.descBackground,
71 padding: 20,
72 display: "flex",
73 flexDirection: "column",
74 flexGrow: 1,
75 color: theme.descColor,
76 alignItems: "flex-end"
77 }}
78 >
79 <div
80 style={{
81 display: "flex",
82 flexDirection: "column",
83 flexGrow: 1,
84 width: '100%'
85 }}
86 >
87 {image.summary.map(l => (
88 <div
89 style={{
90 width: "100%",
91 marginBottom: 10
92 }}
93 >
94 {l}
95 </div>
96 ))}
97 </div>
98 <div
99 style={{
100 textAlign: "right",
101 fontSize: 18,
102 color: theme.accent2
103 }}
104 >
105 {`https://archiveofourown.org/${addr}`}
106 </div>
107 </div>
108 </div>
109 ),
110 opts
111 )
112}