added page title update on hash change

JulienR1 · Jan 30, 2025 · 6701cca · 6701cca
1 parent 1894c23
commit 6701cca
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 13 deletions.
diff --git a/packages/web/src/layouts/Layout.astro b/packages/web/src/layouts/Layout.astro
@@ -2,15 +2,24 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import TopArrow from "../components/TopArrow.astro";
+import type { Routes } from "../routes/router";
+import { routerLabels } from "../routes/router";
+import { asArray } from "../lib/utils";
+
+type Path = Routes<["footer-only", "disabled"]>;
 
 interface Props {
-  title?: string;
+  path: Path | Path[];
 }
 
-let title = "Trampoline Intercité";
-if (Astro.props.title) {
-  title += " | " + Astro.props.title;
-}
+const paths = asArray(Astro.props.path);
+const labels = paths.reduce(
+  (acc, path) => ({ ...acc, [path]: routerLabels[path] }),
+  {} as Record<Path, string>,
+);
+
+const label = labels[paths[0]];
+const title = "Trampoline Intercité" + (label ? ` | ${label}` : "");
 ---
 
 <!doctype html>
@@ -94,3 +103,12 @@ if (Astro.props.title) {
     }
   });
 </script>
+
+<script is:inline define:vars={{ labels }}>
+  addEventListener("hashchange", function () {
+    const path = window.location.pathname + window.location.hash;
+    if (labels[path]) {
+      document.title = document.title.replace(/\| .*/, `| ${labels[path]}`);
+    }
+  });
+</script>
diff --git a/packages/web/src/lib/utils.ts b/packages/web/src/lib/utils.ts
@@ -0,0 +1,3 @@
+export function asArray<T>(x: T | T[]) {
+    return Array.isArray(x) ? x : [x]
+}
diff --git a/packages/web/src/pages/404.astro b/packages/web/src/pages/404.astro
@@ -3,7 +3,7 @@ import Logo from "../components/Logo.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="404">
+<Layout path="/404">
   <div
     class="flex items-center flex-col mt-[30%] max-w-52 mx-auto sm:flex-row sm:max-w-96 sm:gap-8"
   >

diff --git a/packages/web/src/pages/horaire.astro b/packages/web/src/pages/horaire.astro
@@ -2,4 +2,4 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="Horaire">horaire</Layout>
+<Layout path="/horaire">horaire</Layout>
diff --git a/packages/web/src/pages/index.astro b/packages/web/src/pages/index.astro
@@ -2,4 +2,4 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="Accueil">INDEX</Layout>
+<Layout path="/">INDEX</Layout>
diff --git a/packages/web/src/routes/router.ts b/packages/web/src/routes/router.ts
@@ -1,5 +1,5 @@
 import type { FilterRoutes, ListRoutes, RouteArray, RouteModifer } from "./routes"
-import { filter } from "./routes"
+import { filter, labels } from "./routes"
 
 export const router = [
     { path: "/", label: "Accueil", modifiers: ["footer-only"] },
@@ -26,10 +26,13 @@ export const router = [
         ]
     },
     { path: "/horaire", label: "Horaire", icon: "date_range" },
-    { path: "/contact", label: "Contact", icon: "call" }
+    { path: "/contact", label: "Contact", icon: "call" },
+    { path: "/404", label: "404", modifiers: ['disabled'] }
 ] as const
 router satisfies RouteArray
 
 export const headerRouter = filter(['header-only'], router)
 export const footerRouter = filter(['footer-only'], router)
 export type Routes<M extends RouteModifer[] = []> = ListRoutes<FilterRoutes<typeof router, M>>
+
+export const routerLabels = labels(router)
diff --git a/packages/web/src/routes/routes.ts b/packages/web/src/routes/routes.ts
@@ -32,13 +32,20 @@ export const filter = <R extends RouteArray, M extends readonly RouteModifer[]>(
         .filter(route => (route.modifiers ?? []).every(modifier => allowed.includes(modifier)))
         .map(route => "subroutes" in route ? ({ ...route, subroutes: filter(allowed, route.subroutes!) }) : route) as FilterRoutes<R, M>
 
+export type Labels<R extends RouteArray> = { [key in ListRoutes<R>]: string }
+
+export const labels = <R extends RouteArray>(routes: R): Labels<R> => {
+    return routes.reduce((acc, route) => ({
+        ...acc,
+        [route.path]: route.label,
+        ...('subroutes' in route ? labels(route.subroutes!) : {})
+    }), {} as Labels<R>)
+}
+
 export type ListRoutes<R extends RouteArray> =
     R extends readonly [infer First extends Route, ...infer Rest extends RouteArray] ?
     First['path'] |
     ListRoutes<Rest> | (
         First['subroutes'] extends RouteArray ?
         ListRoutes<First['subroutes']> : never
     ) : never
-
-
-