LeSite on LaDoc

Fonctionnalités

Mon, 01 Jan 0001 00:00:00 +0000

Fonctionnalités#

Le site s’adresse au grand public : personnes curieuses de la démarche, futures participantes d’ateliers, organisations intéressées. Voici ses pages, dans l’ordre où un visiteur les découvre.

Accueil#

Une page d’accueil riche et interactive qui raconte la démarche systémique : fond animé en réseau, diagramme de l’iceberg, boucles systémiques, carte des liens, parcours en U. L’objectif est de faire comprendre la fresque avant même d’y participer.

Agenda des événements#

/evenements : la liste des ateliers ouverts au public, avec filtres et carte interactive (Leaflet).
/evenements/[slug] : la fiche d’un atelier avec description, animateur·ices, tarifs par tiers (solidaire, classique, soutien) et inscription en ligne. Le paiement se fait sur HelloAsso, puis la personne revient sur la page de confirmation du site.
Chaque fiche embarque des données structurées JSON-LD Event pour le référencement (Google, agrégateurs d’événements).

Les événements affichés sont ceux publiés dans LeHub ; les liens de partage générés dans LeHub pointent vers ces pages publiques.

Stack technique

Mon, 01 Jan 0001 00:00:00 +0000

Stack technique#

Technologies#

Couche	Technologie
Framework	Next.js 16 (App Router, sortie standalone)
Langage	TypeScript, React 19
Styles	Tailwind CSS 4
Carte	Leaflet / React-Leaflet (agenda des événements)
Session	NextAuth v5, en lecture seule du cookie posé par LeHub
E-mails	Resend (formulaire de contact)
Mesure d’audience	Plausible auto-hébergé (composant `Analytics`)
Infra	Docker Compose, Nginx, GitHub Actions

Structure du code#

app/ # une route par page publique
 page.tsx # accueil (sections interactives)
 evenements/ # agenda + fiche [slug]
 blog/ # actualités + article [slug]
 mediatheque/ ateliers/ a-propos/ contact/
 confirmation/ chantier/ accessibilite/ mentions-legales/
 api/ # contact, me, og, revalidate, site-mode
components/ # composants de pages (Header, Footer, PdfCarousel,
 # IcebergDiagram, SystemicLoops, ChantierBar…)
lib/
 config.ts # URLs et constantes
 events.ts # appels à l'API publique de LeHub
 hub-auth.ts # lecture du cookie de session LeHub (pont d'auth)
middleware.ts # mode chantier (réécriture vers /chantier)

Quelques routes API à connaître :

Modèle de données

Mon, 01 Jan 0001 00:00:00 +0000

Modèle de données#

LeSite n’a pas de base de données, et c’est un choix d’architecture : une seule source de vérité (LeHub), pas de synchronisation à maintenir, pas de contenu dupliqué qui divergerait.

Ce que LeSite consomme#

Tout le contenu dynamique vient de l’API publique de LeHub :

Endpoint	Contenu	Utilisé par
`GET /api/public/articles`	Liste des actualités publiées	`/blog`
`GET /api/public/articles/[slug]`	Un article complet	`/blog/[slug]`
`GET /api/public/resources`	La médiathèque publique	`/mediatheque`
`GET /api/public/workshops/[slug]`	Une fiche atelier	`/evenements/[slug]`

Les objets reçus sont volontairement pauvres en données personnelles. Par exemple, un article arrive avec deux champs calculés côté LeHub : l’avatar de l’auteur et sa tagline (ou son rôle associatif). LeSite ne connaît jamais l’e-mail, le téléphone ou le profil complet d’un membre.

Lancer en local

Mon, 01 Jan 0001 00:00:00 +0000

Lancer en local#

Prérequis#

Node.js 20 ou plus récent

Pas de base de données à installer : le contenu vient de l’API publique de LeHub (celle de production par défaut, ou d’un LeHub local si vous en faites tourner un).

Installation#

git clone <dépôt LeSite>
cd LeSite

# créer .env.local avec les variables ci-dessous

npm install
npm run dev # http://localhost:3000

Variables d’environnement#

Variable	Rôle
`NEXT_PUBLIC_SITE_URL`	URL publique du site
`NEXT_PUBLIC_HUB_URL`	URL du LeHub à interroger
`NEXT_PUBLIC_ALLOW_INDEXING`	`true` pour autoriser l’indexation par les moteurs ; toute autre valeur laisse le site en `noindex`
`NEXTAUTH_SECRET`	Doit être strictement identique à celui de LeHub, sinon le pont d’auth ne reconnaît personne
`REVALIDATE_SECRET`	Secret partagé avec LeHub pour la revalidation à la demande
`RESEND_API_KEY`	Envoi du formulaire de contact
`CONTACT_EMAIL`	Destinataire du formulaire de contact

Les variables NEXT_PUBLIC_* sont inlinées dans le JavaScript au moment du build (elles passent en arguments de build dans Docker). Changer une URL ou activer l’indexation demande donc de reconstruire l’image, pas seulement de redémarrer le conteneur.

Déploiement

Mon, 01 Jan 0001 00:00:00 +0000

Déploiement#

Le pipeline#

Comme LeHub, LeSite se déploie automatiquement à chaque push sur main via GitHub Actions : connexion SSH au VPS, git pull, docker compose build --no-cache, docker compose up -d, reload de Nginx.

Il n’y a pas d’étape de migration : LeSite n’a pas de base de données.

L’image et le build#

Le build Next.js est en sortie standalone. Point d’attention principal : les variables NEXT_PUBLIC_* (URLs publiques, autorisation d’indexation) sont passées en arguments de build dans docker-compose.yml et figées dans le bundle. Tout changement de ces valeurs passe par un rebuild de l’image.