contribute to eleventy-dsfr from codegouv-website

* add missing license * add components * add custom markdown containers * add search * some styling * some refactoring * some small fixes
codegouvfr · Jun 20, 2023 · d39508c · d39508c
1 parent ab97887
commit d39508c
Show file tree

Hide file tree

Showing 263 changed files with 1,333 additions and 6,667 deletions.
diff --git a/.github/workflows/preproduction.yml b/.github/workflows/preproduction.yml
diff --git a/README.md b/README.md
@@ -1,37 +1,212 @@
-[![Software License](https://img.shields.io/badge/Licence-MIT%2C%20Licence%20Ouverte-orange.svg?style=flat-square)](https://git.sr.ht/~codegouvfr/code.gouv.fr/tree/main/item/LICENSES)
+![build](https://img.shields.io/github/actions/workflow/status/codegouvfr/eleventy-dsfr/11ty-gh-pages.yml?label=deployed%20to%20gh-pages)
 
-![build-preprod](https://img.shields.io/github/actions/workflow/status/codegouvfr/codegouv-website/preproduction.yml?label=Deploiement%20en%20préprod)
-![build-prod](https://img.shields.io/github/actions/workflow/status/codegouvfr/codegouv-website/production.yml?label=Deploiement%20en%20prod)
+# eleventy-dsfr
 
-**Note** : Le dépôt de référence est [github.com/codegouvfr/codegouv-website](https://github.com/codegouvfr/codegouv-website). Il existe un mirroir [git.sr.ht/~codegouvfr/codegouv-website](https://git.sr.ht/~codegouvfr/codegouv-website) qui peut être utilisé pour les développements, mais il faut dans ce cas configurer votre remote pour push dans les deux dépôts à la fois. Soit :
-```bash
-git remote set-url origin --push --add [email protected]:codegouvfr/codegouv-website.git
-git remote set-url origin --push --add [email protected]:~codegouvfr/codegouv-website
+Un dépôt pour démarrer un site statique au [DSFR](https://www.systeme-de-design.gouv.fr/) avec le
+générateur [Eleventy](https://www.11ty.dev/).
+
+## Prise en main
+
+1. Cloner le dépôt :
+
+```
+git clone https://github.com/codegouvfr/eleventy-dsfr.git my-site-name
 ```
 
-# Site code.gouv.fr
+2. Naviguer dans le dossier :
 
-Ce dépôt contient les éléments nécessaires à la publication du site [code.gouv.fr](https://code.gouv.fr/).
+```
+cd my-site-name
+```
 
-Il a été construit à partir de [ce site modèle](https://github.com/codegouvfr/eleventy-dsfr/).
+3. Installer les dépendances :
 
-## Installation et lancement
+```
+npm install
+```
 
-- Installer les dépendances : `npm install`
-- Publier le site : `npm run build`
-- Publier et rendre le site disponible localement : `npm start`
+4. Exécuter Eleventy :
 
-## Déploiement
+Générer un livrable pour la production :
+
+```
+npx @11ty/eleventy
+```
+
+Ou construire un livrable sur le serveur de développement local :
+
+```
+npx @11ty/eleventy --serve
+```
+
+Ou exécuter un [mode de débogage](https://www.11ty.dev/docs/debugging/).
+
+## Réutilisation
+
+- Modifier le fichier `_data/metadata.js` pour renseigner les informations du site.
+- Compléter les pages obligatoires : `content/fr/accessibilite`, `content/fr/donnees-personnelles`, `content/fr/mentions-legales`
+- Ajouter du contenu dans le dossier `content` :
+  - Voir `content/fr/about/index.md` pour un exemple de page standard en Markdown.
+  - Nommer la page ou le dossier en anglais et réécrire l'url en français via le mot-clé `slugOverride` :
+    ```markdown
+    ---
+    title: À propos
+    slugOverride: a propos
+    ---
+    ```
+  - Utiliser l'une des mises en page via le mot-clé `layout` :
+    - `_includes/layouts/page.njk` pour une page standard
+    - `_includes/layouts/post.njk` pour un article de blog
+    ```markdown
+    ---
+    layout: page.njk
+    title: Un exemple de page
+    ---
+    # {{ title }}
+    ```
+  - Inclure un composant :
+    - **Accordéon** : renseigner des `accordionItems` et inclure le composant `acccordionsgroup`
+    ```html
+      {% set accordionItems = [{
+          title: "Intitulé accordéon",
+          content: "<p>Contenu</p>"
+      }] %}
+      {% include "components/accordionsgroup.njk" %}
+      ```
+    - **Fil d'Ariane** : renseigner les `segments` et inclure le composant `breadcrumb`
+      ```markdown
+      ---
+      segments:
+        - url: /blog/
+          title: Blog
+      ---
+      {% include "components/breadcrumb.njk" %}
+      ```
+    - **Carte** : renseigner une `card` et inclure le composant `card`
+      ```html
+      {% set card = {
+          url: "/blog/firstpost/",
+          title: "Mon article",
+          description: "Un article comme ça",
+          tags: ["random"],
+          date: "2018-05-01",
+          imagePath: "[OPTIONNEL]",
+          imageAlt: "[OPTIONNEL si pas d'image]"
+      } %}
+      {% include "components/card.njk" %}
+      ```
+    - **Contenu image** : renseigner une `image` et inclure le composant `imagecontent`
+      ```html
+      {% set image = { path: "./possum.png", alt: "A possum" } %}
+      {% include "components/imagecontent.njk" %}
+      ```
+    - **Pagination** : mettre en place la `pagination` et inclure le composant `pagination`
+      ```md
+      ---
+      pagination:
+        data: collections.posts
+        size: 4
+      permalink: "different/{{ page_prefix }}{{ pagination.pageNumber }}/index.html"
+      ---
+      {% include "components/pagination.njk" %}
+      ```
+    - **Groupe de tags** : renseigner des `tags` et inclure l'un des composants `taggroup`
+      ```markdown
+      {% set tags = collections.all | getAllTags %}
+      {% include "components/taggroup.njk" %}
+      ```
+- Ajouter un nouvel article au blog :
+  - Ajouter un nouveau fichier dans `content/blog/[lang]/blog/posts`.
+  - Activer le drapeau `draft` pour éviter de le publier :
+  ```markdown
+  ---
+  draft: true
+  ---
+  ```
+  - Renseigner `image` pour afficher une bannière en haut de l'article :
+  ```markdown
+   ---
+   image:
+     src: ./possum.png
+     alt: A possum
+   ---
+   ```
+- Ajouter une page au menu de navigation (gérée via le plugin `eleventy-navigation`) : renseigner le mot-clé `eleventyNavigation`
+  ```markdown
+   ---
+   eleventyNavigation:
+     key: Accueil
+     order: 1
+   ---
+   ```
+  - Pour une navigation de niveau 2, utiliser le mot-clé `parent`.
+
+### HOW-TOs
+
+### Ajouter une nouvelle traduction pour le blog
+
+- Dupliquer le dossier `content/fr/blog` dans le répertoire de la nouvelle traduction.
+- Vider le sous-dossier `posts` sauf `posts.11tydata.js`.
+- Remplacer les appels aux collections `posts_fr` et `tags_fr_4x4` dans les fichiers `index.njk`, `tags.njk` et `tags_index.njk`
+par des appels aux nouvelles collections localisées automatiquement créées `posts_[lang]` et `tags_[lang]_4x4`.
+
+### Développement
 
-Le site est déployé automatiquement en préproduction sur [preprod.codegouv.studio](http://preprod.codegouv.studio/fr/) depuis la branche `main` et en production sur [code.gouv.fr](https://code.gouv.fr/) depauis la branche `production`.
+- 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](https://www.11ty.dev/docs/layouts/) dans le
+  dossier `_includes/layouts`.
+  - Indiquer les données nécessaires au composant dans un commentaire en début de fichier.
+- 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é dans le dossier de sortie (via `addPassthroughCopy` dans le fichier `eleventy.config.js`).
+      Cela signifie que `./public/css/*` persistera dans `./_site/css/*` après la construction du livrable.
+- Compléter le README. :)
 
-# Contributions
+## Fonctionnalités
 
-Pour discuter d'évolutions éditoriales ou pour des retours devant rester confidentiels, écrivez à [[email protected]](mailto:[email protected]).
+- DSFR :
+  - Installation et mise à jour automatique via `npm`.
+  - Composants déjà implémentés :
+    - [Accordéon](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon)
+    - [Fil d'Ariane](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/fil-d-ariane)
+    - [Carte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte)
+    - [Paramètres d'affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametre-d-affichage)
+    - [Pied de page](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pied-de-page)
+    - [En-tête](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete)
+    - [Contenu image](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenu-medias)
+    - [Navigation principale](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/navigation-principale)
+    - [Lettre d'information et réseaux sociaux](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/lettre-d-information-et-reseaux-sociaux)
+    - [Pagination](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pagination)
+    - [Groupe de tags](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tag)
+    - [Sélecteur de langue](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/selecteur-de-langue)
+- a11y et responsivity : Respecte les recommandations du DSFR.
+- i18n :
+  - Prise en charge de l'internationalisation des textes et contenus.
+- Pages déjà générées :
+    - Pages d'accueil, À propos, Contact (en français et en anglais).
+    - [Flux RSS pour Atom et JSON](https://www.11ty.dev/docs/plugins/rss/)
+    - 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.
 
-## Licences
+## Demos
 
-Le contenu rédactionnel du site est une publication DINUM, 20 avenue de Ségur, 75019, publié sous [licence Ouverte 2.0](LICENSES/LICENSE.Etalab-2.0.md).
+Voir la [GitHub Pages](https://codegouvfr.github.io/eleventy-dsfr/fr/) correspondante.
 
-Les codes sources de ce dépôt sont publiés sous [licence
-MIT](LICENSES/LICENSE.MIT.md).
+## Déploiement
+
+- [Configurer la redirection](https://www.11ty.dev/docs/i18n/#distinct-urls-using-implied-default-language)
+  de toutes les pages des URLs dont la langue est celle par défaut.
+- Read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/) to the web.
+
+  _TODO_
+
+### GitHub Pages
+
+En cas d'erreur lors du build :
+```
+Error: Get Pages site failed
+Error: HttpError: Not Found
+```
+Essayer [cette configuration](https://stackoverflow.com/a/73967433).
diff --git a/_data/data.js b/_data/data.js
@@ -1,5 +1,3 @@
 module.exports = {
-    footer_content_description: `
-Mission logiciels libres et communs numériques est porté par la <a href="https://www.numerique.gouv.fr/" target="_blank">direction interministérielle du numérique</a>.
-<br>Le <a href="https://github.com/codegouvfr/codegouv-website" title="code source - Nouvelle fenêtre" target="_blank" rel="noreferrer noopener">code source</a> est disponible en licence libre.</p>`
+    footer_content_description: `Lorem [...] elit ut.`
 }
diff --git a/_data/i18n/en/index.js b/_data/i18n/en/index.js
@@ -9,6 +9,7 @@ module.exports = {
     dark_theme: "Dark Theme",
     display_params: "Display Parameters",
     filter_by_tag: "Filter by Tag:",
+    filtered_by: "Filtered by",
     first_page: "First page",
     follow_us_description: "Follow Us",
     fully_compliant: "Fully compliant",
@@ -27,6 +28,7 @@ module.exports = {
     pick_theme: "Pick a Theme.",
     previous_page: "Previous page",
     published_on: "Published on",
+    results: "results",
     see_breadcrumb: "See Breadcrumb",
     see_more: "See More",
     select_lang: "Select Language",

diff --git a/_data/i18n/fr/index.js b/_data/i18n/fr/index.js
@@ -9,6 +9,7 @@ module.exports = {
     dark_theme: "Thème sombre",
     display_params: "Paramètres d'affichage",
     filter_by_tag: "Filtrer par catégorie :",
+    filtered_by: "Filtré par",
     first_page: "Première page",
     follow_us_description: "Suivez-nous <br> sur nos réseaux",
     fully_compliant: "Totalement conforme",
@@ -27,6 +28,7 @@ module.exports = {
     pick_theme: "Choisissez un thème pour personnaliser l’apparence du site.",
     previous_page: "Page précédente",
     published_on: "Publié le",
+    results: "résultats",
     see_breadcrumb: "Voir le fil d’Ariane",
     see_more: "En savoir plus",
     select_lang: "Sélectionner une langue",

diff --git a/_data/metadata.js b/_data/metadata.js
@@ -1,33 +1,28 @@
 module.exports = {
-    "title": "Mission logiciels libres et communs numériques",
-    "url": "https://code.gouv.fr/",
-    "newsletter": [
+    title: "Nom du site / service",
+    url: "https://url_du_site.gouv.fr/",
+    newsletter: [
         {
-            "url": "https://code.gouv.fr/newsletters/subscribe/[email protected]",
-            "title": "Gazette BlueHats",
-            "description": "Votre lettre d'information sur les logiciels libres par et pour les administrations."
-        },
-        {
-            "url": "https://code.gouv.fr/newsletters/subscribe/[email protected]",
-            "title": "Gazette DSI Libre",
-            "description": "Lettre d'information sur les logiciels libres pour les DSI du secteur public."
+            url: "",
+            title: "",
+            description: ""
         }
     ],
-    "facebook_url": "",
-    "mastodon_url": "https://mastodon.social/@CodeGouvFr",
-    "twitter_url": "https://twitter.com/codegouvfr",
-    "instagram_url": "",
-    "linkedin_url": "",
-    "youtube_url": "",
-    "peertube_url": "https://tube.numerique.gouv.fr/a/logicielslibres/",
-    "github_url": "https://github.com/codegouvfr/",
-    "sourcehut_url": "https://man.sr.ht/~codegouvfr/",
-    "language": "fr",
-    "description": "Recourir et contribuer aux logiciels libres et aux communs numériques",
-    "author": {
-        "name": "Mission logiciels libres de la DINUM",
-        "email": "contact@code.gouv.fr",
-        "url": "https://code.gouv.fr/mission/"
+    facebook_url: "",
+    mastodon_url: "",
+    twitter_url: "",
+    instagram_url: "",
+    linkedin_url: "",
+    youtube_url: "",
+    peertube_url: "",
+    github_url: "",
+    sourcehut_url: "",
+    language: "fr",
+    description: "baseline - précisions sur l‘organisation",
+    author: {
+        name: "Nom du service",
+        email: "contact@nom_du_service.gouv.fr",
+        url: "https://url_du_service.gouv.fr/"
     },
-    "service": "Direction interministérielle du numérique"
+    service: "Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
 }