ajout eleventy-i18n-plugin

_data/i18n/en/index.js

@@ -1,5 +1,6 @@
 module.exports = {
     about: "About",
+    access_guides: "Read guides",
     accessibility: "Accessibility",
     add_to_calendar: "Add to calendar",
     back_to_top: "Back to Top",

_data/i18n/fr/index.js

@@ -1,5 +1,6 @@
 module.exports = {
     about: "À propos",
+    access_guides: "Accéder aux guides",
     accessibility: "Accessibilité",
     add_to_calendar: "Ajouter au calendrier",
     back_to_top: "Haut de page",

_data/i18n/index.js

@@ -1,7 +1,26 @@
-const en = require("./en")
-const fr = require("./fr")
+const {readdirSync} = require('fs');
+
+const chalk = require("chalk")
+
+const langDirectories = readdirSync(__dirname, {withFileTypes: true})
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
+
+const buildTranslations = () => {
+    const translations = {};
+    langDirectories.forEach(lang => {
+        const langTranslations = require(`./${lang}`);
+        for (const key in langTranslations) {
+            if (!(key in translations)) {
+                translations[key] = {};
+            }
+            translations[key][lang] = langTranslations[key];
+        }
+    });
+    return translations;
+}
 
 module.exports = {
-    fr,
-    en
+    availableLang: langDirectories,
+    ...buildTranslations()
 };

_includes/templates/translate.njk

@@ -9,16 +9,16 @@
         <li>
           <a class="fr-translate__language fr-nav__link" href="{{ page.url }}" lang="{{ page.lang }}"
              hreflang="{{ page.lang }}" aria-current="true">
-            {{ page.lang | upper }} - {{ "lang_name" | i18n(page.lang) }}
+            {{ page.lang | upper }} - {{ "lang_name" | i18n({}, page.lang) }}
           </a>
         </li>
-        {% for lang in availableLangs %}
+        {% for lang in availableLang %}
           {% if not (lang == page.lang) %}
             <li>
               {% set url = page.url | locale_url(lang) %}
               <a class="fr-translate__language fr-nav__link" {% if not (page.url == url) %}href="{{ url }}"
                  {% else %}aria-disabled="{{ page.url == url }}" {% endif %}lang="{{ lang }}" hreflang="{{ lang }}">
-                {{ lang | upper }} - {{ "lang_name" | i18n(lang) }}
+                {{ lang | upper }} - {{ "lang_name" | i18n({}, lang) }}
               </a>
             </li>
           {% endif %}

content/en/index.njk

@@ -5,18 +5,34 @@ eleventyNavigation:
   order: 1
 numberOfLatestPostsToShow: 3
 ---
-<div class="fr-container fr-py-8v">
-  {% set postsCount = collections.posts | length %}
+<div class="banner-primary">
+  <div class="fr-container fr-pt-8w fr-pb-6w fr-mb-6w">
+    <div class="fr-grid-row">
+      <div class="fr-col-offset-md-1 fr-col-12 fr-col-sm-12 fr-col-md-6">
+        <h1>A sample institutional website</h1>
+        <p class="fr-text--lead">
+          This static website, generated by <a href="https://www.11ty.dev/" target="_blank"><strong>eleventy</strong></a>,
+          uses the <a href="https://www.systeme-de-design.gouv.fr/" target="_blank"><strong>French Design System</strong></a>.
+        </p>
+      </div>
+      <div class="fr-col-md-4 fr-hidden fr-unhidden-md col-center">
+        <img src="/icons/1F3DB.svg" alt="" width="256">
+      </div>
+    </div>
+  </div>
+</div>
+<div class="fr-container">
+  {% set postsCount = collections.posts | filterCollectionLang | length %}
   {% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %}
   <h1>Latest {{ latestPostsCount }} Post{% if latestPostsCount != 1 %}s{% endif %}</h1>
 
-  {% set postslist = collections.posts | head(-1 * numberOfLatestPostsToShow) %}
+  {% set postslist = collections.posts | filterCollectionLang | head(-1 * numberOfLatestPostsToShow) %}
   {% set postslistCounter = postsCount %}
   {% include "postslist.njk" %}
 
   {% set morePosts = postsCount - numberOfLatestPostsToShow %}
   {% if morePosts > 0 %}
-    <p>{{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} can be found in <a href="/en/blog/">the archive</a>.</p>
+    <p>{{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} can be found in <a href="{{ "/blog" | locale_url }}">the archive</a>.</p>
   {% endif %}
 
   {# List every content page in the project #}
@@ -27,4 +43,4 @@ numberOfLatestPostsToShow: 3
     {%- endfor %}
   </ul>
   #}
-</div>
+</div>

content/fr/blog/posts/calendrier.md

@@ -0,0 +1,15 @@
+---
+title: Calendrier
+description: Comment utiliser le calendrier d'événements d'eleventy-dsfr ?
+date: git Last Modified
+tags:
+  - fonctionnalité
+---
+
+La présence des fichiers de template dans [`content/calendar`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/calendar) assure la création d'un fichier de calendrier global [`calendar.ics`](/calendar.ics) à la racine du site, et des fichiers de calendrier `.ics` correspondants aux événements.
+
+Les articles libellés avec `event` sont automatiquement ajoutés au calendrier, et leurs fichiers d'événement de calendrier `.ics` correspondants sont automatiquement créés.
+
+Il existe un composant bouton `add_to_calendar` qui contient un lien vers le téléchargement du fichier d'événement.
+
+[Voir un exemple d'événement](/fr/blog/evenement/){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}

content/fr/blog/posts/i18n.md

@@ -0,0 +1,42 @@
+---
+title: Internationalisation
+description: Comment internationaliser son instance d'eleventy-dsfr ?
+date: git Last Modified
+tags:
+- fonctionnalité
+---
+
+`eleventy-dsfr` suit les [recommandations officielles](https://www.11ty.dev/docs/i18n/) d'11ty pour l'internationalisation et utilise le [plugin officiel](https://www.11ty.dev/docs/plugins/i18n/) pour localiser les liens internes.
+
+Pour localiser les des chaînes de caractères, `eleventy-dsfr` utilise notre [fork du plugin recommandé `eleventy-plugin-i18n`](https://github.com/codegouvfr/eleventy-plugin-i18n).
+
+## Localisation des liens internes et des URLs
+
+`eleventy-dsfr` utilise le [style URLs distinctes](https://www.11ty.dev/docs/i18n/#distinct-urls) proposé par 11ty pour localiser les liens internes.
+
+Pour localiser une URL : nommer la page de la même manière (par exemple, en anglais) dans toutes les langues, et positionner la variable `slugOverride` du cartouche si besoin.
+
+```yaml
+---
+slugOverride: a propos
+---
+```
+
+Par exemple, pour la page [À propos](/fr/a-propos), le fichier en français est [`content/fr/about/index.md`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/fr/about/index.md), le fichier en anglais est [`content/en/about/index.md`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/en/about/index.md).
+L'url en français est [/fr/a-propos](/fr/a-propos), l'url en anglais est [/en/about](/en/about).
+
+
+## Localisation des chaînes de caractères
+
+[Voir la documentation du plugin](https://github.com/codegouvfr/eleventy-plugin-i18n){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
+
+Pour traduire une chaîne de caractères localisée dans une page, utiliser le filtre `i18n` :
+
+```njk
+{% raw %}
+{{ "filter_by_tag" | i18n }}
+{% endraw %}
+```
+
+Les traductions sont situées dans le dossier de langue correspondant dans [`_data/i18n`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/_data/i18n).
+Pour ajouter une traduction, ajouter le dossier correspondant à la langue et son fichier de traduction.

content/fr/blog/posts/navigation.md

@@ -0,0 +1,36 @@
+---
+title: Navigation
+description: Comment utiliser le système de navigation d'eleventy-dsfr ?
+date: git Last Modified
+tags:
+- fonctionnalité
+---
+
+`eleventy-dsfr` utilise le [système de navigation d'Eleventy](https://www.11ty.dev/docs/plugins/navigation/).
+
+## Mise en place d'une navigation de niveau 2
+
+Pour mettre en place une navigation de niveau 2, positionner la variable `parent` avec la valeur de la `key` du parent.
+Par exemple, dans le fichier [`content/fr/about/index.md`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/fr/about/index.md) :
+
+```yaml
+---
+eleventyNavigation:
+  key: Présentation
+  parent: À propos
+  order: 1
+---
+```
+
+Et dans le fichier [`content/fr/about.md`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/fr/about.md) :
+
+```yaml
+---
+eleventyNavigation:
+  key: À propos
+  order: 3
+permalink: false
+---
+```
+
+**Note :** Cette page n'est pas référencée pour la génération (`permalink: false`) car dans ce cas, elle ne sert que de conteneur de premier niveau pour la navigation.

content/fr/blog/posts/pagination.md

@@ -0,0 +1,29 @@
+---
+title: Pagination
+description: Comment utiliser le système de pagination d'eleventy-dsfr ?
+date: git Last Modified
+tags:
+- fonctionnalité
+---
+
+`eleventy-dsfr` utilise le [système de pagination d'Eleventy](https://www.11ty.dev/docs/pagination/), par exemple pour les articles de blog.
+
+## Pagination de niveau 2 pour les tags
+
+Pour mettre en place la pagination des articles de blog pour chaque tag, utiliser le filtre `paginateCollectionTags` dans une [fonction de callback `before`](https://www.11ty.dev/docs/pagination/#the-before-callback) dans un cartouche Javascript.
+Par exemple, dans le fichier [`content/fr/blog/tags.njk`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/fr/blog/tags.njk) :
+
+```javascript
+---js
+  {
+    pagination: {
+      data: "collections.posts",
+      size: 1,
+      alias: "tag",
+      before: function(paginationData, fullData) {
+        return this.paginateCollectionTags(this.filterCollectionLang(paginationData, fullData.lang), 6);
+      }
+    }
+  }
+---
+```