From b056fbc5c429f574e0da988941fb30313e3da126 Mon Sep 17 00:00:00 2001
From: Jan Wagner <eldovsen@gmail.com>
Date: Mon, 31 Aug 2026 21:01:41 +0200
Subject: [PATCH] fix(design): OG-Image + Build-Hash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 Dockerfile                                    |  7 +++---
 .../projects/[slug]/opengraph-image.tsx       | 22 +++++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 48133dd..8225ac6 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -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
diff --git a/src/app/[lang]/projects/[slug]/opengraph-image.tsx b/src/app/[lang]/projects/[slug]/opengraph-image.tsx
index c4b2e06..83e5539 100644
--- a/src/app/[lang]/projects/[slug]/opengraph-image.tsx
+++ b/src/app/[lang]/projects/[slug]/opengraph-image.tsx
@@ -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>