Demoshop Directus+Astro — Hofladen Heidekorn (Katalog, Warenkorb, Magazin, Rechtstexte)

src/pages/magazin/[slug].astro

@@ -0,0 +1,28 @@
+---
+import Base from '../../layouts/Base.astro';
+import { getArtikel } from '../../lib/data.js';
+export async function getStaticPaths(){
+  const artikel = await getArtikel();
+  return artikel.map(a => ({ params:{ slug:a.slug }, props:{ a } }));
+}
+const { a } = Astro.props;
+---
+<Base title={a.titel}>
+  <article class="wrap article">
+    <a href="/#magazin" class="back">← Zurück zum Magazin</a>
+    <time>{new Date(a.datum).toLocaleDateString('de-DE',{day:'2-digit',month:'long',year:'numeric'})}</time>
+    <h1>{a.titel}</h1>
+    <p class="teaser">{a.teaser}</p>
+    <img src={a.bild_url} alt={a.titel}/>
+    <div class="body">{a.inhalt.split('\n').map(p => p.trim() && <p>{p}</p>)}</div>
+  </article>
+  <style>
+    .article{max-width:760px;padding-top:26px}
+    .back{color:var(--slate);font-weight:600;font-size:.9rem}
+    .article time{display:block;margin-top:18px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
+    .article h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0 .3em}
+    .teaser{font-size:1.2rem;color:var(--graphit)}
+    .article img{width:100%;border-radius:16px;margin:24px 0;aspect-ratio:16/9;object-fit:cover}
+    .body p{font-size:1.05rem;color:var(--ink);margin:0 0 1.1em}
+  </style>
+</Base>