eleventy-dsfr

Un dépôt pour démarrer un site statique au DSFR avec le générateur Eleventy, déployé pour démonstration sur GitHub Pages. Pour d'autres exemples de réutilisation, cf. Démonstration et réutilisations.

Fonctionnalités

• Style :
  • DSFR :
    • Installation et mise à jour automatique via npm.
    • Voir les composants déjà implémentés
  • Voir les mises en pages déjà implémentées
• a11y et responsivity : Respecte les recommandations du DSFR.
• i18n : Prise en charge de l'internationalisation des textes et contenus via plusieurs filtres et le système d'i18n d'Eleventy.
• Navigation : Utilise le système de navigation d'Eleventy et gère la navigation de second niveau.
• Syntaxe markdown : Améliorée via l'ajout de conteneurs personnalisés.
• Images : Utilise l'utilitaire d'image d'Eleventy pour traiter les images (par défaut pour certains composants, par exemple le composant card.njk).
• Recherche : Utilise pagefind pour la recherche.
• Pagination : Utilise le système de pagination d'Eleventy et gère la pagination de second niveau.
• Flux RSS : Utilise le plugin RSS d'Eleventy.
• Calendrier : Utilise la bibliothèque ics pour générer un calendrier calendar.ics à la racine du site, ainsi que les événements .ics associés, à partir d'événements.
• Mesure d'audience : Intègre la solution matomo.
• Pages déjà générées :
  • Pages d'accueil, À propos, section Blog (en français et en anglais).
  • Flux RSS pour Atom et JSON
  • Plan du site et sitemap.xml
  • Page non trouvée (404)
  • Les pages obligatoires liées aux obligations légales : “accessibilité : non/partiellement/totalement conforme”, mentions légales, données personnelles et gestion des cookies.

Prise en main

Installation

Cloner le dépôt :

git clone https://github.com/codegouvfr/eleventy-dsfr.git my-site-name

Naviguer dans le dossier :

cd my-site-name

Installer les dépendances :

npm install

Exécuter Eleventy :

Construire un livrable, indexé avec pagefind pour la recherche :

npm run build

L'exécuter sur le serveur de développement local :

npm start

Ou exécuter un mode de débogage.

Réutilisation

• Modifier les fichiers _data/metadata.js et _data/data.js pour renseigner les informations du site.
• Modifier le fichier package.json pour modifier les informations du dépôt.
• Compléter les pages obligatoires : content/fr/accessibility, content/fr/personal-data, content/fr/legal.

Développement

• Modifier le fichier eleventy.config.js pour configurer les paramètres d'Eleventy différemment.
• Ajouter des composants du DSFR dans le dossier _includes/components et des mises en page dans le dossier _includes/layouts.
  • Ajouter de nouveaux conteneurs markdown dans le fichier markdown-custom-containers.js.

Voir aussi la documentation des composants

• Ajouter des chaînes de caractères localisées dans le dossier _data/i18n/[lang]/index.js.
  • Pour ajouter une nouvelle traduction, ajouter un dossier [lang] dans content, un nouveau fichier _data/i18n/[lang]/index.js et l'inclure dans _data/i18n/index.js.
• Ajouter des styles personnalisés et des images dans le dossier public.
  • Celui-ci sera copié tel quel dans le dossier de sortie. Cela signifie que ./public/css/* persistera dans ./_site/css/* après la construction du livrable.
• Compléter le README et la documentation. 😀

Ajout de contenu

Voir la documentation des fonctionnalités et du Markdown

Déploiement

• Voir un exemple de worklow de déploiement sur GitHub Pages sur la branche gh-pages.

En cas d'erreur lors du build :

Error: Get Pages site failed
Error: HttpError: Not Found

Essayer cette configuration.

• [OPTIONNEL] Configurer la redirection de toutes les URLs des pages dont la langue est celle par défaut.

Documentation

La suite de la documentation (composants, fonctionnalités) est disponible dans content/fr/blog/posts ou directement sur le site de démonstration.

Démonstration et réutilisations

Pour une démonstration, voir la GitHub Pages correspondante.

• Site de la mission logiciels libres de la DINUM (code source : https://github.com/codegouvfr/codegouvfr-website).
• Site du cadre de cohérence technique du MI (code source : https://github.com/dnum-mi/cct-mi)
• Site de documentation pour cartes.gouv.fr (code source : https://github.com/IGNF/cartes.gouv.fr-documentation)
• Partie blog du site de DiaLog (code source : https://github.com/MTES-MCT/dialog/tree/main/blog)
• Site de la start-up Médiation Logement (code source : https://github.com/betagouv/mediation-logement)

Licence

Le dépôt est publié sous licence MIT pour le code et sous licence Etalab 2.0 pour les autres contenus.

Il est maintenu par la mission logiciels libres de la DINUM.

Crédits images

• 1F3DB.svg par Martin Wehl sous licence CC BY-SA 4.0.