the home site for me: also iteration 3 or 4 of my site
feat: add now playing
+53
-11
+27
-3
sass/css/mods.css
+27
-3
sass/css/mods.css
···
1
+
header {
2
+
grid-column: 1 / -1;
3
+
padding: 0.625rem 1rem 0 1rem;
4
+
}
5
+
6
+
#header-container {
7
+
display: flex;
8
+
flex-direction: row;
9
+
justify-content: space-between;
10
+
align-items: center;
11
+
}
12
+
13
+
#now-playing:not(:empty) {
14
+
font-size: 0.85rem;
15
+
color: var(--text-light);
16
+
}
17
+
18
+
#now-playing a {
19
+
color: var(--link);
20
+
text-decoration: none;
21
+
}
22
+
23
+
#now-playing a:hover {
24
+
text-decoration: underline;
25
+
}
26
+
1
27
#nav-bar {
2
-
padding: 0.625rem 0 0 0;
3
28
display: flex;
4
29
flex-direction: row;
5
30
flex-wrap: wrap;
6
-
justify-content: flex-end;
7
31
align-items: center;
8
-
align-content: flex-end;
9
32
}
10
33
11
34
#nav-bar a {
···
269
292
}
270
293
271
294
.bubble {
295
+
margin-top: 1rem;
272
296
padding: 0.7em 1.2em 0.7em 1.2em;
273
297
background: var(--accent);
274
298
border-bottom: 5px solid var(--bg-light);
+26
-8
templates/header.html
+26
-8
templates/header.html
···
8
8
{% else %}
9
9
{% set active_path = "" %}
10
10
{% endif %}
11
-
<nav id="nav-bar">
12
-
{% for nav_item in config.extra.header_nav %}
13
-
<a href="{{ nav_item.url }}"
14
-
class="{% if nav_item.url == active_path or (nav_item.url == '/' and active_path == '') %}active{% endif %}">
15
-
{{ nav_item.name }}
16
-
</a>
17
-
{% endfor %}
18
-
</nav>
11
+
<div id="header-container">
12
+
<span id="now-playing"></span>
13
+
<nav id="nav-bar">
14
+
{% for nav_item in config.extra.header_nav %}
15
+
<a href="{{ nav_item.url }}"
16
+
class="{% if nav_item.url == active_path or (nav_item.url == '/' and active_path == '') %}active{% endif %}">
17
+
{{ nav_item.name }}
18
+
</a>
19
+
{% endfor %}
20
+
</nav>
21
+
</div>
22
+
<script>
23
+
document.addEventListener("DOMContentLoaded", () => {
24
+
fetch("https://bsky.social/xrpc/com.atproto.repo.getRecord?repo=did:plc:krxbvxvis5skq7jj6eot23ul&collection=fm.teal.alpha.actor.status&rkey=self")
25
+
.then((response) => response.ok ? response.json() : null)
26
+
.then((data) => {
27
+
if (!data?.value?.item) return;
28
+
const item = data.value.item;
29
+
const expiry = parseInt(data.value.expiry, 10) * 1000;
30
+
if (Date.now() > expiry) return;
31
+
const el = document.getElementById("now-playing");
32
+
el.innerHTML = `🎵 <a href="${item.originUrl || '#'}" target="_blank" rel="noopener">${item.trackName}</a> - ${item.artists?.[0]?.artistName || 'Unknown'}`;
33
+
})
34
+
.catch(() => {});
35
+
});
36
+
</script>
19
37
{% endif %}