marc/puzzle-trainer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

improve(dx): fix OG image font download failure

Browse source 
Replace Unicode special chars (crown, sun, infinity, grid) with
colored initials using each game accent color. Eliminates the
"Failed to load dynamic font" build warning from satori/next-og.
This commit is contained in:
Reverdin Agent 2026-05-23 01:07:21 +00:00
parent 57bf0092aa
commit b01ebe8a16
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/opengraph-image.tsx
View file

@ -4,6 +4,14 @@ export const alt = "Puzzle Trainer";
export const size = { width: 1200, height: 630 }; export const size = { width: 1200, height: 630 };
export const contentType = "image/png"; export const contentType = "image/png";
const GAMES = [
{ label: "Q", color: "#d97706" },
{ label: "T", color: "#ea580c" },
{ label: "Z", color: "#2563eb" },
{ label: "S", color: "#16a34a" },
{ label: "P", color: "#7c3aed" },
];
export default function OGImage() { export default function OGImage() {
return new ImageResponse( return new ImageResponse(
( (
@ -19,39 +27,33 @@ export default function OGImage() {
fontFamily: "system-ui, -apple-system, sans-serif", fontFamily: "system-ui, -apple-system, sans-serif",
}} }}
> >
{/* Game icons row */}
<div style={{ display: "flex", gap: 24, marginBottom: 40 }}> <div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
{["♛", "☀", "∞", "#", "▦"].map((icon, i) => ( {GAMES.map((g) => (
<div <div
key={i} key={g.label}
style={{ style={{
width: 72, width: 72,
height: 72, height: 72,
background: "#111827", background: g.color,
borderRadius: 16, borderRadius: 16,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
fontSize: 32, fontSize: 32,
color: "#f9fafb", fontWeight: 700,
color: "#ffffff",
}} }}
> >
{icon} {g.label}
</div> </div>
))} ))}
</div> </div>
{/* Title */}
<div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}> <div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
Puzzle Trainer Puzzle Trainer
</div> </div>
{/* Tagline */}
<div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}> <div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
5 puzzles logiques · chaque jour 5 puzzles logiques · chaque jour
</div> </div>
{/* URL */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",