eldov/eldov-win
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design): OG-Image + Build-Hash

Browse Source 
OG-Image: Next.js 16 / Satori verlangt 'display: flex' (oder contents/none) auf
jedem Container-Div mit mehreren Children. Vorher crashte das Image-Rendering
mit 'Expected <div> to have explicit display: ...'. Jetzt: alle Container
haben display: flex, Image rendert sauber.

Build-Hash: Dockerfile hat die ENV-Vars NEXT_PUBLIC_BUILD_HASH/DATE zwar als
ENV deklariert, aber sie landeten nicht im finalen Image (ENV in Build-Stage
verschwindet im Standalone-Build). Fix: schreibe die Werte in eine
.env.production.local vor dem Build — Next.js liest die in der Build-Phase,
bakt sie in den Client/Server-Code, und der Standalone-Output enthält sie.
This commit is contained in:
Jan Wagner
2026-08-31 21:01:41 +02:00
parent 88b3af4ba8
commit b056fbc5c4
2 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+4 -3
View File
@@ -18,10 +18,11 @@ ENV NEXT_PUBLIC_SITE_URL=${NEXT_PUBLIC_SITE_URL}
ENV NEXT_PUBLIC_BUILD_HASH=${NEXT_PUBLIC_BUILD_HASH}
ENV NEXT_PUBLIC_BUILD_DATE=${NEXT_PUBLIC_BUILD_DATE}
ENV NEXT_TELEMETRY_DISABLED=1
RUN COMMIT=$(git rev-parse --short HEAD 2>/dev/null || echo ${NEXT_PUBLIC_BUILD_HASH}) && \
RUN COMMIT=$(git rev-parse --short HEAD 2>/dev/null || echo "${NEXT_PUBLIC_BUILD_HASH}") && \
DATE=$(date -u +%Y-%m-%d) && \
echo "NEXT_PUBLIC_BUILD_HASH=${COMMIT}" >> .env.build && \
echo "NEXT_PUBLIC_BUILD_DATE=${DATE}" >> .env.build && \
echo "NEXT_PUBLIC_BUILD_HASH=${COMMIT}" > .env.production.local && \
echo "NEXT_PUBLIC_BUILD_DATE=${DATE}" >> .env.production.local && \
cat .env.production.local && \
npm run build
FROM node:22.13-bookworm-slim AS runner
src/app/[lang]/projects/[slug]/opengraph-image.tsx
+11 -11
View File
@@ -29,13 +29,13 @@ export default async function OpenGraphImage({
style={{
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
background: "linear-gradient(180deg, #0a0a10 0%, #14141e 100%)",
color: "#e7e7ee",
fontFamily: "ui-monospace, monospace",
padding: "72px 64px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
}}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
@@ -44,19 +44,19 @@ export default async function OpenGraphImage({
width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center",
border: "1.5px solid #e84a8f", color: "#e84a8f", fontSize: 26, fontWeight: 700,
}}>e</div>
<div style={{ fontSize: 26, color: "#e7e7ee" }}>eldov</div>
<div style={{ fontSize: 22, color: "#6e6e85" }}>@eldov.win</div>
<div style={{ display: "flex", fontSize: 26, color: "#e7e7ee" }}>eldov</div>
<div style={{ display: "flex", fontSize: 22, color: "#6e6e85" }}>@eldov.win</div>
</div>
<div style={{ fontSize: 18, color: "#6e6e85", letterSpacing: "0.1em" }}>
<div style={{ display: "flex", fontSize: 18, color: "#6e6e85", letterSpacing: "0.1em" }}>
{dict[locale].eyebrow.toUpperCase()} · {project.number}
</div>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
<div style={{ fontSize: 64, color: "#e84a8f", fontWeight: 700, letterSpacing: "-0.02em" }}>
<div style={{ display: "flex", fontSize: 64, color: "#e84a8f", fontWeight: 700, letterSpacing: "-0.02em" }}>
{project.slug}
</div>
<div style={{ fontSize: 26, color: "#b8b8c8", lineHeight: 1.4, maxWidth: 900 }}>
<div style={{ display: "flex", fontSize: 26, color: "#b8b8c8", lineHeight: 1.4, maxWidth: 900 }}>
{project.summary}
</div>
</div>
@@ -64,15 +64,15 @@ export default async function OpenGraphImage({
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
<div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
<div style={{
padding: "6px 12px", border: "1px solid #39ff14", color: "#39ff14",
display: "flex", padding: "6px 12px", border: "1px solid #39ff14", color: "#39ff14",
fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
}}>{project.status}</div>
<div style={{
padding: "6px 12px", border: "1px solid #232333", color: "#b8b8c8",
display: "flex", padding: "6px 12px", border: "1px solid #232333", color: "#b8b8c8",
fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
}}>{project.category}</div>
</div>
<div style={{ fontSize: 16, color: "#6e6e85", letterSpacing: "0.06em" }}>
<div style={{ display: "flex", fontSize: 16, color: "#6e6e85", letterSpacing: "0.06em" }}>
eldov.win / {project.slug}
</div>
</div>