this repo has no description
try loading font from google fonts
+35
-11
+7
-5
src/app/opengraph-image.tsx
+7
-5
src/app/opengraph-image.tsx
···
2
2
import { join } from "node:path";
3
3
import { ImageResponse } from "next/og";
4
4
5
+
import { loadGoogleFont } from "#/lib/google-font";
6
+
5
7
export const size = {
6
8
width: 1200,
7
9
height: 630,
···
9
11
export const contentType = "image/png";
10
12
11
13
export default async function OpenGraphImage() {
12
-
const fontData = await readFile(
13
-
join(process.cwd(), "./src/assets/fonts/LibreBaskerville-Italic.ttf"),
14
-
).then((res) => Uint8Array.from(res).buffer);
14
+
const fontData = await loadGoogleFont(
15
+
"Libre+Baskerville:ital@1",
16
+
"MOZZIUS.DEV a webbed site",
17
+
);
15
18
16
19
return new ImageResponse(
17
20
(
···
20
23
style={{
21
24
fontFamily: '"Libre Baskerville"',
22
25
fontSize: 80,
23
-
textTransform: "uppercase",
24
26
fontWeight: 700,
25
27
fontStyle: "italic",
26
28
}}
27
29
>
28
-
mozzius.dev
30
+
MOZZIUS.DEV
29
31
</h1>
30
32
<h1
31
33
style={{
+7
-6
src/app/post/[rkey]/opengraph-image.tsx
+7
-6
src/app/post/[rkey]/opengraph-image.tsx
···
3
3
import { ImageResponse } from "next/og";
4
4
5
5
import { getPost } from "#/lib/api";
6
+
import { loadGoogleFont } from "#/lib/google-font";
6
7
7
8
export const size = {
8
9
width: 1200,
···
17
18
}) {
18
19
const { rkey } = await params;
19
20
20
-
const fontData = await readFile(
21
-
join(process.cwd(), "./src/assets/fonts/LibreBaskerville-Italic.ttf"),
22
-
).then((res) => Uint8Array.from(res).buffer);
21
+
const post = await getPost(rkey);
23
22
24
-
const post = await getPost(rkey);
23
+
const fontData = await loadGoogleFont(
24
+
"Libre+Baskerville:ital@1",
25
+
"mozzius.dev" + post.value.title?.toLocaleUpperCase(),
26
+
);
25
27
26
28
return new ImageResponse(
27
29
(
···
30
32
style={{
31
33
fontFamily: '"Libre Baskerville"',
32
34
fontSize: 80,
33
-
textTransform: "uppercase",
34
35
fontWeight: 700,
35
36
fontStyle: "italic",
36
37
textAlign: "center",
37
38
}}
38
39
>
39
-
{post.value.title}
40
+
{post.value.title?.toLocaleUpperCase()}
40
41
</h1>
41
42
<h1
42
43
style={{
src/assets/fonts/LibreBaskerville-Italic.ttf
src/assets/fonts/LibreBaskerville-Italic.ttf
This is a binary file and will not be displayed.
+21
src/lib/google-font.ts
+21
src/lib/google-font.ts
···
1
+
// from https://github.com/kosei28/vercel-og-google-fonts/blob/main/src/utils/font.ts
2
+
export async function loadGoogleFont(font: string, text: string) {
3
+
const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(
4
+
text,
5
+
)}`;
6
+
7
+
const css = await (await fetch(url)).text();
8
+
9
+
const resource = css.match(
10
+
/src: url\((.+)\) format\('(opentype|truetype)'\)/,
11
+
);
12
+
13
+
if (resource) {
14
+
const res = await fetch(resource[1]);
15
+
if (res.status == 200) {
16
+
return await res.arrayBuffer();
17
+
}
18
+
}
19
+
20
+
throw new Error("failed to load font data");
21
+
}