lore

src/pages/index.astro

@@ -1,25 +1,96 @@
 ---
 import { getCollection } from "astro:content";
 import GameLayout from "../layouts/GameLayout.astro";
+import Timeline from "../components/Timeline.astro";
 import ContentSearch from "../components/ContentSearch.astro";
 
-// 1. Récupère TOUS les articles et les trie.
 const allPosts = await getCollection("journal");
-const sortedPosts = allPosts.sort(
+
+// On récupère les Ères
+const eras = allPosts
+    .filter((p) => p.data.isEra)
+    .sort((a, b) => a.data.publishDate.valueOf() - b.data.publishDate.valueOf())
+    .map((p) => ({ id: p.id, title: p.data.title }));
+
+const chroniclesOnly = allPosts.filter((post) => !post.data.isEra);
+const sortedPosts = chroniclesOnly.sort(
     (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf(),
 );
-
-// 2. Extrait toutes les balises uniques
-const allTags = [...new Set(allPosts.flatMap((post) => post.data.tags || []))];
+const allTags = [
+    ...new Set(chroniclesOnly.flatMap((post) => post.data.tags || [])),
+];
 ---
 
 <GameLayout title="Journal d'Aventure">
-    <h1>📖 Journal d'Aventure</h1>
-    <p style="text-align: center; margin-bottom: 3rem;">
-        Les chroniques de nos voyages. Utilisez la barre de recherche pour
-        trouver un récit.
-    </p>
+    <div class="index-container">
+        <header class="dnd-header">
+            <h1 class="dnd-title">Sweeties Journey</h1>
+            <div class="dnd-bar"></div>
+            <p class="dnd-intro">
+                Chroniques des aventures d'une portion de nouilles de la
+                communauté, idée originale de Orson Pattes Givrées
+            </p>
+        </header>
 
-    <!-- 2. On passe tous les articles au composant client -->
-    <ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
+        <Timeline eras={eras} />
+
+        <ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
+    </div>
 </GameLayout>
+
+<style is:global>
+    .index-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 0 1rem;
+    }
+
+    /* Le style du titre DnD reste le même que précédemment */
+    .dnd-header {
+        margin: 2rem 0;
+    }
+    .dnd-title {
+        font-family: "Playfair Display", serif;
+        font-size: 3.5rem;
+        color: #c89b3c;
+        margin: 0;
+    }
+    .dnd-bar {
+        height: 4px;
+        background: linear-gradient(to right, #c89b3c 0%, transparent 100%);
+        margin-top: 4px;
+    }
+    .dnd-intro {
+        font-family: "Cinzel", serif;
+        font-size: 0.9rem;
+        margin-top: 1rem;
+        opacity: 0.8;
+    }
+</style>
+
+<script>
+    function setupEraFiltering() {
+        const eraButtons = document.querySelectorAll(".era-chip");
+        const posts = document.querySelectorAll(".gold-button");
+
+        eraButtons.forEach((button) => {
+            button.addEventListener("click", () => {
+                const selectedEra = button.getAttribute("data-era");
+
+                // Toggle active class
+                eraButtons.forEach((btn) => btn.classList.remove("active"));
+                button.classList.add("active");
+
+                posts.forEach((post) => {
+                    const postEra = post.getAttribute("data-era");
+                    if (selectedEra === "all" || postEra === selectedEra) {
+                        (post as HTMLElement).style.display = "block";
+                    } else {
+                        (post as HTMLElement).style.display = "none";
+                    }
+                });
+            });
+        });
+    }
+    document.addEventListener("astro:page-load", setupEraFiltering);
+</script>