From cf91650cc667e46b9843e8a85a66c28c3dbe5d9d Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Sat, 17 Feb 2024 20:18:56 -0800
Subject: [PATCH] chore: now playing loading changes

---
 package.json                        |  2 +-
 src/_includes/base.liquid           |  7 ++--
 src/assets/scripts/index.js         | 62 -----------------------------
 src/assets/scripts/now-playing.js   | 33 +++++++++++++++
 src/assets/scripts/theme-handler.js | 20 ++++++++++
 5 files changed, 58 insertions(+), 66 deletions(-)
 delete mode 100644 src/assets/scripts/index.js
 create mode 100644 src/assets/scripts/now-playing.js
 create mode 100644 src/assets/scripts/theme-handler.js
diff --git a/package.json b/package.json
index 3284129c..b8420e2c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.9.2",
+  "version": "5.9.3",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index dbc0410b..ed73e772 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -116,13 +116,14 @@
     </noscript>
   </head>
   <body>
-    {% capture js %}
+    {% capture theme %}
       {% render "../assets/scripts/theme.js" %}
     {% endcapture %}
-    <script>{{ js }}</script>
+    <script>{{ theme }}</script>
     {{ content }}
     {% capture js %}
-      {% render "../assets/scripts/index.js" %}
+      {% render "../assets/scripts/now-playing.js" %}
+      {% render "../assets/scripts/theme-handler.js" %}
     {% endcapture %}
     <script>
       {{ js }}
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
deleted file mode 100644
index 0a849cf1..00000000
--- a/src/assets/scripts/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-if (window.location.hostname !== 'localhost') {
-  ;(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) {
-        /* quiet catch */
-      }
-
-      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) {
-        /* quiet catch */
-      }
-
-      if (!JSON.parse(localStorage.getItem('now-playing')) && !data) nowPlaying.remove()
-
-      populateNowPlaying(data)
-    }
-  })()
-}
-
-;(async function() {
-  const btn = document.querySelector('.theme__toggle');
-  btn.addEventListener('click', () => {
-    document.body.classList.toggle('theme__light');
-    document.body.classList.toggle('theme__dark');
-
-    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const currentTheme = localStorage?.getItem('theme');
-    let theme;
-
-    if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
-
-    if (prefersDarkScheme) {
-      theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
-    } else {
-      theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
-    }
-    localStorage?.setItem('theme', theme);
-  });
-})()
\ No newline at end of file
diff --git a/src/assets/scripts/now-playing.js b/src/assets/scripts/now-playing.js
new file mode 100644
index 00000000..0ffb6a2c
--- /dev/null
+++ b/src/assets/scripts/now-playing.js
@@ -0,0 +1,33 @@
+;(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)
+  }
+})()
\ No newline at end of file
diff --git a/src/assets/scripts/theme-handler.js b/src/assets/scripts/theme-handler.js
new file mode 100644
index 00000000..e7667eef
--- /dev/null
+++ b/src/assets/scripts/theme-handler.js
@@ -0,0 +1,20 @@
+;(async function() {
+  const btn = document.querySelector('.theme__toggle');
+  btn.addEventListener('click', () => {
+    document.body.classList.toggle('theme__light');
+    document.body.classList.toggle('theme__dark');
+
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const currentTheme = localStorage?.getItem('theme');
+    let theme;
+
+    if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
+
+    if (prefersDarkScheme) {
+      theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
+    } else {
+      theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
+    }
+    localStorage?.setItem('theme', theme);
+  });
+})()
\ No newline at end of file
