chim1chim2/ambient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

card cosmo ambient

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-21 20:59:56 +04:00
parent 3f2fcdb5d7
commit c4dc5c4588
4 changed files with 398 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
src/pages/[...id].astro
View File

@@ -3,85 +3,131 @@ 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 sortedEntries = allHumans.sort(
const allEvents = await getCollection("events");
const sortedHumans = allHumans.sort(
(a, b) =>
new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
);
return allHumans.map((entry) => ({
const humanPaths = allHumans.map((entry) => ({
params: { id: entry.id.replace(/\.md$/, "") },
props: { entry, sortedEntries },
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 } = Astro.props;
const manifestations = entry.data.manifestations || [];
const { entry, sortedEntries, type } = Astro.props;
const { Content } = await entry.render();
// Groupement des manifestations par catégorie (cercle)
const manifestations = entry.data.manifestations || [];
const groupedManifestations = manifestations.reduce((acc, m) => {
if (!acc[m.cercle]) {
acc[m.cercle] = [];
}
if (!acc[m.cercle]) acc[m.cercle] = [];
acc[m.cercle].push(m);
return acc;
}, {});
// Définition de l'ordre d'affichage des cercles
const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
---
<Layout title={`${entry.data.name}`}>
<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">
<TimelineBoard entry={entry} sortedEntries={sortedEntries} />
{
type === "human" && (
<TimelineBoard
entry={entry}
sortedEntries={sortedEntries}
/>
)
}
</aside>
<main class="focus-column">
<div class="card-scaling-container">
<Card frontmatter={entry.data} />
{
type === "human" ? (
<Card frontmatter={entry.data} />
) : (
<EventCard frontmatter={entry.data} />
)
}
</div>
</main>
<aside class="details-column">
<h2 class="section-title">Émanations (Détails par Cercle)</h2>
<div class="details-scroll">
{
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>
),
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>
@@ -90,16 +136,17 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
</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;
@@ -111,58 +158,24 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
align-items: start;
}
/* Aligner le style des colonnes sur la Card */
.details-column {
height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.section-title {
font-family: "Philosopher", serif; /* Cohérence */
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;
}
/* Style des items calqué sur les types de la Card */
.detail-card {
margin-bottom: 12px;
border-bottom: 4px solid #666;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.detail-card.PRO {
border-color: #f59e0b;
}
.detail-card.SAN {
border-color: #3b82f6;
}
.detail-card.SOC {
border-color: #ec4899;
}
.detail-card.FLX {
border-color: #10b981;
}
.cercle-label {
font-size: 0.7rem;
font-weight: bold;
color: #94a3b8;
}
.cercle-group {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.cercle-header {
font-family: "Philosopher", serif;
border-bottom: 2px solid var(--border-color, #666);
@@ -170,11 +183,40 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
margin: 15px 0 10px 0;
}
.detail-item summary {
cursor: pointer;
font-size: 0.85rem;
color: #64748b;
list-style: none; /* Cache la flèche par défaut */
.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 {
@@ -183,28 +225,23 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
gap: 10px;
cursor: pointer;
padding: 4px 0;
list-style: none; /* Cache la flèche par défaut */
list-style: none;
}
/* Le petit point de statut minimaliste */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #cbd5e1; /* Neutre par défaut */
background-color: #cbd5e1;
display: inline-block;
}
.status-dot.pos {
background-color: #4ade80; /* Vert succès */
background-color: #4ade80;
box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
}
.status-dot.neg {
background-color: #f87171; /* Rouge alerte */
background-color: #f87171;
box-shadow: 0 0 5px rgba(248, 113, 113, 0.5);
}
.note-label {
font-family: "Philosopher", serif;
font-size: 0.75rem;
@@ -212,18 +249,51 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
letter-spacing: 1px;
color: #64748b;
}
/* Style du contenu révélé */
.private-content {
font-size: 0.85rem;
line-height: 1.4;
padding: 10px;
margin-top: 5px;
border-left: 1px solid #e2e8f0;
color: #334155;
}
/* Couleurs des cercles basées sur tes fichiers */
/* --- 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;
}
@@ -240,16 +310,6 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
--border-color: #10b981;
}
.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);
}
.detail-item.pos {
border-left-color: #4ade80;
}
@@ -257,52 +317,43 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
border-left-color: #f87171;
}
/* CONTROLE DU SCROLL HORIZONTAL (MOBILE) */
.focus-column {
display: flex;
justify-content: center;
align-items: center;
}
.card-scaling-container {
max-width: 100%; /* Empêche le débordement */
}
/* RESPONSIVE : Passage en colonne pour ton Samsung */
@media (max-width: 1100px) {
.hebel-dashboard {
display: flex; /* On passe en flex pour mieux contrôler l'empilement */
display: flex;
flex-direction: column;
align-items: center; /* Centre tout ce qui est dans le dashboard */
align-items: center;
padding: 0;
margin: 0;
width: 100%;
overflow-x: hidden;
}
.focus-column {
width: 100%;
margin: 0;
padding: 20px 0;
display: flex;
justify-content: center; /* Centre la carte horizontalement */
align-items: center;
justify-content: center;
padding: 20px 0;
}
.card-scaling-container {
display: block;
margin: 0 auto; /* Centrage automatique via les marges */
width: fit-content; /* S'adapte à la taille de la Card */
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;
}
/* Important : On s'assure que la nav et les détails ne poussent pas le layout */
.nav-column,
.details-column {
width: 95%; /* Laisse une petite marge visuelle sur les côtés */
margin: 0 auto;
padding: 15px 0;
width: 100%;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
}
}
</style>