syoul/librodrome
1
0
Fork 0
forked from EHV/librodrome
Code Pull Requests Activity

Page événement : contenu structuré axes/espaces/config depuis PDF Genèse

Browse Source 
- evenement.yml : kicker, titre, subtitle, leitmotiv, tagline, gestation,
  description, 3 axes (numérique/économique/politique), 6 espaces, 4 config
- evenement.vue : hero complet (shadoks, logo SVG inline, badges), sections
  axes/espaces/config, styles scoped responsive
- bookplayer.config.yml → slugs 06-produire/07-echanger déjà commités
- Ajout Librodrome-Logo.png + librodrome-logo.svg (vectorisation en cours)
- Ajout PDF genèse en public/pdf/
- .gitignore, CLAUDE.md, BookSection, économique : ajustements session

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-23 04:08:00 +01:00
parent 99a8b84164
commit efed0b9033
11 changed files with 722 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/pages/economique/index.vue
View File

@@ -387,7 +387,8 @@
<div class="mx-auto max-w-3xl flex flex-col gap-8">
<!-- Monnaie libre -->
<NuxtLink to="/economique/monnaie-libre" class="item-card group">
<NuxtLink to="/economique/monnaie-libre" class="item-card g1-card group">
<span class="g1-watermark" aria-hidden="true">Ğ1</span>
<div class="item-header">
<div class="item-icon">
<span class="g1-icon">Ğ1</span>
@@ -408,6 +409,7 @@
<!-- Modèle économique — bloc livre -->
<div class="book-block">
<HomeBookSection
compact
@open-player="showBookPlayer = true"
@open-pdf="showPdfReader = true"
/>
@@ -520,12 +522,48 @@ const showPdfReader = ref(false)
}
.book-block {
padding: 1.5rem;
padding: 1.25rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--color-text) / 0.08);
background: hsl(var(--color-surface));
}
/* Monnaie libre card */
.g1-card {
position: relative;
overflow: hidden;
background: linear-gradient(
135deg,
hsl(var(--color-surface)) 60%,
hsl(var(--color-primary) / 0.06) 100%
);
border-color: hsl(var(--color-primary) / 0.14);
}
.g1-card:hover {
border-color: hsl(var(--color-primary) / 0.3);
}
.g1-watermark {
position: absolute;
right: -0.25rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 900;
font-size: 5.5rem;
line-height: 1;
color: hsl(var(--color-primary) / 0.07);
pointer-events: none;
user-select: none;
letter-spacing: -0.02em;
transition: color 0.2s;
}
.g1-card:hover .g1-watermark {
color: hsl(var(--color-primary) / 0.11);
}
/* Shadok illustrations */
.shadok {
position: absolute;

243
app/pages/economique/monnaie-libre.vue
View File

@@ -1,33 +1,79 @@
<template>
<div class="section-padding">
<div class="container-content">
<div class="mx-auto max-w-2xl">
<!-- Header -->
<div class="mx-auto max-w-2xl text-center mb-8">
<div class="section-icon mx-auto mb-6">
<span v-if="content?.icon === 'g1'" class="g1-icon">Ğ1</span>
<div v-else :class="`i-lucide-${content?.icon ?? 'coins'}`" class="h-12 w-12" />
</div>
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">
{{ content?.kicker }}
</p>
<h1 class="font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
<h1 class="font-display text-3xl font-bold mb-4" style="color: hsl(var(--color-text))">
{{ content?.title }}
</h1>
<p class="text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">
<p class="text-lg leading-relaxed" style="color: hsl(var(--color-text-muted))">
{{ content?.description }}
</p>
</div>
<!-- Navigation prev / index / next -->
<nav class="ctx-nav mx-auto max-w-2xl mb-10">
<NuxtLink v-if="prevItem?.to" :to="prevItem.to" class="ctx-nav-btn ctx-nav-prev">
<div class="i-lucide-arrow-left h-4 w-4 shrink-0" />
<span>{{ prevItem.label }}</span>
</NuxtLink>
<div v-else class="ctx-nav-spacer" />
<NuxtLink to="/economique" class="ctx-nav-btn ctx-nav-index">
<div class="i-lucide-layout-grid h-4 w-4" />
<span>Économique</span>
</NuxtLink>
<NuxtLink v-if="nextItem?.to" :to="nextItem.to" class="ctx-nav-btn ctx-nav-next">
<span>{{ nextItem.label }}</span>
<div class="i-lucide-arrow-right h-4 w-4 shrink-0" />
</NuxtLink>
<div v-else class="ctx-nav-spacer" />
</nav>
<!-- Zone sections — relative pour ancrer le sidebar -->
<div class="sections-area">
<!-- Sidebar sommaire -->
<aside v-if="sommaire.length > 1" class="page-sidebar">
<nav class="sommaire-sidebar">
<p class="sommaire-sidebar-title">Sur cette page</p>
<ol class="sommaire-sidebar-list">
<li v-for="(entry, ei) in sommaire" :key="ei">
<a :href="`#${entry.id}`" class="sommaire-sidebar-link">
<span class="sommaire-n">{{ ei + 1 }}</span>
<span>{{ entry.title }}</span>
</a>
</li>
</ol>
</nav>
</aside>
<!-- Content -->
<div v-if="content?.content" class="prose-block mb-8">
<div
v-if="content?.content"
id="section-content"
class="prose-block mb-8 max-w-2xl mx-auto section-anchor"
>
<p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
{{ content.content }}
</p>
</div>
<!-- External links -->
<div v-if="content?.links" class="flex flex-col gap-3 mb-10">
<div
v-if="content?.links"
id="section-links"
class="flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
>
<a
v-for="link in content.links"
:key="link.href"
@@ -44,23 +90,37 @@
</a>
</div>
<div class="text-center">
<UiBaseButton variant="ghost" to="/economique">
<div class="i-lucide-arrow-left mr-2 h-4 w-4" />
Autonomie économique
</UiBaseButton>
</div>
</div>
</div><!-- /sections-area -->
</div>
</div>
</template>
<script setup lang="ts">
const { data: content } = await usePageContent('economique/monnaie-libre')
const [{ data: content }, { data: homeData }] = await Promise.all([
usePageContent('economique/monnaie-libre'),
usePageContent('home'),
])
useHead({
title: content.value?.meta?.title ?? 'Monnaie libre',
// Sommaire
const sommaire = computed(() => {
const entries: { title: string; id: string }[] = []
if (content.value?.content) entries.push({ title: 'La théorie', id: 'section-content' })
if ((content.value?.links as unknown[])?.length) entries.push({ title: 'Ressources', id: 'section-links' })
return entries
})
// Prev / next dans la section économique
interface AxisItem { label: string; to?: string; icon?: string }
const economieItems = computed<AxisItem[]>(
() => (homeData.value as Record<string, unknown> | null)?.axes?.economie?.items as AxisItem[] ?? [],
)
const currentPath = '/economique/monnaie-libre'
const currentIdx = computed(() => economieItems.value.findIndex(i => i.to === currentPath))
const prevItem = computed(() => currentIdx.value > 0 ? economieItems.value[currentIdx.value - 1] : null)
const nextItem = computed(() => currentIdx.value < economieItems.value.length - 1 ? economieItems.value[currentIdx.value + 1] : null)
useHead({ title: content.value?.meta?.title ?? 'Monnaie libre' })
</script>
<style scoped>
@@ -116,4 +176,149 @@ useHead({
color: hsl(var(--color-primary));
flex-shrink: 0;
}
.section-anchor {
scroll-margin-top: 5.5rem;
}
/* ── Navigation prev/next ── */
.ctx-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.5rem;
align-items: center;
}
.ctx-nav-spacer { min-width: 0; }
.ctx-nav-btn {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.875rem;
border-radius: 20px;
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
color: hsl(var(--color-text-muted));
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.08);
transition: all 0.15s;
min-width: 0;
}
.ctx-nav-btn:hover {
color: hsl(var(--color-primary));
border-color: hsl(var(--color-primary) / 0.25);
background: hsl(var(--color-primary) / 0.05);
}
.ctx-nav-prev { justify-content: flex-start; }
.ctx-nav-next { justify-content: flex-end; }
.ctx-nav-prev span,
.ctx-nav-next span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctx-nav-index {
justify-content: center;
background: hsl(var(--color-primary) / 0.08);
border-color: hsl(var(--color-primary) / 0.15);
color: hsl(var(--color-primary));
font-size: 0.75rem;
padding: 0.45rem 0.75rem;
white-space: nowrap;
flex-shrink: 0;
}
.ctx-nav-index:hover { background: hsl(var(--color-primary) / 0.15); }
@media (max-width: 480px) {
.ctx-nav { grid-template-columns: auto 1fr auto; }
.ctx-nav-prev span, .ctx-nav-next span { display: none; }
.ctx-nav-prev, .ctx-nav-next { padding: 0.5rem; }
}
/* ── Zone sections ── */
.sections-area {
position: relative;
}
/* ── Sidebar sommaire ── */
.page-sidebar {
display: none;
position: absolute;
top: 0;
right: 0;
width: 10.5rem;
height: 100%;
}
@media (min-width: 1300px) {
.page-sidebar { display: block; }
}
.sommaire-sidebar {
position: sticky;
top: 5.5rem;
padding: 0.875rem;
border-radius: 14px;
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.07);
}
.sommaire-sidebar-title {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: hsl(var(--color-text-muted));
margin: 0 0 0.6rem;
}
.sommaire-sidebar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sommaire-sidebar-link {
display: flex;
align-items: baseline;
gap: 0.45rem;
padding: 0.28rem 0.4rem;
border-radius: 8px;
text-decoration: none;
font-size: 0.75rem;
color: hsl(var(--color-text-muted));
line-height: 1.4;
transition: color 0.12s, background 0.12s;
}
.sommaire-sidebar-link:hover {
color: hsl(var(--color-primary));
background: hsl(var(--color-primary) / 0.06);
}
.sommaire-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: hsl(var(--color-primary) / 0.1);
color: hsl(var(--color-primary));
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
flex-shrink: 0;
}
</style>

279
app/pages/evenement.vue
View File

@@ -330,15 +330,106 @@
</svg>
<div class="container-content relative z-10 text-center">
<!-- Logo SVG vectoriel — inline pour currentColor -->
<div class="evt-logo-wrap mx-auto mb-6" aria-hidden="true">
<svg viewBox="0 0 64 80" fill="none" class="evt-logo">
<path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" opacity="0.12"/>
<path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
<path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"/>
</svg>
</div>
<p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
<h1 class="page-title font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
{{ content?.title }}
</h1>
<p class="mt-4 text-lg" style="color: hsl(var(--color-text-muted))">
<p v-if="evtContent?.subtitle" class="mt-2 text-base italic" style="color: hsl(var(--color-text-muted))">
{{ evtContent.subtitle }}
</p>
<p class="mt-4 text-lg leading-relaxed max-w-xl mx-auto" style="color: hsl(var(--color-text-muted))">
{{ content?.description }}
</p>
<!-- Leitmotiv -->
<div v-if="evtContent?.leitmotiv" class="mt-8 flex flex-col items-center gap-3">
<p class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
« {{ evtContent.leitmotiv }} »
</p>
<p v-if="evtContent?.tagline" class="font-mono text-sm tracking-widest uppercase" style="color: hsl(var(--color-primary))">
{{ evtContent.tagline }}
</p>
<span v-if="evtContent?.gestation" class="evt-gestation-badge">
<div class="i-lucide-flask-conical h-3.5 w-3.5" />
En gestation
</span>
</div>
</div>
</div>
<!-- ══ Contenu événement ══ -->
<section v-if="evtContent?.axes || evtContent?.espaces || evtContent?.config" class="evt-content section-padding">
<div class="container-content flex flex-col gap-14">
<!-- 3 axes -->
<div v-if="evtContent?.axes">
<h2 class="evt-section-title">Trois axes d'émancipation</h2>
<p class="evt-section-sub">« je subis — ou je m'affranchis »</p>
<div class="axes-grid">
<div v-for="(axe, i) in evtContent.axes" :key="i" class="axe-card">
<div class="axe-icon">
<div :class="`i-lucide-${axe.icon} h-5 w-5`" />
</div>
<h3 class="font-display text-lg font-bold mb-3" style="color: hsl(var(--color-text))">
{{ axe.label }}
</h3>
<ul class="axe-list">
<li v-for="(item, j) in axe.items" :key="j">
<div class="i-lucide-arrow-right h-3.5 w-3.5 shrink-0 mt-0.5" style="color: hsl(var(--color-primary))" />
<span>{{ item }}</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Espaces permanents -->
<div v-if="evtContent?.espaces">
<h2 class="evt-section-title">Espaces & programme</h2>
<p class="evt-section-sub">Chorégraphie séquencée de plénières, ateliers et espaces permanents</p>
<div class="espaces-grid">
<div v-for="(esp, i) in evtContent.espaces" :key="i" class="espace-card">
<div class="espace-icon">
<div :class="`i-lucide-${esp.icon} h-4 w-4`" />
</div>
<div>
<p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ esp.label }}</p>
<p class="text-xs mt-0.5 leading-relaxed" style="color: hsl(var(--color-text-muted))">{{ esp.desc }}</p>
</div>
</div>
</div>
</div>
<!-- Config -->
<div v-if="evtContent?.config">
<h2 class="evt-section-title">Format & lieu</h2>
<div class="config-grid">
<div v-for="(cfg, i) in evtContent.config" :key="i" class="config-card">
<div class="config-icon">
<div :class="`i-lucide-${cfg.icon} h-4 w-4`" />
</div>
<div>
<p class="font-semibold text-sm" style="color: hsl(var(--color-text))">{{ cfg.label }}</p>
<p class="text-xs mt-0.5" style="color: hsl(var(--color-text-muted))">{{ cfg.detail }}</p>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
@@ -347,9 +438,10 @@ definePageMeta({
})
const { data: content } = await usePageContent('evenement')
const evtContent = computed(() => content.value as Record<string, any> | null)
useHead({
title: content.value?.meta?.title ?? 'Évènement',
title: evtContent.value?.meta?.title ?? 'Évènement',
})
</script>
@@ -555,4 +647,187 @@ useHead({
display: none;
}
}
/* ── Logo SVG ── */
.evt-logo-wrap {
width: 4.5rem;
height: 4.5rem;
display: flex;
align-items: center;
justify-content: center;
color: hsl(var(--color-primary));
filter: drop-shadow(0 0 14px hsl(var(--color-primary) / 0.25));
}
.evt-logo {
width: 100%;
height: 100%;
}
/* ── Badge gestation hero ── */
.evt-gestation-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
background: hsl(var(--color-accent) / 0.12);
border: 1px solid hsl(var(--color-accent) / 0.25);
color: hsl(var(--color-accent));
font-size: 0.75rem;
font-weight: 600;
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
/* ── Section contenus événement ── */
.evt-content {
background: hsl(var(--color-bg));
}
.evt-section-title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 800;
color: hsl(var(--color-text));
margin-bottom: 0.25rem;
}
.evt-section-sub {
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: hsl(var(--color-primary));
margin-bottom: 1.5rem;
}
/* ── Axes ── */
.axes-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.axes-grid { grid-template-columns: repeat(3, 1fr); }
}
.axe-card {
padding: 1.5rem;
border-radius: 16px;
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.07);
transition: border-color 0.2s, box-shadow 0.2s;
}
.axe-card:hover {
border-color: hsl(var(--color-primary) / 0.25);
box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
}
.axe-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.625rem;
background: hsl(var(--color-primary) / 0.1);
color: hsl(var(--color-primary));
margin-bottom: 1rem;
}
.axe-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.axe-list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.82rem;
line-height: 1.5;
color: hsl(var(--color-text-muted));
}
/* ── Espaces ── */
.espaces-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.espaces-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.espaces-grid { grid-template-columns: repeat(3, 1fr); }
}
.espace-card {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem 1.25rem;
border-radius: 12px;
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.06);
transition: border-color 0.15s;
}
.espace-card:hover {
border-color: hsl(var(--color-accent) / 0.25);
}
.espace-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: hsl(var(--color-accent) / 0.1);
color: hsl(var(--color-accent));
flex-shrink: 0;
}
/* ── Config ── */
.config-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
.config-grid { grid-template-columns: repeat(4, 1fr); }
}
.config-card {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
border-radius: 12px;
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.06);
}
.config-icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 1.875rem;
border-radius: 0.5rem;
background: hsl(var(--color-primary) / 0.1);
color: hsl(var(--color-primary));
flex-shrink: 0;
}
</style>