diff --git a/assets/js/theme-song.js b/assets/js/theme-song.js new file mode 100644 index 0000000..ae1c2a4 --- /dev/null +++ b/assets/js/theme-song.js @@ -0,0 +1,20 @@ +// retreives the latest link from a musicthread thread and displays it on the page +const themeSongScript = document.currentScript +const urlParams = new URLSearchParams(themeSongScript.src.split('.js')[1]) +const params = Object.fromEntries(urlParams.entries()) + +if (params.id) +{ + const musicthread = `https://musicthread.app/api/v0/thread/${params.id}` + fetch(musicthread) + .then((response) => response.json()) + .then((thread) => { + let themeSong = thread.links[0] + console.log(themeSong) + themeSongContainer = document.createElement('div') + themeSongContainer.className = 'theme-song' + themeSongContainer.style + themeSongContainer.innerHTML = `
${themeSong.title}
${themeSong.artist}` + themeSongScript.parentNode.insertBefore(themeSongContainer, themeSongScript) + }) +} \ No newline at end of file diff --git a/config/_default/params.toml b/config/_default/params.toml index e0f5d42..54b31c3 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -14,6 +14,9 @@ darkVisitors = [ "AI Search Crawler" ] +omgUser = "jbowdre" +musicThreadId = "2aVjZUocjk96LELFbV5JvJjm14v" + # Comments analytics = true reply = true diff --git a/layouts/partials/aside.html b/layouts/partials/aside.html index fb1f687..334cd32 100644 --- a/layouts/partials/aside.html +++ b/layouts/partials/aside.html @@ -51,10 +51,15 @@ {{- end }} {{- end }} +{{ with .Site.Params.omgUser }}

status.lol

- + +{{ end }} +{{ with .Site.Params.musicThreadId }}
-

latest track

- +

current theme song

+{{ $jsThemeSong := resources.Get "js/theme-song.js" | minify }} + +{{ end }} diff --git a/static/css/custom.css b/static/css/custom.css index 957eb3d..95717b2 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -238,16 +238,28 @@ small[style^="opacity: .5"] { opacity: 1 !important; } -/* recentfm styling */ -.recent-played { +/* theme song styling */ +.theme-song { background: var(--off-bg) !important; - flex-direction:column; - border-radius: 0.5em; - padding: 0.5em; + display: flex; + flex-direction: column; + border-radius: 0.5rem; + padding: 0.7rem; + font-size: 0.9rem; + line-height: 0.9rem; } -.recent-played-track { - margin: 0.5em 0; +.theme-song img { + width: 14rem; + height: auto; + object-fit: cover; +} + +@media (min-width: 45rem) { + .theme-song img { + max-width: 100%; + margin: 0 auto; + } } /* code overrides */