mirror of
https://github.com/apricote/apricote.de.git
synced 2026-01-13 12:51:00 +00:00
feat: show fav music from listory
This commit is contained in:
parent
6b4d0f69f1
commit
d6a70f5436
6 changed files with 176 additions and 1 deletions
|
|
@ -3,4 +3,16 @@ title: "My Favorite Music"
|
||||||
type: listory
|
type: listory
|
||||||
---
|
---
|
||||||
|
|
||||||
> Work in Progress
|
Last Update: {{< current-day >}}
|
||||||
|
|
||||||
|
The data on this page reflects my listens from Spotify. I track the data using a
|
||||||
|
self-hosted instance of [Listory](https://github.com/apricote/listory). All data
|
||||||
|
is coming from the listens of the 30 days prior to the last update time.
|
||||||
|
|
||||||
|
### My favorite genres
|
||||||
|
|
||||||
|
{{< listory-genres >}}
|
||||||
|
|
||||||
|
### My favorite albums
|
||||||
|
|
||||||
|
{{< listory-albums >}}
|
||||||
|
|
|
||||||
32
layouts/partials/extend_head.html
Normal file
32
layouts/partials/extend_head.html
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<script async>
|
||||||
|
// When document is ready, find relative-date elements and use relative date format
|
||||||
|
document.addEventListener("readystatechange", (event) => {
|
||||||
|
if (event.target.readyState !== "complete") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatter = new Intl.RelativeTimeFormat("en-US", {
|
||||||
|
numeric: "auto",
|
||||||
|
});
|
||||||
|
|
||||||
|
const elements = document.querySelectorAll(".relative-date");
|
||||||
|
|
||||||
|
elements.forEach((element) => {
|
||||||
|
let date;
|
||||||
|
try {
|
||||||
|
date = new Date(element.innerText);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Element does have a proper date");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const diffMs = date - new Date();
|
||||||
|
const daysSince = diffMs / 1000 / 60 / 60 / 24;
|
||||||
|
const formatted = formatter.format(daysSince, "days");
|
||||||
|
const capitalized =
|
||||||
|
formatted.charAt(0).toUpperCase() + formatted.slice(1);
|
||||||
|
|
||||||
|
element.innerText = capitalized;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
2
layouts/shortcodes/current-day.html
Normal file
2
layouts/shortcodes/current-day.html
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<!-- If JS is available, this will be formated in a relative way, see layouts/partials/extend_head.html -->
|
||||||
|
<span class="relative-date">{{ now.Format "2006-01-02T15:04:05" }}</span>
|
||||||
31
layouts/shortcodes/listory-albums.html
Normal file
31
layouts/shortcodes/listory-albums.html
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
{{ $listoryApi := getenv "HUGO_LISTORY_HOST" }}{{ $listoryToken := getenv
|
||||||
|
"HUGO_LISTORY_TOKEN" }} {{ $res := getJSON
|
||||||
|
"https://listory.apricote.de/api/v1/reports/top-albums?timePreset=last_30_days"
|
||||||
|
(dict "Authorization" (printf "Bearer %s" $listoryToken) ) }}
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
{{ range first 5 $res.items }}
|
||||||
|
<li style="margin-bottom: 1em">
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 80%">
|
||||||
|
<span style="font-weight: 600;">{{ .album.name | title }}</span> - {{ range .album.artists }}<span style="font-size: 0.9em; padding-right: 0.2em"
|
||||||
|
>{{.name}}</code
|
||||||
|
>{{ end }}
|
||||||
|
</div>
|
||||||
|
<div style="width: 20%; text-align: right">
|
||||||
|
{{ .count }}<img
|
||||||
|
src="/listen.svg"
|
||||||
|
style="
|
||||||
|
height: 1em;
|
||||||
|
display: inline;
|
||||||
|
margin: 0 0;
|
||||||
|
padding-left: 0.2em;
|
||||||
|
vertical-align: middle;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 0.9em"></div>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ol>
|
||||||
30
layouts/shortcodes/listory-genres.html
Normal file
30
layouts/shortcodes/listory-genres.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{{ $listoryApi := getenv "HUGO_LISTORY_HOST" }}{{ $listoryToken := getenv
|
||||||
|
"HUGO_LISTORY_TOKEN" }} {{ $res := getJSON
|
||||||
|
"https://listory.apricote.de/api/v1/reports/top-genres?timePreset=last_30_days"
|
||||||
|
(dict "Authorization" (printf "Bearer %s" $listoryToken) ) }}
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
{{ range first 5 $res.items }}
|
||||||
|
<li style="margin-bottom: 1em">
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="font-weight: 600; width: 80%">{{ .genre.name | title }}</div>
|
||||||
|
<div style="width: 20%; text-align: right">
|
||||||
|
{{ .count }}<img
|
||||||
|
src="/listen.svg"
|
||||||
|
style="
|
||||||
|
height: 1em;
|
||||||
|
display: inline;
|
||||||
|
margin: 0 0;
|
||||||
|
padding-left: 0.2em;
|
||||||
|
vertical-align: middle;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 0.9em">
|
||||||
|
{{ range first 3 .artists }}<code alt="foobar">{{.artist.name}}</code> {{
|
||||||
|
end }}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ol>
|
||||||
68
static/listen.svg
Normal file
68
static/listen.svg
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||||
|
sodipodi:docname="logo.svg"
|
||||||
|
id="svg8"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
height="256"
|
||||||
|
width="256">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-height="1392"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
borderlayer="false"
|
||||||
|
inkscape:pagecheckerboard="false"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-top="0"
|
||||||
|
lock-margins="true"
|
||||||
|
units="px"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:cy="43.328855"
|
||||||
|
inkscape:cx="82.530037"
|
||||||
|
inkscape:zoom="1"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
borderopacity="1.0"
|
||||||
|
bordercolor="#666666"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
id="base" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Layer 1">
|
||||||
|
<path
|
||||||
|
style="stroke-width:0.867684"
|
||||||
|
sodipodi:nodetypes="cccccccccccccccccccccccccccccccc"
|
||||||
|
d="m 203.80288,51.920648 c -13.62502,3.672705 -4.77407,2.063581 -17.99743,6.737838 -16.24762,7.952561 -52.06559,25.532517 -69.50226,30.736893 -16.604412,5.549743 -33.257978,11.328241 -48.54131,19.811081 3.183919,7.36904 13.540094,-3.16437 19.55362,-3.56011 0.56951,-0.20947 1.145001,-0.41134 1.715433,-0.61952 0.826748,15.91164 3.776877,44.8498 0.98496,60.43848 -0.05189,0.31496 -0.09144,0.64273 -0.13329,0.96852 -5.932771,-0.64632 -12.278895,1.42766 -18.071863,2.29437 -0.379099,0.17143 -0.82163,0.33572 -1.287884,0.49761 -2.303034,0.42419 -4.517651,1.10581 -6.564034,2.06393 -2.271961,0.82124 -4.290533,1.85283 -5.165365,3.35473 -2.387274,2.10356 -4.288876,4.78363 -5.466568,8.08707 -3.922928,6.20414 0.75935,16.25548 9.08613,19.72591 13.79965,4.2939 21.116752,-0.26767 30.704861,-9.79699 1.946838,-1.61942 3.527698,-3.74181 4.666838,-6.08994 0.0513,0.0233 2.536152,-7.70921 4.325372,-16.63128 1.78922,-8.92208 0.9202,-49.83403 -1.00952,-68.14554 21.00162,-7.369589 46.52658,-17.343832 66.08081,-27.719174 5.59985,-2.802261 10.95333,-5.825639 16.30276,-8.916987 -0.47961,22.364456 -3.04286,50.066961 -3.41692,72.443531 -17.56725,2.37223 -33.57165,0.78785 -40.1477,17.75164 -5.47069,9.69478 6.50345,20.88581 15.15336,20.20683 13.58436,2.40436 24.20333,-3.84339 30.54902,-16.21436 1.56095,-3.43781 2.71345,-6.61096 3.28576,-10.65207 1.63032,-2.54328 3.57478,-85.331219 3.96781,-86.941404 1.71127,-14.091744 -12.76285,11.454996 11.20437,-6.83869 z m -30.10233,89.323782 c -0.003,0.0102 0.003,-0.0102 0,0 -0.0226,0.002 0.0226,-0.002 0,0 0.0258,-0.013 -0.0259,0.013 0,0 z"
|
||||||
|
id="note" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue