homepage rework for socials and projects

public/script/index.js

@@ -1,3 +1,5 @@
+import { hijackClickEvent } from "./main.js";
+
 const hexPrimary = document.getElementById("hex-primary");
 const hexSecondary = document.getElementById("hex-secondary");
 const hexTertiary = document.getElementById("hex-tertiary");
@@ -14,3 +16,8 @@ updateHexColours();
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
     updateHexColours();
 });
+
+document.querySelectorAll("ul#projects li.project-item").forEach(projectItem => {
+    const link = projectItem.querySelector('a');
+    hijackClickEvent(projectItem, link);
+});

public/script/main.js

@@ -45,6 +45,23 @@ function fill_list(list) {
     });
 }
 
+export function hijackClickEvent(container, link) {
+    container.addEventListener('click', event => {
+        if (event.target.tagName.toLowerCase() === 'a') return;
+        event.preventDefault();
+        link.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            button: event.button,
+        }));
+    });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     [...document.querySelectorAll(".typeout")]
         .filter((e) => e.innerText != "")

public/script/music.js

@@ -1,12 +1,6 @@
-import "./main.js";
+import { hijackClickEvent } from "./main.js";
 
 document.querySelectorAll("div.music").forEach(container => {
-    const link = container.querySelector(".music-title a").href
-
-    container.addEventListener("click", event => {
-        if (event.target.href) return;
-
-        event.preventDefault();
-        location = link;
-    });
+    const link = container.querySelector(".music-title a")
+    hijackClickEvent(container, link);
 });