140 lines
3.7 KiB
Plaintext
140 lines
3.7 KiB
Plaintext
---
|
|
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>
|