I FIXED ROUTING!!!!! YIPPEEEEEEE
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
13d802d361
commit
b42b37ff9c
|
|
@ -80,4 +80,6 @@ function start() {
|
|||
}
|
||||
}
|
||||
|
||||
document.addEventListener("swap", () => {
|
||||
start();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -66,4 +66,7 @@ function start() {
|
|||
update_extras_buttons();
|
||||
}
|
||||
|
||||
document.addEventListener("swap", () => {
|
||||
if (!window.location.pathname.startsWith("/music/")) return;
|
||||
start();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import "./main.js";
|
||||
|
||||
document.addEventListener("swap", () => {
|
||||
document.querySelectorAll("h1.music-title").forEach(element => {
|
||||
element.href = "";
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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']");
|
||||
// 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);
|
||||
})
|
||||
swap(element.href, true);
|
||||
});
|
||||
});
|
||||
|
||||
content.querySelectorAll("[swap-url]").forEach(element => {
|
||||
const href = element.attributes.getNamedItem('swap-url').value;
|
||||
|
||||
element.addEventListener("click", event => {
|
||||
event.preventDefault();
|
||||
swap(href);
|
||||
});
|
||||
});
|
||||
document.dispatchEvent(swap_event);
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", event => {
|
||||
swap(event.state, false);
|
||||
});
|
||||
|
||||
bind(document.body);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import url("/style/main.css");
|
||||
|
||||
main {
|
||||
width: min(calc(100% - 4rem), 720px);
|
||||
min-height: calc(100vh - 10.3rem);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import url("/style/index.css");
|
||||
|
||||
main {
|
||||
width: min(calc(100% - 4rem), 720px);
|
||||
min-height: calc(100vh - 10.3rem);
|
||||
|
|
|
|||
|
|
@ -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" .}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -24,15 +24,17 @@
|
|||
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
|
||||
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
|
||||
|
||||
<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" hx-boost="true" hx-target="body" hx-swap="innerHTML" id="go-back" title="back to arimelody.me"><</a>
|
||||
<a href="/music" swap-url="/music" id="go-back" title="back to arimelody.me"><</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}}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
> "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}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue