upadte dsfr 1.11.0

IGNF · Jan 26, 2024 · c636d38 · c636d38
1 parent 26d2cf8
commit c636d38
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 94 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
 _site/
 node_modules/
-package-lock.json
diff --git a/_data/i18n/en/index.js b/_data/i18n/en/index.js
@@ -31,6 +31,7 @@ module.exports = {
     pick_theme: "Pick a Theme.",
     previous_page: "Previous page",
     published_on: "Published on",
+    read_also: "Read Also",
     results: "results",
     see_breadcrumb: "See Breadcrumb",
     see_more: "See More",

diff --git a/_data/i18n/fr/index.js b/_data/i18n/fr/index.js
@@ -31,6 +31,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",
+    read_also: "À lire aussi",
     results: "résultats",
     see_breadcrumb: "Voir le fil d’Ariane",
     see_more: "En savoir plus",

diff --git a/_data/i18n/index.js b/_data/i18n/index.js
@@ -1,7 +1,5 @@
 const {readdirSync} = require('fs');
 
-const chalk = require("chalk")
-
 const langDirectories = readdirSync(__dirname, {withFileTypes: true})
     .filter(dirent => dirent.isDirectory())
     .map(dirent => dirent.name);

diff --git a/_includes/components/card.njk b/_includes/components/card.njk
@@ -31,7 +31,7 @@
         <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">
+               title="{{ card.title }} - {{ "new_window" | i18n }}" target="_blank" rel="noopener">
               {{ card.urlDescription or "see_more" | i18n }}
             </a>
           </li>

diff --git a/_includes/components/tile.njk b/_includes/components/tile.njk
@@ -5,7 +5,7 @@
     {% set urlDescription %}{{ tile.title }}{% if tile.externalUrl %} - {{ "new_window" | i18n }}{% endif %}{% endset %}
     <h4 class="fr-tile__title">
       <a class="fr-tile__link" href="{{ tileUrl }}"
-         title="{{ urlDescription }}"{% if tile.externalUrl %} target="_blank"{% endif %}>
+         title="{{ urlDescription }}"{% if tile.externalUrl %} target="_blank" rel="noopener"{% endif %}>
         {{ tile.title }}
       </a>
     </h4>

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -2,6 +2,7 @@
 <html lang="{{ page.lang }}" data-fr-scheme="system" dir="ltr">
 <head>
   <meta charset="utf-8">
+  <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <meta name="description" content="{{ description or metadata.description }}">

diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -31,32 +31,44 @@ layout: layouts/base.njk
     </div>
   </div>
 
-  <div class="fr-grid-row">
-    <div class="fr-col-12">
-      {% if collections.posts %}
-        {% set previousPost = collections.posts | filterCollectionLang | getPreviousCollectionItem %}
-        {% set nextPost = collections.posts | filterCollectionLang | getNextCollectionItem %}
-        {% if nextPost or previousPost %}
-          <ul class="links-nextprev fr-pt-3w fr-mt-6w fr-mb-3w" data-pagefind-ignore>
-            {% if previousPost %}
-              <li>
-                <a class="fr-link fr-fi-arrow-left-line fr-link--icon-left" href="{{ previousPost.url }}">
-                  {{ previousPost.data.title }}
-                </a>
-              </li>
-            {% else %}
-              <li></li>
-            {% endif %}
-            {% if nextPost %}
-              <li>
-                <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right" href="{{ nextPost.url }}">
-                  {{ nextPost.data.title }}
-                </a>
-              </li>
-            {% endif %}
-          </ul>
+  {% if collections.posts %}
+    {% set previousPost = collections.posts | filterCollectionLang | getPreviousCollectionItem %}
+    {% set nextPost = collections.posts | filterCollectionLang | getNextCollectionItem %}
+    {% if nextPost or previousPost %}
+      <h2>{{ "read_also" | i18n }}</h2>
+      <div class="fr-grid-row fr-grid-row--gutters fr-mb-12v">
+        {% if previousPost %}
+          <div class="fr-col-12 fr-col-md-6">
+            <div class="fr-card fr-enlarge-link fr-card--grey fr-card--no-border">
+              <div class="fr-card__body">
+                <p class="fr-card__detail fr-icon-time-fill">
+                  <time datetime="{{ previousPost.date | htmlDateString }}">
+                    {{ previousPost.date | readableDate }}
+                  </time>
+                </p>
+                <h4 class="fr-card__title">
+                  <a href="{{ previousPost.url }}" class="fr-card__link">{{ previousPost.data.title }}</a>
+                </h4>
+              </div>
+            </div>
+          </div>
         {% endif %}
-      {% endif %}
-    </div>
-  </div>
-</div>
+        {% if nextPost %}
+          <div class="fr-col-12 fr-col-md-6">
+            <div class="fr-card fr-enlarge-link fr-card--grey fr-card--no-border">
+              <div class="fr-card__body">
+                <p class="fr-card__detail">
+                  {{ nextPost.date | readableDate }}
+                </p>
+                <h4 class="fr-card__title">
+                  <a href="{{ nextPost.url }}" class="fr-card__link">{{ nextPost.data.title }}</a>
+                </h4>
+              </div>
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    {% endif %}
+  {% endif %}
+
+</div>
diff --git a/_includes/templates/navigation.njk b/_includes/templates/navigation.njk
@@ -17,7 +17,8 @@
               {% for sublink in link.children %}
                 <li>
                   {% set sublinkUrl = sublink.url | locale_url(lang) or sublink.externalUrl %}
-                  <a class="fr-nav__link" href="{{ sublinkUrl }}" {% if sublink.externalUrl %} target="_blank"{% endif %}{% if sublinkUrl == page.url %} aria-current="page"{% endif %}>
+                  <a class="fr-nav__link"
+                     href="{{ sublinkUrl }}" {% if sublink.externalUrl %} target="_blank" rel="noopener"{% endif %}{% if sublinkUrl == page.url %} aria-current="page"{% endif %}>
                     {{ sublink.title }}
                   </a>
                 </li>

diff --git a/_includes/templates/newsletter_and_follow_us.njk b/_includes/templates/newsletter_and_follow_us.njk
@@ -7,8 +7,9 @@
             <p class="fr-h5">{{ metadata.newsletter.title or "subscribe_newsletter" | i18n }}</p>
             <p class="fr-text--sm">{{ metadata.newsletter.description }}</p>
           </div>
-          <div>
-            <a class="fr-btn" title="{{ "subscribe" | i18n }}" href="{{ metadata.newsletter.url }}" target="_blank">
+          <div class="fr-btns-group fr-btns-group--inline-md">
+            <a class="fr-btn" title="{{ "subscribe" | i18n }}" href="{{ metadata.newsletter.url }}" target="_blank"
+               rel="noopener">
               {{ "subscribe" | i18n }}
             </a>
           </div>
@@ -17,61 +18,61 @@
       <div class="fr-col-12 fr-col-md-4">
         <div class="fr-follow__social">
           <p class="fr-h5">{{ "follow_us_description" | i18n | safe }} </p>
-          <ul class="fr-links-group">
+          <ul class="fr-btns-group">
             {% if metadata.facebook_url %}
-              <li><a class="fr-link--facebook fr-link"
+              <li><a class="fr-btn--facebook fr-btn"
                      title="Facebook - {{ "new_window" | i18n }}"
-                     href="{{ metadata.facebook_url }}" target="_blank">
+                     href="{{ metadata.facebook_url }}" target="_blank" rel="noopener external">
                   facebook </a></li>
             {% endif %}
             {% if metadata.mastodon_url %}
-              <li><a class="fr-link--mastodon fr-link"
+              <li><a class="fr-btn--mastodon fr-btn"
                      title="Mastodon - {{ "new_window" | i18n }}"
-                     href="{{ metadata.mastodon_url }}" target="_blank">
+                     href="{{ metadata.mastodon_url }}" target="_blank" rel="noopener external">
                   mastodon </a></li>
             {% endif %}
             {% if metadata.twitter_url %}
-              <li><a class="fr-link--twitter fr-link"
+              <li><a class="fr-btn--twitter-x fr-btn"
                      title="Twitter - {{ "new_window" | i18n }}"
-                     href="{{ metadata.twitter_url }}" target="_blank">
-                  twitter </a></li>
+                     href="{{ metadata.twitter_url }}" target="_blank" rel="noopener external">
+                  X (anciennement Twitter) </a></li>
             {% endif %}
             {% if metadata.instagram_url %}
-              <li><a class="fr-link--instagram fr-link"
+              <li><a class="fr-btn--instagram fr-btn"
                      title="Instagram - {{ "new_window" | i18n }}"
-                     href="{{ metadata.instagram_url }}" target="_blank">
+                     href="{{ metadata.instagram_url }}" target="_blank" rel="noopener external">
                   instagram </a></li>
             {% endif %}
             {% if metadata.linkedin_url %}
-              <li><a class="fr-link--linkedin fr-link"
+              <li><a class="fr-btn--linkedin fr-btn"
                      title="Linkedin - {{ "new_window" | i18n }}"
-                     href="{{ metadata.linkedin_url }}" target="_blank">
+                     href="{{ metadata.linkedin_url }}" target="_blank" rel="noopener external">
                   linkedin </a></li>
             {% endif %}
             {% if metadata.youtube_url %}
-              <li><a class="fr-link--youtube fr-link"
+              <li><a class="fr-btn--youtube fr-btn"
                      title="Youtube - {{ "new_window" | i18n }}"
-                     href="{{ metadata.youtube_url }}" target="_blank">
+                     href="{{ metadata.youtube_url }}" target="_blank" rel="noopener external">
                   youtube </a></li>
             {% endif %}
             {% if metadata.peertube_url %}
-              <li><a class="fr-link--peertube fr-link"
+              <li><a class="fr-btn--peertube fr-btn"
                      title="PeerTube - {{ "new_window" | i18n }}"
-                     href="{{ metadata.peertube_url }}" target="_blank">
+                     href="{{ metadata.peertube_url }}" target="_blank" rel="noopener external">
                   peertube </a></li>
             {% endif %}
           </ul>
-          <ul class="fr-links-group">
+          <ul class="fr-btns-group">
             {% if metadata.github_url %}
-              <li><a class="fr-link--github fr-link"
+              <li><a class="fr-btn--github fr-btn"
                      title="GitHub - {{ "new_window" | i18n }}"
-                     href="{{ metadata.github_url }}" target="_blank">
+                     href="{{ metadata.github_url }}" target="_blank" rel="noopener external">
                   github </a></li>
             {% endif %}
             {% if metadata.sourcehut_url %}
-              <li><a class="fr-link--sourcehut fr-link"
+              <li><a class="fr-btn--sourcehut fr-btn"
                      title="sourcehut - {{ "new_window" | i18n }}"
-                     href="{{ metadata.sourcehut_url }}" target="_blank">
+                     href="{{ metadata.sourcehut_url }}" target="_blank" rel="noopener external">
                   sourcehut </a></li>
             {% endif %}
           </ul>

diff --git a/_includes/templates/share.njk b/_includes/templates/share.njk
@@ -3,7 +3,7 @@
     <li>
       <a class="fr-share__link fr-share__link--mail"
          href="mailto:?subject={{ "share_link_on" | i18n }} {{ metadata.url }}&body={{ title }} {{ page.url | url }}"
-         title="{{ "share_by_email" | i18n }}" target="_blank">
+         title="{{ "share_by_email" | i18n }}" target="_blank" rel="noopener">
         {{ "share_by_email" | i18n }}
       </a>
     </li>

diff --git a/package.json b/package.json
@@ -26,12 +26,12 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@11ty/eleventy-img": "^3.1.0",
+    "@11ty/eleventy-img": "^3.1.8",
     "@11ty/eleventy-navigation": "^0.3.5",
-    "@11ty/eleventy-plugin-bundle": "^1.0.4",
+    "@11ty/eleventy-plugin-bundle": "^1.0.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "@gouvfr/dsfr": "^1.9.3",
+    "@gouvfr/dsfr": "^1.11.0",
     "chalk": "^4.1.2",
     "ics": "^3.2.0",
     "luxon": "^3.2.1",

diff --git a/public/css/index.css b/public/css/index.css
@@ -16,14 +16,6 @@
     width: 1px;
 }
 
-.links-nextprev {
-    box-shadow: inset 0 1px 0 0 var(--background-contrast-grey);
-    display: flex;
-    justify-content: space-between;
-    list-style: none;
-    width: 100%;
-}
-
 table {
     margin: 1em 0;
 }
@@ -116,37 +108,34 @@ div.fr-callout__text p {
 }
 
 /** Missing icons **/
-.fr-follow .fr-link--mastodon:before,
-.fr-follow .fr-link--peertube:before,
-.fr-follow .fr-link--github:before,
-.fr-follow .fr-link--sourcehut:before {
-    background-color: currentColor !important;
-    content: "" !important;
-    display: inline-block !important;
-    flex: 0 0 auto !important;
-    height: var(--icon-size) !important;
-    -webkit-mask-size: 100% 100% !important;
-    mask-size: 100% 100% !important;
-    vertical-align: calc((.75em - var(--icon-size)) * .5) !important;
-    width: var(--icon-size) !important;
-}
-
-.fr-follow .fr-link--mastodon:before {
-    -webkit-mask-image: url(icons/logo/mastodon-fill.svg) !important;
-    mask-image: url(icons/logo/mastodon-fill.svg) !important;
-}
-
-.fr-follow .fr-link--peertube:before {
+.fr-follow .fr-btn--peertube:before,
+.fr-follow .fr-btn--github:before,
+.fr-follow .fr-btn--sourcehut:before {
+    margin-left: 0;
+    margin-right: 0.5rem;
+    flex: 0 0 auto;
+    display: inline-block;
+    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+    background-color: currentColor;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    --icon-size: 2rem;
+    content: "";
+}
+
+.fr-follow .fr-btn--peertube:before {
     -webkit-mask-image: url(../icons/logo/peertube.svg) !important;
     mask-image: url(../icons/logo/peertube.svg) !important;
 }
 
-.fr-follow .fr-link--github:before {
-    -webkit-mask-image: url(icons/logo/github-fill.svg) !important;
-    mask-image: url(icons/logo/github-fill.svg) !important;
+.fr-follow .fr-btn--github:before {
+    -webkit-mask-image: url(../icons/logo/github-fill.svg) !important;
+    mask-image: url(../icons/logo/github-fill.svg) !important;
 }
 
-.fr-follow .fr-link--sourcehut:before {
+.fr-follow .fr-btn--sourcehut:before {
     -webkit-mask-image: url(../icons/logo/sourcehut.svg) !important;
     mask-image: url(../icons/logo/sourcehut.svg) !important;
 }

diff --git a/public/icons/logo/github-fill.svg b/public/icons/logo/github-fill.svg