From 0f6ebe1f034b225e83d33b546e312fb4ac1b44d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Jonin?= <helene.jonin@code.gouv.fr>
Date: Mon, 5 Feb 2024 16:10:08 +0100
Subject: [PATCH] Dynamically update cards on home page

For sill random software and awesome random project
---
 _data/sill.js                             |  4 +--
 _includes/components/card-custom-home.njk |  2 +-
 content/data/awesome.njk                  |  4 +++
 content/data/sill.njk                     |  4 +++
 content/fr/index.njk                      | 39 ++++++++++-------------
 public/js/home.js                         | 39 +++++++++++++++++++++++
 6 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 content/data/awesome.njk
 create mode 100644 content/data/sill.njk
 create mode 100644 public/js/home.js

diff --git a/_data/sill.js b/_data/sill.js
index a9365a98..2ff16ed0 100644
--- a/_data/sill.js
+++ b/_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",
diff --git a/_includes/components/card-custom-home.njk b/_includes/components/card-custom-home.njk
index 28dfa5de..471a9e47 100644
--- a/_includes/components/card-custom-home.njk
+++ b/_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 %}
diff --git a/content/data/awesome.njk b/content/data/awesome.njk
new file mode 100644
index 00000000..1370375a
--- /dev/null
+++ b/content/data/awesome.njk
@@ -0,0 +1,4 @@
+---
+permalink: /data/awesome.json
+---
+{{ awesome | dump | safe }}
\ No newline at end of file
diff --git a/content/data/sill.njk b/content/data/sill.njk
new file mode 100644
index 00000000..1d3dad04
--- /dev/null
+++ b/content/data/sill.njk
@@ -0,0 +1,4 @@
+---
+permalink: /data/sill.json
+---
+{{ sill | dump | safe }}
\ No newline at end of file
diff --git a/content/fr/index.njk b/content/fr/index.njk
index d0316f17..e74ebb53 100644
--- a/content/fr/index.njk
+++ b/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 %}
diff --git a/public/js/home.js b/public/js/home.js
new file mode 100644
index 00000000..f0a541c6
--- /dev/null
+++ b/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}`;
+    });
+})();
\ No newline at end of file