lightweight-router 1.0.12 → 1.0.16

package/README.md

@@ -13,7 +13,8 @@ PageFlick is a minimal lightweight client-side router with intelligent prefetchi
 - 🎨 Built-in loading animations
 - 🕰️ Based on History API so you can use native browser navigation
 - 🤖 Automatic title change
-- 📜 **Scroll routes** — multi-section landing pages: full-height `<route scroll>` blocks, smooth in-page navigation, and URL bar sync while scrolling
+- 📜 Scroll route sections with automatic URL/title updates
+
 
 ## Installation
 
@@ -35,15 +36,14 @@ Example:
 ```javascript
 import { startRouter } from "lightweight-router";
 
-startRouter();
+startRouter()
 
 //or with your callback
 
 startRouter({
-  onRouteChange: path => {
-    console.log("Route changed:", path);
+  onRouteChange: currentRoute => {
+    console.log("Route changed:", currentRoute);
   },
-  debug: true, // optional: log router activity to the console
 });
 ```
 
@@ -75,8 +75,7 @@ Initializes the router with the given options.
 #### Parameters
 
 - `options` (Object): Configuration options for the router.
-  - `onRouteChange` (Function): Called with the **current path string** when the route changes (including when the URL is updated while scrolling through scroll routes).
-  - `debug` (Boolean): When `true`, logs navigation and prefetch activity to the console.
+  - `onRouteChange` (Function): Callback function to be called when the route changes.
 
 ## Examples
 
@@ -88,20 +87,19 @@ Your website content
   import { startRouter } from "./router.js";
 
   startRouter({
-    onRouteChange: path => {
-      console.log("Route changed:", path);
+    onRouteChange: currentRoute => {
+      console.log("Route changed:", currentRoute);
     },
   });
 </script>
 ```
 
-See **`src/index.html`** in this repo for a full **scroll routes** landing example (`<route scroll>` sections and nav).
-
 ## Prefetching
 
 By default, links are prefetched when they get in the user's screen using an `IntersectionObserver`. This ensures that the content is loaded in the background before the user clicks on the link, providing a smoother navigation experience.
 This behaviour is automatically disabled if the user has data saving preferences.
 
+
 If you have too many links at once or too many requests, you can add the `prefetch="onHover"` attribute to your links or some of them (usually links to huge pages that are not often visited):
 
 ```html
@@ -113,31 +111,6 @@ The minified version was created with uglify-js, clean.css and then ultra minifi
 The size of the gzipped version was calculated with: https://dafrok.github.io/gzip-size-online/
 It's worth to note that nonetheless Terser give better results than uglify-js. The final uglify version packed by packjs.com was the smallest.
 
-## Scroll routes (landing sections)
-
-Use this for a **single HTML page** that behaves like several “routes”: tall sections that share one document, each with its own pathname. Mark sections with **`scroll`** on `<route>` and a **`path`** that matches the URL you want in the address bar.
-
-```html
-<router>
-  <route scroll path="/">
-    <!-- hero -->
-  </route>
-  <route scroll path="/features">
-    <!-- features -->
-  </route>
-  <route scroll path="/pricing.html">
-    <!-- pricing -->
-  </route>
-</router>
-```
-
-**Behavior**
-
-- When the current URL matches a **`route[scroll]`** `path`, all scroll routes are shown (non-scroll routes inside `<router>` are hidden), and the matching section is scrolled into view. Internal links to another scroll route use **smooth** scrolling.
-- While the user scrolls, an **IntersectionObserver** picks the most visible section and updates the URL with **`history.replaceState`** (and fires `onRouteChange`) so the address bar tracks the section in view.
-- Empty scroll routes still **fetch** HTML from the server like normal routes (prefetching applies the same way).
-- **Deep links**: opening `/features` directly only works if your static server **falls back to this HTML** for unknown paths (for example `npx serve . --single`).
-
 ## Browser Support
 
 The router is intended for modern browsers. Required features:
@@ -164,11 +137,11 @@ This allows only the changing part of the document to be updated, improving perf
 Once you configured your server to respond to this type of request, wrap the part of your document that changes in a `router` tag. Inside the `router` tag, render the current initial route inside a `route` tag like this:
 
 ```html
-<!-- Header menu and parts that don't change -->
+<-- Header menu and parts that don't change -->
 <router>
   <route path="/">home content</route>
 </router>
-<!-- footer etc.. -->
+<-- footer etc.. -->
 ```
 
 You can also prerender most visited routes by rendering them inside the `router` tag in their appropriate `route` tags for faster loading times:
@@ -187,15 +160,69 @@ Right now errors are shown without styling as the content of the page.
 If you like to use Preact and Deno for easy server config consider using the server side router present in [Singularity](https://github.com/andreafuturi/Singularity/) framework.
 It does exactly what we're talking about automatically by returning full html renders on normal request (sorrounded by an Index.jsx) and returing only partial route html when route is requested from inside the page (with onlyRoute param).
 
-## Performance Tips
 
+## Performance Tips
 - Implement server-side partial responses for better bandwidth usage
 - Consider using the `prefetch="onHover"` attribute for less important links
 
-## Future Development
+## Scroll Routes
 
+The `scroll` attribute on a `<route>` marks it as a scrollable section. Scroll routes are stacked vertically and always visible when in scroll-route context. Clicking a link to a scroll route smooth-scrolls to that section. As the user scrolls, the URL and page title update automatically to reflect the visible section.
+
+Use an optional `<title>` tag inside a scroll route to set the document title when that section is in view.
+
+```html
+<router>
+  <route path="/" scroll>
+    <title>Home | My Site</title>
+    <section style="min-height: 100vh">Hero content</section>
+  </route>
+  <route path="/features" scroll>
+    <title>Features | My Site</title>
+    <section style="min-height: 100vh">Features content</section>
+  </route>
+  <route path="/pricing" scroll>
+    <title>Pricing | My Site</title>
+    <section style="min-height: 100vh">Pricing content</section>
+  </route>
+</router>
+```
+
+You can mix scroll routes and regular routes. When navigating to a regular route, scroll routes are hidden. When navigating to a scroll route, regular routes are hidden and all scroll sections are visible.
+
+### Server configuration for direct URL access
+
+When a user visits a scroll route URL directly (e.g. `/features`), the server must serve the page containing the scroll routes. Configure your server to serve the same HTML file for all scroll route paths:
+
+**Nginx:**
+```nginx
+location ~ ^/(features|pricing)$ {
+  try_files $uri /home.html;
+}
+```
+
+**Express / Node.js:**
+```javascript
+app.get(["/", "/features", "/pricing"], (req, res) => {
+  res.sendFile(path.join(__dirname, "home.html"));
+});
+```
+
+**Vite / static dev servers:** Use a rewrite rule or `_redirects` file (Netlify/Vercel):
+```
+/features   /home.html  200
+/pricing    /home.html  200
+```
+
+## Future Development
 - Delay router intialization on first link hover for better performances?
 - Implement html streaming for faster page load
 - Cooler Error handling
 - Disable caching on certain links/routes (that needs to be always up to date)
 - Cache limiting
+
+
+
+
+
+

package/dist/router.min.js

@@ -1 +1 @@
-(()=>{let c={},o=!1,s=(...e)=>o&&console.log("🚦 Router:",...e),h="auto",t=null,u=0,n=e=>(e??"").replace(/\/$/,""),d=(e,t)=>{var r,o=n(t);for(r of e.querySelectorAll("route[scroll]"))if(n(r.getAttribute("path"))===o)return r;return null},f=()=>{t?.disconnect(),t=null},g=e=>{f();e=[...e.querySelectorAll("route[scroll]")];e.length&&(t=new IntersectionObserver(e=>{var t,r;Date.now()<u||(e=e.filter(e=>e.isIntersecting)).length&&(e.sort((e,t)=>t.intersectionRatio-e.intersectionRatio),e=e[0].target.getAttribute("path"))&&(t=n(e))!==n(globalThis.location.pathname)&&((r=new URL(globalThis.location.href)).pathname=e.startsWith("/")?e:"/"+e,globalThis.history.replaceState(null,"",r.pathname+r.search+r.hash),s("📍 Scroll URL sync:",t),y)&&y(t)},{root:null,rootMargin:"-38% 0px -38% 0px",threshold:[0,.1,.25,.5,.75,1]}),e.forEach(e=>t.observe(e)))},a=async()=>{s("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var e=globalThis.location.pathname.replace(/\/$/,"");let t=document.querySelector("router"),r=t.querySelector(`route[path="${e}"]`);if(r||(s("Creating new route element for:",e),(r=document.createElement("route")).setAttribute("path",e),t.appendChild(r)),!r.innerHTML){s("Fetching content for:",globalThis.location.href);let e=c[globalThis.location.href];e||(e=await v(globalThis.location.href),c[globalThis.location.href]=e);var o,n=(new DOMParser).parseFromString(e,"text/html"),a=n.querySelector("title"),a=(a&&(s("Updating page title to:",a.textContent),document.title=a.textContent),r.innerHTML=n.body.innerHTML,Array.from(r.querySelectorAll("script")));s("Executing",a.length,"scripts from fetched content");for(o of a){var l=document.createElement("script");o.src?l.src=o.src:l.textContent=o.textContent,o.parentNode.replaceChild(l,o)}}n=[...t.querySelectorAll("route[scroll]")],a=[...t.querySelectorAll("route:not([scroll])")];let i=d(t,e);if(Boolean(i)){n.forEach(e=>{e.style.display=""}),a.forEach(e=>{e.style.display="none"});let e=h;h="auto","smooth"===e&&(u=Date.now()+550),requestAnimationFrame(()=>{i.scrollIntoView({behavior:e,block:"start"}),requestAnimationFrame(()=>g(t))})}else f(),n.forEach(e=>{e.style.display="none"}),t.querySelectorAll("route").forEach(e=>e.style.display="none"),r.style.display="contents",window.scrollTo(0,0);document.body.classList.remove("loading"),y&&y(e),s("Route change completed")},l=async e=>{c[e.href]||(s("Prefetching content for:",e.href),c[e.href]=await v(e.href))},i=(e,r)=>{s("🔍 Intersection Observer triggered for",e.length,"entries"),e.forEach(e=>{var t=e.target;s(`🎯 Link ${t.href} intersection:`,{isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,alreadyCached:!!c[t.href]}),e.isIntersecting&&(c[t.href]?s("📦 Content already cached for:",t.href):(l(t),s("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},p=e=>{var t,r,o=e.target.closest("A");o&&o.href&&m(o.href)&&o.origin===location.origin?(t=document.querySelector("router"),r=new URL(o.href).pathname.replace(/\/$/,""),t&&d(t,r)?(s("🔗 Scroll-route link → smooth scroll:",o.href),e.preventDefault(),h="smooth"):(s("Internal link clicked:",o.href),e.preventDefault()),globalThis.history.pushState(null,null,o.href),globalThis.dispatchEvent(new Event("popstate"))):s("Invalid link click:",o?.href)};function m(e){if(!e||e.startsWith("#")||e.startsWith("javascript:"))return!1;if(e.startsWith("/"))return!0;try{var t=new URL(e,window.location.origin),r=new URL(window.location.href);return r.hostname.replace(/^www\./,"")!==t.hostname.replace(/^www\./,"")?!1:r.pathname!==t.pathname||!t.hash}catch{return!1}}let y,v=async e=>{e=await r(e);return e.ok?e.text():"Couldn't fetch the route - HTTP error! status: "+e.status},r=async e=>{if(!b){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},b=!1,e=(e={})=>{var{onRouteChange:t,debug:r}=e,e=(o=r,s("Router starting...",e),t&&(r=t,y=r),document.createElement("style")),t=(e.textContent=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:.1}}route{content-visibility:auto}",document.head.appendChild(e),document.querySelector("router")),r=globalThis.location.pathname,r=(t||(s("Creating new router element"),t=document.createElement("router"),(e=document.createElement("route")).setAttribute("path",r),e.innerHTML=document.body.innerHTML,t.appendChild(e),document.body.innerHTML="",document.body.appendChild(t),b=!0),globalThis.addEventListener("popstate",a),document.addEventListener("click",p),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!c[e.href]&&m(e.href)&&await l(e)})(e)}),new IntersectionObserver(i,{root:null,threshold:.5}));s("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let o=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");s("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:o}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!o&&m(e.href);s("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:m(e.href),willObserve:t}),t&&(r.observe(e),s("👀 Now observing link:",e.href))})})(r),a()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();
+(()=>{let i={},a=!1,l="",c=(...e)=>a&&console.log("🚦 Router:",...e),s=(e,t)=>{var e=e?.querySelector("title");return e?e.textContent.split("|")[0].trim():(e=t.replace(/\.html$/,"").split("/").filter(Boolean).pop())?e.charAt(0).toUpperCase()+e.slice(1):"Home"},h=e=>{e.querySelectorAll("route[scroll]").forEach(e=>e.style.removeProperty("display")),e.querySelectorAll("route:not([scroll])").forEach(e=>e.style.display="none")},d=async()=>{c("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var t=globalThis.location.pathname.replace(/\/$/,"")||"/",e=document.querySelector("router");let r=e.querySelector(`route[path="${t}"]`);if(r?.hasAttribute("scroll"))h(e),document.body.classList.remove("loading"),r.scrollIntoView({behavior:"smooth"}),m&&m(t),c("Scroll route navigation completed");else{if(r||((r=document.createElement("route")).setAttribute("path",t),e.appendChild(r),c("Created route element for:",t)),!r.innerHTML){c("Fetching content for:",globalThis.location.href);let e=i[globalThis.location.href];e||(e=await v(globalThis.location.href),i[globalThis.location.href]=e);var o,n=(new DOMParser).parseFromString(e,"text/html"),n=(r.dataset.routeTitle=s(n,t),r.innerHTML=n.body.innerHTML,Array.from(r.querySelectorAll("script")));c("Executing",n.length,"scripts from fetched content");for(o of n){var a=document.createElement("script");o.src?a.src=o.src:a.textContent=o.textContent,o.parentNode.replaceChild(a,o)}}e.querySelectorAll("route").forEach(e=>e.style.display="none"),r.style.display="contents";n=r.dataset.routeTitle||s(r,t);document.title=l?n+" | "+l:n,document.body.classList.remove("loading"),window.scrollTo(0,0),m&&m(t),c("Route change completed")}},u=async e=>{i[e.href]||(c("Prefetching content for:",e.href),i[e.href]=await v(e.href))},f=(e,r)=>{c("🔍 Intersection Observer triggered for",e.length,"entries"),e.forEach(e=>{var t=e.target;c(`🎯 Link ${t.href} intersection:`,{isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,alreadyCached:!!i[t.href]}),e.isIntersecting&&(i[t.href]?c("📦 Content already cached for:",t.href):(u(t),c("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},p=e=>{var t=e.target.closest("A");t&&t.href&&g(t.href)&&t.origin===location.origin?(c("Internal link clicked:",t.href),e.preventDefault(),globalThis.history.pushState(null,null,t.href),globalThis.dispatchEvent(new Event("popstate"))):c("Invalid link click:",t?.href)};function g(e){if(!e||e.startsWith("#")||e.startsWith("javascript:"))return!1;if(e.startsWith("/"))return!0;try{var t=new URL(e,window.location.origin),r=new URL(window.location.href);return r.hostname.replace(/^www\./,"")!==t.hostname.replace(/^www\./,"")?!1:r.pathname!==t.pathname||!t.hash}catch{return!1}}let m,v=async e=>{e=await t(e);return e.ok?e.text():"Couldn't fetch the route - HTTP error! status: "+e.status},t=async e=>{if(!y){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},y=!1,e=(e={})=>{let{onRouteChange:r,debug:t}=e;a=t;var o=document.querySelector("title")?.textContent?.trim()??"",e=(l=o.includes("|")?o.split("|").at(-1).trim():o||"App",c("Router starting...",e),r&&(o=r,m=o),document.createElement("style"));e.textContent=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:.1}}route{content-visibility:auto}",document.head.appendChild(e);let n=document.querySelector("router");o=globalThis.location.pathname.replace(/\/$/,"")||"/",n||(c("Creating new router element"),n=document.createElement("router"),(e=document.createElement("route")).setAttribute("path",o),e.innerHTML=document.body.innerHTML,n.appendChild(e),document.body.innerHTML="",document.body.appendChild(n),y=!0),globalThis.addEventListener("popstate",d),document.addEventListener("click",p),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!i[e.href]&&g(e.href)&&await u(e)})(e)}),e=new IntersectionObserver(f,{root:null,threshold:.5}),c("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let o=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");c("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:o}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!o&&g(e.href);c("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:g(e.href),willObserve:t}),t&&(r.observe(e),c("👀 Now observing link:",e.href))})})(e),e=n.querySelectorAll("route[scroll]");if(e.length){o=n.querySelector(`route[path="${o}"][scroll]`);o&&(h(n),o.scrollIntoView({behavior:"instant"}));let t=new IntersectionObserver(e=>{e.forEach(e=>{var t;e.isIntersecting&&(t=e.target.getAttribute("path")||"/",globalThis.history.replaceState(null,null,t),e=s(e.target,t),document.title=l?e+" | "+l:e,r)&&r(t)})},{threshold:.6});e.forEach(e=>t.observe(e))}};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "lightweight-router",
-  "version": "1.0.12",
+  "version": "1.0.16",
   "main": "src/router.js",
   "scripts": {
     "dev": "npx http-server src -o",
     "build": "node build.js",
-    "deploy": "npm run build && git publish && npm version patch && git publish && npm publish",
+    "deploy": "npm run build && git publish && npm version patch && git publish && npm login && npm publish",
     "test": "jest",
     "test:watch": "jest --watch"
   },

package/src/about.html

@@ -2,22 +2,84 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Router manual test About</title>
+    <title>About | PageFlick Demo</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        font-family: system-ui, sans-serif;
+      }
+      nav {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        display: flex;
+        gap: 1rem;
+        padding: 1rem 2rem;
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(8px);
+        z-index: 100;
+        border-bottom: 1px solid #eee;
+      }
+      nav a {
+        text-decoration: none;
+        color: #333;
+        font-weight: 500;
+      }
+      nav a:hover {
+        color: #000;
+      }
+      route[scroll] {
+        display: block;
+      }
+      section {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 6rem 2rem 2rem;
+        gap: 1rem;
+      }
+      section h1 {
+        font-size: 3rem;
+      }
+      section p {
+        font-size: 1.25rem;
+        color: #555;
+        max-width: 600px;
+        text-align: center;
+      }
+      #hero {
+        background: #f0f4ff;
+      }
+      #features {
+        background: #f0fff4;
+      }
+      #pricing {
+        background: #fff0f4;
+      }
+    </style>
   </head>
-  <body style="background-color: bisque">
-    <menu class="flex m-0 p-0"
-      ><a prefetch="onHover" href="/">Home</a><a href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
-      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
-    </menu>
-    ABOUT
+  <body>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/features">Features</a>
+      <a href="/pricing">Pricing</a>
+      <a href="/about.html">About (regular route)</a>
+    </nav>
+    <section id="about">
+      <h1>About</h1>
+      <p>This is the about page.</p>
+      <a href="/">Back to home ↑</a>
+    </section>
     <script type="module">
       import { startRouter } from "./router.js";
-      // Initialize the router with a simple onRouteChange callback to test functionality
       startRouter({
-        onRouteChange: currentRoute => {
-          console.log("Route changed:", currentRoute);
-          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
-        },
+        onRouteChange: path => console.log("Route:", path),
       });
     </script>
   </body>

package/src/index.html

@@ -1,176 +1,116 @@
-<!doctype html>
-<!-- Serve this file so the URL path is /landingpage.html (e.g. npx serve src). If your path is /src/landingpage.html, update route path="/landingpage.html" and the Hero nav href to match. -->
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Scroll routes — landing demo</title>
+    <title>Home | PageFlick Demo</title>
     <style>
-      :root {
-        --bg: #0f1419;
-        --surface: #1a2332;
-        --text: #e8eef5;
-        --muted: #8b9cb3;
-        --accent: #3dd6c3;
-        --nav-h: 3.25rem;
-      }
-
       * {
         box-sizing: border-box;
+        margin: 0;
+        padding: 0;
       }
-
       body {
-        margin: 0;
         font-family: system-ui, sans-serif;
-        background: var(--bg);
-        color: var(--text);
-        line-height: 1.5;
       }
-
-      .site-nav {
-        position: sticky;
+      nav {
+        position: fixed;
         top: 0;
-        z-index: 10;
+        width: 100%;
         display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 0.5rem 1rem;
-        min-height: var(--nav-h);
-        padding: 0.5rem 1rem;
-        background: color-mix(in srgb, var(--bg) 92%, transparent);
+        gap: 1rem;
+        padding: 1rem 2rem;
+        background: rgba(255, 255, 255, 0.9);
         backdrop-filter: blur(8px);
-        border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
+        z-index: 100;
+        border-bottom: 1px solid #eee;
       }
-
-      .site-nav a {
-        color: var(--accent);
+      nav a {
         text-decoration: none;
-        font-weight: 600;
-        font-size: 0.9rem;
+        color: #333;
+        font-weight: 500;
       }
-
-      .site-nav a:hover,
-      .site-nav a:focus-visible {
-        text-decoration: underline;
-        outline: none;
-      }
-
-      .site-nav .label {
-        color: var(--muted);
-        font-size: 0.75rem;
-        margin-right: 0.25rem;
+      nav a:hover {
+        color: #000;
       }
-
       route[scroll] {
         display: block;
-        min-height: 100vh;
-        scroll-margin-top: calc(var(--nav-h) + 0.75rem);
-        padding: 2rem 1.25rem 4rem;
-        border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
-      }
-
-      route[scroll]:nth-of-type(odd) {
-        background: linear-gradient(165deg, var(--surface) 0%, var(--bg) 100%);
       }
-
-      route[scroll]:nth-of-type(even) {
-        background: linear-gradient(-5deg, #121a24 0%, var(--surface) 100%);
-      }
-
-      .section-inner {
-        max-width: 42rem;
-        margin: 0 auto;
-      }
-
-      .eyebrow {
-        font-size: 0.75rem;
-        letter-spacing: 0.12em;
-        text-transform: uppercase;
-        color: var(--muted);
-        margin: 0 0 0.5rem;
-      }
-
-      h1,
-      h2 {
-        margin: 0 0 1rem;
-        font-weight: 700;
-        letter-spacing: -0.02em;
+      section {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 6rem 2rem 2rem;
+        gap: 1rem;
       }
-
-      h1 {
-        font-size: clamp(1.75rem, 4vw, 2.25rem);
+      section h1 {
+        font-size: 3rem;
       }
-
-      h2 {
-        font-size: clamp(1.35rem, 3vw, 1.75rem);
+      section p {
+        font-size: 1.25rem;
+        color: #555;
+        max-width: 600px;
+        text-align: center;
       }
-
-      p {
-        margin: 0 0 1rem;
-        color: color-mix(in srgb, var(--text) 88%, var(--muted));
+      #hero {
+        background: #f0f4ff;
       }
-
-      .pill {
-        display: inline-block;
-        padding: 0.2rem 0.6rem;
-        border-radius: 999px;
-        font-size: 0.7rem;
-        background: color-mix(in srgb, var(--accent) 18%, transparent);
-        color: var(--accent);
-        margin-bottom: 1rem;
+      #features {
+        background: #f0fff4;
       }
-
-      .loading body {
-        opacity: 0.85;
+      #pricing {
+        background: #fff0f4;
       }
     </style>
   </head>
   <body>
-    <nav class="site-nav" aria-label="Scroll sections">
-      <span class="label">Jump</span>
-      <a href="/">Hero</a>
-      <a href="/landing-features">Features</a>
-      <a href="/pricing.html">Pricing</a>
-      <a href="/blog">Blog</a>
-      <span class="label" style="margin-left: auto"><a href="index.html">← Index</a></span>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/features">Features</a>
+      <a href="/pricing">Pricing</a>
+      <a href="/about.html">About (regular route)</a>
     </nav>
 
     <router>
-      <route scroll path="/">
-        <div class="section-inner">
-          <p class="eyebrow">Scroll mode</p>
-          <h1>Landing hero</h1>
-          <p>Each <code>&lt;route scroll&gt;</code> is a tall section. Internal links smooth-scroll; all sections stay in the DOM.</p>
-          <p class="pill">min-height: 100vh</p>
-        </div>
+      <route path="/" scroll>
+        <title>Home | PageFlick Demo</title>
+        <section id="hero">
+          <h1>PageFlick</h1>
+          <p>A minimal client-side router with scroll section support. Scroll down or click the nav links above.</p>
+          <a href="/features">See Features ↓</a>
+        </section>
       </route>
 
-      <route scroll path="/landing-features">
-        <div class="section-inner">
-          <p class="eyebrow">Section 2</p>
-          <h2>Features</h2>
-          <p>Lazy content loads when this block is near the viewport (IntersectionObserver + 200px) or when you hover a link—same as the rest of the router.</p>
-          <p class="pill">min-height: 100vh</p>
-        </div>
+      <route path="/features" scroll>
+        <title>Features | PageFlick Demo</title>
+        <section id="features">
+          <h1>Features</h1>
+          <p>Scroll routes stack vertically and stay visible. The URL and title update as you scroll through sections.</p>
+          <ul style="text-align: left; color: #333">
+            <li>Smooth scroll navigation</li>
+            <li>Automatic URL updates on scroll</li>
+            <li>Direct URL access jumps to section</li>
+            <li>Mix with regular routes</li>
+          </ul>
+          <a href="/pricing">See Pricing ↓</a>
+        </section>
       </route>
 
-      <route scroll path="/pricing.html">
-        <div class="section-inner">
-          <p class="eyebrow">Section 3</p>
-          <h2>Pricing</h2>
-          <p>Empty routes fetch HTML from the server when you land here; inline placeholders skip the network.</p>
-          <p class="pill">min-height: 100vh</p>
-        </div>
+      <route path="/pricing" scroll>
+        <title>Pricing | PageFlick Demo</title>
+        <section id="pricing">
+          <h1>Pricing</h1>
+          <p>Free and open source. Always.</p>
+          <a href="/">Back to top ↑</a>
+        </section>
       </route>
     </router>
 
     <script type="module">
       import { startRouter } from "./router.js";
       startRouter({
-        debug: true,
-        onRouteChange: path => {
-          console.log(`📍 Route (scroll demo): ${path}`);
-        },
+        onRouteChange: path => console.log("Route:", path),
       });
     </script>
   </body>

package/src/router.js

@@ -1,97 +1,60 @@
-let linkData = {};
+let cache = {};
 let debugMode = false;
+let globalTitle = "";
 const log = (...args) => debugMode && console.log("🚦 Router:", ...args);
 
-/** @type {'auto' | 'smooth'} */
-let pendingScrollBehavior = "auto";
-let scrollUrlObserver = null;
-let suppressScrollUrlSyncUntil = 0;
-
-const normalizePath = p => {
-  const s = (p ?? "").replace(/\/$/, "");
-  return s;
-};
-
-/** @param {Element} router */
-const pathToScrollRoute = (router, path) => {
-  const n = normalizePath(path);
-  for (const r of router.querySelectorAll("route[scroll]")) {
-    if (normalizePath(r.getAttribute("path")) === n) return r;
-  }
-  return null;
-};
-
-const teardownScrollUrlObserver = () => {
-  scrollUrlObserver?.disconnect();
-  scrollUrlObserver = null;
+const getTitle = (el, path) => {
+  const tag = el?.querySelector("title");
+  if (tag) return tag.textContent.split("|")[0].trim();
+  const segment = path.replace(/\.html$/, "").split("/").filter(Boolean).pop();
+  return segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : "Home";
 };
 
-/** @param {Element} router */
-const setupScrollUrlObserver = router => {
-  teardownScrollUrlObserver();
-  const scrollRoutes = [...router.querySelectorAll("route[scroll]")];
-  if (!scrollRoutes.length) return;
-
-  scrollUrlObserver = new IntersectionObserver(
-    entries => {
-      if (Date.now() < suppressScrollUrlSyncUntil) return;
-      const visible = entries.filter(e => e.isIntersecting);
-      if (!visible.length) return;
-      visible.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
-      const best = visible[0].target;
-      const pathAttr = best.getAttribute("path");
-      if (!pathAttr) return;
-      const nextPath = normalizePath(pathAttr);
-      const here = normalizePath(globalThis.location.pathname);
-      if (nextPath === here) return;
-      const u = new URL(globalThis.location.href);
-      u.pathname = pathAttr.startsWith("/") ? pathAttr : `/${pathAttr}`;
-      globalThis.history.replaceState(null, "", u.pathname + u.search + u.hash);
-      log("📍 Scroll URL sync:", nextPath);
-      if (onRouteChange) onRouteChange(nextPath);
-    },
-    { root: null, rootMargin: "-38% 0px -38% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] },
-  );
-  scrollRoutes.forEach(r => scrollUrlObserver.observe(r));
+const showScrollRoutes = router => {
+  router.querySelectorAll("route[scroll]").forEach(r => r.style.removeProperty("display"));
+  router.querySelectorAll("route:not([scroll])").forEach(r => (r.style.display = "none"));
 };
 
 const handlePopState = async () => {
   log("Navigation triggered to:", globalThis.location.pathname);
   document.body.classList.add("loading");
-  const currentPath = globalThis.location.pathname.replace(/\/$/, ""); // Normalize path by removing trailing slash
+  const currentPath = globalThis.location.pathname.replace(/\/$/, "") || "/"; // Normalize path, preserve root "/"
   const router = document.querySelector("router");
 
   let currentRoute = router.querySelector(`route[path="${currentPath}"]`);
 
-  // If the route doesn't exist in DOM, create and append it
+  // Handle scroll route navigation — show all scroll routes and smooth-scroll to target
+  if (currentRoute?.hasAttribute("scroll")) {
+    showScrollRoutes(router);
+    document.body.classList.remove("loading");
+    currentRoute.scrollIntoView({ behavior: "smooth" });
+    if (onRouteChange) onRouteChange(currentPath);
+    log("Scroll route navigation completed");
+    return;
+  }
+
   if (!currentRoute) {
-    log("Creating new route element for:", currentPath);
     currentRoute = document.createElement("route");
     currentRoute.setAttribute("path", currentPath);
     router.appendChild(currentRoute);
+    log("Created route element for:", currentPath);
   }
 
-  // Only fetch and render content if the route is empty
+  // Fetch and render on first visit
   if (!currentRoute.innerHTML) {
     log("Fetching content for:", globalThis.location.href);
-    let content = linkData[globalThis.location.href];
+    let content = cache[globalThis.location.href];
 
     // Fetch content if it's not already cached
     if (!content) {
       content = await fetchContent(globalThis.location.href);
-      linkData[globalThis.location.href] = content;
+      cache[globalThis.location.href] = content;
     }
 
     const parser = new DOMParser();
     const doc = parser.parseFromString(content, "text/html");
 
-    // Update the page title with the new content's title
-    const newTitle = doc.querySelector("title");
-    if (newTitle) {
-      log("Updating page title to:", newTitle.textContent);
-      document.title = newTitle.textContent;
-    }
-
+    currentRoute.dataset.routeTitle = getTitle(doc, currentPath);
     currentRoute.innerHTML = doc.body.innerHTML;
 
     // Execute scripts from the fetched content
@@ -108,38 +71,15 @@ const handlePopState = async () => {
     }
   }
 
-  const scrollRoutes = [...router.querySelectorAll("route[scroll]")];
-  const nonScrollRoutes = [...router.querySelectorAll("route:not([scroll])")];
-  const scrollTarget = pathToScrollRoute(router, currentPath);
-  const inScrollMode = Boolean(scrollTarget);
+  // Show current route, hide the rest
+  router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
+  currentRoute.style.display = "contents";
 
-  if (inScrollMode) {
-    scrollRoutes.forEach(r => {
-      r.style.display = "";
-    });
-    nonScrollRoutes.forEach(r => {
-      r.style.display = "none";
-    });
-    const behavior = pendingScrollBehavior;
-    pendingScrollBehavior = "auto";
-    if (behavior === "smooth") {
-      suppressScrollUrlSyncUntil = Date.now() + 550;
-    }
-    requestAnimationFrame(() => {
-      scrollTarget.scrollIntoView({ behavior, block: "start" });
-      requestAnimationFrame(() => setupScrollUrlObserver(router));
-    });
-  } else {
-    teardownScrollUrlObserver();
-    scrollRoutes.forEach(r => {
-      r.style.display = "none";
-    });
-    router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
-    currentRoute.style.display = "contents";
-    window.scrollTo(0, 0);
-  }
+  const routeLabel = currentRoute.dataset.routeTitle || getTitle(currentRoute, currentPath);
+  document.title = globalTitle ? `${routeLabel} | ${globalTitle}` : routeLabel;
 
   document.body.classList.remove("loading");
+  window.scrollTo(0, 0);
 
   // Call the route change handler if it's set
   if (onRouteChange) onRouteChange(currentPath);
@@ -149,9 +89,9 @@ const handlePopState = async () => {
 //link management
 
 const fetchAndSaveContent = async link => {
-  if (!linkData[link.href]) {
+  if (!cache[link.href]) {
     log("Prefetching content for:", link.href);
-    linkData[link.href] = await fetchContent(link.href);
+    cache[link.href] = await fetchContent(link.href);
   }
 };
 
@@ -162,11 +102,11 @@ const handleLinkIntersection = (entries, observer) => {
     log(`🎯 Link ${link.href} intersection:`, {
       isIntersecting: entry.isIntersecting,
       intersectionRatio: entry.intersectionRatio,
-      alreadyCached: !!linkData[link.href],
+      alreadyCached: !!cache[link.href],
     });
 
     if (entry.isIntersecting) {
-      if (!linkData[link.href]) {
+      if (!cache[link.href]) {
         fetchAndSaveContent(link);
         log("👁️ Unobserving link after prefetch initiated:", link.href);
         observer.unobserve(link);
@@ -179,7 +119,7 @@ const handleLinkIntersection = (entries, observer) => {
 
 const handleLinkHover = async event => {
   const link = event.target;
-  if (!linkData[link.href] && isInternalLink(link.href)) {
+  if (!cache[link.href] && isInternalLink(link.href)) {
     await fetchAndSaveContent(link);
   }
 };
@@ -190,17 +130,6 @@ const handleLinkClick = e => {
     log("Invalid link click:", link?.href);
     return;
   }
-  const router = document.querySelector("router");
-  const url = new URL(link.href);
-  const targetPath = url.pathname.replace(/\/$/, "");
-  if (router && pathToScrollRoute(router, targetPath)) {
-    log("🔗 Scroll-route link → smooth scroll:", link.href);
-    e.preventDefault();
-    pendingScrollBehavior = "smooth";
-    globalThis.history.pushState(null, null, link.href);
-    globalThis.dispatchEvent(new Event("popstate"));
-    return;
-  }
   log("Internal link clicked:", link.href);
   e.preventDefault();
   globalThis.history.pushState(null, null, link.href);
@@ -273,17 +202,19 @@ const fetchContent = async url => {
 
 // Updated fetchWithFallback to check the flag
 const fetchWithFallback = async url => {
-  if (!routerCreatedManually) {
+  if (!manualMode) {
     const res = await fetch(url, { method: "POST", body: "onlyRoute" });
     if (res.ok) return res;
   }
   return await fetch(url);
 };
 
-let routerCreatedManually = false;
+let manualMode = false;
 const startRouter = (options = {}) => {
   const { onRouteChange, debug } = options;
   debugMode = debug;
+  const pageTitle = document.querySelector("title")?.textContent?.trim() ?? "";
+  globalTitle = pageTitle.includes("|") ? pageTitle.split("|").at(-1).trim() : pageTitle || "App";
   log("Router starting...", options);
   if (onRouteChange) setRouteChangeHandler(onRouteChange);
   const style = document.createElement("style");
@@ -302,7 +233,7 @@ const startRouter = (options = {}) => {
   document.head.appendChild(style);
 
   let router = document.querySelector("router");
-  const currentPath = globalThis.location.pathname;
+  const currentPath = globalThis.location.pathname.replace(/\/$/, "") || "/";
 
   if (!router) {
     log("Creating new router element");
@@ -313,7 +244,7 @@ const startRouter = (options = {}) => {
     router.appendChild(route);
     document.body.innerHTML = "";
     document.body.appendChild(router);
-    routerCreatedManually = true;
+    manualMode = true;
   }
 
   globalThis.addEventListener("popstate", handlePopState);
@@ -336,7 +267,34 @@ const startRouter = (options = {}) => {
 
   observeLinks(observer);
 
-  void handlePopState();
+  // Initialize scroll routes
+  const scrollRoutes = router.querySelectorAll("route[scroll]");
+  if (scrollRoutes.length) {
+    const currentScrollRoute = router.querySelector(`route[path="${currentPath}"][scroll]`);
+    if (currentScrollRoute) {
+      // Direct URL visit to a scroll route — show all scroll sections and jump instantly
+      showScrollRoutes(router);
+      currentScrollRoute.scrollIntoView({ behavior: "instant" });
+    }
+
+    // Update URL and title as scroll routes enter the viewport
+    const scrollObserver = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const path = entry.target.getAttribute("path") || "/";
+            globalThis.history.replaceState(null, null, path);
+            const label = getTitle(entry.target, path);
+            document.title = globalTitle ? `${label} | ${globalTitle}` : label;
+            if (onRouteChange) onRouteChange(path);
+          }
+        });
+      },
+      { threshold: 0.6 }
+    );
+
+    scrollRoutes.forEach(route => scrollObserver.observe(route));
+  }
 };
 
 export { startRouter };

package/src/blog.html

@@ -1,24 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Router manual test Blog</title>
-  </head>
-  <body style="background-color: bisque">
-    <menu class="flex m-0 p-0"></menu>
-      <a prefetch="onHover" href="/">Home</a><a href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
-      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
-    </menu>
-    BLOG
-    <script type="module">
-      import { startRouter } from "./router.js";
-      // Initialize the router with a simple onRouteChange callback to test functionality
-      startRouter({
-        onRouteChange: currentRoute => {
-          console.log("Route changed:", currentRoute);
-          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
-        },
-      });
-    </script>
-  </body>
-</html>

package/src/home.html

@@ -1,25 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Router manual test Index</title>
-  </head>
-  <body>
-    <menu class="flex m-0 p-0"></menu>
-      <a prefetch="onHover" href="/home.html">Home</a><a preFetch="onHover" href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
-      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
-      <a href="/">Landingpage</a>
-    </menu>
-    HOME
-    <script type="module">
-      import { startRouter } from "./router.js";
-      // Initialize the router with a simple onRouteChange callback to test functionality
-      startRouter({
-        onRouteChange: currentRoute => {
-          console.log("Route changed:", currentRoute);
-          document.querySelector(`route[path='${currentRoute}']`).classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
-        },
-      });
-    </script>
-  </body>
-</html>

package/src/pricing.html

@@ -1,177 +0,0 @@
-<!doctype html>
-<!-- Serve this file so the URL path is /landingpage.html (e.g. npx serve src). If your path is /src/landingpage.html, update route path="/landingpage.html" and the Hero nav href to match. -->
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Pricing</title>
-    <style>
-      :root {
-        --bg: #0f1419;
-        --surface: #1a2332;
-        --text: #e8eef5;
-        --muted: #8b9cb3;
-        --accent: #3dd6c3;
-        --nav-h: 3.25rem;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      body {
-        margin: 0;
-        font-family: system-ui, sans-serif;
-        background: var(--bg);
-        color: var(--text);
-        line-height: 1.5;
-      }
-
-      .site-nav {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 0.5rem 1rem;
-        min-height: var(--nav-h);
-        padding: 0.5rem 1rem;
-        background: color-mix(in srgb, var(--bg) 92%, transparent);
-        backdrop-filter: blur(8px);
-        border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
-      }
-
-      .site-nav a {
-        color: var(--accent);
-        text-decoration: none;
-        font-weight: 600;
-        font-size: 0.9rem;
-      }
-
-      .site-nav a:hover,
-      .site-nav a:focus-visible {
-        text-decoration: underline;
-        outline: none;
-      }
-
-      .site-nav .label {
-        color: var(--muted);
-        font-size: 0.75rem;
-        margin-right: 0.25rem;
-      }
-
-      route[scroll] {
-        display: block;
-        min-height: 100vh;
-        scroll-margin-top: calc(var(--nav-h) + 0.75rem);
-        padding: 2rem 1.25rem 4rem;
-        border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
-      }
-
-      route[scroll]:nth-of-type(odd) {
-        background: linear-gradient(165deg, var(--surface) 0%, var(--bg) 100%);
-      }
-
-      route[scroll]:nth-of-type(even) {
-        background: linear-gradient(-5deg, #121a24 0%, var(--surface) 100%);
-      }
-
-      .section-inner {
-        max-width: 42rem;
-        margin: 0 auto;
-      }
-
-      .eyebrow {
-        font-size: 0.75rem;
-        letter-spacing: 0.12em;
-        text-transform: uppercase;
-        color: var(--muted);
-        margin: 0 0 0.5rem;
-      }
-
-      h1,
-      h2 {
-        margin: 0 0 1rem;
-        font-weight: 700;
-        letter-spacing: -0.02em;
-      }
-
-      h1 {
-        font-size: clamp(1.75rem, 4vw, 2.25rem);
-      }
-
-      h2 {
-        font-size: clamp(1.35rem, 3vw, 1.75rem);
-      }
-
-      p {
-        margin: 0 0 1rem;
-        color: color-mix(in srgb, var(--text) 88%, var(--muted));
-      }
-
-      .pill {
-        display: inline-block;
-        padding: 0.2rem 0.6rem;
-        border-radius: 999px;
-        font-size: 0.7rem;
-        background: color-mix(in srgb, var(--accent) 18%, transparent);
-        color: var(--accent);
-        margin-bottom: 1rem;
-      }
-
-      .loading body {
-        opacity: 0.85;
-      }
-    </style>
-  </head>
-  <body>
-    <nav class="site-nav" aria-label="Scroll sections">
-      <span class="label">Jump</span>
-      <a href="/">Hero</a>
-      <a href="/landing-features">Features</a>
-      <a href="/pricing.html">Pricing</a>
-      <a href="/blog">Blog</a>
-      <span class="label" style="margin-left: auto"><a href="index.html" data-router-ignore>← Index</a></span>
-    </nav>
-
-    <router>
-      <route scroll path="/">
-        <div class="section-inner">
-          <p class="eyebrow">Scroll mode</p>
-          <h1>Landing hero</h1>
-          <p>Each <code>&lt;route scroll&gt;</code> is a tall section. Internal links smooth-scroll; all sections stay in the DOM.</p>
-          <p class="pill">min-height: 100vh</p>
-        </div>
-      </route>
-
-      <route scroll path="/landing-features">
-        <div class="section-inner">
-          <p class="eyebrow">Section 2</p>
-          <h2>Features</h2>
-          <p>Lazy content loads when this block is near the viewport (IntersectionObserver + 200px) or when you hover a link—same as the rest of the router.</p>
-          <p class="pill">min-height: 100vh</p>
-        </div>
-      </route>
-
-      <route scroll path="/pricing.html">
-        <div class="section-inner">
-          <p class="eyebrow">Section 3</p>
-          <h2>Pricing</h2>
-          <p>Empty routes fetch HTML from the server when you land here; inline placeholders skip the network.</p>
-          <p class="pill">min-height: 100vh</p>
-        </div>
-      </route>
-    </router>
-
-    <script type="module">
-      import { startRouter } from "./router.js";
-      startRouter({
-        debug: true,
-        onRouteChange: path => {
-          console.log(`📍 Route (scroll demo): ${path}`);
-        },
-      });
-    </script>
-  </body>
-</html>

package/src/router.html

@@ -1,25 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Router manual test About</title>
-  </head>
-  <body style="background-color: bisque">
-    <menu class="flex m-0 p-0"
-      ><a prefetch="onHover" href="/">Home</a><a href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
-      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a> </menu
-    ><router>
-      <route path="/about.html" style="content-visibility: auto"><h1>About</h1></route><route path="/onlyServer" style="content-visibility: auto"></route
-    ></router>
-    <script type="module">
-      import { startRouter } from "./router.js";
-      // Initialize the router with a simple onRouteChange callback to test functionality
-      startRouter({
-        onRouteChange: currentRoute => {
-          console.log("Route changed:", currentRoute);
-          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
-        },
-      });
-    </script>
-  </body>
-</html>