ergonomie
This commit is contained in:
25
src/pages/index.astro
Normal file
25
src/pages/index.astro
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import GameLayout from "../layouts/GameLayout.astro";
|
||||
import ContentSearch from "../components/ContentSearch.astro";
|
||||
|
||||
// 1. Récupère TOUS les articles et les trie.
|
||||
const allPosts = await getCollection("journal");
|
||||
const sortedPosts = allPosts.sort(
|
||||
(a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf(),
|
||||
);
|
||||
|
||||
// 2. Extrait toutes les balises uniques
|
||||
const allTags = [...new Set(allPosts.flatMap((post) => post.data.tags || []))];
|
||||
---
|
||||
|
||||
<GameLayout title="Journal d'Aventure">
|
||||
<h1>📖 Journal d'Aventure</h1>
|
||||
<p style="text-align: center; margin-bottom: 3rem;">
|
||||
Les chroniques de nos voyages. Utilisez la barre de recherche pour
|
||||
trouver un récit.
|
||||
</p>
|
||||
|
||||
<!-- 2. On passe tous les articles au composant client -->
|
||||
<ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
|
||||
</GameLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// 1. Ajoute "render" dans ton import
|
||||
import { getCollection, render } from "astro:content";
|
||||
import GameLayout from "../../layouts/GameLayout.astro";
|
||||
|
||||
@@ -12,136 +11,114 @@ export async function getStaticPaths() {
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
if (!entry) return Astro.redirect("/404");
|
||||
|
||||
if (!entry) {
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
|
||||
// 2. Utilise la fonction render(entry) au lieu de entry.render()
|
||||
const { Content } = await render(entry);
|
||||
---
|
||||
|
||||
<GameLayout title={entry.data.title}>
|
||||
<main class="codex-entry-container">
|
||||
<article class="parchment-card">
|
||||
<div class="header">
|
||||
<h1>{entry.data.title}</h1>
|
||||
<p class="publish-date">
|
||||
Savoir acquis le : {
|
||||
entry.data.publishDate.toLocaleDateString("fr-FR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<article class="journal-post">
|
||||
<header class="post-header">
|
||||
<a href="/" class="back-nav">← Retour au Journal</a>
|
||||
<h1>{entry.data.title}</h1>
|
||||
<p class="date">
|
||||
Chroniqué le {
|
||||
entry.data.publishDate.toLocaleDateString("fr-FR", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}
|
||||
</p>
|
||||
|
||||
{
|
||||
entry.data.tags && (
|
||||
<div class="tags-container">
|
||||
<div class="tags-row">
|
||||
{entry.data.tags.map((tag) => (
|
||||
<a
|
||||
href={`/journal/tags/${tag.toLowerCase()}`}
|
||||
class="tag"
|
||||
class="tag-link"
|
||||
>
|
||||
{tag}
|
||||
{tag.includes(":") ? tag.split(":")[1] : tag}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</header>
|
||||
|
||||
<div class="prose">
|
||||
<Content />
|
||||
</div>
|
||||
<hr class="separator" />
|
||||
|
||||
<a href="/journal" class="back-link">
|
||||
← Retourner au Journal
|
||||
</a>
|
||||
</article>
|
||||
</main>
|
||||
<div class="prose-content">
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
</GameLayout>
|
||||
|
||||
<style>
|
||||
.codex-entry-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
.journal-post {
|
||||
background: white;
|
||||
border: 1px solid #dcd0b9;
|
||||
border-radius: 8px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.parchment-card {
|
||||
background: linear-gradient(145deg, #fefbf3, #f8f1e4);
|
||||
border: 2px solid #dcd0b9;
|
||||
border-radius: 15px;
|
||||
padding: 2rem 3rem;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
.back-nav {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.8rem;
|
||||
color: #b8860b;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
.post-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.header h2 {
|
||||
font-family: "EB Garamond", serif;
|
||||
font-style: italic;
|
||||
font-size: 1.4rem;
|
||||
color: #4a4130;
|
||||
margin-top: 0;
|
||||
}
|
||||
/* On retire l'ornement pour le h2 de la carte */
|
||||
.header h2::after {
|
||||
content: none;
|
||||
h1 {
|
||||
margin: 0.5rem 0;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 2.2rem;
|
||||
color: #3a352a;
|
||||
}
|
||||
|
||||
.publish-date {
|
||||
.date {
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.transmutation-table {
|
||||
margin: 2rem 0;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(253, 246, 232, 0.5);
|
||||
border: 1px solid #dcd0b9;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tags-row {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
.separator {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#dcd0b9,
|
||||
transparent
|
||||
);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
|
||||
.table-row.header {
|
||||
background-color: rgba(220, 208, 185, 0.4);
|
||||
.prose-content {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.table-row:not(.header) {
|
||||
border-top: 1px solid #dcd0b9;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
font-family: "Cinzel", serif;
|
||||
font-weight: bold;
|
||||
color: #4a4130;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 3rem;
|
||||
font-family: "Cinzel", serif;
|
||||
color: #b8860b;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.back-link:hover {
|
||||
transform: translateX(-5px);
|
||||
@media (max-width: 640px) {
|
||||
.journal-post {
|
||||
padding: 1.5rem 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import GameLayout from '../../layouts/GameLayout.astro';
|
||||
import ContentSearch from '../../components/ContentSearch.astro';
|
||||
|
||||
// 1. Récupère TOUS les articles et les trie.
|
||||
const allPosts = await getCollection('journal');
|
||||
const sortedPosts = allPosts.sort(
|
||||
(a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
|
||||
);
|
||||
|
||||
// 2. Extrait toutes les balises uniques
|
||||
const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))];
|
||||
|
||||
---
|
||||
|
||||
<GameLayout title="Journal d'Aventure">
|
||||
<h1>📖 Journal d'Aventure</h1>
|
||||
<p style="text-align: center; margin-bottom: 3rem;">
|
||||
Les chroniques de nos voyages. Utilisez la barre de recherche pour trouver un récit.
|
||||
</p>
|
||||
|
||||
<!-- 2. On passe tous les articles au composant client -->
|
||||
<ContentSearch posts={sortedPosts} tags={allTags} basePath="journal" />
|
||||
|
||||
</GameLayout>
|
||||
@@ -1,47 +1,75 @@
|
||||
---
|
||||
// [tag].astro
|
||||
import { getCollection } from "astro:content";
|
||||
import GameLayout from "../../../layouts/GameLayout.astro";
|
||||
import GoldButton from "../../../components/ui/GoldButton.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPosts = await getCollection("journal");
|
||||
const allTags = [
|
||||
...new Set(allPosts.flatMap((post) => post.data.tags || [])),
|
||||
];
|
||||
|
||||
return allTags.map((tag) => {
|
||||
const filteredPosts = allPosts.filter((post) =>
|
||||
post.data.tags?.includes(tag),
|
||||
);
|
||||
return {
|
||||
params: { tag },
|
||||
props: { posts: filteredPosts },
|
||||
};
|
||||
});
|
||||
const tags = [...new Set(allPosts.flatMap((p) => p.data.tags || []))];
|
||||
return tags.map((tag) => ({
|
||||
params: { tag: tag.toLowerCase() },
|
||||
props: {
|
||||
posts: allPosts.filter((p) => p.data.tags?.includes(tag)),
|
||||
originalTag: tag,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
const { tag } = Astro.params;
|
||||
const { posts } = Astro.props;
|
||||
const { posts, originalTag } = Astro.props;
|
||||
---
|
||||
|
||||
<GameLayout title={`Récits: ${tag}`}>
|
||||
<h1>Récits avec la balise : <span class="tag-title">{tag}</span></h1>
|
||||
<GameLayout title={`Archive : ${originalTag}`}>
|
||||
<div class="tag-page-container">
|
||||
<a href="/" class="back-link">← Retour au Journal</a>
|
||||
|
||||
<div class="card-grid">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<GoldButton
|
||||
href={`/journal/${post.id}/`}
|
||||
title={post.data.title}
|
||||
body={`Publié le ${post.data.publishDate.toLocaleDateString("fr-FR")}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
<div class="tag-header">
|
||||
<h1>
|
||||
Récits marqués : <span
|
||||
>{
|
||||
originalTag.includes(":")
|
||||
? originalTag.split(":")[1]
|
||||
: originalTag
|
||||
}</span
|
||||
>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
{
|
||||
posts.map((post) => (
|
||||
<GoldButton
|
||||
href={`/journal/${post.id}/`}
|
||||
title={post.data.title}
|
||||
body={`Chronique du ${new Date(post.data.publishDate).toLocaleDateString("fr-FR")}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</GameLayout>
|
||||
|
||||
<style>
|
||||
.tag-title {
|
||||
color: #c89b3c;
|
||||
.tag-page-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.back-link {
|
||||
color: var(--color-gold-dark);
|
||||
text-decoration: none;
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.tag-header h1 {
|
||||
font-size: 1.8rem; /* Titre réduit */
|
||||
margin: 1.5rem 0 3rem;
|
||||
}
|
||||
.tag-header span {
|
||||
color: var(--color-gold);
|
||||
}
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user