wip(22w7c): add link click handler

public/assets/js/modules/Modal.mjs

@@ -0,0 +1,16 @@
+export default class Modal {
+    constructor() {
+        this.assetsRoot = "/";
+
+        this.importStyleSheet();
+        console.log("post", Symbol.for("modal.style"));
+    }
+
+    importStyleSheet() {
+        const style = document.createElement("link");
+        style.setAttribute("rel", "stylesheet");
+        style.setAttribute("href", this.assetsRoot + "css/modal.css");
+        
+        document.head.appendChild(style);
+    }
+}

public/assets/js/script.mjs

@@ -0,0 +1,29 @@
+import { default as Glitch } from "./modules/Glitch.mjs";
+
+const logging = "https://victorwesterlund-logging-dnzfgzf6za-lz.a.run.app";
+
+async function openModal(name) {
+    const module = await import("./modules/Modal.mjs");
+    if(!module) {
+        alert("Failed to import module.");
+        return;
+    }
+
+    const modal = new module.default();
+    modal.assetsRoot = window.location.href;
+}
+
+// Bind click listerners to all links
+for(let link of document.getElementsByTagName("a")) {
+    link.addEventListener("click", event => {
+        event.preventDefault();
+        navigator?.sendBeacon(logging, event); // Log link click
+
+        // Treat tag without func data attribute as a normal link
+        if(!"func" in event.target.dataset) window.location.href = event.target.href;
+
+        openModal(event.target.getAttribute("href"));
+    });
+}
+
+new Glitch(document.body);

public/index.html

@@ -20,7 +20,7 @@
             <h1>full-stack</h1>
             <h1>developer</h1>
             <p>from Sweden</p>
-            <a href="#">contact me</a>
+            <a href="contact" data-func>contact me</a>
         </div>
     </div>
     <div>
@@ -28,18 +28,14 @@
             <img src="https://lh3.googleusercontent.com/a-/AOh14Ggkm-Fr7rjHKeJHKHNOZoM72lARq25kIJS73Wo0SU4=s128-c-rg-br100" alt="portrait of victor"/>
             <div>
                 <p>I create things with code. When I'm not creating things with code, I enjoy skiing, watching movies and some occasional gaming</p>
-                <p>Beyond computer science, I'm also a armchair rabbit-holer for engineering, astronomy and physics</p>
+                <p>Beyond computer science, I'm also an armchair rabbit-holer for engineering, physics and astronomy</p>
             </div>
             <div>
                 <p>...and ☕, full-time</p>
             </div>
-            <a href="#">stalk me 😬</a>
+            <a href="about">stalk me 😬</a>
         </div>
     </div>
-    <script type="module">
+    <script type="module" src="assets/js/script.mjs"></script>
-        import { default as Glitch } from "./assets/js/modules/Glitch.mjs";
-        //fetch("assets/media/bg64.txt").then((resp) => resp.text().then(bg64 => new Glitch(bg64, document.body)));
-        new Glitch(document.body)
-    </script>
 </body>
 </html>