Dynamically update cards on home page

For sill random software and awesome random project

_data/sill.js

@@ -1,8 +1,8 @@
 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
+    const URL = "https://code.gouv.fr/sill/api/sill.json"; // To use when SILL is up
+    // const URL = "https://code.gouv.fr/data/sill.json"; // Backup source
 
     let sill = await EleventyFetch(URL, {
         duration: "2w",

_includes/components/card-custom-home.njk

@@ -1,5 +1,5 @@
 {% 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 fr-enlarge-link fr-card--horizontal-half fr-card--grey fr-card--no-border fr-card--sm {{ card.addClass }}">
   <div class="fr-card__body">
     <div class="fr-card__content">
       {% set cardUrl = card.url | locale_url or card.externalUrl %}

content/data/awesome.njk

@@ -0,0 +1,4 @@
+---
+permalink: /data/awesome.json
+---
+{{ awesome | dump | safe }}

content/data/sill.njk

@@ -0,0 +1,4 @@
+---
+permalink: /data/sill.json
+---
+{{ sill | dump | safe }}

content/fr/index.njk

@@ -31,34 +31,25 @@ eleventyNavigation:
   </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"
+        image: {
+          src: "",
+          alt: ""
+        },
+        detail: "Un logiciel au hasard",
+        addClass: "sill"
       }) }}
     </div>
     <div class="fr-col-12 fr-col-md-4">
-      {% set randomSourceCode = awesome | 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"
+        url: false,
+        image: {
+          src: "",
+          alt: ""
+        },
+        detail: "Un projet au hasard",
+        addClass: "awesome"
       }) }}
     </div>
     <div class="fr-col-12 fr-col-md-4">
@@ -103,3 +94,7 @@ eleventyNavigation:
     </div>
   </div>
 </div>
+
+{% js "body" %}
+  <script type="text/javascript" src="/js/home.js"></script>
+{% endjs %}

public/js/home.js

@@ -0,0 +1,39 @@
+(() => {
+    const random = (items) => {
+        return items[Math.floor(Math.random() * items.length)];
+    }
+
+    const logoAltTemplate = (strings, name) => `Logo de ${name}`;
+
+    const sillSoftwareTitleLink = document.querySelector(".sill .fr-card__title a");
+    const sillSoftwareImg = document.querySelector(".sill .fr-card__header img");
+
+    const getSill = async () => {
+        const response = await fetch(`${window.location.origin}/data/sill.json`);
+        return await response.json();
+    }
+
+    getSill().then(softwareList => {
+        const randomSoftware= random(softwareList);
+        sillSoftwareTitleLink.textContent = randomSoftware.name;
+        sillSoftwareTitleLink.href = `https://code.gouv.fr/sill/detail?name=${randomSoftware.name}`;
+        sillSoftwareImg.src = randomSoftware.logoUrl || randomSoftware.comptoirDuLibreSoftware?.logoUrl;
+        sillSoftwareImg.alt = logoAltTemplate`${randomSoftware.name}`;
+    });
+
+    const awesomeProjectTitleLink = document.querySelector(".awesome .fr-card__title a");
+    const awesomeProjectImg = document.querySelector(".awesome .fr-card__header img");
+
+    const getAwesome = async () => {
+        const response = await fetch(`${window.location.origin}/data/awesome.json`);
+        return await response.json();
+    }
+
+    getAwesome().then(awesomeProjects => {
+        const randomProject= random(awesomeProjects);
+        awesomeProjectTitleLink.textContent = randomProject.name;
+        awesomeProjectTitleLink.href = `${window.location.origin}/fr/awesome`;
+        awesomeProjectImg.src = randomProject.logo;
+        awesomeProjectImg.alt = logoAltTemplate`${randomProject.name}`;
+    });
+})();