Vouvoiement, libreDecision : bouton + URL

- Vouvoiement partout dans les pages numerique (cloud-libre, logiciel-libre, wot)
- Bouton "Ouvrir libreDecision" dans home AxisBlock (Décision collective)
  - AxisAction supporte href pour liens externes
  - URL prod : decision.librodrome.org
- Labels "Ouvrir libreDecision" (sans Ğ) dans citoyenne/index et [slug]
- app.config.ts : URL prod libredecision mise à jour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-23 02:37:42 +01:00
parent b9e6b4a96c
commit 99a8b84164
8 changed files with 283 additions and 60 deletions

View File

@@ -21,7 +21,7 @@ export default defineAppConfig({
},
},
libredecision: {
url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.laplank.org',
url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.librodrome.org',
},
sejeteral0: {
url: import.meta.dev ? 'http://localhost:3009' : 'https://collectivites.librodrome.org',

View File

@@ -52,16 +52,18 @@
<div v-if="item.actions?.length" class="axis-actions">
<!-- Primary row -->
<div class="axis-actions-row">
<button
<component
:is="action.href ? 'a' : 'button'"
v-for="action in primaryActions(item.actions)"
:key="action.id"
v-bind="action.href ? { href: action.href, target: '_blank', rel: 'noopener noreferrer' } : {}"
class="axis-action-btn"
:class="{ 'axis-action-btn--highlight': action.highlight }"
@click.stop="handleAction(action.id)"
@click.stop="!action.href && handleAction(action.id)"
>
<div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
{{ action.label }}
</button>
</component>
</div>
<!-- Secondary row -->
<div v-if="secondaryActions(item.actions).length" class="axis-actions-secondary">
@@ -91,6 +93,7 @@ interface AxisAction {
highlight?: boolean
secondary?: boolean
to?: string
href?: string
}
interface AxisItem {

View File

@@ -1,25 +1,67 @@
<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">
<div :class="`i-lucide-${content?.icon ?? 'landmark'}`" 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))">
<h1 class="font-display text-3xl font-bold mb-4" style="color: hsl(var(--color-text))">
{{ content?.title ?? slug }}
</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>
<!-- Features grid (for decision page) -->
<div v-if="content?.features" class="grid gap-4 sm:grid-cols-2 mb-12">
<!-- 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="/citoyenne" class="ctx-nav-btn ctx-nav-index">
<div class="i-lucide-layout-grid h-4 w-4" />
<span>Citoyenne</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>
<!-- Features grid -->
<div
v-if="content?.features"
id="section-features"
class="grid gap-4 sm:grid-cols-2 mb-12 max-w-2xl mx-auto section-anchor"
>
<div v-for="feature in content.features" :key="feature.title" class="feature-card">
<div class="feature-icon">
<div :class="`i-lucide-${feature.icon} h-5 w-5`" />
@@ -30,7 +72,11 @@
</div>
<!-- Project card -->
<div v-if="content?.project" class="project-card mb-8">
<div
v-if="content?.project"
id="section-project"
class="project-card mb-8 max-w-2xl mx-auto section-anchor"
>
<div class="project-icon">
<div class="i-lucide-rocket h-5 w-5" />
</div>
@@ -47,27 +93,30 @@
</div>
<!-- Extended content -->
<div v-if="content?.content" class="prose-block mb-10">
<div
v-if="content?.content"
id="section-content"
class="prose-block mb-10 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>
<div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
<!-- Actions -->
<div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center mb-4">
<UiBaseButton v-if="slug === 'decision'" :href="decisionUrl" target="_blank">
<div class="i-lucide-external-link mr-2 h-4 w-4" />
Ouvrir Glibredecision
Ouvrir libreDecision
</UiBaseButton>
<UiBaseButton v-if="slug === 'tarifs-eau'" :href="sejeteral0Url" target="_blank">
<div class="i-lucide-external-link mr-2 h-4 w-4" />
Lancer SejeteralO
</UiBaseButton>
<UiBaseButton variant="ghost" to="/citoyenne">
<div class="i-lucide-arrow-left mr-2 h-4 w-4" />
Autonomie citoyenne
</UiBaseButton>
</div>
</div>
</div><!-- /sections-area -->
</div>
</div>
</template>
@@ -76,15 +125,35 @@
const route = useRoute()
const slug = route.params.slug as string
const { data: content } = await usePageContent(`citoyenne/${slug}`)
const [{ data: content }, { data: homeData }] = await Promise.all([
usePageContent(`citoyenne/${slug}`),
usePageContent('home'),
])
const appConfig = useAppConfig()
const decisionUrl = (appConfig.libredecision as { url: string })?.url ?? '#'
const sejeteral0Url = (appConfig.sejeteral0 as { url: string })?.url ?? '#'
useHead({
title: content.value?.meta?.title ?? slug,
// Sommaire
const sommaire = computed(() => {
const entries: { title: string; id: string }[] = []
if ((content.value?.features as unknown[])?.length) entries.push({ title: 'Fonctionnalités', id: 'section-features' })
if (content.value?.project) entries.push({ title: (content.value.project as { name: string }).name, id: 'section-project' })
if (content.value?.content) entries.push({ title: 'En savoir plus', id: 'section-content' })
return entries
})
// Prev / next dans la section citoyenne
interface AxisItem { label: string; to?: string; icon?: string }
const politiqueItems = computed<AxisItem[]>(
() => (homeData.value as Record<string, unknown> | null)?.axes?.politique?.items as AxisItem[] ?? [],
)
const currentPath = `/citoyenne/${slug}`
const currentIdx = computed(() => politiqueItems.value.findIndex(i => i.to === currentPath))
const prevItem = computed(() => currentIdx.value > 0 ? politiqueItems.value[currentIdx.value - 1] : null)
const nextItem = computed(() => currentIdx.value < politiqueItems.value.length - 1 ? politiqueItems.value[currentIdx.value + 1] : null)
useHead({ title: content.value?.meta?.title ?? slug })
</script>
<style scoped>
@@ -156,4 +225,149 @@ useHead({
border-radius: 0.75rem;
background: hsl(var(--color-surface));
}
.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>

View File

@@ -363,7 +363,7 @@
<div class="item-actions">
<a :href="decisionUrl" target="_blank" rel="noopener" class="action-btn action-btn--primary">
<div class="i-lucide-external-link h-3.5 w-3.5" />
Ouvrir Glibredecision
Ouvrir libreDecision
</a>
</div>
</div>

View File

@@ -109,6 +109,12 @@ axes:
description: Se donner les moyens de la décision collective.
to: /citoyenne/decision
icon: gavel
actions:
- id: open-libredecision
label: Ouvrir libreDecision
icon: external-link
highlight: true
href: https://decision.librodrome.org
- label: Tarifs de l'eau
description: Application pour obtenir justice sociale et incitation dynamique à la réduction. Permet de confier la
décision à la population des communes.

View File

@@ -24,19 +24,19 @@ sections:
title: Mots de passe
text: >
Stockés côté serveur, volés par millions. Have I Been Pwned recense
des milliards de comptes compromis. Ta sécurité dépend intégralement
de la sécurité d'un tiers que tu ne contrôles pas.
des milliards de comptes compromis. Votre sécurité dépend intégralement
de la sécurité d'un tiers que vous ne contrôlez pas.
- icon: chrome
title: "Se connecter avec Google"
text: >
Déléguer l'authentification à Google ou Meta, c'est en faire l'infrastructure
d'identité mondiale. Un compte suspendu = toutes tes connexions coupées.
Ces entreprises savent quand, où et à quoi tu te connectes.
d'identité mondiale. Un compte suspendu = toutes vos connexions coupées.
Ces entreprises savent quand, où et à quoi vous vous connectez.
- icon: fingerprint
title: Biométrie — irrévocable
text: >
Un mot de passe compromis se change. Une empreinte digitale jamais.
Si tes données biométriques sont volées — et elles l'ont été
Si vos données biométriques sont volées — et elles l'ont été
(OPM breach USA 2015, 5,6 millions d'empreintes) — la compromission est définitive.
- icon: building-2
title: Autorités de Certification (X.509)
@@ -49,22 +49,22 @@ sections:
title: Comment fonctionne une Web of Trust
steps:
- n: 1
title: Générer une paire de clés sur ta machine
title: Générer une paire de clés sur votre machine
text: >
Clé privée (secrète, ne quitte jamais ton appareil) et clé publique
Clé privée (secrète, ne quitte jamais votre appareil) et clé publique
(diffusée librement). Ce qui est signé avec la clé privée peut être
vérifié par n'importe qui avec la clé publique.
tip: "Algorithme recommandé : Ed25519 — clé courte, rapide, sans paramètres douteux"
- n: 2
title: Publier ta clé publique
title: Publier votre clé publique
text: >
Dans un DID Document, sur un keyserver, dans ton profil Duniter.
N'importe qui peut vérifier tes signatures. Personne ne peut usurper
ton identité sans ta clé privée.
Dans un DID Document, sur un keyserver, dans votre profil Duniter.
N'importe qui peut vérifier vos signatures. Personne ne peut usurper
votre identité sans votre clé privée.
- n: 3
title: Être certifié par des membres certifiés
text: >
Dans Duniter, 5 membres certifiés (sigQty=5) certifient que tu es une personne réelle,
Dans Duniter, 5 membres certifiés (sigQty=5) certifient que vous êtes une personne réelle,
dans un rayon de 3 sauts du nœud sentinelle (stepMax=3).
La confiance émerge du graphe — pas d'un serveur central.
- n: 4
@@ -78,7 +78,7 @@ sections:
text: >
La même clé permet de s'authentifier à des services
et de signer des actes (documents, transactions, votes).
Tout ce que tu fais est vérifiable. Rien n'est transmissible à ton insu.
Tout ce que vous faites est vérifiable. Rien n'est transmissible à votre insu.
- type: insight
title: Le seul système sans autorité centrale ni biométrie

View File

@@ -6,8 +6,8 @@ title: Cloud libre
icon: cloud
description: >
Tes données vivent dans des datacenters dont tu ne connais pas l'adresse,
sous des juridictions que tu ne contrôles pas. Sortir de là est possible —
Vos données vivent dans des datacenters dont vous ne connaissez pas l'adresse,
sous des juridictions que vous ne contrôlez pas. Sortir de là est possible —
en trois paliers : auto-hébergement, services fédérés, architectures décentralisées.
Ces dernières émergent à peine.
@@ -23,13 +23,13 @@ sections:
- icon: shield
title: RGPD — conformité structurelle
text: >
Google, Amazon, Microsoft stockent tes données sous juridiction américaine (CLOUD Act).
Google, Amazon, Microsoft stockent vos données sous juridiction américaine (CLOUD Act).
L'auto-hébergement ou un hébergeur associatif européen offre
une conformité RGPD structurelle — pas seulement déclarative.
- icon: eye-off
title: Vie privée des données
text: >
Dans un cloud commercial, tes documents, photos et communications
Dans un cloud commercial, vos documents, photos et communications
sont analysés, profilés, monétisés. Ce n'est pas une théorie —
c'est le modèle économique déclaré.
- icon: zap
@@ -40,10 +40,10 @@ sections:
Héberger chez soi ou mutualiser dans un hébergeur associatif
réduit l'empreinte réelle.
- icon: key
title: Propriété réelle de tes données
title: Propriété réelle de vos données
text: >
Un service cloud peut fermer, changer ses CGU, couper ton compte.
Tes données te reviennent quand tu les héberges toi-même —
Un service cloud peut fermer, changer ses CGU, couper votre compte.
Vos données vous reviennent quand vous les hébergez vous-même —
portabilité réelle, pas juste un bouton "Exporter".
- icon: git-branch
title: Résilience décentralisée
@@ -60,7 +60,7 @@ sections:
icon: server
badge: Maîtrise totale
text: >
Ton propre serveur chez toi ou chez un hébergeur associatif.
Votre propre serveur chez vous ou chez un hébergeur associatif.
Contrôle absolu, RGPD pleinement compatible.
YunoHost installe plus de 200 applications libres en un clic.
tools:
@@ -74,8 +74,8 @@ sections:
badge: Interconnecté
text: >
Des instances indépendantes interconnectées via des protocoles ouverts
(ActivityPub, Matrix). Tu rejoins un serveur de confiance
ou héberges le tien. Les données restent chez l'opérateur choisi.
(ActivityPub, Matrix). Vous rejoignez un serveur de confiance
ou hébergez le vôtre. Les données restent chez l'opérateur choisi.
tools:
- "Mastodon — réseau social fédéré"
- "PeerTube — vidéo hébergée et fédérée"
@@ -175,7 +175,7 @@ sections:
C'est une tension réelle, non résolue, que le législateur européen commence à instruire
(lignes directrices CEPD 02/2025).
points:
- "Auto-hébergement : conformité RGPD totale — tu effaces ce que tu veux"
- "Auto-hébergement : conformité RGPD totale — vous effacez ce que vous voulez"
- "Services fédérés : dépend de l'opérateur de l'instance — choisir un hébergeur CHATONS"
- "IPFS / blockchain : chiffrer + détruire la clé (la donnée devient inintelligible). Accepté par la CNIL sous conditions strictes."
- "Off-chain data : stocker uniquement un hash sur la chaîne, les données personnelles sur un serveur effaçable — approche la plus propre"

View File

@@ -39,20 +39,20 @@ sections:
- icon: users
title: Bien commun
text: >
Le logiciel libre est un commun numérique. Tu n'es pas client, tu participes.
Le logiciel libre est un commun numérique. Vous n'êtes pas client, vous participez.
Cohérent avec l'économie du don — l'argent économisé sur les licences
peut financer des communs.
- icon: lock-open
title: Indépendance réelle
text: >
Pas de mise à jour forcée qui casse le système. Pas d'abonnement qui expire
et verrouille tes fichiers. Ton OS t'appartient vraiment.
et verrouille vos fichiers. Votre OS vous appartient vraiment.
- icon: bot
title: Assistance permanente gratuite
text: >
Un LLM open source installé localement (Ollama + phi3:mini, 4 Go de RAM)
peut rédiger les commandes shell dans ton terminal sur simple demande en français.
Sans connexion à aucun serveur. Sans abonnement. Sans envoyer tes données.
peut rédiger les commandes shell dans votre terminal sur simple demande en français.
Sans connexion à aucun serveur. Sans abonnement. Sans envoyer vos données.
- type: fiche
title: "Fiche de migration — 6 étapes"
@@ -65,8 +65,8 @@ sections:
- n: 2
title: Tester sans risque — Live USB
text: >
Démarre Linux Mint depuis une clé USB. Tu explores, tu testes LibreOffice,
tu vérifies le WiFi — sans toucher à ton Windows existant.
Démarrez Linux Mint depuis une clé USB. Vous explorez, testez LibreOffice,
vérifiez le WiFi — sans toucher à votre Windows existant.
tip: "Créer la clé : balenaEtcher (gratuit) + image Linux Mint sur linuxmint.com"
- n: 3
title: Choisir sa distribution
@@ -77,8 +77,8 @@ sections:
- n: 4
title: Installer — double-boot ou remplacement
text: >
Double-boot si tu veux garder Windows le temps de la transition.
Remplacement complet quand tu es prêt·e — c'est le vrai départ.
Double-boot si vous voulez garder Windows le temps de la transition.
Remplacement complet quand vous êtes prêt·e — c'est le vrai départ.
- n: 5
title: Installer ses équivalents libres
text: >
@@ -175,9 +175,9 @@ sections:
- type: llm
title: Un assistant shell local — sans cloud
text: >
Un petit LLM open source sur ta machine répond à tes questions sur les commandes Linux
Un petit LLM open source sur votre machine répond à vos questions sur les commandes Linux
en langage naturel, sans envoyer aucune donnée à un serveur distant.
Il suggère. Toi tu décides.
Il suggère. Vous décidez.
tool: Ollama
tool_url: https://ollama.com
model: "phi3:mini"
@@ -187,7 +187,7 @@ sections:
- "ollama pull phi3:mini"
- "ollama run phi3:mini \"Comment trouver les fichiers modifiés depuis 7 jours ?\""
rules:
- Lis chaque commande avant de l'exécuter — le LLM suggère, tu valides
- Lisez chaque commande avant de l'exécuter — le LLM suggère, vous validez
- "Utilise --dry-run ou -n quand disponible (rsync, make…)"
- Pour les commandes root/sudo, vérification manuelle obligatoire
- "Préfère phi3:mini ou qwen2.5-coder — pas les modèles uncensored"