perf: remove inline scripts and bundle JS files

1 files changed, 70 insertions, 15 deletions

diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 878ac01e..9da17ba8 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -1,21 +1,76 @@
-{{ with resources.Get "js/tooltip.js" }}
-<!-- tooltip by Eltrac -->
-<script>{{ .Content | safeJS }}</script>
-{{ end }}
+<!-- global JS -->
+{{ $commonJS := slice
+  (resources.Get "js/tooltip.js")
+  (resources.Get "js/instantpage.js")
+}}
+{{ $commonBundle := $commonJS | resources.Concat "js/common-bundle.js" | minify | fingerprint }}
+<script src="{{ $commonBundle.RelPermalink }}" integrity="{{ $commonBundle.Data.Integrity }}" defer></script>
 
+<!-- content page only JS -->
 {{ if not .IsHome }}
-{{ with resources.Get "js/inject-footnotes.js" }}
-<!-- inject footnotes by Eltrac -->
-<script>{{ .Content | safeJS }}</script>
-{{ end }}
+  {{ $articleJS := slice
+    (resources.Get "js/toc.js")
+    (resources.Get "js/inject-footnotes.js")
+    (resources.Get "js/back2top.js")
+    (resources.Get "js/giscus-count.js")
+    (resources.Get "js/like.js")
+  }}
+  {{ $articleBundle := $articleJS | resources.Concat "js/article-bundle.js" | minify | fingerprint }}
+  <script src="{{ $articleBundle.RelPermalink }}" integrity="{{ $articleBundle.Data.Integrity }}" defer></script>
 {{ end }}
 
-{{ with resources.Get "js/instantpage.js" }}
-<!-- instantpage.js -->
-<script>{{ .Content | safeJS }}</script>
-{{ end }}
+<!-- libra.js -->
+<script type="module">
+document.addEventListener('DOMContentLoaded', async () => {
+  const { default: LightBox } = await import('/js/libra.min.js');
+  const lightbox = new LightBox({ offset: { x: -8, y: -80 } });
+});
+</script>
+
+{{ if and (not .IsHome) .Params.hasAplayer }}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const lazyPlayers = document.querySelectorAll(".lazy-aplayer");
+  if (!lazyPlayers.length) return;
 
-{{ partial "scripts/toc-js" . }}
-{{ partial "scripts/libra-js" . }}
-{{ partial "scripts/aplayer-js" . }}
+  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
+            }]
+          });
+
+          obs.unobserve(el);
+        });
+      }
+    });
+  });
+
+  lazyPlayers.forEach(player => observer.observe(player));
+});
+</script>
+{{ end }}