card cosmo ambient
This commit is contained in:
156
src/pages/[...id].astro
Normal file
156
src/pages/[...id].astro
Normal file
@@ -0,0 +1,156 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import TimelineBoard from "../components/TimelineBoard.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allHumans = await getCollection("humans");
|
||||
const sortedEntries = allHumans.sort(
|
||||
(a, b) =>
|
||||
new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
|
||||
);
|
||||
return allHumans.map((entry) => ({
|
||||
params: { id: entry.id.replace(/\.md$/, "") },
|
||||
props: { entry, sortedEntries },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry, sortedEntries } = Astro.props;
|
||||
const manifestations = entry.data.manifestations || [];
|
||||
---
|
||||
|
||||
<Layout title={`Hebel - ${entry.data.name}`}>
|
||||
<div class="hebel-dashboard">
|
||||
<aside class="nav-column">
|
||||
<TimelineBoard entry={entry} sortedEntries={sortedEntries} />
|
||||
</aside>
|
||||
|
||||
<main class="focus-column">
|
||||
<div class="card-scaling-container">
|
||||
<Card frontmatter={entry.data} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="details-column">
|
||||
<h2 class="section-title">Émanations</h2>
|
||||
<div class="details-scroll">
|
||||
{
|
||||
manifestations.map((m) => (
|
||||
<div class={`detail-card ${m.cercle}`}>
|
||||
<header>
|
||||
<span class="cercle-label">{m.cercle}</span>
|
||||
</header>
|
||||
<p>{m.content}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Aligner le style des colonnes sur la Card */
|
||||
.details-column {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 18px; /* Comme la Card [cite: 48] */
|
||||
padding: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
height: calc(100vh - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: "Philosopher", serif; /* Cohérence [cite: 127] */
|
||||
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 [cite: 107, 108, 109, 110] */
|
||||
.detail-card {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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 [cite: 128] */
|
||||
}
|
||||
|
||||
/* RESPONSIVE : Passage en colonne pour ton Samsung */
|
||||
@media (max-width: 1100px) {
|
||||
.hebel-dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-column,
|
||||
.details-column {
|
||||
order: 2;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.focus-column {
|
||||
order: 1;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* Réduction de la carte si l'écran est trop petit */
|
||||
.card-scaling-container {
|
||||
transform: scale(0.9);
|
||||
transform-origin: top center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
src/pages/collection.astro
Normal file
139
src/pages/collection.astro
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
|
||||
const allHumans = await getCollection("humans");
|
||||
// 1. Tri chronologique global
|
||||
const sortedEntries = allHumans.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;
|
||||
if (!acc[userName]) acc[userName] = [];
|
||||
acc[userName].push(entry);
|
||||
return acc;
|
||||
}, {});
|
||||
---
|
||||
|
||||
<Layout title="Hebel - Collection">
|
||||
<header class="collection-header">
|
||||
<a href="/" class="back-link">← Retour au flux</a>
|
||||
<h1>Toute la Collection</h1>
|
||||
</header>
|
||||
|
||||
<main class="collection-container">
|
||||
{
|
||||
Object.entries(groupedHumans).map(([userName, cards]) => (
|
||||
<section class="user-collection">
|
||||
<h2 class="user-title">
|
||||
{userName} <span>({cards.length} souffles)</span>
|
||||
</h2>
|
||||
|
||||
<div class="user-flex-row">
|
||||
{cards.map((entry) => (
|
||||
<a
|
||||
href={`/${entry.id.replace(/\.md$/, "")}`}
|
||||
class="card-link"
|
||||
>
|
||||
<div class="card-scaler">
|
||||
<Card frontmatter={entry.data} />
|
||||
<div class="entry-meta">
|
||||
<p>
|
||||
{new Date(
|
||||
entry.data.date,
|
||||
).toLocaleDateString("fr-FR")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<hr class="separator" />
|
||||
</section>
|
||||
))
|
||||
}
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.collection-header {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.collection-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 40px;
|
||||
}
|
||||
|
||||
.user-collection {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.user-title {
|
||||
font-family: "Philosopher", serif;
|
||||
font-size: 1.5rem;
|
||||
color: #1e293b;
|
||||
margin-bottom: 25px;
|
||||
border-left: 5px solid #333;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.user-title span {
|
||||
font-size: 0.9rem;
|
||||
color: #94a3b8;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.user-flex-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px; /* Gap simple comme demandé */
|
||||
justify-content: flex-center;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-top: 50px;
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Adaptabilité mobile [cite: 96] */
|
||||
@media (max-width: 480px) {
|
||||
.user-flex-row {
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-scaler {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,116 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
|
||||
const allHumans = await getCollection("humans");
|
||||
// 1. On trie d'abord par date décroissante pour avoir les plus récents en premier [cite: 65]
|
||||
const sortedAll = allHumans.sort(
|
||||
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
|
||||
);
|
||||
|
||||
// 2. On utilise une Map pour ne garder que la première occurrence (la plus récente) de chaque nom
|
||||
const latestPerUser = Array.from(
|
||||
sortedAll
|
||||
.reduce((map, obj) => {
|
||||
if (!map.has(obj.data.name)) {
|
||||
map.set(obj.data.name, obj);
|
||||
}
|
||||
return map;
|
||||
}, new Map())
|
||||
.values(),
|
||||
);
|
||||
---
|
||||
|
||||
---
|
||||
<Layout title="Derniers Souffles">
|
||||
<header class="minimal-header">
|
||||
<nav>
|
||||
<a href="/collection" class="menu-link">
|
||||
<span class="icon">🎴</span> Collection
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
</body>
|
||||
</html>
|
||||
<main class="hero-flex">
|
||||
{
|
||||
latestPerUser.map((entry) => (
|
||||
<div class="card-focus">
|
||||
<Card frontmatter={entry.data} />
|
||||
<div class="entry-meta">
|
||||
<p>
|
||||
Dernier souffle :{" "}
|
||||
{new Date(entry.data.date).toLocaleDateString(
|
||||
"fr-FR",
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
/* Header minimaliste pour le menu */
|
||||
.minimal-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 20px 30px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
color: #1e293b;
|
||||
font-family: "Philosopher", serif;
|
||||
font-weight: bold;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px 20px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(5px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-link:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Centrage absolu de la carte */
|
||||
.hero-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Permet le retour à la ligne */
|
||||
justify-content: center; /* Centre les cartes sur la ligne */
|
||||
gap: 20px; /* Espacement simple et constant */
|
||||
padding: 100px 20px; /* Padding haut pour le header fixé */
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.card-focus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex: 0 1 320px; /* Ne grandit pas, peut rétrécir, base à 320px */
|
||||
}
|
||||
.entry-meta {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Ajustement Mobile pour ton Samsung */
|
||||
@media (max-width: 480px) {
|
||||
.hero-flex {
|
||||
gap: 10px; /* Gap plus serré sur téléphone */
|
||||
padding: 80px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user