From 59e6c06c69b07d6a491ad5aafba40e87b333d2bd Mon Sep 17 00:00:00 2001 From: Sylvain Lafay Date: Fri, 26 Jan 2024 13:43:34 +0100 Subject: [PATCH] ajout eleventy-i18n-plugin --- _data/i18n/en/index.js | 1 + _data/i18n/fr/index.js | 1 + _data/i18n/index.js | 27 +++++- _includes/templates/translate.njk | 6 +- content/en/index.njk | 26 +++++- content/fr/blog/posts/calendrier.md | 15 +++ .../fr/blog/posts/fonctionnalit\303\251s.md" | 93 ------------------- content/fr/blog/posts/i18n.md | 42 +++++++++ content/fr/blog/posts/navigation.md | 36 +++++++ content/fr/blog/posts/pagination.md | 29 ++++++ content/fr/index.11tydata.js | 5 - content/fr/index.njk | 49 ++++++---- eleventy.config.i18n.js | 15 +-- eleventy.config.js | 17 +++- package.json | 3 + 15 files changed, 222 insertions(+), 143 deletions(-) create mode 100644 content/fr/blog/posts/calendrier.md delete mode 100644 "content/fr/blog/posts/fonctionnalit\303\251s.md" create mode 100644 content/fr/blog/posts/i18n.md create mode 100644 content/fr/blog/posts/navigation.md create mode 100644 content/fr/blog/posts/pagination.md delete mode 100644 content/fr/index.11tydata.js diff --git a/_data/i18n/en/index.js b/_data/i18n/en/index.js index 331cbe9..fbaaa57 100644 --- a/_data/i18n/en/index.js +++ b/_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", diff --git a/_data/i18n/fr/index.js b/_data/i18n/fr/index.js index e535a37..8551a9c 100644 --- a/_data/i18n/fr/index.js +++ b/_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", diff --git a/_data/i18n/index.js b/_data/i18n/index.js index 311d0ef..d0c6cdf 100644 --- a/_data/i18n/index.js +++ b/_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() }; diff --git a/_includes/templates/translate.njk b/_includes/templates/translate.njk index be8ba85..345a0c0 100644 --- a/_includes/templates/translate.njk +++ b/_includes/templates/translate.njk @@ -9,16 +9,16 @@
  • - {{ page.lang | upper }} - {{ "lang_name" | i18n(page.lang) }} + {{ page.lang | upper }} - {{ "lang_name" | i18n({}, page.lang) }}
    • - {% for lang in availableLangs %} + {% for lang in availableLang %} {% if not (lang == page.lang) %}
  • {% set url = page.url | locale_url(lang) %} - {{ lang | upper }} - {{ "lang_name" | i18n(lang) }} + {{ lang | upper }} - {{ "lang_name" | i18n({}, lang) }}
    • {% endif %} diff --git a/content/en/index.njk b/content/en/index.njk index b252c90..8d961eb 100644 --- a/content/en/index.njk +++ b/content/en/index.njk @@ -5,18 +5,34 @@ eleventyNavigation: order: 1 numberOfLatestPostsToShow: 3 --- -
    - {% set postsCount = collections.posts | length %} + +
    + {% set postsCount = collections.posts | filterCollectionLang | length %} {% set latestPostsCount = postsCount | min(numberOfLatestPostsToShow) %}

    Latest {{ latestPostsCount }} Post{% if latestPostsCount != 1 %}s{% endif %}

    - {% 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 %} -

    {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} can be found in the archive.

    +

    {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} can be found in the archive.

    {% endif %} {# List every content page in the project #} @@ -27,4 +43,4 @@ numberOfLatestPostsToShow: 3 {%- endfor %} #} -
    \ No newline at end of file +
    diff --git a/content/fr/blog/posts/calendrier.md b/content/fr/blog/posts/calendrier.md new file mode 100644 index 0000000..f0b5e8e --- /dev/null +++ b/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} \ No newline at end of file diff --git "a/content/fr/blog/posts/fonctionnalit\303\251s.md" "b/content/fr/blog/posts/fonctionnalit\303\251s.md" deleted file mode 100644 index 0e1e3ed..0000000 --- "a/content/fr/blog/posts/fonctionnalit\303\251s.md" +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Fonctionnalités -description: Comment utiliser certaines des fonctionnalités d'eleventy-dsfr ? -date: git Last Modified -tags: - - contenu - - i18n - - navigation - - pagination ---- -## i18n - -[Voir le système d'i18n d'Eleventy](https://www.11ty.dev/docs/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 %} -``` - -Pour internationaliser une page : la nommer de la même manière 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). - -## Navigation - -[Voir le système de navigation d'Eleventy](https://www.11ty.dev/docs/plugins/navigation/){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right} - -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. - -## Pagination - -[Voir le système de pagination d'Eleventy](https://www.11ty.dev/docs/pagination/){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right} - -Pour mettre en place la pagination pour les tags, 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); - } - } - } ---- -``` - -## Calendrier - -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} \ No newline at end of file diff --git a/content/fr/blog/posts/i18n.md b/content/fr/blog/posts/i18n.md new file mode 100644 index 0000000..f21ff0c --- /dev/null +++ b/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. diff --git a/content/fr/blog/posts/navigation.md b/content/fr/blog/posts/navigation.md new file mode 100644 index 0000000..d00b23a --- /dev/null +++ b/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. diff --git a/content/fr/blog/posts/pagination.md b/content/fr/blog/posts/pagination.md new file mode 100644 index 0000000..cf62cc2 --- /dev/null +++ b/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); + } + } + } +--- +``` diff --git a/content/fr/index.11tydata.js b/content/fr/index.11tydata.js deleted file mode 100644 index 9c29a00..0000000 --- a/content/fr/index.11tydata.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - pTitle: "Lorem ipsum", - pDescription: ` -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mi est. Pellentesque ac eros ipsum. Nunc sed ligula a justo vehicula eleifend. Curabitur ut nibh id sapien ullamcorper ornare at sit amet leo. Ut suscipit, erat eget malesuada feugiat, justo leo maximus ipsum, in consectetur neque turpis non mauris. Pellentesque porttitor ut elit eu posuere. Duis vel posuere lacus, nec pellentesque nunc. Vivamus rutrum eros ac nisl sollicitudin, vitae egestas diam interdum. Vivamus a quam eleifend, maximus massa sed, interdum lectus. In placerat porttitor malesuada. Vestibulum at maximus felis, quis eleifend felis. Nullam id tortor sem. Donec eleifend pharetra justo vel ultricies. Cras lobortis, erat non tempus porta, ligula velit laoreet ligula, ac sagittis metus enim vel nisi.` -}; \ No newline at end of file diff --git a/content/fr/index.njk b/content/fr/index.njk index a584d7d..8d5ae6e 100644 --- a/content/fr/index.njk +++ b/content/fr/index.njk @@ -4,31 +4,48 @@ layout: layouts/home.njk eleventyNavigation: key: Accueil order: 1 +numberOfLatestPostsToShow: 3 ---