card cosmo ambient

2026-02-20 21:54:38 +04:00
parent 3816b63a22
commit 9f3e5515d1
8 changed files with 6356 additions and 14 deletions
--- a/src/components/TimelineBoard.astro
+++ b/src/components/TimelineBoard.astro
@@ -0,0 +1,102 @@
+---
+const { entry, sortedEntries } = Astro.props;
+const displayDate = entry
+    ? new Date(entry.data.date).toLocaleDateString("fr-FR")
+    : "Aucune date";
+---
+
+<div class="card-wrapper">
+
+    <nav class="history-nav">
+        <p class="nav-title">Chronologie du Souffle</p>
+        <div class="slug-list">
+            {
+                sortedEntries.map((e) => {
+                    // ID propre pour l'URL (ex: latchimynicolas/2026-02-19)
+                    // On retire l'extension .md si elle existe pour l'URL
+                    const cleanId = e.id.replace(/\.md$/, "");
+
+                    const dateLabel = new Date(e.data.date).toLocaleDateString(
+                        "fr-FR",
+                        {
+                            day: "2-digit",
+                            month: "2-digit",
+                        },
+                    );
+
+                    const isActive = entry.id === e.id;
+
+                    return (
+                        <a
+                            href={`/${cleanId}`}
+                            class={`nav-item ${isActive ? "active" : ""}`}
+                        >
+                            {dateLabel}
+                        </a>
+                    );
+                })
+            }
+        </div>
+    </nav>
+
+    <div class="debug-info">
+        <p>Flux synchronisé : {displayDate}</p>
+        <p>Source : Obsidian / Raspberry Pi 4</p>
+    </div>
+</div>
+
+<style>
+    .card-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 25px;
+        margin: 50px 50px
+        padding: 50px;
+    }
+    .history-nav {
+        background: white;
+        padding: 15px;
+        border-radius: 12px;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        border: 1px solid #e2e8f0;
+        max-width: 320px;
+        width: 100%;
+    }
+    .nav-title {
+        font-size: 0.6rem;
+        text-transform: uppercase;
+        font-weight: bold;
+        color: #94a3b8;
+        margin-bottom: 10px;
+        letter-spacing: 1px;
+        text-align: center;
+    }
+    .slug-list {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .nav-item {
+        text-decoration: none;
+        font-size: 0.75rem;
+        padding: 4px 8px;
+        border-radius: 6px;
+        background: #f1f5f9;
+        color: #475569;
+        transition: all 0.2s;
+        font-family: monospace;
+    }
+    .nav-item.active {
+        background: #333;
+        color: white;
+    }
+    .debug-info {
+        text-align: center;
+        font-size: 0.6rem;
+        color: #94a3b8;
+        font-family: monospace;
+        text-transform: uppercase;
+    }
+</style>