1+ import { readFile } from "node:fs/promises" ;
2+ import { join } from "node:path" ;
3+
14import { ImageResponse } from "next/og" ;
25
36type OgImageOptions = {
@@ -13,7 +16,31 @@ export const ogImageSize = {
1316
1417export const ogImageContentType = "image/png" ;
1518
16- export function createOgImage ( { eyebrow, title, description } : OgImageOptions ) {
19+ const fontsDirectory = join ( process . cwd ( ) , "src" , "app" , "fonts" ) ;
20+
21+ async function getOgFonts ( ) {
22+ const [ regular , semiBold ] = await Promise . all ( [
23+ readFile ( join ( fontsDirectory , "AllianceNo2-Regular.ttf" ) ) ,
24+ readFile ( join ( fontsDirectory , "AllianceNo2-SemiBold.ttf" ) ) ,
25+ ] ) ;
26+
27+ return [
28+ {
29+ data : regular ,
30+ name : "Alliance No.2" ,
31+ style : "normal" as const ,
32+ weight : 400 as const ,
33+ } ,
34+ {
35+ data : semiBold ,
36+ name : "Alliance No.2" ,
37+ style : "normal" as const ,
38+ weight : 600 as const ,
39+ } ,
40+ ] ;
41+ }
42+
43+ export async function createOgImage ( { eyebrow, title, description } : OgImageOptions ) {
1744 return new ImageResponse (
1845 (
1946 < div
@@ -62,7 +89,7 @@ export function createOgImage({ eyebrow, title, description }: OgImageOptions) {
6289 < div
6390 style = { {
6491 color : "rgba(255,255,255,0.52)" ,
65- fontFamily : "monospace " ,
92+ fontFamily : "Alliance No.2 " ,
6693 fontSize : 24 ,
6794 fontWeight : 700 ,
6895 letterSpacing : 0 ,
@@ -74,6 +101,7 @@ export function createOgImage({ eyebrow, title, description }: OgImageOptions) {
74101 < div
75102 style = { {
76103 fontSize : 84 ,
104+ fontFamily : "Alliance No.2" ,
77105 fontWeight : 600 ,
78106 letterSpacing : 0 ,
79107 lineHeight : 0.98 ,
@@ -86,6 +114,7 @@ export function createOgImage({ eyebrow, title, description }: OgImageOptions) {
86114 < div
87115 style = { {
88116 color : "rgba(255,255,255,0.72)" ,
117+ fontFamily : "Alliance No.2" ,
89118 fontSize : 30 ,
90119 lineHeight : 1.35 ,
91120 marginTop : 36 ,
@@ -107,6 +136,7 @@ export function createOgImage({ eyebrow, title, description }: OgImageOptions) {
107136 background : "#ffffff" ,
108137 borderRadius : 4 ,
109138 color : "#000000" ,
139+ fontFamily : "Alliance No.2" ,
110140 fontSize : 24 ,
111141 fontWeight : 700 ,
112142 padding : "18px 28px" ,
@@ -119,6 +149,7 @@ export function createOgImage({ eyebrow, title, description }: OgImageOptions) {
119149 border : "1px solid rgba(255,255,255,0.28)" ,
120150 borderRadius : 4 ,
121151 color : "rgba(255,255,255,0.84)" ,
152+ fontFamily : "Alliance No.2" ,
122153 fontSize : 24 ,
123154 fontWeight : 600 ,
124155 padding : "18px 28px" ,
@@ -130,6 +161,9 @@ export function createOgImage({ eyebrow, title, description }: OgImageOptions) {
130161 </ div >
131162 </ div >
132163 ) ,
133- ogImageSize ,
164+ {
165+ ...ogImageSize ,
166+ fonts : await getOgFonts ( ) ,
167+ } ,
134168 ) ;
135169}
0 commit comments