the home site for me: also iteration 3 or 4 of my site
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add now playing

+53 -11
+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
··· 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 %}