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/pages/collection.astro
+++ b/src/pages/collection.astro
@@ -0,0 +1,139 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+
+const allHumans = await getCollection("humans");
+// 1. Tri chronologique global
+const sortedEntries = allHumans.sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+);
+
+// 2. Groupement par utilisateur [cite: 80]
+const groupedHumans = sortedEntries.reduce((acc, entry) => {
+    const userName = entry.data.name;
+    if (!acc[userName]) acc[userName] = [];
+    acc[userName].push(entry);
+    return acc;
+}, {});
+---
+
+<Layout title="Hebel - Collection">
+    <header class="collection-header">
+        <a href="/" class="back-link">← Retour au flux</a>
+        <h1>Toute la Collection</h1>
+    </header>
+
+    <main class="collection-container">
+        {
+            Object.entries(groupedHumans).map(([userName, cards]) => (
+                <section class="user-collection">
+                    <h2 class="user-title">
+                        {userName} <span>({cards.length} souffles)</span>
+                    </h2>
+
+                    <div class="user-flex-row">
+                        {cards.map((entry) => (
+                            <a
+                                href={`/${entry.id.replace(/\.md$/, "")}`}
+                                class="card-link"
+                            >
+                                <div class="card-scaler">
+                                    <Card frontmatter={entry.data} />
+                                    <div class="entry-meta">
+                                        <p>
+                                            {new Date(
+                                                entry.data.date,
+                                            ).toLocaleDateString("fr-FR")}
+                                        </p>
+                                    </div>
+                                </div>
+                            </a>
+                        ))}
+                    </div>
+                    <hr class="separator" />
+                </section>
+            ))
+        }
+    </main>
+</Layout>
+
+<style>
+    .collection-header {
+        padding: 40px;
+        text-align: center;
+    }
+
+    .back-link {
+        color: #64748b;
+        text-decoration: none;
+        font-size: 0.9rem;
+    }
+
+    .collection-container {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 0 20px 40px;
+    }
+
+    .user-collection {
+        margin-bottom: 60px;
+    }
+
+    .user-title {
+        font-family: "Philosopher", serif;
+        font-size: 1.5rem;
+        color: #1e293b;
+        margin-bottom: 25px;
+        border-left: 5px solid #333;
+        padding-left: 15px;
+    }
+
+    .user-title span {
+        font-size: 0.9rem;
+        color: #94a3b8;
+        font-weight: normal;
+    }
+
+    .user-flex-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px; /* Gap simple comme demandé */
+        justify-content: flex-center;
+    }
+
+    .entry-meta {
+        font-family: "Inter", sans-serif;
+        font-size: 0.8rem;
+        color: #94a3b8;
+        text-transform: uppercase;
+        text-align: center;
+        letter-spacing: 1px;
+    }
+
+    .card-link {
+        text-decoration: none;
+        transition: transform 0.3s ease;
+    }
+
+    .card-link:hover {
+        transform: translateY(-5px);
+    }
+
+    .separator {
+        margin-top: 50px;
+        border: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    /* Adaptabilité mobile [cite: 96] */
+    @media (max-width: 480px) {
+        .user-flex-row {
+            gap: 15px;
+            justify-content: center;
+        }
+        .card-scaler {
+            transform: scale(0.9);
+        }
+    }
+</style>