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 #1

Open
marc wants to merge 1 commit from agent-improve/dx-2026-05-23-puzzle-trainer into main
pull from: agent-improve/dx-2026-05-23-puzzle-trainer
merge into: marc:main
Conversation 0 Commits 1 Files changed 1 +14 -12
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b01ebe8a16 - Show all commits

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",