Eleventy dsfr update (#8)

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 --------- Co-authored-by: hjonin <[email protected]> Co-authored-by: Bastien <[email protected]>
codegouvfr · Jun 20, 2023 · 3cfb661 · 3cfb661
1 parent 17526e8
commit 3cfb661
Show file tree

Hide file tree

Showing 77 changed files with 1,509 additions and 986 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 DINUM/Etalab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LICENSES/LICENSE.MIT.md b/LICENSES/LICENSE.MIT.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 DINUM/Etalab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/_data/data.js b/_data/data.js
@@ -0,0 +1,3 @@
+module.exports = {
+    footer_content_description: `Lorem [...] elit ut.`
+}
diff --git a/_data/i18n/en/index.js b/_data/i18n/en/index.js
@@ -1,13 +1,17 @@
 module.exports = {
     about: "About",
     accessibility: "Accessibility",
+    back_to_top: "Back to Top",
     blog: "Blog",
     close: "Close",
+    copy: "Copy",
+    copied: "Copied!",
     dark_theme: "Dark Theme",
     display_params: "Display Parameters",
+    filter_by_tag: "Filter by Tag:",
+    filtered_by: "Filtered by",
     first_page: "First page",
-    follow_us: "Follow Us",
-    footer_content_description: "Lorem [...] elit ut.",
+    follow_us_description: "Follow Us",
     fully_compliant: "Fully compliant",
     home: "Home",
     lang_name: "English",
@@ -24,13 +28,14 @@ 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",
-    service_id: "Intitulé <br>officiel",
-    service_name: "Nom de l’entité (ministère, secrétariat d‘état, gouvernement)",
-    site_description: "baseline - précisions sur l‘organisation",
+    share: "Share",
+    share_by_email: "Share by Email",
+    share_link_on: "Share link on",
     sitemap: "Sitemap",
-    site_title: "Nom du site / service",
     subscribe: "Subscribe",
     subscribe_newsletter: "Subscribe",
     system: "System",

diff --git a/_data/i18n/fr/index.js b/_data/i18n/fr/index.js
@@ -1,13 +1,17 @@
 module.exports = {
     about: "À propos",
     accessibility: "Accessibilité",
+    back_to_top: "Haut de page",
     blog: "Blog",
     close: "Fermer",
+    copy: "Copier dans le presse-papier",
+    copied: "Copié !",
     dark_theme: "Thème sombre",
-    display_params: "Paramètres d\'affichage",
+    display_params: "Paramètres d'affichage",
+    filter_by_tag: "Filtrer par catégorie :",
+    filtered_by: "Filtré par",
     first_page: "Première page",
-    follow_us: "Suivez-nous <br> sur les réseaux sociaux",
-    footer_content_description: "Lorem [...] elit ut.",
+    follow_us_description: "Suivez-nous <br> sur nos réseaux",
     fully_compliant: "Totalement conforme",
     home: "Accueil",
     lang_name: "Français",
@@ -24,14 +28,15 @@ 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",
-    service_id: "Intitulé <br>officiel",
-    service_name: "Nom de l’entité (ministère, secrétariat d‘état, gouvernement)",
-    site_description: "baseline - précisions sur l‘organisation",
+    share: "Partager",
+    share_by_email: "Partager par email",
+    share_link_on: "Partage d'un lien sur",
     sitemap: "Plan du site",
-    site_title: "Nom du site / service",
-    subscribe: "S\'abonner",
+    subscribe: "S'abonner",
     subscribe_newsletter: "Abonnez-vous à notre lettre d’information",
     system: "Système",
     tags: "Catégories",

diff --git a/_data/metadata.js b/_data/metadata.js
@@ -1,21 +1,28 @@
 module.exports = {
-	"title": "TITRE DU SITE",
-	"url": "https://url_du_site.gouv.fr/",
-	"newsletter": {
-		"url": "",
-		"title": "",
-		"description": ""
-	},
-	"facebook_url": "",
-	"twitter_url": "",
-	"instagram_url": "",
-	"linkedin_url": "",
-	"youtube_url": "",
-	"language": "fr",
-	"description": "DESCRIPTION DU SITE",
-	"author": {
-		"name": "NOM DU SERVICE",
-		"email": "contact@nom_du_service.gouv.fr",
-		"url": "https://url_du_service.gouv.fr/"
-	}
+    title: "Nom du site / service",
+    url: "https://url_du_site.gouv.fr/",
+    newsletter: [
+        {
+            url: "",
+            title: "",
+            description: ""
+        }
+    ],
+    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: "Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
 }
diff --git a/_includes/components/accordionsgroup.njk b/_includes/components/accordionsgroup.njk
@@ -1,15 +1,14 @@
-{# Mandatory variable `accordionItems { title: string, content: string }[]` to make it work #}
 <div class="fr-accordions-group">
-    {% for accordionItem in accordionItems %}
-        <section class="fr-accordion">
-            <h3 class="fr-accordion__title">
-                <button class="fr-accordion__btn" aria-expanded="false"
-                        aria-controls="accordion-{{ loop.index }}">{{ accordionItem.title }}
-                </button>
-            </h3>
-            <div class="fr-collapse" id="accordion-{{ loop.index }}">
-                {{ accordionItem.content | safe }}
-            </div>
-        </section>
-    {% endfor %}
+  {% for accordionItem in accordionItems %}
+    <section class="fr-accordion">
+      <h3 class="fr-accordion__title">
+        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-{{ loop.index }}">
+          {{ accordionItem.title }}
+        </button>
+      </h3>
+      <div class="fr-collapse" id="accordion-{{ loop.index }}">
+        {{ accordionItem.content | safe }}
+      </div>
+    </section>
+  {% endfor %}
 </div>
diff --git a/_includes/components/back_to_top.njk b/_includes/components/back_to_top.njk
@@ -0,0 +1,3 @@
+<a class="fr-grid-row fr-grid-row--right fr-link fr-icon-arrow-up-fill fr-link--icon-left" href="#top">
+  {{ "back_to_top" | i18n }}
+</a>
diff --git a/_includes/components/breadcrumb.njk b/_includes/components/breadcrumb.njk
@@ -1,18 +1,17 @@
-{# Works with eleventyNavigation or mandatory variable `segments: { url: string, title: string }[]` to make it work #}
 {% if eleventyNavigation %}
-    {% set segments = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key) %}
+  {% set segments = collections.all | filterCollectionLang | eleventyNavigationBreadcrumb(eleventyNavigation.key) %}
 {% endif %}
 <nav role="navigation" class="fr-breadcrumb" aria-label="{{ "you_are_here" | i18n }}:">
-    <button class="fr-breadcrumb__button" aria-expanded="false"
-            aria-controls="breadcrumb-1">{{ "see_breadcrumb" | i18n }}
-    </button>
-    <div class="fr-collapse" id="breadcrumb-1">
-        <ol class="fr-breadcrumb__list">
-            <li><a class="fr-breadcrumb__link" href="{{ "/" | locale_url }}">{{ "home" | i18n }}</a></li>
-            {% for segment in segments %}
-                <li><a class="fr-breadcrumb__link" href="{{ segment.url | locale_url }}">{{ segment.title }}</a></li>
-            {% endfor %}
-            <li><a class="fr-breadcrumb__link" aria-current="page">{{ title }}</a></li>
-        </ol>
-    </div>
+  <button class="fr-breadcrumb__button" aria-expanded="false" aria-controls="breadcrumb-1">
+    {{ "see_breadcrumb" | i18n }}
+  </button>
+  <div class="fr-collapse" id="breadcrumb-1">
+    <ol class="fr-breadcrumb__list">
+      <li><a class="fr-breadcrumb__link" href="{{ "/" | locale_url }}">{{ "home" | i18n }}</a></li>
+      {% for segment in segments %}
+        <li><a class="fr-breadcrumb__link" href="{{ segment.url | locale_url }}">{{ segment.title }}</a></li>
+      {% endfor %}
+      <li><a class="fr-breadcrumb__link" aria-current="page">{{ title }}</a></li>
+    </ol>
+  </div>
 </nav>
diff --git a/_includes/components/callout.njk b/_includes/components/callout.njk
@@ -0,0 +1,11 @@
+<div class="fr-callout">
+  <h3 class="fr-callout__title">{{ callout.title }}</h3>
+  <p class="fr-callout__text">
+    {{ callout.description | safe }}
+  </p>
+  {% if callout.link %}
+    <a class="fr-btn" href="{{ callout.link.url }}">
+      {{ callout.link.title }}
+    </a>
+  {% endif %}
+</div>
diff --git a/_includes/components/card-horizontal.njk b/_includes/components/card-horizontal.njk
diff --git a/_includes/components/card.njk b/_includes/components/card.njk
@@ -1,22 +1,53 @@
-{# Mandatory variable `card { url: string, title: string, description: string, tags: string[], date: string, imagePath: string, imageAlt: string }` to make it work #}
-<div class="fr-card fr-enlarge-link">
-    <div class="fr-card__body">
-        <div class="fr-card__content">
-            <h3 class="fr-card__title"><a href="{{ card.url | locale_url }}">{{ card.title }}</a></h3>
-            <p class="fr-card__desc">{{ card.description }}</p>
-            <div class="fr-card__start">
-                {% set tags = card.tags %}
-                {% include "components/taggroup-disabled.njk" %}
-                <p class="fr-card__detail fr-icon-time-fill">
-                    <time class="postlist-date"
-                          datetime="{{ card.date | htmlDateString }}">{{ card.date | readableDate("LLLL yyyy") }}</time>
-                </p>
-            </div>
-        </div>
+<div class="fr-card{% if not card.externalUrl %} fr-enlarge-link{% endif %}{% if card.orientation == 'horizontal' %} fr-card--horizontal-tier{% endif %}">
+  <div class="fr-card__body">
+    <div class="fr-card__content">
+      {% set cardUrl = card.url | locale_url or card.externalUrl %}
+      <h3 class="fr-card__title">
+        {% if not card.externalUrl %}
+          <a href="{{ cardUrl }}">
+            {{ card.title }}
+          </a>
+        {% else %}{{ card.title }}
+        {% endif %}
+      </h3>
+      <p class="fr-card__desc">{{ card.description | safe }}</p>
+      <div class="fr-card__start">
+        {% if card.tags %}
+          {% set tags = card.tags %}
+          {% include "components/taggroup-disabled.njk" %}
+        {% endif %}
+        {% if card.date %}
+          <p class="fr-card__detail fr-icon-time-fill">
+            <time class="postlist-date" datetime="{{ card.date | htmlDateString }}">
+              {{ card.date | readableDate }}
+            </time>
+          </p>
+        {% endif %}
+      </div>
     </div>
+    <div class="fr-card__footer">
+      {% if card.externalUrl %}
+        <ul class="fr-links-group">
+          <li>
+            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="{{ card.externalUrl }}"
+               title="{{ card.title }} - {{ "new_window" | i18n }}" target="_blank">
+              {{ card.urlDescription or "see_more" | i18n }}
+            </a>
+          </li>
+        </ul>
+      {% endif %}
+    </div>
+  </div>
+  <div class="fr-card__header">
+    {% if card.badges %}
+      <ul class="fr-badges-group">
+        {% for badge in card.badges %}
+          <li><p class="fr-badge fr-badge--green-emeraude">{{ badge }}</p></li>
+        {% endfor %}
+      </ul>
+    {% endif %}
     {% if card.imagePath %}
-        <div class="fr-card__header">
-            <div class="fr-card__img">{% image card.imagePath, card.imageAlt %}</div>
-        </div>
+      <div class="fr-card__img">{% image card.imagePath, card.imageAlt %}</div>
     {% endif %}
+  </div>
 </div>