360 lines
11 KiB
Plaintext
360 lines
11 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import Layout from "../layouts/Layout.astro";
|
|
import TimelineBoard from "../components/TimelineBoard.astro";
|
|
import Card from "../components/Card.astro";
|
|
import EventCard from "../components/EventCard.astro";
|
|
|
|
export async function getStaticPaths() {
|
|
const allHumans = await getCollection("humans");
|
|
const allEvents = await getCollection("events");
|
|
|
|
const sortedHumans = allHumans.sort(
|
|
(a, b) =>
|
|
new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
|
|
);
|
|
|
|
const humanPaths = allHumans.map((entry) => ({
|
|
params: { id: entry.id.replace(/\.md$/, "") },
|
|
props: { entry, sortedEntries: sortedHumans, type: "human" },
|
|
}));
|
|
|
|
const eventPaths = allEvents.map((entry) => ({
|
|
params: { id: entry.id.replace(/\.md$/, "") },
|
|
props: { entry, sortedEntries: [], type: "event" },
|
|
}));
|
|
|
|
return [...humanPaths, ...eventPaths];
|
|
}
|
|
|
|
const { entry, sortedEntries, type } = Astro.props;
|
|
const { Content } = await entry.render();
|
|
|
|
const manifestations = entry.data.manifestations || [];
|
|
const groupedManifestations = manifestations.reduce((acc, m) => {
|
|
if (!acc[m.cercle]) acc[m.cercle] = [];
|
|
acc[m.cercle].push(m);
|
|
return acc;
|
|
}, {});
|
|
|
|
const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
|
|
---
|
|
|
|
<Layout title={type === "human" ? entry.data.name : entry.data.title}>
|
|
<header class="collection-header">
|
|
<a href="/collection" class="back-link">← Retour à la collection</a>
|
|
</header>
|
|
|
|
<div class="hebel-dashboard">
|
|
<aside class="nav-column">
|
|
{
|
|
type === "human" && (
|
|
<TimelineBoard
|
|
entry={entry}
|
|
sortedEntries={sortedEntries}
|
|
/>
|
|
)
|
|
}
|
|
</aside>
|
|
|
|
<main class="focus-column">
|
|
<div class="card-scaling-container">
|
|
{
|
|
type === "human" ? (
|
|
<Card frontmatter={entry.data} />
|
|
) : (
|
|
<EventCard frontmatter={entry.data} />
|
|
)
|
|
}
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="details-column">
|
|
<div class="details-scroll">
|
|
{
|
|
type === "human" ? (
|
|
<>
|
|
<h2 class="section-title">Émanations (Cercles)</h2>
|
|
{circleOrder.map(
|
|
(cercle) =>
|
|
groupedManifestations[cercle] && (
|
|
<section
|
|
class={`cercle-group ${cercle}`}
|
|
>
|
|
<h3 class="cercle-header">
|
|
{cercle} (
|
|
{
|
|
groupedManifestations[
|
|
cercle
|
|
].length
|
|
}
|
|
)
|
|
</h3>
|
|
<div class="cercle-content">
|
|
{groupedManifestations[
|
|
cercle
|
|
].map((m) => (
|
|
<details
|
|
class={`detail-item ${m.type || "neu"}`}
|
|
>
|
|
<summary class="note-summary">
|
|
<span
|
|
class={`status-dot ${m.type || "neu"}`}
|
|
/>
|
|
<span class="note-label">
|
|
Séquence
|
|
</span>
|
|
</summary>
|
|
<p class="private-content">
|
|
{m.content}
|
|
</p>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</section>
|
|
),
|
|
)}
|
|
</>
|
|
) : (
|
|
<div class="event-notes">
|
|
<h2 class="section-title">
|
|
Planification du projet
|
|
</h2>
|
|
{/* On applique la classe ici pour que le CSS ci-dessus fonctionne */}
|
|
<div
|
|
class="content-markdown"
|
|
style={`--border-color: ${entry.data.circle === "SOC" ? "#ec4899" : "#3b82f6"}`}
|
|
>
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</Layout>
|
|
|
|
<style>
|
|
/* ... Tes styles existants ... */
|
|
.collection-header {
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
.back-link {
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.hebel-dashboard {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr 320px;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
height: 100vh;
|
|
align-items: start;
|
|
}
|
|
|
|
.details-column {
|
|
height: calc(100vh - 40px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.section-title {
|
|
font-family: "Philosopher", serif;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 20px;
|
|
color: #475569;
|
|
}
|
|
.details-scroll {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.cercle-header {
|
|
font-family: "Philosopher", serif;
|
|
border-bottom: 2px solid var(--border-color, #666);
|
|
padding: 5px 0;
|
|
margin: 15px 0 10px 0;
|
|
}
|
|
|
|
.detail-item {
|
|
font-size: 0.9rem;
|
|
padding: 8px;
|
|
margin-bottom: 6px;
|
|
background: white;
|
|
border-left: 3px solid #cbd5e1;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Style spécifique pour aérer le Markdown des événements */
|
|
.event-markdown-body .private-content {
|
|
line-height: 1.8;
|
|
padding: 15px;
|
|
}
|
|
|
|
/* Ciblage du contenu généré par Astro (Markdown) */
|
|
.event-markdown-body :global(h2),
|
|
.event-markdown-body :global(h3) {
|
|
font-family: "Philosopher", serif;
|
|
font-size: 1.1rem;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #1e293b;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.event-markdown-body :global(ul) {
|
|
padding-left: 1.2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.event-markdown-body :global(li) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.note-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
padding: 4px 0;
|
|
list-style: none;
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #cbd5e1;
|
|
display: inline-block;
|
|
}
|
|
.status-dot.pos {
|
|
background-color: #4ade80;
|
|
box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
|
|
}
|
|
.status-dot.neg {
|
|
background-color: #f87171;
|
|
box-shadow: 0 0 5px rgba(248, 113, 113, 0.5);
|
|
}
|
|
.note-label {
|
|
font-family: "Philosopher", serif;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #64748b;
|
|
}
|
|
.private-content {
|
|
font-size: 0.85rem;
|
|
line-height: 1.4;
|
|
padding: 10px;
|
|
margin-top: 5px;
|
|
color: #334155;
|
|
}
|
|
|
|
/* --- STYLES ÉVÉNEMENTS (MARKDOWN) --- */
|
|
|
|
/* 1. On enlève les puces de listes qui chevauchent la ligne */
|
|
.content-markdown :global(ul) {
|
|
list-style: none !important; /* Supprime les points */
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 2. On stylise les titres pour qu'ils ressemblent aux en-têtes de cercles */
|
|
.content-markdown :global(h2) {
|
|
font-family: "Philosopher", serif;
|
|
padding: 5px 0;
|
|
margin: 30px 0 15px 0;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* 3. L'ASTUCE : Chaque paragraphe ou liste devient une case blanche */
|
|
.content-markdown :global(p),
|
|
.content-markdown :global(ul) {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 15px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 4. Style pour les cases à cocher Obsidian [ ] */
|
|
.content-markdown :global(li) {
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
.PRO {
|
|
--border-color: #f59e0b;
|
|
}
|
|
.SAN {
|
|
--border-color: #3b82f6;
|
|
}
|
|
.HYG {
|
|
--border-color: #9400ff;
|
|
}
|
|
.SOC {
|
|
--border-color: #ec4899;
|
|
}
|
|
.FLX {
|
|
--border-color: #10b981;
|
|
}
|
|
|
|
.detail-item.pos {
|
|
border-left-color: #4ade80;
|
|
}
|
|
.detail-item.neg {
|
|
border-left-color: #f87171;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.hebel-dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
.focus-column {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
}
|
|
.card-scaling-container {
|
|
transform: scale(0.9);
|
|
transform-origin: center center;
|
|
width: 100%;
|
|
max-width: 350px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
.card-scaling-container :global(.tcg-card) {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
aspect-ratio: 5 / 7;
|
|
margin: 0 auto;
|
|
}
|
|
.nav-column,
|
|
.details-column {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|