feat: show fav music from listory

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>

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>

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>

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>