Skip to content

Commit 748130e

Browse files
JabololJabolol
authored
feat: use correct fonts and images in og images (#5167)
1 parent c01fab9 commit 748130e

File tree

1 file changed

+144
-18
lines changed

1 file changed

+144
-18
lines changed

‎apps/frontend/app/api/v1/og/route.tsx‎

Lines changed: 144 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1+
/* eslint-disable @next/next/no-img-element */
12
import { logger } from "@/lib/logger";
23
import { ImageResponse } from "@vercel/og";
3-
import Image from "next/image";
44
import { NextRequest } from "next/server";
55

66
export const runtime = "edge";
77

8-
async function loadGoogleFont(font: string, text: string) {
9-
const url = `https://fonts.googleapis.com/css2?family=${font}:wght@400;700&text=${encodeURIComponent(
8+
async function loadGoogleFont(
9+
font: string,
10+
text: string,
11+
weight: number = 400,
12+
) {
13+
const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}&text=${encodeURIComponent(
1014
text,
1115
)}`;
1216
const css = await (await fetch(url)).text();
@@ -46,6 +50,7 @@ export async function GET(request: NextRequest) {
4650
const forksText = `${forks} Fork${forks === "1" ? "" : "s"}`;
4751

4852
const allText = `${orgName}/${notebookName}${description}1 Contributor${pawsText}${forksText}`;
53+
const statsText = `Contributors${likes}Paws${forks}Forks`;
4954

5055
return new ImageResponse(
5156
(
@@ -63,7 +68,7 @@ export async function GET(request: NextRequest) {
6368
</div>
6469

6570
<div tw="flex items-center justify-center pt-10">
66-
<Image
71+
<img
6772
src={authorAvatar}
6873
width="240"
6974
height="240"
@@ -73,39 +78,147 @@ export async function GET(request: NextRequest) {
7378
</div>
7479
</div>
7580

76-
<div tw="absolute bottom-20 left-12 flex gap-8 items-center">
77-
<div tw="flex items-center gap-2 text-2xl text-gray-600">
78-
<svg width="24" height="24" viewBox="0 0 16 16" fill="#6b7280">
81+
<div
82+
style={{
83+
position: "absolute",
84+
bottom: 80,
85+
left: 48,
86+
display: "flex",
87+
gap: 64,
88+
alignItems: "center",
89+
}}
90+
>
91+
<div
92+
style={{
93+
display: "flex",
94+
alignItems: "center",
95+
gap: 12,
96+
}}
97+
>
98+
<svg width="28" height="28" viewBox="0 0 16 16" fill="#374151">
7999
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
80100
</svg>
81-
<span tw="font-bold">1 Contributor</span>
101+
<div
102+
style={{
103+
display: "flex",
104+
flexDirection: "column",
105+
gap: 4,
106+
}}
107+
>
108+
<span
109+
style={{
110+
fontSize: 20,
111+
color: "#6B7280",
112+
fontFamily: "Roboto",
113+
fontWeight: 400,
114+
}}
115+
>
116+
Contributor{likes === "1" ? "" : "s"}
117+
</span>
118+
<span
119+
style={{
120+
fontSize: 32,
121+
color: "#1F2937",
122+
fontFamily: "Inter",
123+
fontWeight: 700,
124+
}}
125+
>
126+
1
127+
</span>
128+
</div>
82129
</div>
83130

84-
<div tw="flex items-center gap-2 text-2xl text-gray-600">
131+
<div
132+
style={{
133+
display: "flex",
134+
alignItems: "center",
135+
gap: 12,
136+
}}
137+
>
85138
<svg
86139
stroke="currentColor"
87140
fill="currentColor"
88-
stroke-width="0"
141+
strokeWidth="0"
89142
viewBox="0 0 512 512"
90-
height="24px"
91-
width="24px"
143+
height="28px"
144+
width="28px"
92145
xmlns="http://www.w3.org/2000/svg"
93146
>
94147
<path d="M256 224c-79.41 0-192 122.76-192 200.25 0 34.9 26.81 55.75 71.74 55.75 48.84 0 81.09-25.08 120.26-25.08 39.51 0 71.85 25.08 120.26 25.08 44.93 0 71.74-20.85 71.74-55.75C448 346.76 335.41 224 256 224zm-147.28-12.61c-10.4-34.65-42.44-57.09-71.56-50.13-29.12 6.96-44.29 40.69-33.89 75.34 10.4 34.65 42.44 57.09 71.56 50.13 29.12-6.96 44.29-40.69 33.89-75.34zm84.72-20.78c30.94-8.14 46.42-49.94 34.58-93.36s-46.52-72.01-77.46-63.87-46.42 49.94-34.58 93.36c11.84 43.42 46.53 72.02 77.46 63.87zm281.39-29.34c-29.12-6.96-61.15 15.48-71.56 50.13-10.4 34.65 4.77 68.38 33.89 75.34 29.12 6.96 61.15-15.48 71.56-50.13 10.4-34.65-4.77-68.38-33.89-75.34zm-156.27 29.34c30.94 8.14 65.62-20.45 77.46-63.87 11.84-43.42-3.64-85.21-34.58-93.36s-65.62 20.45-77.46 63.87c-11.84 43.42 3.64 85.22 34.58 93.36z"></path>
95148
</svg>
96-
<span tw="font-bold">{pawsText}</span>
149+
<div
150+
style={{
151+
display: "flex",
152+
flexDirection: "column",
153+
gap: 4,
154+
}}
155+
>
156+
<span
157+
style={{
158+
fontSize: 20,
159+
color: "#6B7280",
160+
fontFamily: "Roboto",
161+
fontWeight: 400,
162+
}}
163+
>
164+
Paw{likes === "1" ? "" : "s"}
165+
</span>
166+
<span
167+
style={{
168+
fontSize: 32,
169+
color: "#1F2937",
170+
fontFamily: "Inter",
171+
fontWeight: 700,
172+
}}
173+
>
174+
{likes}
175+
</span>
176+
</div>
97177
</div>
98178

99-
<div tw="flex items-center gap-2 text-2xl text-gray-600">
100-
<svg width="24" height="24" viewBox="0 0 16 16" fill="#6b7280">
179+
<div
180+
style={{
181+
display: "flex",
182+
alignItems: "center",
183+
gap: 12,
184+
}}
185+
>
186+
<svg width="28" height="28" viewBox="0 0 16 16" fill="#374151">
101187
<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
102188
</svg>
103-
<span tw="font-bold">{forksText}</span>
189+
<div
190+
style={{
191+
display: "flex",
192+
flexDirection: "column",
193+
gap: 4,
194+
}}
195+
>
196+
<span
197+
style={{
198+
fontSize: 20,
199+
color: "#6B7280",
200+
fontFamily: "Roboto",
201+
fontWeight: 400,
202+
}}
203+
>
204+
Fork{forks === "1" ? "" : "s"}
205+
</span>
206+
<span
207+
style={{
208+
fontSize: 32,
209+
color: "#1F2937",
210+
fontFamily: "Inter",
211+
fontWeight: 700,
212+
}}
213+
>
214+
{forks}
215+
</span>
216+
</div>
104217
</div>
105218
</div>
106219

107220
<div tw="absolute bottom-6 right-6 flex">
108-
<Image
221+
<img
109222
src={logoUrl}
110223
width="96"
111224
height="96"
@@ -121,8 +234,21 @@ export async function GET(request: NextRequest) {
121234
fonts: [
122235
{
123236
name: "Inter",
124-
data: await loadGoogleFont("Inter", allText),
237+
data: await loadGoogleFont("Inter", allText, 400),
238+
style: "normal",
239+
weight: 400,
240+
},
241+
{
242+
name: "Inter",
243+
data: await loadGoogleFont("Inter", allText, 700),
244+
style: "normal",
245+
weight: 700,
246+
},
247+
{
248+
name: "Roboto",
249+
data: await loadGoogleFont("Roboto", statsText, 400),
125250
style: "normal",
251+
weight: 400,
126252
},
127253
],
128254
},

0 commit comments

Comments
 (0)