feat: main logic for one page

p/assets/main-nav/app.js

@@ -0,0 +1,166 @@
+(() => {
+  const main = document.getElementById("app-main");
+
+  const links = Array.from(document.querySelectorAll("[data-route]"));
+
+  function normalizeRoute(value) {
+    const raw = (value ?? "").toString().trim().toLowerCase();
+    if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
+      return "home";
+    }
+    return raw.replace(/^\/+|\/+$/g, "") || "home";
+  }
+
+  function routeFromLocation() {
+    const params = new URLSearchParams(window.location.search);
+
+    if (params.has("p")) {
+      return normalizeRoute(params.get("p"));
+    }
+
+    const rawSearch = window.location.search.replace(/^\?/, "");
+    if (rawSearch.startsWith("p/")) {
+      return normalizeRoute(rawSearch.slice(2));
+    }
+
+    if (rawSearch.startsWith("p=")) {
+      return normalizeRoute(rawSearch.slice(2));
+    }
+
+    const path = window.location.pathname.replace(/^\/+|\/+$/g, "");
+    if (path) {
+      const parts = path.split("/");
+      if (parts[0] === "p" && parts[1]) {
+        return normalizeRoute(parts.slice(1).join("/"));
+      }
+      return normalizeRoute(parts[0]);
+    }
+
+    return "home";
+  }
+
+  function setActiveRoute(route) {
+    links.forEach((link) => {
+      const isActive = link.dataset.route === route;
+      if (isActive) {
+        link.setAttribute("aria-current", "page");
+      } else {
+        link.removeAttribute("aria-current");
+      }
+    });
+  }
+
+  function setCanonicalUrl(route, replace = false) {
+    const url = route === "home" ? "/" : `/?p/${route}/`;
+    if (replace) {
+      history.replaceState({ route }, "", url);
+      return;
+    }
+    history.pushState({ route }, "", url);
+  }
+
+  function routeToSource(route) {
+    return route === "home" ? null : `p/${route}/index.html`;
+  }
+
+  function routeToTitle(route) {
+    if (route === "home") {
+      return "Fws Web";
+    }
+
+    const label = route
+      .split("/")
+      .filter(Boolean)
+      .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+      .join(" / ");
+
+    return `Fws Web - ${label}`;
+  }
+
+  async function loadRoute(route) {
+    if (route === "home") {
+      main.innerHTML = `
+        <section class="hero">
+          <p class="eyebrow">Navigation one-page</p>
+          <h1>Le site change de contenu sans changer de page.</h1>
+          <p class="lead">
+            Les liens du menu modifient l'URL, puis le script charge le HTML correspondant depuis
+            <span>p/...</span> et l'injecte dans le main.
+          </p>
+          <div class="hero-actions">
+            <a class="button button-primary" href="/?p/dl/" data-route="dl">Aller vers DL</a>
+            <a class="button button-secondary" href="/" data-route="home">Rester sur l'accueil</a>
+          </div>
+        </section>
+
+        <section class="grid">
+          <article class="card">
+            <h2>Header commun</h2>
+            <p>Le bandeau du haut reste identique sur chaque vue.</p>
+          </article>
+          <article class="card">
+            <h2>Footer commun</h2>
+            <p>Le pied de page reste fixe, quelle que soit la section chargée.</p>
+          </article>
+          <article class="card">
+            <h2>Injection réelle</h2>
+            <p>Chaque route peut venir d'un vrai fichier <span>index.html</span> dans <span>p/</span>.</p>
+          </article>
+        </section>
+      `;
+      return;
+    }
+
+    const source = routeToSource(route);
+    if (!source) {
+      throw new Error(`Route inconnue: ${route}`);
+    }
+
+    const response = await fetch(source, { cache: "no-store" });
+    if (!response.ok) {
+      throw new Error(`Impossible de charger ${source} (${response.status})`);
+    }
+
+    const html = await response.text();
+    const parsed = new DOMParser().parseFromString(html, "text/html");
+    const injected = parsed.querySelector("[data-page-content]") ?? parsed.body;
+    main.innerHTML = injected.innerHTML.trim();
+  }
+
+  function render(route, { replaceHistory = false } = {}) {
+    const safeRoute = route || "home";
+
+    loadRoute(safeRoute)
+      .then(() => {
+        setActiveRoute(safeRoute);
+        setCanonicalUrl(safeRoute, replaceHistory);
+        document.title = routeToTitle(safeRoute);
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      })
+      .catch((error) => {
+        main.innerHTML = `<section class="hero"><h1>Erreur de chargement</h1><p class="lead">${error.message}</p></section>`;
+        setActiveRoute("home");
+      });
+  }
+
+  document.addEventListener("click", (event) => {
+    const link = event.target.closest("[data-route]");
+    if (!link) {
+      return;
+    }
+
+    const route = normalizeRoute(link.dataset.route);
+    if (!route) {
+      return;
+    }
+
+    event.preventDefault();
+    render(route);
+  });
+
+  window.addEventListener("popstate", () => {
+    render(routeFromLocation(), { replaceHistory: true });
+  });
+
+  render(routeFromLocation(), { replaceHistory: true });
+})();