Add ListenBrainz currently playing song.

package.json

@@ -5,13 +5,14 @@
   "scripts": {
     "deploy": "cargo run --release -q && yarn deploy:netlify",
     "deploy:netlify": "netlify deploy --prod --dir 'public/' -s bauke.xyz",
-    "test": "stylelint 'source/**/*.scss'"
+    "test": "xo && stylelint 'source/**/*.scss'"
   },
   "devDependencies": {
     "netlify-cli": "^8.0.1",
     "stylelint": "^14.1.0",
     "stylelint-config-xo-scss": "^0.14.0",
-    "stylelint-config-xo-space": "^0.15.1"
+    "stylelint-config-xo-space": "^0.15.1",
+    "xo": "^0.47.0"
   },
   "stylelint": {
     "extends": [
@@ -28,5 +29,16 @@
       "scss/at-import-partial-extension": null,
       "scss/at-rule-no-unknown": null
     }
+  },
+  "xo": {
+    "pretty": true,
+    "globals": [
+      "document",
+      "window"
+    ],
+    "rules": {
+      "capitalized-comments": "off"
+    },
+    "space": true
   }
 }

source/js/listenbrainz.js

@@ -0,0 +1,18 @@
+window.addEventListener('DOMContentLoaded', async () => {
+  const result = await window.fetch('https://api.listenbrainz.org/1/user/BaukeXYZ/playing-now');
+  if (!result.ok) {
+    console.warn(result.status);
+    return;
+  }
+
+  const data = await result.json();
+  const listen = data.payload.listens[0];
+  const listenHtml = `<div class="divider"></div><div class="listenbrainz">
+  <a href="https://listenbrainz.org/user/BaukeXYZ/" target="_blank">
+    <img src="https://listenbrainz.org/static/img/logo_big.svg">
+    ${listen.track_metadata.artist_name} - ${listen.track_metadata.track_name}
+  </a>
+</div>`;
+
+  document.querySelector('.page-main').insertAdjacentHTML('beforeend', listenHtml);
+});

source/main.rs

@@ -92,7 +92,10 @@ fn main() -> color_eyre::Result<()> {
     fs::copy(source, destination)?;
   }
 
-  let dirs_to_copy = vec![(build_dir.join("userstyles"), public_dir)];
+  let dirs_to_copy = vec![
+    (source_dir.join("js"), &public_dir),
+    (build_dir.join("userstyles"), &public_dir),
+  ];
 
   for (source, destination) in dirs_to_copy {
     Command::new("cp")

source/scss/components/_listenbrainz.scss

@@ -0,0 +1,18 @@
+.listenbrainz a {
+  align-items: center;
+  border: 2px solid #fff;
+  display: flex;
+  margin-top: 1rem;
+  padding: 1rem;
+
+  &:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #000;
+  }
+
+  img {
+    height: 3rem;
+    margin-right: 1rem;
+  }
+}

source/scss/index.scss

@@ -24,9 +24,16 @@ button {
   font-family: monospace;
 }
 
+.divider {
+  border-top: 2px solid #fff;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
 @import 'components/errors';
 @import 'components/page-footer';
 @import 'components/page-header';
 @import 'components/page-main';
 
+@import 'components/listenbrainz';
 @import 'components/userstyles';

source/templates/index.html

@@ -24,4 +24,6 @@
     </a>
   </div>
 </main>
+
+<script src="/js/listenbrainz.js"></script>
 {% endblock %}