I FIXED ROUTING!!!!! YIPPEEEEEEE

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

View file

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

View file

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

View file

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

View file

@ -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); const res = await fetch(url);
if (res.status !== 200) return; if (res.status !== 200) return;
if (!res.headers.get("content-type").startsWith("text/html")) return; if (!res.headers.get("content-type").startsWith("text/html")) return;
const text = await res.text(); 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 content = new DOMParser().parseFromString(text, "text/html");
const stylesheets = [...content.querySelectorAll("link[rel='stylesheet']")]; const stylesheets = [...content.querySelectorAll("link[rel='stylesheet']")];
@ -13,22 +38,53 @@ async function swap(url) {
document.title = content.title; document.title = content.title;
// swap body html // swap body html
document.body.innerHTML = content.body.innerHTML; document.body.innerHTML = content.body.innerHTML;
// swap head html
document.head.innerHTML = content.head.innerHTML;
// swap stylesheets // 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 // push history
window.history.pushState({}, "", url); if (stateful) history.pushState(url, "", url);
bind(document.body); bind(document.body);
} }
function bind(content) { 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.includes("#")) return;
if (!element.href.startsWith(window.location.origin)) return; if (!element.href.startsWith(window.location.origin)) return;
const href = element.href.substring(window.location.origin.length); const href = element.href.substring(window.location.origin.length);
@ -36,18 +92,15 @@ function bind(content) {
element.addEventListener("click", event => { element.addEventListener("click", event => {
event.preventDefault(); 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); bind(document.body);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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