feat: now playing web component

src/_includes/base.liquid

@@ -122,7 +122,6 @@
     <script>{{ theme }}</script>
     {{ content }}
     {% capture js %}
-      {% render "../assets/scripts/now-playing.js" %}
       {% render "../assets/scripts/theme-handler.js" %}
     {% endcapture %}
     <script>

src/_includes/now.liquid

@@ -3,8 +3,8 @@ layout: default
 ---
 {% capture css %}
   {% render "../assets/styles/pages/now.css" %}
-  {% render "../assets/styles/widgets/media-grid.css" %}
-  {% render "../assets/styles/widgets/progress-bar.css" %}
+  {% render "../assets/styles/components/media-grid.css" %}
+  {% render "../assets/styles/components/progress-bar.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
 {{ content }}

src/_includes/partials/banner-old-post.liquid

@@ -1,7 +1,7 @@
 {% assign isOldPost = date | oldPost %}
 {% if isOldPost %}
   {% capture css %}
-    {% render "../../assets/styles/widgets/banner-old-post.css" %}
+    {% render "../../assets/styles/components/banner-old-post.css" %}
   {% endcapture %}
   <style>{{ css }}</style>
   <div class="banner__old-post">

src/_includes/partials/mastodon-post.liquid

@@ -1,10 +1,10 @@
 {%- assign shareLink = postUrl | findPost: linkPosts -%}
 {%- if shareLink %}
 {% capture css %}
-  {% render "../../assets/styles/widgets/mastodon-post.css" %}
+  {% render "../../assets/styles/components/mastodon-post.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
-<script type="module" src="/assets/scripts/mastodon-post.js"></script>
+<script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
 <template id="mastodon-post-template">
   <div class="mastodon-post-wrapper">
     <blockquote data-key="content"></blockquote>

src/_includes/partials/now/media-grid.liquid

@@ -1,8 +1,8 @@
 {% if data.size > 0 %}
   {% if embeddedStyles == true %}
   {% capture css %}
-    {% render "../../../assets/styles/widgets/media-grid.css" %}
-    {% render "../../../assets/styles/widgets/progress-bar.css" %}
+    {% render "../../../assets/styles/components/media-grid.css" %}
+    {% render "../../../assets/styles/components/progress-bar.css" %}
   {% endcapture %}
   <style>{{ css }}</style>
   {% endif %}

src/_includes/partials/now/playing.liquid

@@ -1,8 +1,2 @@
-<p id="now-playing" class="now-playing client-side">
-  <span id="now-playing-loading" class="icon--spin">
-    {% tablericon 'loader-2' 'Loading...' %}
-  </span>
-  <span id="now-playing-display">
-    <span id="now-playing-content"></span>
-  </span>
-</p>
+<script type="module" src="/assets/scripts/components/now-playing.js"></script>
+<now-playing></now-playing>

src/_includes/partials/paginator.liquid

@@ -1,5 +1,5 @@
 {% capture css %}
-  {% render "../../assets/styles/widgets/paginator.css" %}
+  {% render "../../assets/styles/components/paginator.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
 <nav aria-label="Blog pagination" class="pagination flex--centered">

src/_includes/partials/popular-posts.liquid

@@ -1,5 +1,5 @@
 {% capture css %}
-  {% render "../../assets/styles/widgets/popular-posts.css" %}
+  {% render "../../assets/styles/components/popular-posts.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
 {% assign posts = posts | getPopularPosts: analytics %}

src/_includes/partials/post-graph.liquid

@@ -1,5 +1,5 @@
 {% capture css %}
-  {% render "../../assets/styles/widgets/post-graph.css" %}
+  {% render "../../assets/styles/components/post-graph.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
 <div class="post-graph">

src/_includes/partials/share-button.liquid

@@ -1,22 +1,20 @@
 {% capture css %}
-  {% render "../../assets/styles/widgets/share-button.css" %}
+  {% render "../../assets/styles/components/share-button.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
-<script type="module" src="/assets/scripts/share-button.js"></script>
-<span class="client-side">
-  <share-button>
-    <button class="icon--small icon--center__vertical">{% tablericon "share" "Share" %}</button>
-    <label>
-      Share this page
-      <input
-        type="url"
-        readonly
-        value="{{ url }}"
-        onclick="this.select()"
-      />
-    </label>
-  </share-button>
-</span>
+<script type="module" src="/assets/scripts/components/share-button.js"></script>
+<share-button>
+  <button class="icon--small icon--center__vertical">{% tablericon "share" "Share" %}</button>
+  <label>
+    Share this page
+    <input
+      type="url"
+      readonly
+      value="{{ url }}"
+      onclick="this.select()"
+    />
+  </label>
+</share-button>
 <style>
   share-button:not(:defined) button,
   share-button:defined label {

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

@@ -0,0 +1,66 @@
+const nowPlayingTemplate = document.createElement('template')
+
+nowPlayingTemplate.innerHTML = `
+  <p class="now-playing client-side">
+    <span class="icon--spin" data-key="loading">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-loader-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a9 9 0 1 0 9 9" /></svg>
+    </span>
+    <span>
+      <span data-key="content"></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) {
+      customElements.define(tagName || "now-playing", NowPlaying);
+    }
+  }
+
+  async connectedCallback() {
+    this.append(this.template);
+    const data = { ...(await this.data), ...this.linkData };
+
+    this.querySelectorAll("[data-key]").forEach(async (slot) => {
+      const { key } = slot.dataset;
+      const value = data[key];
+
+      if (key === 'loading') {
+        slot.style.display = 'none'
+      } else if (key === 'content') {
+        slot.innerHTML = value;
+      }
+    })
+  }
+
+  get template() {
+    return document
+      .getElementById(nowPlayingTemplate.id)
+      .content.cloneNode(true);
+  }
+
+  get data() {
+    try {
+      const cache = JSON.parse(localStorage.getItem('now-playing'))
+      if (cache) populateNowPlaying(cache)
+    } catch (e) {}
+    const data = fetch('/api/now-playing', {
+      type: 'json',
+    })
+      .then((data) => data.json())
+      .catch(() => {
+        loading.style.display = 'none'
+      })
+    try {
+      localStorage.setItem('now-playing', JSON.stringify(data))
+    } catch (e) {}
+    return data;
+  }
+}
+
+NowPlaying.register();

src/assets/scripts/now-playing.js

@@ -1,33 +0,0 @@
-;(async function() {
-  const nowPlaying = document.getElementById('now-playing')
-
-  if (nowPlaying) {
-    const content = document.getElementById('now-playing-content')
-    const loading = document.getElementById('now-playing-loading')
-    const populateNowPlaying = (data) => {
-      loading.style.display = 'none'
-      content.innerHTML = data.content
-      content.classList.remove('hidden')
-    }
-    try {
-      const cache = JSON.parse(localStorage.getItem('now-playing'))
-      if (cache) populateNowPlaying(cache)
-    } catch (e) {}
-
-    const data = await fetch('/api/now-playing', {
-      type: 'json',
-    })
-      .then((data) => data.json())
-      .catch(() => {
-        loading.style.display = 'none'
-      })
-
-    try {
-      localStorage.setItem('now-playing', JSON.stringify(data))
-    } catch (e) {}
-
-    if (!JSON.parse(localStorage?.getItem('now-playing')) && !data) nowPlaying.remove()
-
-    populateNowPlaying(data)
-  }
-})()

src/assets/styles/components/share-button.css

@@ -11,7 +11,7 @@ button > svg {
 input {
   border-radius: var(--rounded-md);
   padding: .25rem;
-  border: none;
+  border: 1px solid var(--gray-light);
 }
 
 label {

src/assets/styles/index.css

@@ -385,10 +385,6 @@ svg {
   animation: spin 1s linear infinite;
 }
 
-.icon--center__vertical {
-  height: 1.76rem;
-}
-
 .icon--center__vertical > svg {
   display: inline;
   vertical-align: middle;
@@ -568,12 +564,6 @@ footer nav {
     line-height: var(--line-height-3xl);
   }
 
-  /* articles */
-  article [rel="author"],
-  article time {
-    height: 1rem;
-  }
-
   /* lists */
   ul, ol {
     padding-left: 2.5rem;
@@ -582,9 +572,4 @@ footer nav {
   footer nav:first-child {
     gap: .75rem;
   }
-
-/* icons */
-.icon--center__vertical {
-  height: 1.275rem;
-}
 }

src/pages/contact.md

@@ -6,7 +6,7 @@ image: /assets/img/ogi/contact.jpg
 description: 'How to contact me.'
 ---
 {% capture css %}
-  {% render "../assets/styles/widgets/forms.css" %}
+  {% render "../assets/styles/components/forms.css" %}
   {% render "../assets/styles/pages/contact.css" %}
 {% endcapture %}
 <style>{{ css }}</style>

src/pages/search.html

@@ -5,10 +5,10 @@ layout: default
 permalink: /search.html
 image: /assets/img/ogi/search.jpg
 ---
-<script type="module" src="/assets/scripts/pagefind-search.js"></script>
+<script type="module" src="/assets/scripts/components/pagefind-search.js"></script>
 {% capture css %}
-{% render "../assets/styles/widgets/forms.css" %}
-{% render "../assets/styles/widgets/pagefind.css" %}
+{% render "../assets/styles/components/forms.css" %}
+{% render "../assets/styles/components/pagefind.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
 <pagefind-search _show_images="false">