I FIXED ROUTING!!!!! YIPPEEEEEEE

Signed-off-by: ari melody <ari@arimelody.me>

public/script/main.js

@@ -80,4 +80,6 @@ function start() {
         }
 }
 
+document.addEventListener("swap", () => {
         start();
+});

public/script/music-gateway.js

@@ -66,4 +66,7 @@ function start() {
         update_extras_buttons();
 }
 
+document.addEventListener("swap", () => {
+        if (!window.location.pathname.startsWith("/music/")) return;
         start();
+});

public/script/music.js

@@ -1,5 +1,7 @@
 import "./main.js";
 
+document.addEventListener("swap", () => {
         document.querySelectorAll("h1.music-title").forEach(element => {
                 element.href = "";
         });
+});

public/script/swap.js

@@ -1,10 +1,35 @@
-async function swap(url) {
+const swap_event = new Event("swap");
+
+let caches = {};
+window.lmao = caches;
+
+async function check_cache(url) {
+        if (caches[url]) {
+                return caches[url];
+        } else {
                 const res = await fetch(url);
 
                 if (res.status !== 200) return;
                 if (!res.headers.get("content-type").startsWith("text/html")) return;
 
                 const text = await res.text();
+                caches[url] = text;
+                return text;
+        }
+}
+
+async function swap(url, stateful) {
+        if (typeof url !== 'string') return;
+
+        const segments = window.location.href.split("/");
+        if (url.startsWith(window.location.origin) && segments[segments.length - 1].includes("#")) {
+                window.location.href = url;
+                return;
+        }
+
+        if (stateful && window.location.href.endsWith(url)) return;
+
+        const text = await check_cache(url);
         const content = new DOMParser().parseFromString(text, "text/html");
 
         const stylesheets = [...content.querySelectorAll("link[rel='stylesheet']")];
@@ -13,22 +38,53 @@ async function swap(url) {
         document.title = content.title;
         // swap body html
         document.body.innerHTML = content.body.innerHTML;
-        // swap head html
-        document.head.innerHTML = content.head.innerHTML;
         // swap stylesheets
-        // const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']");
+        const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']");
-        // stylesheets.forEach(stylesheet => { document.head.appendChild(stylesheet) });
+        stylesheets.forEach(stylesheet => {
-        // old_sheets.forEach(stylesheet => { stylesheet.remove(); });
+                let exists = false;
+                old_sheets.forEach(old_sheet => {
+                        if (old_sheet.href === stylesheet.href) exists = true;
+                });
+                if (!exists) document.head.appendChild(stylesheet);
+        });
+        old_sheets.forEach(old_sheet => {
+                let exists = false;
+                stylesheets.forEach(stylesheet => {
+                        if (stylesheet.href === old_sheet.href) exists = true;
+                });
+                if (!exists) old_sheet.remove();
+        });
         // push history
-        window.history.pushState({}, "", url);
+        if (stateful) history.pushState(url, "", url);
 
         bind(document.body);
 }
 
 function bind(content) {
-        if (typeof(content) !== 'object' || content.nodeType !== Node.ELEMENT_NODE) return;
+        if (typeof content !== 'object' || content.nodeType !== Node.ELEMENT_NODE) return;
 
-        content.querySelectorAll("a[href]").forEach(element => {
+        content.querySelectorAll("[swap-url]").forEach(element => {
+                const href = element.attributes.getNamedItem('swap-url').value;
+
+                element.addEventListener("click", event => {
+                        event.preventDefault();
+                        swap(href, true);
+                });
+
+                [...element.querySelectorAll("a[href], [swap-url]")].forEach(element => {
+                        if (element.href) {
+                                if (!element.href.endsWith(href)) return;
+                                element.attributes.removeNamedItem("href");
+                        }
+                        const swap_url = element.attributes.getNamedItem("swap-url");
+                        if (swap_url) {
+                                if (!swap_url.endsWith(href)) return;
+                                element.attributes.removeNamedItem("swap-url");
+                        }
+                });
+        });
+
+        content.querySelectorAll("a[href]:not([swap-url])").forEach(element => {
                 if (element.href.includes("#")) return;
                 if (!element.href.startsWith(window.location.origin)) return;
                 const href = element.href.substring(window.location.origin.length);
@@ -36,18 +92,15 @@ function bind(content) {
 
                 element.addEventListener("click", event => {
                         event.preventDefault();
-                        swap(element.href);
+                        swap(element.href, true);
-                })
+                });
         });
 
-        content.querySelectorAll("[swap-url]").forEach(element => {
+        document.dispatchEvent(swap_event);
-                const href = element.attributes.getNamedItem('swap-url').value;
-
-                element.addEventListener("click", event => {
-                        event.preventDefault();
-                        swap(href);
-                });
-        });
 }
 
+window.addEventListener("popstate", event => {
+        swap(event.state, false);
+});
+
 bind(document.body);

public/style/index.css

@@ -1,5 +1,3 @@
-@import url("/style/main.css");
-
 main {
         width: 	min(calc(100% - 4rem), 720px);
         min-height: calc(100vh - 10.3rem);

public/style/music-gateway.css

@@ -1,5 +1,3 @@
-@import url("/style/main.css");
-
 @font-face {
         font-family: "Monaspace Argon";
         src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
@@ -423,12 +421,7 @@ div#extras ul li a.active {
         margin-bottom: 1rem;
 }
 
-#tracks ul {
+#tracks h3 {
-        padding: 0;
-        list-style: none;
-}
-
-#tracks ul li {
         margin-bottom: .5rem;
         padding: 1rem;
         background-color: #0008;
@@ -436,19 +429,23 @@ div#extras ul li a.active {
         transition: background-color .1s linear;
 }
 
-#tracks ul li:hover {
+#tracks h3:hover {
         background-color: #2228;
 }
 
-#tracks ul li:active {
+#tracks h3:active {
         background-color: #4448;
 }
 
-#tracks ul li.active {
+#tracks h3.active {
         color: #000;
         background-color: var(--primary);
 }
 
+#tracks p {
+        margin-bottom: 3em;
+}
+
 footer {
         position: fixed;
         left: 0;

public/style/music.css

@@ -1,5 +1,3 @@
-@import url("/style/index.css");
-
 main {
         width: min(calc(100% - 4rem), 720px);
         min-height: calc(100vh - 10.3rem);

views/base.html

@@ -16,7 +16,7 @@
         <script type="application/javascript" src="/script/swap.js" defer></script>
 </head>
 
-<body hx-ext="head-support, preload">
+<body>
         {{template "header"}}
 
         {{block "content" .}}

views/index.html

@@ -11,13 +11,17 @@
 <meta property="og:site_name" content="ari melody">
 <meta property="og:description" content="home to your local SPACEGIRL 💫">
 
+<link rel="stylesheet" href="/style/main.css">
 <link rel="stylesheet" href="/style/index.css">
+
 <link rel="me" href="https://ice.arimelody.me/@ari">
 <link rel="me" href="https://wetdry.world/@ari">
 {{end}}
 
 {{define "content"}}
 <main>
+        <script type="module" src="/script/main.js" defer></script>
+
         <h1>
                 # hello, world!
         </h1>
@@ -180,7 +184,5 @@
                         <img src="/img/buttons/misc/epicblazed.png" alt="epic blazed">
                 </a>
         </div>
-
-        <script type="module" src="/script/main.js" defer></script>
 </main>
 {{end}}

views/music-gateway.html

@@ -24,15 +24,17 @@
 <meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
 <meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">
 
+<link rel="stylesheet" href="/style/main.css">
 <link rel="stylesheet" href="/style/music-gateway.css">
 {{end}}
 
 {{define "content"}}
 <main>
+        <script type="module" src="/script/music-gateway.js" defer></script>
+
         <div id="background" style="background-image: url({{.ResolveArtwork}})"></div>
 
-        <!-- <a href="/music" hx-boost="true" hx-target="body" hx-swap="innerHTML" id="go-back" title="back to arimelody.me">back to arimelody.me</a> -->
+        <a href="/music" swap-url="/music" id="go-back" title="back to arimelody.me">&lt;</a>
-        <a href="/music" hx-boost="true" hx-target="body" hx-swap="innerHTML" id="go-back" title="back to arimelody.me">&lt;</a>
         <br><br>
 
         <div id="music-container">
@@ -107,11 +109,10 @@
                         {{else}}
                         <div id="tracks">
                                 <h2>tracks:</h2>
-                                <ul>
                                 {{range .Tracks}}
-                                        <li>{{.Title}}</li>
+                                <h3>{{.Title}}</h3>
+                                <p>{{.Lyrics}}</p>
                                 {{end}}
-                                </ul>
                         </div>
                         {{end}}
                 </div>
@@ -161,7 +162,5 @@
                 <!--                 <% } %> -->
                 <!-- </div> -->
         </div>
-
-        <script type="module" src="/script/music-gateway.js" defer></script>
 </main>
 {{end}}

views/music.html

@@ -11,11 +11,15 @@
 <meta property="og:site_name" content="ari melody">
 <meta property="og:description" content="music from your local SPACEGIRL 💫">
 
+<link rel="stylesheet" href="/style/main.css">
+<link rel="stylesheet" href="/style/index.css">
 <link rel="stylesheet" href="/style/music.css">
 {{end}}
 
 {{define "content"}}
 <main>
+        <script type="module" src="/script/music.js" defer></script>
+
         <h1>
                 # my music
         </h1>
@@ -42,7 +46,7 @@
                 {{end}}
         </div>
 
-        <h2 id="usage" class="question" hx-get="/music#usage" hx-on="click" hx-swap="none" hx-push-url="true">
+        <h2 id="usage" class="question" swap-url="/music#usage">
                 <a href="#usage">
                         &gt; "can i use your music in my content?"
                 </a>
@@ -84,7 +88,5 @@
         </div>
 
         <a href="#" id="backtotop">back to top</a>
-
-        <script type="module" src="/script/music.js" defer></script>
 </main>
 {{end}}