#14: Link click listeners

src/client.js

@@ -80,7 +80,7 @@ export function isLocalURL(url) {
 export function bootstrap() {
   console.assert(
     !!window,
-    "boostrap error: must be called from within a browser context",
+    "bootstrap error: must be called from within a browser context",
   );
   const link = window.document.querySelector(
     'head link[rel*="alternate"][type="application/vnd.api+json"]',
@@ -93,7 +93,35 @@ export function bootstrap() {
     )
     : new URL(link.getAttribute("href"));
   const client = new Client(initialURL.href);
-  // Register a global listener for history updates.
+
+  // Add click event listener to div#app
+  const appDiv = document.getElementById("app");
+  console.assert(!!appDiv, "bootstrap error: missing div#app element");
+  appDiv.addEventListener("click", (event) => {
+    // Check if the target is an anchor element
+    if (!(event.target instanceof HTMLAnchorElement)) return;
+
+    const anchor = event.target;
+    const href = anchor.href; // Safe to access href directly
+
+    // Check if href is a relative URL
+    const isRelative = href &&
+      (href.startsWith("./") || href.startsWith("/") ||
+        !/^(?:[a-z]+:)?\/\//i.test(href));
+    if (!isRelative) return;
+
+    // Check if anchor has a type attribute (opt-out)
+    if (anchor.hasAttribute("type")) return;
+
+    // Prevent default behavior and stop propagation
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Call the client's follow function
+    client.follow(href, {});
+  });
+
+  // Register a global listener for history updates
   addEventListener("popstate", (event) => {
     // Not navigating without a state.
     if (event.state) {
@@ -106,6 +134,7 @@ export function bootstrap() {
       }
     }
   });
+
   return client;
 }