// Rezept-Detail-Seite — universell. // Quellen: // * window.__RECIPE__ (synchron gesetzt durch /api/rezept.js — z.B. wenn // Vercel die Seite server-rendert) → direkt verwenden. // * Slug aus window.location.pathname (z.B. /rezepte/khoresh-bademjan) // UND nicht "ghormeh-sabzi-tehrani" → fetch via /api/recipes/{slug}. // * Fallback: i18n.jsx (Ghormeh-Sabzi-Hardcode). // In allen Faellen rendert die exakt gleiche Komponente mit Site-Header/-Footer. function rdResolveLang(recipe, langCode) { if (!recipe || !recipe.translations) return null; return recipe.translations[langCode] || recipe.translations.de || null; } function rdSlugFromPath() { try { const m = (window.location.pathname || '').match(/^\/rezepte\/([^/?#]+)/); return m ? decodeURIComponent(m[1]) : null; } catch (e) { return null; } } function RezeptDetailPage({ recipe: recipeProp }) { const { t, lang } = useT(); const initialRecipe = recipeProp || (typeof window !== 'undefined' ? window.__RECIPE__ : null) || null; const [recipe, setRecipe] = React.useState(initialRecipe); const [loading, setLoading] = React.useState(!initialRecipe); const [error, setError] = React.useState(null); const [related, setRelated] = React.useState([]); // Cross-Linking: weitere Rezepte aus dem KV-Index laden, aktuelles ausschliessen. React.useEffect(() => { let alive = true; fetch('/api/recipes/list', { headers: { Accept: 'application/json' } }) .then((r) => r.ok ? r.json() : null) .then((json) => { if (!alive || !json || !Array.isArray(json.items)) return; const currentSlug = (recipe && recipe.slug) || rdSlugFromPath(); const others = json.items.filter((it) => it && it.slug && it.slug !== currentSlug).slice(0, 4); setRelated(others); }) .catch(() => {}); return () => { alive = false; }; }, [recipe]); // Fetch wenn kein Server-injizierter Recipe und Slug != "ghormeh-sabzi-tehrani". React.useEffect(() => { if (recipeProp) return; if (recipe) return; // schon gesetzt const slug = rdSlugFromPath(); if (!slug || slug === 'ghormeh-sabzi-tehrani') { setLoading(false); return; } let alive = true; fetch(`/api/recipes/${encodeURIComponent(slug)}`, { headers: { Accept: 'application/json' } }) .then((r) => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))) .then((json) => { if (!alive) return; if (json && json.ok && json.recipe) setRecipe(json.recipe); else setError('Rezept nicht gefunden.'); }) .catch((err) => { if (alive) setError(err.message || 'Ladefehler'); }) .finally(() => { if (alive) setLoading(false); }); return () => { alive = false; }; }, [recipeProp, recipe]); // Daten ableiten — entweder aus fetched recipe oder aus i18n. const langData = rdResolveLang(recipe, lang); const useRemote = !!langData; const name = useRemote ? langData.name : t('rezept.name'); const eyebrow = useRemote ? (langData.eyebrow || t('rezept.eyebrow')) : t('rezept.eyebrow'); const desc = useRemote ? langData.desc : t('rezept.desc'); const ingredients = useRemote ? (langData.ingredients || []) : (t('rezept.ingredients') || []); const ingredientsTitle = useRemote ? langData.ingredients_title : t('rezept.ingredientsTitle'); const steps = useRemote ? (langData.steps || []) : (t('rezept.steps') || []); const stepsTitle = useRemote ? (lang === 'tr' ? 'Hazırlanışı' : lang === 'fa' ? 'دستور پخت' : lang === 'ar' ? 'طريقة التحضير' : 'Zubereitung') : t('rezept.detail.stepsTitle'); const tipsTitle = useRemote ? langData.tips_title : t('rezept.detail.tipsTitle'); const tips = useRemote ? (langData.tips || []) : (t('rezept.detail.tipsList') || []); const servingTitle = useRemote ? langData.serving_title : t('rezept.detail.servingTitle'); const servingIntro = useRemote ? langData.serving_intro : t('rezept.detail.servingIntro'); const servingGroups = useRemote ? (langData.serving_groups || []) : (t('rezept.detail.servingGroups') || []); const timeLabel = useRemote ? (langData.time_label || t('rezept.time')) : t('rezept.time'); const timeValue = useRemote ? langData.time_value : t('rezept.timeValue'); const portionsLabel = useRemote ? (langData.portions_label || t('rezept.portions')) : t('rezept.portions'); const portions = useRemote ? (langData.portions || '4') : '4'; const levelLabel = useRemote ? (langData.level_label || t('rezept.level')) : t('rezept.level'); const level = useRemote ? (langData.level || '★★☆') : '★★☆'; const stamp = useRemote ? (langData.stamp || t('rezept.detail.badge')) : t('rezept.detail.badge'); const imgSrc = useRemote ? (recipe.image_url || 'uploads/rezept-ghormeh-sabzi.jpg') : 'uploads/rezept-ghormeh-sabzi.jpg'; React.useEffect(() => { if (name) document.title = `${name} — ${t('site.name')}`; }, [name, t]); return (
{loading && (
Rezept wird geladen…
)} {!loading && error && (

Rezept nicht gefunden

{error}

{t('rezept.archive')} {' '} Zur Startseite

)} {!loading && !error && (
{/* Hero — Bild, Titel, Beschreibung, Eckdaten */}
{useRemote ? '← Zurück zur Startseite' : t('rezept.detail.back')}
{stamp}
{eyebrow}

{name}

{desc}

{timeLabel}
{timeValue}
{portionsLabel}
{portions}
{levelLabel}
{level}
{/* Zutaten */}

{ingredientsTitle}

    {ingredients.map((ing, i) => (
  • {ing.t} {ing.amt}
    • ))}
{/* Zubereitung */}

{stepsTitle}

    {steps.map((s, i) => (
  1. {String(i+1).padStart(2,'0')} {s}
    2. ))}
{/* Tipps */} {tips.length > 0 && (

{tipsTitle}

    {tips.map((tip, i) => (
  • {String(i+1).padStart(2,'0')} {tip}
    • ))}
)} {/* Beilagen & Servieren */} {servingGroups.length > 0 && (

{servingTitle}

{servingIntro}

{servingGroups.map((g, i) => (

{g.t}

{g.d}

))}
)} {/* Cross-Linking — Mehr Rezepte aus dem Markt */} {related.length > 0 && (
Mehr aus der Rezept-Sammlung

Weitere Rezepte aus dem Markt

)} {/* CTA — zurück zu Angeboten */}
)}