TEMPLATE-Web-site-one-page/Doc/fonctionnement-onepage.md

Fonctionnement du one page

Ce projet fonctionne comme un site statique avec un seul point d'entrée HTML. Le JavaScript sert uniquement à lire l'URL, choisir la bonne route, charger le bon fichier HTML dans p/, puis injecter son contenu dans la zone centrale de la page.

Le principe général est simple:

1. index.html garde le header, le footer et le conteneur principal.
2. Chaque section vit dans un dossier sous p/.
3. Le script lit la route demandée dans l'URL.
4. Le script charge p/<route>/index.html avec fetch.
5. Le contenu de la page est injecté dans le main.

Fichiers impliqués

• index.html contient le chrome global du site.
• p/assets/main-nav/app.js contient le routeur JavaScript.
• p/dl/index.html contient le contenu de la page DL.

Rôle de index.html

index.html ne contient pas le contenu de toutes les pages. Il contient seulement:

• le header commun,
• la navigation,
• le main vide,
• le footer commun,
• l'appel au script JavaScript.

Exemple de lien de navigation:

<a href="/?p/dl/" data-route="dl">DL</a>

Ce lien fait deux choses:

• il indique au navigateur une URL propre,
• il donne au script un identifiant de route via data-route.

Comment le script lit l'URL

Le script commence par récupérer la route dans l'adresse courante.

Il sait reconnaître plusieurs formes:

• /?p/dl/
• /?p=dl
• /p/dl/

La fonction routeFromLocation() nettoie ensuite la valeur pour obtenir une route simple comme home ou dl.

Normalisation de route

La fonction normalizeRoute(value) sert à standardiser les valeurs.

Elle transforme par exemple:

• HOME en home
• accueil en home
• /dl/ en dl

Cette normalisation évite d'avoir plusieurs variantes pour une même page.

Chargement du contenu

La fonction loadRoute(route) fait le vrai travail.

Cas de l'accueil

Quand la route vaut home, le script n'a pas besoin de charger un fichier externe. Il injecte directement le bloc HTML de l'accueil dans le main.

Cas d'une page sous p/

Quand la route vaut autre chose que home, le script construit le chemin du fichier:

p/<route>/index.html

Exemple:

p/dl/index.html

Puis il appelle fetch pour lire ce fichier.

Le script ne prend pas tout le HTML de la page externe. Il récupère uniquement l'élément portant data-page-content:

<main data-page-content>
  ...
</main>

Ensuite, il insère seulement son contenu intérieur dans le main du site principal.

Injection dans le main

L'injection se fait avec:

main.innerHTML = injected.innerHTML.trim();

Donc:

• le header ne bouge pas,
• le footer ne bouge pas,
• seul le contenu central change.

Mise à jour de l'URL

Après le chargement, le script met à jour l'URL avec l'API History.

Exemple:

• home devient /
• dl devient /?p/dl/

Cela permet de partager une URL propre sans recharger complètement la page.

Navigation au clic

Le script écoute les clics sur les liens qui possèdent data-route.

Quand tu cliques sur un lien:

1. il bloque la navigation normale avec event.preventDefault();
2. il lit data-route;
3. il appelle render(route);
4. il charge la page correspondante dans le main.

Exemple:

<a href="/?p/dl/" data-route="dl">DL</a>

Bouton retour du navigateur

Le script écoute aussi l'événement popstate.

Cela veut dire que:

• si tu fais retour arrière,
• ou avance dans l'historique,
• le site recharge automatiquement la bonne route.

Structure attendue pour une nouvelle page

Pour ajouter une page, il suffit de créer un nouveau dossier sous p/.

Exemple pour une page contact:

p/contact/index.html

Le fichier doit contenir un bloc avec data-page-content:

<main data-page-content>
  <section class="hero">
    <h1>Contact</h1>
  </section>
</main>

Puis tu ajoutes un lien dans index.html:

<a href="/?p/contact/" data-route="contact">Contact</a>

Le JavaScript n'a pas besoin d'être modifié tant que la structure reste la même.

Ce que ce système n'utilise pas

Ce projet n'utilise pas:

• Node.js,
• un bundler,
• un framework front,
• des fichiers .html séparés dans la racine pour chaque page.

Tout repose sur un site statique et un petit routeur en JavaScript.

Point important

Le chargement via fetch fonctionne mieux quand le site est servi par un serveur statique, comme Five Server.

Si tu ouvres le fichier en file://, le navigateur peut bloquer l'accès aux fichiers internes pour des raisons de sécurité.

Résumé rapide

Le script fait trois choses:

• il lit la route dans l'URL,
• il charge le bon fichier dans p/,
• il injecte le contenu dans le main.

Le reste du site est fixe et partagé par toutes les pages.