home to your local SPACEGIRL 💫
arimelody.space
I FIXED ROUTING!!!!! YIPPEEEEEEE
Signed-off-by: ari melody <ari@arimelody.me>
+112
-56
+3
-1
public/script/main.js
+3
-1
public/script/main.js
+4
-1
public/script/music-gateway.js
+4
-1
public/script/music-gateway.js
+4
-2
public/script/music.js
+4
-2
public/script/music.js
+75
-22
public/script/swap.js
+75
-22
public/script/swap.js
···
1
-
async function swap(url) {
2
-
const res = await fetch(url);
1
+
const swap_event = new Event("swap");
2
+
3
+
let caches = {};
4
+
window.lmao = caches;
5
+
6
+
async function check_cache(url) {
7
+
if (caches[url]) {
8
+
return caches[url];
9
+
} else {
10
+
const res = await fetch(url);
11
+
12
+
if (res.status !== 200) return;
13
+
if (!res.headers.get("content-type").startsWith("text/html")) return;
14
+
15
+
const text = await res.text();
16
+
caches[url] = text;
17
+
return text;
18
+
}
19
+
}
20
+
21
+
async function swap(url, stateful) {
22
+
if (typeof url !== 'string') return;
23
+
24
+
const segments = window.location.href.split("/");
25
+
if (url.startsWith(window.location.origin) && segments[segments.length - 1].includes("#")) {
26
+
window.location.href = url;
27
+
return;
28
+
}
3
29
4
-
if (res.status !== 200) return;
5
-
if (!res.headers.get("content-type").startsWith("text/html")) return;
30
+
if (stateful && window.location.href.endsWith(url)) return;
6
31
7
-
const text = await res.text();
32
+
const text = await check_cache(url);
8
33
const content = new DOMParser().parseFromString(text, "text/html");
9
34
10
35
const stylesheets = [...content.querySelectorAll("link[rel='stylesheet']")];
···
13
38
document.title = content.title;
14
39
// swap body html
15
40
document.body.innerHTML = content.body.innerHTML;
16
-
// swap head html
17
-
document.head.innerHTML = content.head.innerHTML;
18
41
// swap stylesheets
19
-
// const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']");
20
-
// stylesheets.forEach(stylesheet => { document.head.appendChild(stylesheet) });
21
-
// old_sheets.forEach(stylesheet => { stylesheet.remove(); });
42
+
const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']");
43
+
stylesheets.forEach(stylesheet => {
44
+
let exists = false;
45
+
old_sheets.forEach(old_sheet => {
46
+
if (old_sheet.href === stylesheet.href) exists = true;
47
+
});
48
+
if (!exists) document.head.appendChild(stylesheet);
49
+
});
50
+
old_sheets.forEach(old_sheet => {
51
+
let exists = false;
52
+
stylesheets.forEach(stylesheet => {
53
+
if (stylesheet.href === old_sheet.href) exists = true;
54
+
});
55
+
if (!exists) old_sheet.remove();
56
+
});
22
57
// push history
23
-
window.history.pushState({}, "", url);
58
+
if (stateful) history.pushState(url, "", url);
24
59
25
60
bind(document.body);
26
61
}
27
62
28
63
function bind(content) {
29
-
if (typeof(content) !== 'object' || content.nodeType !== Node.ELEMENT_NODE) return;
64
+
if (typeof content !== 'object' || content.nodeType !== Node.ELEMENT_NODE) return;
30
65
31
-
content.querySelectorAll("a[href]").forEach(element => {
32
-
if (element.href.includes("#")) return;
33
-
if (!element.href.startsWith(window.location.origin)) return;
34
-
const href = element.href.substring(window.location.origin.length);
35
-
if (href.includes(".")) return;
66
+
content.querySelectorAll("[swap-url]").forEach(element => {
67
+
const href = element.attributes.getNamedItem('swap-url').value;
36
68
37
69
element.addEventListener("click", event => {
38
70
event.preventDefault();
39
-
swap(element.href);
40
-
})
71
+
swap(href, true);
72
+
});
73
+
74
+
[...element.querySelectorAll("a[href], [swap-url]")].forEach(element => {
75
+
if (element.href) {
76
+
if (!element.href.endsWith(href)) return;
77
+
element.attributes.removeNamedItem("href");
78
+
}
79
+
const swap_url = element.attributes.getNamedItem("swap-url");
80
+
if (swap_url) {
81
+
if (!swap_url.endsWith(href)) return;
82
+
element.attributes.removeNamedItem("swap-url");
83
+
}
84
+
});
41
85
});
42
86
43
-
content.querySelectorAll("[swap-url]").forEach(element => {
44
-
const href = element.attributes.getNamedItem('swap-url').value;
87
+
content.querySelectorAll("a[href]:not([swap-url])").forEach(element => {
88
+
if (element.href.includes("#")) return;
89
+
if (!element.href.startsWith(window.location.origin)) return;
90
+
const href = element.href.substring(window.location.origin.length);
91
+
if (href.includes(".")) return;
45
92
46
93
element.addEventListener("click", event => {
47
94
event.preventDefault();
48
-
swap(href);
95
+
swap(element.href, true);
49
96
});
50
97
});
98
+
99
+
document.dispatchEvent(swap_event);
51
100
}
101
+
102
+
window.addEventListener("popstate", event => {
103
+
swap(event.state, false);
104
+
});
52
105
53
106
bind(document.body);
-2
public/style/index.css
-2
public/style/index.css
+8
-11
public/style/music-gateway.css
+8
-11
public/style/music-gateway.css
···
1
-
@import url("/style/main.css");
2
-
3
1
@font-face {
4
2
font-family: "Monaspace Argon";
5
3
src: url("/font/monaspace-argon/MonaspaceArgonVarVF[wght,wdth,slnt].woff2") format("woff2-variations");
···
423
421
margin-bottom: 1rem;
424
422
}
425
423
426
-
#tracks ul {
427
-
padding: 0;
428
-
list-style: none;
429
-
}
430
-
431
-
#tracks ul li {
424
+
#tracks h3 {
432
425
margin-bottom: .5rem;
433
426
padding: 1rem;
434
427
background-color: #0008;
···
436
429
transition: background-color .1s linear;
437
430
}
438
431
439
-
#tracks ul li:hover {
432
+
#tracks h3:hover {
440
433
background-color: #2228;
441
434
}
442
435
443
-
#tracks ul li:active {
436
+
#tracks h3:active {
444
437
background-color: #4448;
445
438
}
446
439
447
-
#tracks ul li.active {
440
+
#tracks h3.active {
448
441
color: #000;
449
442
background-color: var(--primary);
443
+
}
444
+
445
+
#tracks p {
446
+
margin-bottom: 3em;
450
447
}
451
448
452
449
footer {
-2
public/style/music.css
-2
public/style/music.css
+1
-1
views/base.html
+1
-1
views/base.html
+4
-2
views/index.html
+4
-2
views/index.html
···
11
11
<meta property="og:site_name" content="ari melody">
12
12
<meta property="og:description" content="home to your local SPACEGIRL 💫">
13
13
14
+
<link rel="stylesheet" href="/style/main.css">
14
15
<link rel="stylesheet" href="/style/index.css">
16
+
15
17
<link rel="me" href="https://ice.arimelody.me/@ari">
16
18
<link rel="me" href="https://wetdry.world/@ari">
17
19
{{end}}
18
20
19
21
{{define "content"}}
20
22
<main>
23
+
<script type="module" src="/script/main.js" defer></script>
24
+
21
25
<h1>
22
26
# hello, world!
23
27
</h1>
···
180
184
<img src="/img/buttons/misc/epicblazed.png" alt="epic blazed">
181
185
</a>
182
186
</div>
183
-
184
-
<script type="module" src="/script/main.js" defer></script>
185
187
</main>
186
188
{{end}}
+8
-9
views/music-gateway.html
+8
-9
views/music-gateway.html
···
24
24
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
25
25
<meta name="twitter:image:alt" content="Cover art for "{{.Title}}"">
26
26
27
+
<link rel="stylesheet" href="/style/main.css">
27
28
<link rel="stylesheet" href="/style/music-gateway.css">
28
29
{{end}}
29
30
30
31
{{define "content"}}
31
32
<main>
33
+
<script type="module" src="/script/music-gateway.js" defer></script>
34
+
32
35
<div id="background" style="background-image: url({{.ResolveArtwork}})"></div>
33
36
34
-
<!-- <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> -->
35
-
<a href="/music" hx-boost="true" hx-target="body" hx-swap="innerHTML" id="go-back" title="back to arimelody.me"><</a>
37
+
<a href="/music" swap-url="/music" id="go-back" title="back to arimelody.me"><</a>
36
38
<br><br>
37
39
38
40
<div id="music-container">
···
107
109
{{else}}
108
110
<div id="tracks">
109
111
<h2>tracks:</h2>
110
-
<ul>
111
-
{{range .Tracks}}
112
-
<li>{{.Title}}</li>
113
-
{{end}}
114
-
</ul>
112
+
{{range .Tracks}}
113
+
<h3>{{.Title}}</h3>
114
+
<p>{{.Lyrics}}</p>
115
+
{{end}}
115
116
</div>
116
117
{{end}}
117
118
</div>
···
161
162
<!-- <% } %> -->
162
163
<!-- </div> -->
163
164
</div>
164
-
165
-
<script type="module" src="/script/music-gateway.js" defer></script>
166
165
</main>
167
166
{{end}}
+5
-3
views/music.html
+5
-3
views/music.html
···
11
11
<meta property="og:site_name" content="ari melody">
12
12
<meta property="og:description" content="music from your local SPACEGIRL 💫">
13
13
14
+
<link rel="stylesheet" href="/style/main.css">
15
+
<link rel="stylesheet" href="/style/index.css">
14
16
<link rel="stylesheet" href="/style/music.css">
15
17
{{end}}
16
18
17
19
{{define "content"}}
18
20
<main>
21
+
<script type="module" src="/script/music.js" defer></script>
22
+
19
23
<h1>
20
24
# my music
21
25
</h1>
···
42
46
{{end}}
43
47
</div>
44
48
45
-
<h2 id="usage" class="question" hx-get="/music#usage" hx-on="click" hx-swap="none" hx-push-url="true">
49
+
<h2 id="usage" class="question" swap-url="/music#usage">
46
50
<a href="#usage">
47
51
> "can i use your music in my content?"
48
52
</a>
···
84
88
</div>
85
89
86
90
<a href="#" id="backtotop">back to top</a>
87
-
88
-
<script type="module" src="/script/music.js" defer></script>
89
91
</main>
90
92
{{end}}