lightweight-router 1.0.10 → 1.0.14

package/README.md

@@ -13,6 +13,7 @@ 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 route sections with automatic URL/title updates
 
 
 ## Installation
@@ -164,6 +165,55 @@ It does exactly what we're talking about automatically by returning full html re
 - Implement server-side partial responses for better bandwidth usage
 - Consider using the `prefetch="onHover"` attribute for less important links
 
+## 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

package/dist/router.min.js

@@ -1 +1 @@
-(()=>{let l={},n=!1,c=(...e)=>n&&console.log("🚦 Router:",...e),o=async()=>{c("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var e=globalThis.location.pathname.replace(/\/$/,""),t=document.querySelector("router");let r=t.querySelector(`route[path="${e}"]`);if(r||(c("Creating new route element for:",e),(r=document.createElement("route")).setAttribute("path",e),t.appendChild(r)),!r.innerHTML){c("Fetching content for:",globalThis.location.href);let e=l[globalThis.location.href];e||(e=await u(globalThis.location.href),l[globalThis.location.href]=e);var n,o=(new DOMParser).parseFromString(e,"text/html"),a=o.querySelector("title"),a=(a&&(c("Updating page title to:",a.textContent),document.title=a.textContent),r.innerHTML=o.body.innerHTML,Array.from(r.querySelectorAll("script")));c("Executing",a.length,"scripts from fetched content");for(n of a){var i=document.createElement("script");n.src?i.src=n.src:i.textContent=n.textContent,n.parentNode.replaceChild(i,n)}}t.querySelectorAll("route").forEach(e=>e.style.contentVisibility="hidden"),r.style.contentVisibility="visible",document.body.classList.remove("loading"),window.scrollTo(0,0),d&&d(e),c("Route change completed")},a=async e=>{l[e.href]||(c("Prefetching content for:",e.href),l[e.href]=await u(e.href))},i=(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:!!l[t.href]}),e.isIntersecting&&(l[t.href]?c("📦 Content already cached for:",t.href):(a(t),c("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},s=e=>{var t=e.target.closest("A");t&&t.href&&h(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 h(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 d,u=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(!f){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},f=!1,e=(e={})=>{var{onRouteChange:t,debug:r}=e,e=(n=r,c("Router starting...",e),t&&(r=t,d=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||(c("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),f=!0),globalThis.addEventListener("popstate",o),document.addEventListener("click",s),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!l[e.href]&&h(e.href)&&await a(e)})(e)}),new IntersectionObserver(i,{root:null,threshold:.5}));c("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let n=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");c("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:n}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!n&&h(e.href);c("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:h(e.href),willObserve:t}),t&&(r.observe(e),c("👀 Now observing link:",e.href))})})(r)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();
+(()=>{let i={},a=!1,l=(...e)=>a&&console.log("🚦 Router:",...e),c=(e,t)=>{var e=e?.querySelector("title");return e?e.textContent:(e=t.replace(/\.html$/,"").split("/").filter(Boolean).pop())?e.charAt(0).toUpperCase()+e.slice(1):"Home"},s=e=>{e.querySelectorAll("route[scroll]").forEach(e=>e.style.removeProperty("display")),e.querySelectorAll("route:not([scroll])").forEach(e=>e.style.display="none")},h=async()=>{l("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"))s(e),document.body.classList.remove("loading"),r.scrollIntoView({behavior:"smooth"}),p&&p(t),l("Scroll route navigation completed");else{if(r||(l("Creating new route element for:",t),(r=document.createElement("route")).setAttribute("path",t),e.appendChild(r)),!r.innerHTML){l("Fetching content for:",globalThis.location.href);let e=i[globalThis.location.href];e||(e=await m(globalThis.location.href),i[globalThis.location.href]=e);var o,n=(new DOMParser).parseFromString(e,"text/html"),n=(document.title=c(n,t),l("Updating page title to:",document.title),r.innerHTML=n.body.innerHTML,Array.from(r.querySelectorAll("script")));l("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",document.body.classList.remove("loading"),window.scrollTo(0,0),p&&p(t),l("Route change completed")}},d=async e=>{i[e.href]||(l("Prefetching content for:",e.href),i[e.href]=await m(e.href))},u=(e,r)=>{l("🔍 Intersection Observer triggered for",e.length,"entries"),e.forEach(e=>{var t=e.target;l(`🎯 Link ${t.href} intersection:`,{isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,alreadyCached:!!i[t.href]}),e.isIntersecting&&(i[t.href]?l("📦 Content already cached for:",t.href):(d(t),l("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},f=e=>{var t=e.target.closest("A");t&&t.href&&g(t.href)&&t.origin===location.origin?(l("Internal link clicked:",t.href),e.preventDefault(),globalThis.history.pushState(null,null,t.href),globalThis.dispatchEvent(new Event("popstate"))):l("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 p,m=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(!v){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},v=!1,e=(e={})=>{let{onRouteChange:r,debug:t}=e;a=t,l("Router starting...",e),r&&(e=r,p=e);e=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 o=document.querySelector("router");var e=globalThis.location.pathname.replace(/\/$/,"")||"/",n=(o||(l("Creating new router element"),o=document.createElement("router"),(n=document.createElement("route")).setAttribute("path",e),n.innerHTML=document.body.innerHTML,o.appendChild(n),document.body.innerHTML="",document.body.appendChild(o),v=!0),globalThis.addEventListener("popstate",h),document.addEventListener("click",f),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 d(e)})(e)}),new IntersectionObserver(u,{root:null,threshold:.5})),n=(l("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let o=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");l("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:o}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!o&&g(e.href);l("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:g(e.href),willObserve:t}),t&&(r.observe(e),l("👀 Now observing link:",e.href))})})(n),o.querySelectorAll("route[scroll]"));if(n.length){e=o.querySelector(`route[path="${e}"][scroll]`);e&&(s(o),e.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),document.title=c(e.target,t),r)&&r(t)})},{threshold:.6});n.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.10",
+  "version": "1.0.14",
   "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

@@ -2,22 +2,115 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Router manual test Index</title>
+    <title>Home | 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>
-    <menu class="flex m-0 p-0"
-      ><a prefetch="onHover" href="/">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>
-    </menu>
-    HOME
+    <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 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 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 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";
-      // 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/router.js

@@ -1,14 +1,37 @@
 let linkData = {};
 let debugMode = false;
 const log = (...args) => debugMode && console.log("🚦 Router:", ...args);
+
+const getTitle = (el, path) => {
+  const tag = el?.querySelector("title");
+  if (tag) return tag.textContent;
+  const segment = path.replace(/\.html$/, "").split("/").filter(Boolean).pop();
+  return segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : "Home";
+};
+
+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}"]`);
 
+  // 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 the route doesn't exist in DOM, create and append it
   if (!currentRoute) {
     log("Creating new route element for:", currentPath);
@@ -32,11 +55,8 @@ const handlePopState = async () => {
     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;
-    }
+    document.title = getTitle(doc, currentPath);
+    log("Updating page title to:", document.title);
 
     currentRoute.innerHTML = doc.body.innerHTML;
 
@@ -54,9 +74,9 @@ const handlePopState = async () => {
     }
   }
 
-  // Display only the current route
-  router.querySelectorAll("route").forEach(route => (route.style.contentVisibility = "hidden"));
-  currentRoute.style.contentVisibility = "visible";
+  // Display only the current route (hides scroll routes too when on a regular route)
+  router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
+  currentRoute.style.display = "contents";
 
   document.body.classList.remove("loading");
   window.scrollTo(0, 0);
@@ -211,7 +231,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");
@@ -244,6 +264,34 @@ const startRouter = (options = {}) => {
   });
 
   observeLinks(observer);
+
+  // 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);
+            document.title = getTitle(entry.target, path);
+            if (onRouteChange) onRouteChange(path);
+          }
+        });
+      },
+      { threshold: 0.6 }
+    );
+
+    scrollRoutes.forEach(route => scrollObserver.observe(route));
+  }
 };
 
 export { startRouter };

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>