Przymiarka do dokumentów

src/pages/dokumenty/[slug].astro

@@ -0,0 +1,32 @@
+---
+import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import Markdown from "../../islands/Markdown.jsx";
+import { marked } from "marked";
+import { getDocumentBySlug } from "../../lib/documents";
+
+const { slug } = Astro.params;
+
+const doc = slug ? getDocumentBySlug(slug) : null;
+if (!doc || doc.visible !== true) {
+  return Astro.redirect("/dokumenty", 302);
+}
+
+const html = marked.parse(doc.content);
+---
+
+<DefaultLayout title={doc.title}>
+  <section class="max-w-4xl mx-auto px-4 py-10">
+    <a href="/dokumenty" class="text-sm opacity-70 hover:opacity-100">
+      ← Wróć do dokumentów
+    </a>
+
+    <h1 class="mt-4 text-4xl md:text-5xl font-bold text-[--f-header]">
+      {doc.title}
+    </h1>
+
+    <article class="mt-8 prose max-w-none">
+        <Markdown text={html} />
+      <!-- <div set:html={html} /> -->
+    </article>
+  </section>
+</DefaultLayout>

src/pages/dokumenty/index.astro

@@ -1,23 +1,31 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import { listDocuments } from "../../lib/documents";
 
-const seo = {
-  title: "Oferta – FUZ",
-  description: "Oferta – FUZ",
-  canonical: "/oferta",
-};
+const documents = listDocuments().filter((d) => d.visible === true);
 ---
 
-<DefaultLayout seo={seo}>
-  <section class="f-section">
-    <div class="f-section-grid-single md:grid-cols-1">
-      <h1 class="f-section-title">Dokumenty</h1>
-      <div class="fuz-markdown max-w-none">
-        <p>
-          Ta podstrona jest na razie szkieletem. Możemy tu później wczytać
-          treść.
-        </p>
-      </div>
+<DefaultLayout title="Dokumenty">
+  <section class="max-w-6xl mx-auto px-4 py-10">
+    <h1 class="text-4xl md:text-5xl font-bold text-[--f-header]">Dokumenty</h1>
+
+    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {documents.map((doc) => (
+        <a
+          href={`/dokumenty/${doc.slug}`}
+          class="group rounded-2xl border border-[--f-border-color]
+                 bg-[--f-background] p-5 shadow-sm
+                 transition hover:-translate-y-0.5 hover:shadow-md"
+        >
+          <h3 class="text-xl font-bold group-hover:underline">{doc.title}</h3>
+
+          {doc.intro && (
+            <p class="mt-3 text-sm opacity-80 leading-relaxed">{doc.intro}</p>
+          )}
+
+          <span class="mt-4 inline-block text-sm opacity-70">Otwórz →</span>
+        </a>
+      ))}
     </div>
   </section>
 </DefaultLayout>