refactor: make partials of all embeded JavaScript code

6 files changed, 105 insertions, 103 deletions

diff --git a/layouts/_partials/posts/toc.html b/layouts/_partials/posts/toc.html
index 0af63e4a..7a4a63cf 100644
--- a/layouts/_partials/posts/toc.html
+++ b/layouts/_partials/posts/toc.html
@@ -6,44 +6,4 @@
         class="sticky top-12 text-size-sm 2xl:text-size-base px-8"
     >{{ .TableOfContents }}</div>
 </div>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  const toc = document.getElementById('toc');
-  if (!toc) return;
-
-  const headings = document.querySelectorAll('h2, h3');
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (!entry.isIntersecting) return;
-
-      const id = entry.target.id;
-      const tocLink = toc.querySelector(`a[href="#${id}"]`);
-      if (!tocLink) return;
-
-      const listItem = tocLink.parentElement;
-      const isH2 = entry.target.tagName === 'H2';
-
-      // Clear all active states when a new H2 is encountered
-      if (isH2) {
-        toc.querySelectorAll('li.active').forEach(el => el.classList.remove('active'));
-      }
-
-      // Set current item as active
-      listItem.classList.add('active');
-
-      // If this is an H3, find and activate its parent H2
-      if (!isH2) {
-        const parentH2Item = listItem.closest('ul').previousElementSibling?.closest('li');
-        if (parentH2Item) parentH2Item.classList.add('active');
-      }
-    });
-  }, {
-    rootMargin: '0px 0px -50% 0px',
-    threshold: 0.5
-  });
-
-  headings.forEach(heading => observer.observe(heading));
-});
-</script>
 {{ end }}
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 12beca10..ac62974b 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -1,67 +1,8 @@
-<!-- third-party libraries -->
 {{- range .Site.Params.externalJSFiles }}
   <script src="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}"></script>
 {{- end }}
 
-{{- if or (in .Section "posts") (in .Section "cards") (in .Section "library") (eq .Type "single") }}
-  <script src="/js/fancybox.umd.js"></script>
-  <script>Fancybox.bind("[data-fancybox]");</script>
-{{- end }}
-
-{{ if .Params.aplayer }}
-<script>
-document.addEventListener("DOMContentLoaded", function () {
-  const lazyPlayers = document.querySelectorAll(".lazy-aplayer");
-  if (!lazyPlayers.length) return;
-
-  const loadAPlayer = () => {
-    if (window.APlayer) return Promise.resolve();
-    return new Promise((resolve, reject) => {
-      const script = document.createElement('script');
-      script.src = "https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js";
-      script.onload = resolve;
-      script.onerror = reject;
-      document.body.appendChild(script);
-    });
-  };
-
-  const observer = new IntersectionObserver((entries, obs) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        loadAPlayer().then(() => {
-          const el = entry.target;
-          const id = el.dataset.id ? `-` + el.dataset.id : ``;
-          const container = document.createElement('div');
-          container.id = `aplayer${id}`;
-          el.appendChild(container);
-
-          const ap = new APlayer({
-            container: container,
-            audio: [{
-              name: el.dataset.name,
-              artist: el.dataset.artist,
-              url: el.dataset.url,
-              cover: el.dataset.cover
-            }]
-          });
-
-          ap.on('play', () => umami?.track?.('🎵 Play music with aPlayer'));
-          ap.on('ended', () => umami?.track?.('🎵 Played entiresong with aPlayer'));
-
-          obs.unobserve(el);
-        });
-      }
-    });
-  });
-
-  lazyPlayers.forEach(player => observer.observe(player));
-});
-</script>
-{{ end }}
-
-<script>
-  littlefoot.littlefoot({
-    dismissOnUnhover: true,
-    activateOnHover: true
-  });
-</script>
+{{ partial "scripts/toc-js" . }}
+{{ partial "scripts/littlefoot-js" . }}
+{{ partial "scripts/fancybox-js" . }}
+{{ partial "scripts/aplayer-js" . }}
diff --git a/layouts/_partials/scripts/aplayer-js.html b/layouts/_partials/scripts/aplayer-js.html
new file mode 100644
index 00000000..2b22702c
--- /dev/null
+++ b/layouts/_partials/scripts/aplayer-js.html
@@ -0,0 +1,50 @@
+{{ if .Params.aplayer }}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const lazyPlayers = document.querySelectorAll(".lazy-aplayer");
+  if (!lazyPlayers.length) return;
+
+  const loadAPlayer = () => {
+    if (window.APlayer) return Promise.resolve();
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = "https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js";
+      script.onload = resolve;
+      script.onerror = reject;
+      document.body.appendChild(script);
+    });
+  };
+
+  const observer = new IntersectionObserver((entries, obs) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        loadAPlayer().then(() => {
+          const el = entry.target;
+          const id = el.dataset.id ? `-` + el.dataset.id : ``;
+          const container = document.createElement('div');
+          container.id = `aplayer${id}`;
+          el.appendChild(container);
+
+          const ap = new APlayer({
+            container: container,
+            audio: [{
+              name: el.dataset.name,
+              artist: el.dataset.artist,
+              url: el.dataset.url,
+              cover: el.dataset.cover
+            }]
+          });
+
+          ap.on('play', () => umami?.track?.('🎵 Play music with aPlayer'));
+          ap.on('ended', () => umami?.track?.('🎵 Played entiresong with aPlayer'));
+
+          obs.unobserve(el);
+        });
+      }
+    });
+  });
+
+  lazyPlayers.forEach(player => observer.observe(player));
+});
+</script>
+{{ end }}
diff --git a/layouts/_partials/scripts/fancybox-js.html b/layouts/_partials/scripts/fancybox-js.html
new file mode 100644
index 00000000..c9543a01
--- /dev/null
+++ b/layouts/_partials/scripts/fancybox-js.html
@@ -0,0 +1,4 @@
+{{- if or (in .Section "posts") (in .Section "cards") (in .Section "library") (eq .Type "single") }}
+  <script src="/js/fancybox.umd.js"></script>
+  <script>Fancybox.bind("[data-fancybox]");</script>
+{{- end }}
diff --git a/layouts/_partials/scripts/littlefoot-js.html b/layouts/_partials/scripts/littlefoot-js.html
new file mode 100644
index 00000000..2601b7c4
--- /dev/null
+++ b/layouts/_partials/scripts/littlefoot-js.html
@@ -0,0 +1,6 @@
+<script>
+  littlefoot.littlefoot({
+    dismissOnUnhover: true,
+    activateOnHover: true
+  });
+</script>
diff --git a/layouts/_partials/scripts/toc-js.html b/layouts/_partials/scripts/toc-js.html
new file mode 100644
index 00000000..110f2357
--- /dev/null
+++ b/layouts/_partials/scripts/toc-js.html
@@ -0,0 +1,41 @@
+{{ if .Params.toc }}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const toc = document.getElementById('toc');
+  if (!toc) return;
+
+  const headings = document.querySelectorAll('h2, h3');
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) return;
+
+      const id = entry.target.id;
+      const tocLink = toc.querySelector(`a[href="#${id}"]`);
+      if (!tocLink) return;
+
+      const listItem = tocLink.parentElement;
+      const isH2 = entry.target.tagName === 'H2';
+
+      // Clear all active states when a new H2 is encountered
+      if (isH2) {
+        toc.querySelectorAll('li.active').forEach(el => el.classList.remove('active'));
+      }
+
+      // Set current item as active
+      listItem.classList.add('active');
+
+      // If this is an H3, find and activate its parent H2
+      if (!isH2) {
+        const parentH2Item = listItem.closest('ul').previousElementSibling?.closest('li');
+        if (parentH2Item) parentH2Item.classList.add('active');
+      }
+    });
+  }, {
+    rootMargin: '0px 0px -50% 0px',
+    threshold: 0.5
+  });
+
+  headings.forEach(heading => observer.observe(heading));
+});
+</script>
+{{ end }}