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

134
src/components/EventCard.astro Normal file
View File

@@ -0,0 +1,134 @@
---
// src/components/EventCard.astro
const { frontmatter } = Astro.props;
const { title, date, location, target_date, participants, summary, status } =
frontmatter;
---
<article class="event-card">
<div class="card-inner">
<header class="event-header">
<span class="event-type">ÉVÉNEMENT IRL</span>
<span class="event-status">{status}</span>
</header>
<div class="event-art">
<div class="location-tag">{location}</div>
<h2 class="event-title">{title}</h2>
</div>
<div class="event-info-line">
Projet prévu pour : <strong>{target_date}</strong>
</div>
<div class="event-body">
<p class="summary">{summary}</p>
<div class="participants-box">
<span class="label">Membres impliqués :</span>
<div class="tags">
{participants.map((p) => <span class="p-tag">{p}</span>)}
</div>
</div>
</div>
<footer class="event-footer">
<div class="date-recorded">
Détecté le : {new Date(date).toLocaleDateString("fr-FR")}
</div>
<div class="social-impact">+3 SOC</div>
</footer>
</div>
</article>
<style>
.event-card {
width: 320px;
height: 480px;
background: #a1be18;
border-radius: 18px;
padding: 12px;
font-family: "Philosopher", serif;
color: rgba(0, 0, 0, 0.7);
}
.card-inner {
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 12px;
}
.event-header {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
}
.event-art {
flex: 1;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 10px 0;
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
}
.event-title {
font-size: 1.4rem;
margin: 5px 0;
}
.location-tag {
font-size: 0.7rem;
opacity: 0.9;
}
.event-info-line {
font-size: 0.8rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 5px;
margin-bottom: 10px;
}
.event-body {
flex: 1.2;
font-size: 0.85rem;
}
.summary {
font-style: italic;
line-height: 1.4;
margin-bottom: 10px;
}
.participants-box .label {
font-size: 0.65rem;
text-transform: uppercase;
display: block;
margin-bottom: 5px;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.p-tag {
background: rgba(255, 255, 255, 0.2);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.65rem;
}
.event-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.7rem;
padding-top: 10px;
}
.social-impact {
background: #ffffff80;
padding: 2px 8px;
border-radius: 5px;
font-weight: bold;
}
</style>

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

@@ -3,65 +3,97 @@ 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 { entry, sortedEntries, type } = Astro.props;
const { Content } = await entry.render();
const manifestations = entry.data.manifestations || [];
// Groupement des manifestations par catégorie (cercle)
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">
{
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(
type === "human" ? (
<>
<h2 class="section-title">Émanations (Cercles)</h2>
{circleOrder.map(
(cercle) =>
groupedManifestations[cercle] && (
<section class={`cercle-group ${cercle}`}>
<section
class={`cercle-group ${cercle}`}
>
<h3 class="cercle-header">
{cercle} (
{groupedManifestations[cercle].length} )
{
groupedManifestations[
cercle
].length
}
)
</h3>
<div class="cercle-content">
{groupedManifestations[cercle].map(
(m) => (
{groupedManifestations[
cercle
].map((m) => (
<details
class={`detail-item ${m.type || "neu"}`}
>
@@ -77,11 +109,25 @@ const circleOrder = ["PRO", "SAN", "HYG", "SOC", "FLX"];
{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>

38
src/pages/collection.astro
View File

@@ -2,13 +2,20 @@
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import EventCard from "../components/EventCard.astro";
const allHumans = await getCollection("humans");
const allEvents = await getCollection("events");
// 1. Tri chronologique global
const sortedEntries = allHumans.sort(
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
);
const sortedEvents = allEvents.sort(
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
);
// 2. Groupement par utilisateur [cite: 80]
const groupedHumans = sortedEntries.reduce((acc, entry) => {
const userName = entry.data.name;
@@ -26,6 +33,37 @@ const groupedHumans = sortedEntries.reduce((acc, entry) => {
</header>
<main class="collection-container">
{/* SECTION ÉVÉNEMENTS (Même structure que les humains) */}
{
sortedEvents.length > 0 && (
<section class="user-collection">
<h2 class="user-title">
Événements <span>({sortedEvents.length} cartes)</span>
</h2>
<div class="user-flex-row">
{sortedEvents.map((event) => (
<a
href={`/${event.id.replace(/\.md$/, "")}`}
class="card-link"
>
<div class="card-scaler">
<EventCard frontmatter={event.data} />
<div class="entry-meta">
<p>
Prévu pour :{" "}
{event.data.target_date}
</p>
</div>
</div>
</a>
))}
</div>
<hr class="separator" />
</section>
)
}
{/* SECTION HUMAINS */}
{
Object.entries(groupedHumans).map(([userName, cards]) => (
<section class="user-collection">

66
src/pages/index.astro
View File

@@ -2,17 +2,26 @@
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import EventCard from "../components/EventCard.astro";
const allHumans = await getCollection("humans");
// 1. Récupération des deux types de contenu
const allHumans = await getCollection("humans", ({ id }) => {
return id.startsWith("latchimynicolas/");
});
const allEvents = await getCollection("events");
// 1. Tri par date décroissante
// 2. Tri par date décroissante pour les humains
const sortedAll = allHumans.sort(
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
);
// 2. Fonction de calcul de Streak (Série) corrigée
// 3. Récupération du dernier événement (ex: Camping Châteauroux)
const latestEvent = allEvents.sort(
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
)[0];
// 4. Fonction de calcul de Streak (Série) [cite: 94]
const getStreak = (name, entries) => {
// 1. On récupère les données utiles (date + si HYG était présent)
const userDates = entries
.filter((e) => e.data.name === name)
.map((e) => ({
@@ -21,13 +30,11 @@ const getStreak = (name, entries) => {
e.data.manifestations?.some((m) => m.cercle === "HYG") || false,
}));
// On dédoublonne et on trie (plus récent au plus ancien)
const uniqueDates = [...new Set(userDates)].sort().reverse();
const uniqueDates = [...new Set(userDates.map((d) => d.date))]
.sort()
.reverse();
let streak = 0;
let hygCountLast7Days = 0;
let today = new Date();
// On cale la date de vérification sur aujourd'hui à minuit
let checkDate = new Date(
today.getFullYear(),
today.getMonth(),
@@ -36,12 +43,10 @@ const getStreak = (name, entries) => {
for (let i = 0; i < 31; i++) {
const dateStr = checkDate.toISOString().split("T")[0];
if (uniqueDates.includes(dateStr)) {
streak++;
checkDate.setDate(checkDate.getDate() - 1);
} else {
// Tolérance : si pas de note aujourd'hui, on vérifie si la série continue depuis hier
if (i === 0) {
checkDate.setDate(checkDate.getDate() - 1);
const yesterdayStr = checkDate.toISOString().split("T")[0];
@@ -51,33 +56,26 @@ const getStreak = (name, entries) => {
}
}
// 2. Logique Malus HYG (7 derniers jours glissants)
const last7Days = [];
for (let j = 0; j < 7; j++) {
// Malus HYG [cite: 103, 106]
const last7Days = Array.from({ length: 7 }, (_, j) => {
let d = new Date();
d.setDate(d.getDate() - j);
last7Days.push(d.toISOString().split("T")[0]);
}
return d.toISOString().split("T")[0];
});
hygCountLast7Days = userDates.filter(
const hygCount = userDates.filter(
(e) => last7Days.includes(e.date) && e.hasHyg,
).length;
// Si moins de 3 sessions HYG sur les 7 derniers jours, malus de 1
if (hygCountLast7Days < 3 && streak > 0) {
streak = Math.max(0, streak - 1);
}
if (hygCount < 3 && streak > 0) streak = Math.max(0, streak - 1);
return streak;
};
// 3. Unicité par utilisateur pour l'affichage (dernière version de chaque profil)
// 5. Unicité par utilisateur [cite: 107]
const latestPerUser = Array.from(
sortedAll
.reduce((map, obj) => {
if (!map.has(obj.data.name)) {
map.set(obj.data.name, obj);
}
if (!map.has(obj.data.name)) map.set(obj.data.name, obj);
return map;
}, new Map())
.values(),
@@ -95,11 +93,10 @@ const latestPerUser = Array.from(
</header>
<main class="hero-flex">
{/* Affichage des cartes Humains (Hebel) [cite: 110] */}
{
latestPerUser.map((entry) => {
// On calcule la streak ICI pour l'envoyer à la carte
const currentStreak = getStreak(entry.data.name, allHumans);
return (
<div class="card-focus">
<Card
@@ -118,10 +115,23 @@ const latestPerUser = Array.from(
);
})
}
{/* Insertion de la carte Événement */}
{
latestEvent && (
<div class="card-focus">
<EventCard frontmatter={latestEvent.data} />
<div class="entry-meta">
<p>Projet Communautaire</p>
</div>
</div>
)
}
</main>
</Layout>
<style>
/* Tes styles restent identiques pour préserver la mise en page [cite: 115, 119, 120] */
.minimal-header {
position: fixed;
top: 50px;