103 lines
2.6 KiB
Plaintext
103 lines
2.6 KiB
Plaintext
---
|
|
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>
|