diff --git a/public/script/main.js b/public/script/main.js index 2c6b53b..40af233 100644 --- a/public/script/main.js +++ b/public/script/main.js @@ -80,4 +80,6 @@ function start() { } } -start(); +document.addEventListener("swap", () => { + start(); +}); diff --git a/public/script/music-gateway.js b/public/script/music-gateway.js index ee84115..989f21b 100644 --- a/public/script/music-gateway.js +++ b/public/script/music-gateway.js @@ -66,4 +66,7 @@ function start() { update_extras_buttons(); } -start(); +document.addEventListener("swap", () => { + if (!window.location.pathname.startsWith("/music/")) return; + start(); +}); diff --git a/public/script/music.js b/public/script/music.js index 7e05eb7..afbcf49 100644 --- a/public/script/music.js +++ b/public/script/music.js @@ -1,5 +1,7 @@ import "./main.js"; -document.querySelectorAll("h1.music-title").forEach(element => { - element.href = ""; +document.addEventListener("swap", () => { + document.querySelectorAll("h1.music-title").forEach(element => { + element.href = ""; + }); }); diff --git a/public/script/swap.js b/public/script/swap.js index 7cb0e28..708764e 100644 --- a/public/script/swap.js +++ b/public/script/swap.js @@ -1,10 +1,35 @@ -async function swap(url) { - const res = await fetch(url); +const swap_event = new Event("swap"); - if (res.status !== 200) return; - if (!res.headers.get("content-type").startsWith("text/html")) return; +let caches = {}; +window.lmao = caches; - const text = await res.text(); +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']"); - // stylesheets.forEach(stylesheet => { document.head.appendChild(stylesheet) }); - // old_sheets.forEach(stylesheet => { stylesheet.remove(); }); + const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']"); + stylesheets.forEach(stylesheet => { + 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); - }) - }); - - content.querySelectorAll("[swap-url]").forEach(element => { - const href = element.attributes.getNamedItem('swap-url').value; - - element.addEventListener("click", event => { - event.preventDefault(); - swap(href); + swap(element.href, true); }); }); + + document.dispatchEvent(swap_event); } +window.addEventListener("popstate", event => { + swap(event.state, false); +}); + bind(document.body); diff --git a/public/style/index.css b/public/style/index.css index 3cf6004..b283985 100644 --- a/public/style/index.css +++ b/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); diff --git a/public/style/music-gateway.css b/public/style/music-gateway.css index 5725fa8..f5dc07b 100644 --- a/public/style/music-gateway.css +++ b/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 { - padding: 0; - list-style: none; -} - -#tracks ul li { +#tracks h3 { 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; diff --git a/public/style/music.css b/public/style/music.css index 1114468..9700526 100644 --- a/public/style/music.css +++ b/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); diff --git a/views/base.html b/views/base.html index 6d9d9f6..1842e27 100644 --- a/views/base.html +++ b/views/base.html @@ -16,7 +16,7 @@ - + {{template "header"}} {{block "content" .}} diff --git a/views/index.html b/views/index.html index 5424562..73bd61b 100644 --- a/views/index.html +++ b/views/index.html @@ -11,13 +11,17 @@ + + {{end}} {{define "content"}}
+ +

# hello, world!

@@ -180,7 +184,5 @@ epic blazed - -
{{end}} diff --git a/views/music-gateway.html b/views/music-gateway.html index 0c8b33b..3de307e 100644 --- a/views/music-gateway.html +++ b/views/music-gateway.html @@ -24,15 +24,17 @@ + {{end}} {{define "content"}}
+ +
- - < + <

@@ -107,11 +109,10 @@ {{else}}

tracks:

-
    - {{range .Tracks}} -
  • {{.Title}}
    • - {{end}} -
+ {{range .Tracks}} +

{{.Title}}

+

{{.Lyrics}}

+ {{end}}
{{end}}
@@ -161,7 +162,5 @@ - -
{{end}} diff --git a/views/music.html b/views/music.html index b1e6a1f..6430aed 100644 --- a/views/music.html +++ b/views/music.html @@ -11,11 +11,15 @@ + + {{end}} {{define "content"}}
+ +

# my music

@@ -42,7 +46,7 @@ {{end}} -

+

> "can i use your music in my content?" @@ -84,7 +88,5 @@ back to top - -

{{end}}