AnimSpi

Site de fiches pédagogiques de la Mission Populaire Évangélique de France, élaborées collectivement par les animateurices.

Frontend Eleventy 3.x (ESM) — les données sont servies par un repo séparé data_animspi_org et consommées via fetch HTTP au moment du build.

Prérequis

• Node.js ≥ 18
• Le repo data_animspi_org lancé en local sur le port 8085

# Dans ../animspidata_kouzheran_fr/
npx eleventy --serve --port=8085

Commandes

npm install       # installer les dépendances
npm run dev       # build + serveur local → http://localhost:8081/
npm run build     # build statique → dist/

Pour forcer une source de données différente :

ANIMATIONS_DATA_URL=https://mon-endpoint.example/ npm run build

Architecture

Flux de données

animspidata_kouzheran_fr
  └── dist/*.json              ← JSON générés par le repo de données
         ↓ fetch HTTP
src/_data/*.mjs                ← data functions 11ty
         ↓
collections.*                  ← utilisées dans les templates

Types de fiches

Collection	Description
animations	Techniques d'animation
outils	Outils et méthodes
ressources	Ressources documentaires
aides	Fiches d'aide pratique

La collection fiches fusionne les 4 types et trie par maturité (brouillon → en cours → aboutie). Les fiches au statut non publié sont exclues.

URLs générées

URL	Template
/	src/index.njk
/fiches/	src/fiches.njk
/fiches/[type]/[id]-[slug]/	src/fiche.njk
/mentions-legales/	src/mentions-legales.njk
/404.html	src/404.njk

Layouts

• src/_includes/_layouts/default.njk — layout général (header, footer, CSS inline via cssmin)
• src/_includes/_layouts/default-fiche.njk — layout autonome pour les fiches : CSS embarqué, typographie éditoriale

Composants

• src/_includes/components/head.njk
• src/_includes/components/header.njk
• src/_includes/components/footer.njk
• src/_includes/components/search.njk

CSS

Fichier	Rôle
tokens.css	Variables CSS (couleurs, gradients, ombres, radius)
base.css	Reset, typographie, layout global
header.css	Header
footer.css	Footer
breadcrumb.css	Fil d'Ariane
search.css	Composant recherche
partenaires.css	Bloc partenaires
home.css	Page d'accueil
fiches.css	Page /fiches/
fiches-controls.css	Filtres et contrôles de la page /fiches/
fiche.css	Page fiche individuelle
legal.css	Page mentions légales
404.css	Page 404

Recherche

La recherche plein texte est assurée par Pagefind. L'index est généré automatiquement après chaque build via le hook eleventy.after.

Repos liés

Repo	Rôle
data_animspi_org	Fiches Markdown + génération du JSON + assets media
animspi_org (ce repo)	Frontend — pages HTML générées par 11ty

Statistiques

Umami Analytics

Conventions

• HTML/CSS : méthodologie BEM
• Templates : Nunjucks
• Logique de données : mécanismes natifs 11ty

Licences

Code applicatif — Apache License 2.0 Le code source de ce site (templates, configuration, CSS, JavaScript) est publié sous licence Apache 2.0.

Fiches pédagogiques produites par la Mission Populaire Évangélique de France — CC BY-SA 4.0 Les fiches réalisées par la MPEF sont publiées sous licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.

Fiches d'autres contributeurs Les fiches produites par des organisations partenaires ou des auteurs tiers sont soumises à leurs propres licences, indiquées le cas échéant dans le frontmatter de chaque fiche. En l'absence d'indication, se rapprocher du contributeur concerné.