Merge branch 'main' into production

.github/workflows/preproduction.yml

@@ -17,7 +17,7 @@ jobs:
           submodules: true
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
       - name: Build with Eleventy
         run: |

.github/workflows/production.yml

@@ -17,7 +17,7 @@ jobs:
           submodules: true
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
       - name: Build with Eleventy
         run: |

_data/i18n/index.js

@@ -20,5 +20,5 @@ const buildTranslations = () => {
 
 module.exports = {
     availableLang: langDirectories,
-    ...buildTranslations()
+    translations: buildTranslations()
 };

_data/sill.js

@@ -0,0 +1,13 @@
+const EleventyFetch = require("@11ty/eleventy-fetch");
+
+module.exports = async function () {
+    const URL = "https://code.gouv.fr/data/sill.json";
+    // const URL = "https://code.gouv.fr/sill/api/sill.json"; // To use when SILL is up
+
+    let sill = await EleventyFetch(URL, {
+        duration: "2w",
+        type: "json"
+    });
+
+    return sill;
+};

_includes/components/card-custom-home.njk

@@ -0,0 +1,30 @@
+{% if not card %}{% set card = params %}{% endif %}
+<div class="fr-card fr-enlarge-link fr-card--horizontal-half fr-card--grey fr-card--no-border fr-card--sm">
+  <div class="fr-card__body">
+    <div class="fr-card__content">
+      {% set cardUrl = card.url | locale_url or card.externalUrl %}
+      <h3 class="fr-card__title"><a href="{{ cardUrl }}">{{ card.title }}</a></h3>
+      <p class="fr-card__desc">{{ card.description }}</p>
+      {% if card.announcement %}
+        <div class="fr-card__start">
+          <div class="fr-card__start">
+            <ul class="fr-badges-group">
+              <li>
+                <p class="fr-badge fr-badge--new">{{ card.announcement }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+        {% elif card.detail %}
+        <p class="fr-card__detail">{{ card.detail }}</p>
+      {% endif %}
+    </div>
+  </div>
+  {% if card.image %}
+    <div class="fr-card__header">
+      <div class="custom-card__img">
+        <img src="{{ card.image.src }}" alt="{{ card.image.alt }}">
+      </div>
+    </div>
+  {% endif %}
+</div>

_includes/components/card.njk

@@ -1,5 +1,5 @@
 {% if not card %}{% set card = params %}{% endif %}
-<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{% if not card.externalUrl %} fr-enlarge-link{% endif %} {{ card.addClass }}">
   <div class="fr-card__body">
     <div class="fr-card__content">
       {% set cardUrl = card.url | locale_url or card.externalUrl %}
@@ -37,20 +37,24 @@
       {% 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.image.path %}
-      <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
-      {% elif card.image.src %}
-      <div class="fr-card__img">
-        <img class="fr-responsive-img fr-responsive-img--1x1" src="{{ card.image.src }}" alt="{{ card.image.alt }}">
-      </div>
-    {% endif %}
-  </div>
+  {% if card.badges or card.image %}
+    <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.image %}
+        {% if card.image.path %}
+          <div class="fr-card__img">{% imageSync card.image.path, card.image.alt %}</div>
+          {% elif card.image.src %}
+          <div class="fr-card__img">
+            <img class="fr-responsive-img fr-responsive-img--1x1" src="{{ card.image.src }}" alt="{{ card.image.alt }}">
+          </div>
+        {% endif %}
+      {% endif %}
+    </div>
+  {% endif %}
 </div>

_includes/postslist.njk

@@ -13,7 +13,7 @@
         path: post.data.image.path | resolvePath(post),
         alt: post.data.image.alt
       },
-      orientation: "horizontal"
+      addClass: "fr-card--horizontal-tier"
     }) }}
   </div>
   {% endall %}

_includes/previousnextlinks.njk

@@ -1,3 +1,4 @@
+{% from "components/component.njk" import component with context %}
 {% set previousPost = currentPosts | filterCollectionLang | getPreviousCollectionItem %}
 {% set nextPost = currentPosts | filterCollectionLang | getNextCollectionItem %}
 {% if nextPost or previousPost %}
@@ -6,34 +7,22 @@
     <div class="fr-grid-row fr-grid-row--gutters fr-mb-6w">
       {% 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>
+          {{ component("card", {
+            url: previousPost.url,
+            title: previousPost.data.title,
+            date: previousPost.date,
+            addClass: "fr-card--horizontal-tier fr-card--grey fr-card--no-border fr-card--sm"
+          }) }}
         </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>
+          {{ component("card", {
+            url: nextPost.url,
+            title: nextPost.data.title,
+            date: nextPost.date,
+            addClass: "fr-card--horizontal-tier fr-card--grey fr-card--no-border fr-card--sm"
+          }) }}
         </div>
       {% endif %}
     </div>

content/fr/blog/posts/de-la-transparence-a-lexplicabilite-automatisee-des-algorithmes/index.md

@@ -6,7 +6,10 @@ image:
   path: ./illustration-explication-algorithmes.png
   alt: "Exemple d'interface pour expliquer un traitement algorithmique"
   hide: True
-tags: explicabilité algorithmes transparence
+tags:
+  - explicabilité
+  - algorithmes
+  - transparence
 ---
 
 *La transparence algorithmique ne se résume pas à la publication des codes sources. Comme le reflète la page que nous avons dédiée aux [outils aidant à expliquer les décisions administratives](https://code.gouv.fr/fr/explicabilite/), les façons de traduire du texte juridique en code source informatique sont variées. La mission logiciels libres accueille une entrée de blog invitée proposée par Denis Merigoux, Marie Alauzen, Justine Banuls, Louis Gesbert et Émile Rolley ; ils nous présentent un travail de recherche récent sur ces sujets. Les recommandations formulées dans cette entrée de blog appartiennent à son auteur.*

content/fr/bluehats/bsoc/2022/promotion.njk

@@ -22,7 +22,7 @@ permalink: /fr/bluehats/bsoc-promotion-2022/
         path: person.imagePath,
         alt: person.name
       },
-      orientation: "horizontal"
+      orientation: "fr-card--horizontal-tier"
     }) }}
   </div>
   {% endall %}

content/fr/index.11tydata.js

@@ -2,13 +2,13 @@ module.exports = {
     actions: [
         {
             url: "/fr/utiliser/",
-            title: "Utiliser",
+            title: "Pour l'administration",
             description: "Mieux connaître, utiliser et concevoir les logiciels libres et les communs numériques.",
         },
         {
             url: false,
             externalUrl: "https://code.gouv.fr/public/",
-            title: "Publier",
+            title: "Par les administrations",
             description: "Développer et accompagner l’ouverture et la libération des codes sources de l'administration.",
         },
         {

content/fr/index.njk

@@ -23,6 +23,53 @@ eleventyNavigation:
   </div>
 </div>
 <div class="fr-container fr-my-6w">
+  {% from "components/component.njk" import component with context %}
+  <div class="fr-grid-row">
+    <div class="fr-col-12">
+      <h2>Des logiciels libres <span class="fr-text-label--blue-france">pour</span> et <span class="fr-text-label--blue-france">par</span> les administrations</h2>
+    </div>
+  </div>
+  <div class="fr-grid-row fr-grid-row--gutters">
+    <div class="fr-col-12 fr-col-md-4">
+      {% set randomSoftware = sill | random %}
+      {% if randomSoftware.logoUrl %}
+        {% set randomSoftwareImage = {
+          src: randomSoftware.logoUrl,
+          alt: "Logo de " + randomSoftware.n
+        } %}
+      {% endif %}
+      {{ component("card-custom-home", {
+        url: false,
+        externalUrl: "https://code.gouv.fr/sill/" + randomSoftware.n,
+        title: randomSoftware.n,
+        image: randomSoftwareImage,
+        detail: "Un logiciel au hasard"
+      }) }}
+    </div>
+    <div class="fr-col-12 fr-col-md-4">
+      {% set randomSourceCode = awesome.dist | values | random %}
+      {% if randomSourceCode.logo %}
+        {% set randomSourceCodeImage = {
+          src: randomSourceCode.logo,
+          alt: "Logo de " + randomSourceCode.name
+        } %}
+      {% endif %}
+      {{ component("card-custom-home", {
+        url: "/awesome/" | locale_url,
+        title: randomSourceCode.name,
+        image: randomSourceCodeImage,
+        detail: "Un projet au hasard"
+      }) }}
+    </div>
+    <div class="fr-col-12 fr-col-md-4">
+      {% set latestBlueHatsPost = collections.bluehats_posts | filterCollectionLang | last %}
+      {{ component("card-custom-home", {
+        url: latestBlueHatsPost.url,
+        title: latestBlueHatsPost.data.title,
+        announcement: "La dernière actualité BlueHats"
+      }) }}
+    </div>
+  </div>
   <div class="fr-grid-row fr-grid-row--gutters">
     {% for tile in actions %}
       <div class="fr-col-12 fr-col-md-4">

eleventy.config.js

@@ -15,7 +15,7 @@ const pluginCalendar = require("@codegouvfr/eleventy-plugin-calendar");
 
 const customMarkdownContainers = require("./markdown-custom-containers");
 
-const translations = require("./_data/i18n");
+const {translations} = require("./_data/i18n");
 
 module.exports = function (eleventyConfig) {
     // Copy the contents of the `public` folder to the output folder
@@ -147,9 +147,7 @@ module.exports = function (eleventyConfig) {
         return collection.find(post => post.fileSlug === slug);
     });
 
-    eleventyConfig.addFilter("stripTags", str => {
-        return (str || "").replace(/<[^>]*>/g, '');
-    });
+    eleventyConfig.addFilter("values", object => Object.values(object));
 
     // Customize Markdown library settings:
     eleventyConfig.amendLibrary("md", mdLib => {

package.json

@@ -27,6 +27,7 @@
   "homepage": "https://code.gouv.fr/",
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-fetch": "^4.0.0",
     "@11ty/eleventy-img": "^3.1.8",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-bundle": "^1.0.5",

public/css/index.css

@@ -152,3 +152,14 @@ div.fr-callout__text p {
 .text-center {
     text-align: center;
 }
+
+.custom-card__img {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.custom-card__img img {
+    width: 50%;
+}