feat(index): ajouter hero carousel avec images et script dedie

p/assets/main-nav/app.js

@@ -2,6 +2,7 @@
   const main = document.getElementById("app-main");
   const footerYear = document.getElementById("footer-year");
   const pageStyleSelectors = "[data-page-style='true']";
+  const pageScriptSelectors = "script[data-page-script='true']";
 
   const links = Array.from(document.querySelectorAll("[data-route]"));
 
@@ -13,6 +14,11 @@
     document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove());
   }
 
+  function clearInjectedPageScripts() {
+    document.dispatchEvent(new CustomEvent("page:before-route-change"));
+    document.querySelectorAll(pageScriptSelectors).forEach((node) => node.remove());
+  }
+
   function injectPageStyles(parsedDocument, sourceUrl) {
     clearInjectedPageStyles();
 
@@ -38,6 +44,37 @@
     });
   }
 
+  async function injectPageScripts(parsedDocument, sourceUrl) {
+    clearInjectedPageScripts();
+
+    const scriptNodes = Array.from(parsedDocument.querySelectorAll("script"));
+
+    for (const node of scriptNodes) {
+      const scriptElement = document.createElement("script");
+      scriptElement.setAttribute("data-page-script", "true");
+
+      const src = node.getAttribute("src");
+      if (src) {
+        scriptElement.src = new URL(src, sourceUrl).toString();
+        scriptElement.async = false;
+        if (node.defer) {
+          scriptElement.defer = true;
+        }
+
+        await new Promise((resolve, reject) => {
+          scriptElement.onload = () => resolve();
+          scriptElement.onerror = () => reject(new Error(`Impossible de charger le script: ${src}`));
+          document.body.appendChild(scriptElement);
+        });
+
+        continue;
+      }
+
+      scriptElement.textContent = node.textContent;
+      document.body.appendChild(scriptElement);
+    }
+  }
+
   function normalizeRoute(value) {
     const raw = (value ?? "").toString().trim().toLowerCase();
     if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
@@ -117,6 +154,8 @@
   }
 
   async function loadRoute(route) {
+    clearInjectedPageScripts();
+
     const source = routeToSource(route);
     const response = await fetch(source, { cache: "no-store" });
     if (!response.ok) {
@@ -128,6 +167,7 @@
     injectPageStyles(parsed, response.url);
     const injected = parsed.querySelector("[data-page-content]") ?? parsed.body;
     main.innerHTML = injected.innerHTML.trim();
+    await injectPageScripts(parsed, response.url);
   }
 
   function render(route, { replaceHistory = false } = {}) {