retrieve recent pinned track from musicthread

This commit is contained in:
John Bowdre 2024-08-02 16:20:36 -05:00
parent 797560c7a3
commit a318d91ed2
4 changed files with 50 additions and 10 deletions

20
assets/js/theme-song.js Normal file
View file

@ -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 = `<a href="${themeSong.page_url}"><img src="${themeSong.thumbnail_url}"></a><br><a href="${themeSong.page_url}">${themeSong.title}</a><br><i>${themeSong.artist}</i>`
themeSongScript.parentNode.insertBefore(themeSongContainer, themeSongScript)
})
}

View file

@ -14,6 +14,9 @@ darkVisitors = [
"AI Search Crawler"
]
omgUser = "jbowdre"
musicThreadId = "2aVjZUocjk96LELFbV5JvJjm14v"
# Comments
analytics = true
reply = true

View file

@ -51,10 +51,15 @@
{{- end }}
</ul>
{{- end }}
{{ with .Site.Params.omgUser }}
<hr>
<h3>status.lol</h3>
<script src="https://status.lol/jbowdre.js?time&link&fluent&pretty"></script>
<script src="https://status.lol/{{ . }}.js?time&link&fluent&pretty"></script>
{{ end }}
{{ with .Site.Params.musicThreadId }}
<hr>
<h3>latest track</h3>
<script src="https://recentfm.rknight.me/now.js?u=pushpianotire&e=🎶"></script>
<h3>current theme song</h3>
{{ $jsThemeSong := resources.Get "js/theme-song.js" | minify }}
<script src="{{ $jsThemeSong.RelPermalink }}?id={{ . }}"></script>
{{ end }}

View file

@ -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;
display: flex;
flex-direction: column;
border-radius: 0.5em;
padding: 0.5em;
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 */