Update style after eleventy-dsfr upgrade

* Update layouts * Update icons and illustrations
codegouvfr · Jan 24, 2024 · db54ad1 · db54ad1
1 parent 78b1136
commit db54ad1
Show file tree

Hide file tree

Showing 33 changed files with 408 additions and 461 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,5 @@ Le contenu rédactionnel du site est une publication DINUM, 20 avenue de Ségur,
 
 ### Crédits images
 
-- [Gradient icons created by srip](https://www.flaticon.com/authors/srip/gradient)
-- hat by sripfoto from [Noun Project](https://thenounproject.com/srip/) (CC BY 3.0)
+- [Programmer.png](public/illustrations/Programmer.png) par ven sur [IllustrationKit](https://illustrationkit.com/illustrations/ven)
 - [Blank_man_placeholder.svg](https://fr.wikipedia.org/wiki/Fichier:Blank_man_placeholder.svg) par [AntoFran](https://commons.wikimedia.org/wiki/User:AntoFran) sous licence [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0>).
-
diff --git a/_includes/layouts/bluehats-post.njk b/_includes/layouts/bluehats-post.njk
@@ -1,7 +1,7 @@
 ---
 layout: layouts/base.njk
 ---
-<div class="fr-container fr-py-8v">
+<div class="fr-container fr-py-6w">
   {% if showBreadcrumb %}
     {% include "components/breadcrumb.njk" %}
   {% endif %}
@@ -26,7 +26,7 @@ layout: layouts/base.njk
 
       {% if description %}
         <p class="fr-text--lead">
-          {{ description | safe }}
+          {{ description }}
         </p>
       {% endif %}
 
@@ -55,45 +55,7 @@ layout: layouts/base.njk
   </div>
 
   {% if collections.bluehats_posts %}
-    {% set previousPost = collections.bluehats_posts | filterCollectionLang | getPreviousCollectionItem %}
-    {% set nextPost = collections.bluehats_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 %}
-        {% 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 fr-icon-time-fill">
-                  <time datetime="{{ nextPost.date | htmlDateString }}">
-                    {{ nextPost.date | readableDate }}
-                  </time>
-                </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 %}
+    {% set currentPosts = collections.bluehats_posts %}
+    {% include "previousnextlinks.njk" %}
   {% endif %}
-
 </div>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -24,9 +24,9 @@ layout: layouts/base.njk
       </div>
 
       {% if image %}
-      {% if not image.hide %}
-        {% imageContent image.path, image.alt %}
-      {% endif %}
+        {% if not image.hide %}
+          {% imageContent image.path, image.alt %}
+        {% endif %}
       {% endif %}
 
       {{ content | safe }}

diff --git a/content/en/bluehats.njk b/content/en/bluehats.njk
@@ -5,47 +5,65 @@ eleventyNavigation:
   key: BlueHats 🧢
   order: 2
 ---
-<div class="fr-container fr-pt-8w fr-pb-3w">
-  <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
-    <div class="fr-col-offset-md-1 fr-col-12 fr-col-sm-12 fr-col-md-6">
-      <h1><code>BlueHats</code>, who's in ?</h1>
-      <p>
-	The <code>BlueHats</code> are all the people who want to show that they contribute to Free and Open Source software developed and/or used by public administrations <strong>all over the world</strong>: civil servants involved in the use and development of these software, of course, but also citizens who recognise that their actions in favour of Free Software help the administration's projects.
-      </p>
-      <p>
-	<code>BlueHats</code> is <em>not</em> a product or a brand of the French Free Software Unit. It's a global movement to which our unit contributes by publishing a <a href="/fr/bluehats/tags/gazette/">newsletter in French</a>, organising <a href="/fr/bluehats/tags/atelier/">online workshops</a> and <a href="/fr/bluehats/tags/rencontre/">face-to-face meetings</a>. All public administrations around the world are invited to contribute to this movement and add events to the <a target="new" href="https://bluehats.global/about/">bluehats.global</a> website!
-      </p>
-    </div>
-    <div class="fr-col-md-4 fr-hidden fr-unhidden-md">
-      <img src="/img/bluehats_nyc_062023.jpg" alt="" class="fr-responsive-img">
+<div class="fr-py-6w">
+  <div class="fr-container">
+    <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-grid-row--middle">
+      <div class="fr-col-10 fr-col-md-6">
+        <h1><code>BlueHats</code>, who's in ?</h1>
+        <p class="fr-text--lg">
+          The <code>BlueHats</code> are all the people who want to show that they contribute to Free and Open Source
+          software developed and/or used by public administrations <strong>all over the world</strong>: civil servants
+          involved in the use and development of these software, of course, but also citizens who recognise that their
+          actions in favour of Free Software help the administration's projects.
+        </p>
+        <p class="fr-text--lg">
+          <code>BlueHats</code> is <em>not</em> a product or a brand of the French Free Software Unit. It's a global
+          movement to which our unit contributes by publishing a <a href="/fr/bluehats/tags/gazette/">newsletter in
+            French</a>, organising <a href="/fr/bluehats/tags/atelier/">online workshops</a> and <a
+              href="/fr/bluehats/tags/rencontre/">face-to-face meetings</a>. All public administrations around the world
+          are invited to contribute to this movement and add events to the
+          <a target="new" href="https://bluehats.global/about/">bluehats.global</a> website!
+        </p>
+      </div>
+      <div class="fr-hidden fr-unhidden-md fr-col-md-4">
+        <img src="/img/bluehats_nyc_062023.jpg" alt="BlueHats group photo" class="fr-responsive-img">
+      </div>
     </div>
   </div>
 </div>
-
-<div class="fr-background-alt--grey">
-  <div class="fr-container fr-pt-6w fr-pb-6w">
-    <h1 class="text-center"><code>BlueHats</code>, where to start?</h1>
+<div class="fr-py-6w fr-background-alt--grey">
+  <div class="fr-container">
+    <div class="fr-grid-row">
+      <div class="fr-col-12">
+        <h1 class="text-center"><code>BlueHats</code>, where to start?</h1>
+      </div>
+    </div>
   </div>
 </div>
-
-<div class="fr-container fr-pt-8w fr-pb-3w">
-  <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
-    <div class="fr-col-md-4 fr-hidden fr-unhidden-md">
-      <img src="/icons/bluehat.svg" alt="BlueHats logo" class="fr-responsive-img">
-    </div>
-    <div class="fr-col-offset-md-1 fr-col-12 fr-col-sm-12 fr-col-md-6">
-      <h2><code>BlueHats events</code></h2>
-      <p>
-	You can start by organising <code>BlueHats</code> events, inviting people to support Free Software in the public sector by sharing their expertise, hacking, etc.  Events do not have to be big hackathons: even small face-to-face meetings are useful.
-      </p>
-      <h2><code>BlueHats online workshops</code></h2>
-      <p>
-	As a civil servant, you can easily share your expertise on Free Software through online workshops to which you can invite other civil servants.
-      </p>
-      <h2><code>BlueHats newsletters</code></h2>
-      <p>
-	If your administration is willing to commit to spreading information about the progress of Free Software in the public sector, it can publish a newsletter.
-      </p>
+<div class="fr-my-6w">
+  <div class="fr-container">
+    <div class="fr-grid-row fr-grid-row--center">
+      <div class="fr-hidden fr-unhidden-md fr-col-md-4">
+        <img src="/icons/bluehats-logo-single.svg" alt="BlueHats logo" class="fr-responsive-img">
+      </div>
+      <div class="fr-col-10 fr-col-md-6">
+        <h3><code>BlueHats</code> events</h3>
+        <p class="fr-text--lg">
+          You can start by organising <code>BlueHats</code> events, inviting people to support Free Software in the
+          public sector by sharing their expertise, hacking, etc. Events do not have to be big hackathons: even small
+          face-to-face meetings are useful.
+        </p>
+        <h3><code>BlueHats</code> online workshops</h3>
+        <p class="fr-text--lg">
+          As a civil servant, you can easily share your expertise on Free Software through online workshops to which you
+          can invite other civil servants.
+        </p>
+        <h3><code>BlueHats</code> newsletters</h3>
+        <p class="fr-text--lg">
+          If your administration is willing to commit to spreading information about the progress of Free Software in
+          the public sector, it can publish a newsletter.
+        </p>
+      </div>
     </div>
   </div>
 </div>
diff --git a/content/en/index.njk b/content/en/index.njk
@@ -11,23 +11,23 @@ eleventyNavigation:
       <div class="fr-col-10 fr-col-md-6">
         <h1>{{ title }}</h1>
         <p class="fr-text--lead">
-	  Assisting government agencies in <strong>increasing their use of Free and Open Source software</strong> and supporting their efforts to <strong>publish source code</strong>.
+          Assisting government agencies in <strong>increasing their use of Free and Open Source software</strong> and
+          supporting their efforts to <strong>publish source code</strong>.
         </p>
       </div>
       <div class="fr-hidden fr-unhidden-md fr-col-md-4">
-        <img src="/icons/binaire-256.png" alt="">
+        <img src="/illustrations/Programmer.png" alt="">
       </div>
     </div>
   </div>
 </div>
-<div class="fr-container fr-my-6w">
-  <div class="fr-grid-row">
-    <div class="fr-col-12">
-      <h2>Action plan for Free Software and Digital Commons</h2>
-      <p>
-        <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right"
-           href="/en/action-plan-for-free-software-and-digital-commons">See</a>
-      </p>
+<div class="fr-py-6w">
+  <div class="fr-container">
+    <div class="fr-grid-row fr-grid-row--center">
+      <div class="fr-col-10">
+        <h2>Action plan for Free Software and Digital Commons</h2>
+        <a class="fr-btn" href="/en/action-plan-for-free-software-and-digital-commons">See It</a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/content/fr/awesome/index.njk b/content/fr/awesome/index.njk
@@ -1,31 +1,33 @@
 ---
 title: "Awesome CodeGouvFr"
+description: La liste des logiciels libres développés par des administrations et à fort potentiel de réutilisation.
 layout: layouts/page.njk
 eleventyNavigation:
   key: Awesome CodeGouvFr
   parent: Ressources
   order: 3
 ---
-<p class="fr-text--lead">
-  Voici une liste des logiciels libres développés par des administrations et à fort potentiel de réutilisation.
-<br>
-  Vous pouvez en apprendre plus dans le <a class="fr-link fr-text--lead" href="https://github.com/codegouvfr/awesome-codegouvfr" target="_blank">dépôt dédié à cette liste</a> et dans <a class="fr-link fr-text--lead" href="{{ "/blog/awesome-codegouvfr-logiciels-libres-remarquables-de-ladministration" | locale_url }}">l'article de blog</a> expliquant ce projet.
-</p>
-<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-mb-3w">
-  {% asyncAll filename, project in awesome.dist %}
-  <div class="fr-col-12 fr-col-md-3">
-    {% from "components/component.njk" import component with context %}
-    {{ component("card", {
-      url: false,
-      externalUrl: project.landingURL or project.url,
-      title: project.name,
-      description: project.description.fr.shortDescription,
-      image: {
-        src: project.logo,
-        alt: "Logo du projet"
-      },
-      detail: ('<a class="fr-link link-no-style" href="https://github.com/codegouvfr/awesome-codegouvfr#awesome-codegouvfr-score" target="_blank"><img src="' + project.awesomeShield + '" alt="Badge Awesome CodeGouvFr du projet"></a>') | safe
-    }) }}
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
+  title: "Vous souhaitez en apprendre plus ?",
+  description: 'Consultez le <a class="fr-link fr-text--lead" href="https://github.com/codegouvfr/awesome-codegouvfr" target="_blank">dépôt dédié à cette liste</a> et <a class="fr-link fr-text--lead" href="{{ "/blog/awesome-codegouvfr-logiciels-libres-remarquables-de-ladministration" | locale_url }}">l\'article de blog</a> expliquant ce projet.' | safe
+}) }}
+<div class="fr-my-6w">
+  <div class="fr-grid-row fr-grid-row--gutters">
+    {% asyncAll filename, project in awesome.dist %}
+    <div class="fr-col-12 fr-col-md-3">
+      {{ component("card", {
+        url: false,
+        externalUrl: project.landingURL or project.url,
+        title: project.name,
+        description: project.description.fr.shortDescription,
+        image: {
+          src: project.logo,
+          alt: "Logo du projet"
+        },
+        detail: ('<a class="fr-link link-no-style" href="https://github.com/codegouvfr/awesome-codegouvfr#awesome-codegouvfr-score" target="_blank"><img src="' + project.awesomeShield + '" alt="Badge Awesome CodeGouvFr du projet"></a>') | safe
+      }) }}
+    </div>
+    {% endall %}
   </div>
-  {% endall %}
 </div>
diff --git a/content/fr/blog/index.njk b/content/fr/blog/index.njk
@@ -1,6 +1,6 @@
 ---js
 {
-  title: "Blog",
+  title: "Actualités",
   pagination: {
     data: "collections.posts",
     size: 10,
@@ -12,7 +12,7 @@
   layout: "layouts/page.njk",
   permalink: "/{{ lang }}/blog/{% if pagination.pageNumber %}{{ pagePrefix }}{{ pagination.pageNumber + 1 }}/{% endif %}",
   eleventyNavigation: {
-    key: "Blog",
+    key: "Actualités",
     order: 5
   }
 }

diff --git a/content/fr/blog/tags.njk b/content/fr/blog/tags.njk
@@ -1,6 +1,6 @@
 ---js
 {
-  title: "Blog",
+  title: "Actualités",
   pagination: {
     data: "collections.posts",
     size: 1,

diff --git a/content/fr/bluehats/atelier.njk b/content/fr/bluehats/atelier.njk
@@ -1,12 +1,22 @@
-<p>
-  Les ateliers BlueHats sont des visioconférences où des agents publics présentent des logiciels libres qu'ils utilisent ou développent. Ils se tiennent un ou deux vendredi par mois de 11h à 12h30.  Ils sont visibles en rediffusion sur <a href="https://tube.numerique.gouv.fr/a/logicielslibres/video-channels" target="_blank">notre chaîne BlueHats</a>.
-</p>
-<p>
-  Vous pouvez <strong>proposer un atelier</strong> via <a target="_blank" href="https://pad.numerique.gouv.fr/2ZABhm7MQw2XGxuEPtmukA#">ce pad</a>.
-</p>
-<p>
-  Tout le monde peut assister en ligne aux ateliers via <a href="https://webinaire.numerique.gouv.fr//meeting/signin/362/creator/369/hash/84c9902a44b481830388d5d69c808eb669da0a5b" target="_blank">ce lien</a>.
-</p>
-<p>
-  Vous pouvez aussi vous abonner au <a href="/mission-logiciels-libres.ics">calendrier .ics</a> de tous les événements de la mission.
-</p>
+<div class="fr-highlight fr-highlight--blue-cumulus">
+  <p class="fr-text--lg">
+    Les ateliers BlueHats sont des visioconférences où des agents publics présentent des logiciels libres qu'ils
+    utilisent ou développent. Ils se tiennent un ou deux vendredi par mois de 11h à 12h30. Ils sont visibles en
+    rediffusion sur <a href="https://tube.numerique.gouv.fr/a/logicielslibres/video-channels" target="_blank">notre
+      chaîne BlueHats</a>.
+  </p>
+  <p class="fr-text--lg">
+    Vous pouvez <strong>proposer un atelier</strong> via <a target="_blank"
+                                                            href="https://pad.numerique.gouv.fr/2ZABhm7MQw2XGxuEPtmukA#">ce
+      pad</a>.
+  </p>
+  <p class="fr-text--lg">
+    Tout le monde peut assister en ligne aux ateliers via <a
+        href="https://webinaire.numerique.gouv.fr//meeting/signin/362/creator/369/hash/84c9902a44b481830388d5d69c808eb669da0a5b"
+        target="_blank">ce lien</a>.
+  </p>
+  <p class="fr-text--lg">
+    Vous pouvez aussi vous abonner au <a href="/mission-logiciels-libres.ics">calendrier <code>.ics</code></a> de tous les événements
+    de la mission.
+  </p>
+</div>
diff --git a/content/fr/bluehats/bluehats.11tydata.js b/content/fr/bluehats/bluehats.11tydata.js
@@ -4,25 +4,21 @@ module.exports = {
             url: "/fr/bluehats/tags/gazette/",
             title: "La gazette : le libre par et pour l'administration",
             description: "La gazette BlueHats est une lettre d'information bimestrielle autour des logiciels libres par et pour les administrations publiques.",
-            imageSrc: "/icons/interface-64.png"
         },
         {
             url: "/fr/bluehats/tags/atelier/",
             title: "Les ateliers",
             description: "Les ateliers BlueHats sont des visioconférences publiques consacrées à l'utilisation de logiciels libres par des administrations.",
-            imageSrc: "/icons/conference-64.png"
         },
         {
             url: "/fr/bluehats/tags/rencontre/",
             title: "Les rencontres",
             description: "Les rencontres BlueHats sont des événements en présentiel où les BlueHats se retrouve pour faire connaissance et collaborer.  Ces rencontres peuvent prendre différentes formes : Sprint Open Source, journées BlueHats lors de salons, etc.",
-            imageSrc: "/icons/businessman-64.png"
         },
         {
             url: "/fr/bluehats/prix-bluehats/",
             title: "Les prix BlueHats pour soutenir l'écosystème du libre",
             description: "En partenariat avec NLnet, la DINUM récompense quatre mainteneurs de projets libres.",
-            imageSrc: "/icons/coding-2-64.png"
         }
     ],
     accordionItems: [
@@ -45,7 +41,7 @@ module.exports = {
 {
             title: "Vous souhaitez organiser un atelier ou événement BlueHats ?",
             content: `
-<p>Tout agent public peut solliciter son administration pour organiser un événement BlueHats, en ligne ou en présentiel.  Si vous avez besoin de visuels pour communiquer, vous pouvez utiliser ce <a href="/docs/bluehats-visuals-2023-10-20.zip">kit BlueHats</a>.</p>`
+<p>Tout agent public peut solliciter son administration pour organiser un événement BlueHats, en ligne ou en présentiel.  Si vous avez besoin de visuels pour communiquer, vous pouvez utiliser ce <a href="https://github.com/codegouvfr/bluehats-visuals/archive/refs/tags/v0.5.zip">kit BlueHats</a>.</p>`
         }
     ]
 };
diff --git a/content/fr/bluehats/bsoc/2022/promotion.njk b/content/fr/bluehats/bsoc/2022/promotion.njk
@@ -17,7 +17,7 @@ permalink: /fr/bluehats/bsoc-promotion-2022/
       url: person.projectUrl,
       urlDescription: "En savoir plus sur " + person.projectName,
       title: person.name,
-      description: person.description,
+      description: person.description | safe,
       image: {
         path: person.imagePath,
         alt: person.name

diff --git a/content/fr/bluehats/gazette.njk b/content/fr/bluehats/gazette.njk
@@ -1,3 +1,9 @@
-<p>
-  La gazette BlueHats est la contribution de la DINUM au mouvement BlueHats. Cette lettre bimestrielle partage des informations sur l'utilisation et le développement de logiciels libres dans et pour l'administration. Elle sert aussi à donner une vue d'ensemble des activités du réseau de compagnonnage BlueHats. En la lisant, vous découvrirez des projets que vous pourrez tester ou suivre ; en y contribuant, vous partagerez vos initiatives et vos découvertes.
-</p>
+<div class="fr-highlight fr-highlight--blue-cumulus">
+  <p class="fr-text--lg">
+    La gazette BlueHats est la contribution de la DINUM au mouvement BlueHats. Cette lettre bimestrielle partage des
+    informations sur l'utilisation et le développement de logiciels libres dans et pour l'administration. Elle sert
+    aussi à donner une vue d'ensemble des activités du réseau de compagnonnage BlueHats. En la lisant, vous découvrirez
+    des projets que vous pourrez tester ou suivre ; en y contribuant, vous partagerez vos initiatives et vos
+    découvertes.
+  </p>
+</div>