From d6a70f54369e19c2622be4291392fad790faccfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sun, 19 Feb 2023 17:49:52 +0100
Subject: [PATCH] feat: show fav music from listory

---
 content/listory.md                     | 14 +++++-
 layouts/partials/extend_head.html      | 32 ++++++++++++
 layouts/shortcodes/current-day.html    |  2 +
 layouts/shortcodes/listory-albums.html | 31 ++++++++++++
 layouts/shortcodes/listory-genres.html | 30 ++++++++++++
 static/listen.svg                      | 68 ++++++++++++++++++++++++++
 6 files changed, 176 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/extend_head.html
 create mode 100644 layouts/shortcodes/current-day.html
 create mode 100644 layouts/shortcodes/listory-albums.html
 create mode 100644 layouts/shortcodes/listory-genres.html
 create mode 100644 static/listen.svg

diff --git a/content/listory.md b/content/listory.md
index efcb94c..90cdb0e 100644
--- a/content/listory.md
+++ b/content/listory.md
@@ -3,4 +3,16 @@ title: "My Favorite Music"
 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 >}}
diff --git a/layouts/partials/extend_head.html b/layouts/partials/extend_head.html
new file mode 100644
index 0000000..c35365a
--- /dev/null
+++ b/layouts/partials/extend_head.html
@@ -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>
diff --git a/layouts/shortcodes/current-day.html b/layouts/shortcodes/current-day.html
new file mode 100644
index 0000000..56e1527
--- /dev/null
+++ b/layouts/shortcodes/current-day.html
@@ -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>
diff --git a/layouts/shortcodes/listory-albums.html b/layouts/shortcodes/listory-albums.html
new file mode 100644
index 0000000..5d5d68d
--- /dev/null
+++ b/layouts/shortcodes/listory-albums.html
@@ -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>
diff --git a/layouts/shortcodes/listory-genres.html b/layouts/shortcodes/listory-genres.html
new file mode 100644
index 0000000..6ad159f
--- /dev/null
+++ b/layouts/shortcodes/listory-genres.html
@@ -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>
diff --git a/static/listen.svg b/static/listen.svg
new file mode 100644
index 0000000..821b748
--- /dev/null
+++ b/static/listen.svg
@@ -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>