FWS/TEMPLATE-Web-site-one-page
Template
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: index on p/index not on JS

Browse Source 
[10][DONE]
This commit is contained in:
BlackAngelTVdev
2026-05-27 19:22:46 +02:00
parent eef955dd3f
commit ef1185435b
5 changed files with 253 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
p/assets/main-nav/app.js
+8 -45
View File
@@ -6,9 +6,9 @@
function normalizeRoute(value) {
const raw = (value ?? "").toString().trim().toLowerCase();
if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") {
return "home";
return "index";
}
return raw.replace(/^\/+|\/+$/g, "") || "home";
return raw.replace(/^\/+|\/+$/g, "") || "index";
}
function routeFromLocation() {
@@ -36,7 +36,7 @@
return normalizeRoute(parts[0]);
}
return "home";
return "index";
}
function setActiveRoute(route) {
@@ -51,7 +51,7 @@
}
function setCanonicalUrl(route, replace = false) {
const url = route === "home" ? "/" : `/?p/${route}/`;
const url = route === "index" ? "/?p/index/" : `/?p/${route}/`;
if (replace) {
history.replaceState({ route }, "", url);
return;
@@ -60,11 +60,11 @@
}
function routeToSource(route) {
return route === "home" ? null : `p/${route}/index.html`;
return `p/${route}/index.html`;
}
function routeToTitle(route) {
if (route === "home") {
if (route === "index") {
return "Fws Web";
}
@@ -78,44 +78,7 @@
}
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})`);
@@ -128,7 +91,7 @@
}
function render(route, { replaceHistory = false } = {}) {
const safeRoute = route || "home";
const safeRoute = route || "index";
loadRoute(safeRoute)
.then(() => {
@@ -139,7 +102,7 @@
})
.catch((error) => {
main.innerHTML = `<section class="hero"><h1>Erreur de chargement</h1><p class="lead">${error.message}</p></section>`;
setActiveRoute("home");
setActiveRoute("index");
});
}
p/index/index.html
+39
View File
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Accueil</title>
</head>
<body>
<main data-page-content>
<section class="hero">
<p class="eyebrow">Navigation one-page</p>
<h1>Le site change de contenu sans changer de page.</h1>
<p class="lead">
La page principale vit dans <span>p/index/index.html</span> et le script l'injecte dans le
<span>main</span> quand l'URL pointe vers <span>/?p/index/</span>.
</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="/?p/index/" data-route="index">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>
</main>
</body>
</html>