9caf11c8ab
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- Structure par section : /numerique, /economique, /citoyenne (plus de /gestation) - Chaque section a index + sous-pages avec contenu YAML administrable - API content supporte les chemins imbriqués ([...path]) - Admin : liste des pages + éditeur par section - Page /economique : monnaie libre (picto Ğ1), modèle éco, productions collectives, commande livre - Page /citoyenne : decision (CTA Glibredecision), tarifs-eau (CTA SejeteralO) - BookActions : composant partagé (player, PDF, chapitres, commande) sur home, eco et modele-eco - GrateWizard remonté dans la section économique de la home - Palette été par défaut, choix persisté en localStorage - Fix lisibilité été (text-white/65 + variables CSS) - Shadoks thématiques sur toutes les pages (8-10 par page, métiers variés) - Redirections 301 : /gestation/*, /modele-eco/*, /decision, /lire/* - README, CONTRIBUTING, CLAUDE.md mis à jour Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<div class="section-padding">
|
|
<div class="container-content">
|
|
<div class="mx-auto max-w-2xl">
|
|
<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">
|
|
{{ content?.kicker }}
|
|
</p>
|
|
|
|
<h1 class="font-display text-3xl font-bold mb-4 text-center" 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))">
|
|
{{ content?.description }}
|
|
</p>
|
|
|
|
<!-- Content -->
|
|
<div v-if="content?.content" class="prose-block mb-8">
|
|
<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">
|
|
<a
|
|
v-for="link in content.links"
|
|
:key="link.href"
|
|
:href="link.href"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="link-card group"
|
|
>
|
|
<div class="link-icon">
|
|
<div :class="`i-lucide-${link.icon ?? 'external-link'} h-4 w-4`" />
|
|
</div>
|
|
<span class="text-sm font-medium" style="color: hsl(var(--color-text))">{{ link.label }}</span>
|
|
<div class="i-lucide-arrow-up-right h-3.5 w-3.5 ml-auto text-primary/40 group-hover:text-primary transition-colors" />
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: content } = await usePageContent('economique/monnaie-libre')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Monnaie libre',
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.g1-icon {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 1.75rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.section-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border-radius: 1rem;
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
border: 1px solid hsl(var(--color-primary) / 0.2);
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.prose-block {
|
|
padding: 1.5rem;
|
|
border-radius: 0.75rem;
|
|
background: hsl(var(--color-surface));
|
|
}
|
|
|
|
.link-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid hsl(var(--color-primary) / 0.1);
|
|
background: hsl(var(--color-surface));
|
|
text-decoration: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.link-card:hover {
|
|
border-color: hsl(var(--color-primary) / 0.25);
|
|
}
|
|
|
|
.link-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 0.375rem;
|
|
background: hsl(var(--color-primary) / 0.1);
|
|
color: hsl(var(--color-primary));
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|