chore: now-playing web component

.eleventy.js

@@ -60,6 +60,9 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({
     'node_modules/@zachleat/pagefind-search/pagefind-search.js': 'assets/scripts/components/pagefind-search.js',
   })
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@cdransf/now-playing/now-playing.js': 'assets/scripts/components/now-playing.js',
+  })
   eleventyConfig.addPassthroughCopy({
     'node_modules/@cdransf/theme-toggle/theme-toggle.js': 'assets/scripts/components/theme-toggle.js',
   })

package-lock.json

@@ -9,7 +9,8 @@
       "version": "6.7.0",
       "license": "MIT",
       "dependencies": {
-        "@cdransf/theme-toggle": "^1.2.1",
+        "@cdransf/now-playing": "^1.0.0",
+        "@cdransf/theme-toggle": "^1.2.2",
         "@daviddarnes/mastodon-post": "^1.1.1",
         "@remy/webmention": "^1.5.0",
         "@zachleat/pagefind-search": "^1.0.3",
@@ -1229,10 +1230,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cdransf/now-playing": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@cdransf/now-playing/-/now-playing-1.0.0.tgz",
+      "integrity": "sha512-O6oDLm0q1mw9uPlpLSI5rCz+8GxH7S+g/2VhFbD7Q9tTB/+u2UK2n4stvJT0RmVxqnKZwYSqfDikHpFqFN4qmQ=="
+    },
     "node_modules/@cdransf/theme-toggle": {
-      "version": "1.2.1",
+      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.2.tgz",
-      "integrity": "sha512-3eiIUuEbDpe/T2fOtpq8qPw0lfR3GWJOIbaPoZ89GxRXlEdkWetVtW2WG5YY3FfsmHGWvNSZwT6b6nWIQ9rWNQ=="
+      "integrity": "sha512-EPfNRs4sd3DFPWeylzQG8zTn5zhKL9xdeHr68GuDSiWcz3+kEMZrUwkQ9BvALSzaZC0E51dP0tvnYx2V6U8lYg=="
     },
     "node_modules/@daviddarnes/mastodon-post": {
       "version": "1.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "6.7.0",
+  "version": "6.7.1",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
@@ -20,7 +20,8 @@
   "author": "Cory Dransfeldt",
   "license": "MIT",
   "dependencies": {
-    "@cdransf/theme-toggle": "^1.2.1",
+    "@cdransf/now-playing": "^1.0.0",
+    "@cdransf/theme-toggle": "^1.2.2",
     "@daviddarnes/mastodon-post": "^1.1.1",
     "@remy/webmention": "^1.5.0",
     "@zachleat/pagefind-search": "^1.0.3",

src/assets/scripts/components/now-playing.js

@@ -1,48 +0,0 @@
-class NowPlaying extends HTMLElement {
-  static tagName = 'now-playing'
-
-  static register(tagName, registry) {
-    if(!registry && ('customElements' in globalThis)) {
-      registry = globalThis.customElements;
-    }
-    registry?.define(tagName || this.tagName, this);
-  }
-
-  static attr = {
-    url: 'api-url'
-  }
-
-  get url() {
-    return this.getAttribute(NowPlaying.attr.url) || '';
-  }
-
-  async connectedCallback() {
-    if (this.shadowRoot) return;
-    const data = { ...(await this.data) };
-    let shadowroot = this.attachShadow({ mode: 'open' })
-    let slot = document.createElement('slot')
-    shadowroot.appendChild(slot)
-
-    const loading = this.querySelector('.loading')
-    const content = this.querySelector('.content')
-    const value = data['content']
-
-    if (!value) {
-      loading.style.display = 'none'
-      content.style.display = 'none'
-    }
-
-    if (value) {
-      loading.style.opacity = '0'
-      loading.style.display = 'none'
-      content.style.opacity = '1'
-      content.innerHTML = value
-    }
-  }
-
-  get data() {
-    return fetch(this.url, { type: 'json' }).then((data) => data.json()).catch((e) => {})
-  }
-}
-
-NowPlaying.register();