make router links from anywhere

Author: Nikos Katsikanis

css/button-badge.css

@@ -38,11 +38,11 @@ button,
   }
   &.transparent {
     background-color: transparent;
-    color: var(--default-text);
-    border: 1px solid var(--default-text);
+    color: white;
+    border: 1px solid white;
     &:hover {
       color: var(--primary-color);
-      background-color: var(--default-text);
+      background-color: white;
     }
   }
 

index.html

@@ -29,7 +29,7 @@
       <nav data-component="nav" ></nav>
 -->
       <main data-component="router" data-use-hash class="p-md">
-        <!--components in /pages that will be fetched by router when user clicks on a data-nav -->
+        <!--components in /pages that will be fetched by router when user clicks on a  -->
       </main>
     </div>
     <footer class="flex flex-col align-center gap-md">

js/components/nav.js

@@ -109,35 +109,36 @@ export default (hostComponent) => {
     // Render the navigation items
     hostComponent.innerHTML = `
       <style>${navStyles}</style>
-      <a data-nav href="/" title="Home">
+      <a  href="/" title="Home">
         <span class="icon">&#x1F3E0;</span>
         <span class="text">Home</span>
       </a>
-      <a data-nav href="/button-badge" title="Button + Badges Design System">
+      <a  href="/button-badge" title="Button + Badges Design System">
         <span class="icon">&#x1F518;</span>
         <span class="text">Button + Badges</span>
       </a>
-      <a data-nav href="/form" title="Form Design System">
+      <a  href="/form" title="Form Design System">
         <span class="icon">&#x270F;</span>
         <span class="text">Form</span>
       </a>
-      <a data-nav href="/heros" title="Heros">
+      <a  href="/heros" title="Heros">
           <span class="icon">&#x1F9B8;</span> <!-- Superhero icon -->
           <span class="text">Heros</span>
       </a>
-      <a data-nav href="/maps" title="Map example">
+      
+      <a  href="/maps" title="Map example">
         <span class="icon">&#x1F5FA;</span>
         <span class="text">Maps</span>
       </a>
-      <a data-nav href="/calendar" title="Calendar Example">
+      <a  href="/calendar" title="Calendar Example">
         <span class="icon">📆</span>
         <span class="text">Calendar</span>
       </a>
-      <a data-nav href="/multiple-instances" title="Multiple instances">
+      <a  href="/multiple-instances" title="Multiple instances">
         <span class="icon">🧬</span>
         <span class="text">Multiple instances</span>
       </a>
-      <a data-nav href="/cookies" title="Elementary cookie popup permissions thing">
+      <a  href="/cookies" title="Elementary cookie popup permissions thing">
         <span class="icon">🍪</span>
         <span class="text">Cookie popup</span>
       </a>

js/components/router.js

@@ -1,7 +1,7 @@
 /**
  * Router module for handling client-side routing.
  * @module components/router
- * @version 0.1.1
+ * @version 0.1.2
  */
 
 import { importComponents, runComponents } from '../componentLoader.js';
@@ -54,29 +54,38 @@ export default async (hostComponent) => {
     }
   };
 
-  document.querySelectorAll('a[data-nav]').forEach((link) => {
-    link.addEventListener('click', async (event) => {
-      event.preventDefault();
-      const url = event.currentTarget.getAttribute('href');
+  // Global click event listener to handle all internal links
+  document.addEventListener('click', async (event) => {
+    const link = event.target.closest('a[href]');
 
-      if (useHash) {
-        const baseURL = window.location.pathname.endsWith('/')
-          ? window.location.origin + window.location.pathname
-          : window.location.origin + window.location.pathname + '/';
-        location.href = `${baseURL}#${url}`;
-      } else {
-        history.pushState(null, null, url);
-        await loadRoute(url);
-      }
-    });
+    if (!link) return; // Ignore clicks outside links
+
+    const url = link.getAttribute('href');
+
+    // Ignore links with file extensions or external links
+    if (/\.\w+$/.test(url) || link.origin !== window.location.origin) return;
+
+    event.preventDefault();
+
+    if (useHash) {
+      const baseURL = window.location.pathname.endsWith('/')
+        ? window.location.origin + window.location.pathname
+        : window.location.origin + window.location.pathname + '/';
+      location.href = `${baseURL}#${url}`;
+    } else {
+      history.pushState(null, null, url);
+      await loadRoute(url);
+    }
   });
 
+  // Handle browser back/forward navigation
   addEventListener('popstate', async () => {
     if (!useHash) {
       await loadRoute(location.pathname);
     }
   });
 
+  // Handle initial load based on useHash
   if (useHash) {
     addEventListener('hashchange', async () => {
       const url = location.hash.substring(1); // Get the URL from the hash, remove the leading '#'

js/routes/button-badge.js

@@ -46,7 +46,7 @@ export default (hostComponent) => {
   </div>
 
 <div style="background: linear-gradient(135deg, #0a90e2, #f013fe); padding: 1rem; border-radius: 0.5rem;">
-  <p>wireframe (hover matches secondary)</p>
+  <p>wireframe (hover background matches minor text)</p>
   <div>
     <button class="wireframe">Text</button>
     <button class="wireframe">
@@ -56,7 +56,7 @@ export default (hostComponent) => {
   </div>
   </div>
 <div style="background: linear-gradient(135deg, #0a90e2, #f013fe); padding: 1rem; border-radius: 0.5rem;">
-  <p>Transparent (hover matches primary)</p>
+  <p>Transparent - Dark and light same - designed for <a href="/heros">heros</a> (hover text matches primary)</p>
   <div>
     <button class="transparent">Text</button>
     <button class="transparent">