mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-21 22:42:19 +00:00
retrieve recent pinned track from musicthread
This commit is contained in:
parent
797560c7a3
commit
a318d91ed2
4 changed files with 50 additions and 10 deletions
20
assets/js/theme-song.js
Normal file
20
assets/js/theme-song.js
Normal 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)
|
||||||
|
})
|
||||||
|
}
|
|
@ -14,6 +14,9 @@ darkVisitors = [
|
||||||
"AI Search Crawler"
|
"AI Search Crawler"
|
||||||
]
|
]
|
||||||
|
|
||||||
|
omgUser = "jbowdre"
|
||||||
|
musicThreadId = "2aVjZUocjk96LELFbV5JvJjm14v"
|
||||||
|
|
||||||
# Comments
|
# Comments
|
||||||
analytics = true
|
analytics = true
|
||||||
reply = true
|
reply = true
|
||||||
|
|
|
@ -51,10 +51,15 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
{{ with .Site.Params.omgUser }}
|
||||||
<hr>
|
<hr>
|
||||||
<h3>status.lol</h3>
|
<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>
|
<hr>
|
||||||
<h3>latest track</h3>
|
<h3>current theme song</h3>
|
||||||
<script src="https://recentfm.rknight.me/now.js?u=pushpianotire&e=🎶"></script>
|
{{ $jsThemeSong := resources.Get "js/theme-song.js" | minify }}
|
||||||
|
<script src="{{ $jsThemeSong.RelPermalink }}?id={{ . }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
@ -238,16 +238,28 @@ small[style^="opacity: .5"] {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* recentfm styling */
|
/* theme song styling */
|
||||||
.recent-played {
|
.theme-song {
|
||||||
background: var(--off-bg) !important;
|
background: var(--off-bg) !important;
|
||||||
flex-direction:column;
|
display: flex;
|
||||||
border-radius: 0.5em;
|
flex-direction: column;
|
||||||
padding: 0.5em;
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.7rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recent-played-track {
|
.theme-song img {
|
||||||
margin: 0.5em 0;
|
width: 14rem;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 45rem) {
|
||||||
|
.theme-song img {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code overrides */
|
/* code overrides */
|
||||||
|
|
Loading…
Reference in a new issue