Telefon

src/pages/telefon/index.astro

@@ -1,20 +1,57 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import Hero from "../../components/hero/Hero.astro";
+import SectionRenderer from "../../components/sections/SectionRenderer.astro";
+import Markdown from "../../islands/Markdown.jsx";
+import OffersIsland from "../../islands/OffersIsland.jsx";
 
-const seo = {
-  title: "Telewizja – FUZ",
-  description: "Telewizja – FUZ",
-  canonical: "/telewizja"
+import yaml from "js-yaml";
+import fs from "fs";
+
+const seo = yaml.load(
+  fs.readFileSync("./src/content/telefon/seo.yaml", "utf8"),
+);
+const hero = yaml.load(
+  fs.readFileSync("./src/content/telefon/hero.yaml", "utf8"),
+);
+const page = yaml.load(
+  fs.readFileSync("./src/content/telefon/page.yaml", "utf8"),
+);
+
+type Paragraph = {
+  title?: string;
+  content: string;
 };
+
+const data = yaml.load(
+  fs.readFileSync("./src/content/telefon/offers.yaml", "utf8"),
+);
+const first = page.paragraphs[0];
+const rest = page.paragraphs.slice(1);
 ---
 
 <DefaultLayout seo={seo}>
-  <section class="fuz-section">
-    <div class="fuz-container">
-      <h1 class="fuz-hero-title">Telefon – FUZ</h1>
-      <p class="mt-4 text-gray-600 dark:text-gray-300">
-        Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
-      </p>
+  <Hero {...hero} />
+
+  <section class="fuz-section text-center">
+    <div class="fuz-section-grid md:grid-cols-1">
+      {page.title.map((line: any) => <h1 class="fuz-section-title">{line}</h1>)}
+      {first.title && <h3>{first.title}</h3>}
+      <Markdown text={first.content} />
     </div>
   </section>
+
+  <OffersIsland client:load data={data} />
+  {
+    rest.map((p: Paragraph) => (
+      <section class="fuz-section text-center">
+        <div class="fuz-section-grid md:grid-cols-1">
+          {p.title && <h3 class="fuz-section-title">{p.title}</h3>}
+          <Markdown text={p.content.replace(/\n/g, "\n\n")} />
+        </div>
+      </section>
+    ))
+  }
+
+  <SectionRenderer src="./src/content/telefon/section.yaml" />
 </DefaultLayout>