Update homepage

* Fetch SILL data * Add dynamic cards
codegouvfr · Jan 26, 2024 · 9d8ae0b · 9d8ae0b
1 parent 18999f0
commit 9d8ae0b
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 5 deletions.
diff --git a/_data/sill.js b/_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;
+};
diff --git a/_includes/components/card-custom-home.njk b/_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>
diff --git a/content/fr/index.11tydata.js b/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.",
         },
         {

diff --git a/content/fr/index.njk b/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">

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -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 => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/public/css/index.css b/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%;
+}