127 lines
3.7 KiB
Plaintext
127 lines
3.7 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import GameLayout from "../layouts/GameLayout.astro";
|
|
import Timeline from "../components/Timeline.astro";
|
|
import ContentSearch from "../components/ContentSearch.astro";
|
|
|
|
const allPosts = await getCollection("journal");
|
|
|
|
// 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(),
|
|
);
|
|
const allTags = [
|
|
...new Set(chroniclesOnly.flatMap((post) => post.data.tags || [])),
|
|
];
|
|
---
|
|
|
|
<GameLayout title="Sweeties Journey">
|
|
<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>
|
|
|
|
<div class="creation-button-container">
|
|
<a href="/creation" class="creation-button"
|
|
>Création de Personnage</a
|
|
>
|
|
</div>
|
|
|
|
<Timeline eras={eras} />
|
|
|
|
<ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
|
|
</div>
|
|
</GameLayout>
|
|
|
|
<style is:global>
|
|
.creation-button-container {
|
|
text-align: center;
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
a .creation-button {
|
|
font-family: "Cinzel", serif;
|
|
font-size: 1.2rem;
|
|
background: #c89b3c;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
a .creation-button:hover {
|
|
background: #a27c2c;
|
|
}
|
|
|
|
.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>
|