fix: clean up component logic

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "6.5.7",
+  "version": "6.5.9",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
@@ -23,7 +23,8 @@
     "@daviddarnes/mastodon-post": "^1.1.1",
     "@remy/webmention": "^1.5.0",
     "@zachleat/pagefind-search": "^1.0.3",
-    "@zachleat/webcare-webshare": "^1.0.3"
+    "@zachleat/webcare-webshare": "^1.0.3",
+    "netlify-cli": "^17.16.4"
   },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.5",

src/_includes/partials/now/playing.liquid

@@ -1,2 +1,4 @@
 <script type="module" src="/assets/scripts/components/now-playing.js"></script>
-<now-playing></now-playing>
+<div style="height:28px;margin-bottom: 1rem">
+  <now-playing></now-playing>
+</div>

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

@@ -2,73 +2,32 @@ const nowPlayingTemplate = document.createElement('template')
 
 nowPlayingTemplate.innerHTML = `
   <p class="client-side">
-    <span class="text--blurred" data-key="loading">🎧 Album by Artist</span>
+    <span class="text--blurred fade" data-key="loading">🎧 Album by Artist</span>
     <span>
-      <span data-key="content" style="opacity:0"></span>
+      <span class="fade" data-key="content" style="opacity:0"></span>
     </span>
   </p>
 `
-
 nowPlayingTemplate.id = "now-playing-template"
 
 if (!document.getElementById(nowPlayingTemplate.id)) document.body.appendChild(nowPlayingTemplate)
 
 class NowPlaying extends HTMLElement {
   static register(tagName) {
-    if ("customElements" in window) {
+    if ("customElements" in window) customElements.define(tagName || "now-playing", NowPlaying);
-      customElements.define(tagName || "now-playing", NowPlaying);
-    }
   }
 
   async connectedCallback() {
     this.append(this.template);
     const data = { ...(await this.data) };
-    const populateNowPlaying = (component, data, cache) => {
+    const loading = this.querySelector('[data-key="loading"]')
-      component.querySelectorAll("[data-key]").forEach(async (slot) => {
+    const content = this.querySelector('[data-key="content"]')
-        const { key } = slot.dataset
+    const value = data['content']
-        const value = data[key]
 
-        if (!value || value === typeof undefined) {
+    loading.style.opacity = '0'
-          slot.style.opacity = '0'
+    content.style.opacity = '1'
-          slot.style.display = 'none'
+    loading.style.display = 'none'
-        }
+    content.innerHTML = value
-
-        if (cache) {
-          if (key === 'loading') {
-            slot.style.opacity = '0'
-            slot.style.display = 'none'
-          } else if (key === 'content') {
-            slot.innerHTML = value
-            slot.style.opacity = '1'
-          }
-        }
-
-        if (!cache) {
-          if (key === 'loading') {
-            slot.classList.add('fade')
-            slot.style.opacity = '0'
-            setTimeout(() => {
-              slot.style.display = 'none'
-            }, 300);
-          } else if (key === 'content') {
-            slot.classList.add('fade')
-            setTimeout(() => {
-              slot.innerHTML = value
-              slot.style.opacity = '1'
-            }, 300);
-          }
-        }
-      })
-    }
-
-    try {
-      const cache = JSON.parse(localStorage.getItem('now-playing'))
-      if (cache) populateNowPlaying(this, cache, true)
-    } catch (e) {}
-    populateNowPlaying(this, data)
-    try {
-      localStorage.setItem('now-playing', JSON.stringify(data))
-    } catch (e) {}
   }
 
   get template() {