ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

I FIXED ROUTING!!!!! YIPPEEEEEEE

Browse source 
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-04-16 21:24:05 +01:00
parent 13d802d361
commit b42b37ff9c
11 changed files with 113 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/script/main.js
View file

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

5
public/script/music-gateway.js
View file

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

6
public/script/music.js
View file

@ -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 = "";
});
});

99
public/script/swap.js
View file

@ -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);

2
public/style/index.css
View file

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

19
public/style/music-gateway.css
View file

@ -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;

2
public/style/music.css
View file

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