refactor: third-party libraries loading logic

5 files changed, 51 insertions, 42 deletions

diff --git a/themes/yinyang/layouts/_default/single.html b/themes/yinyang/layouts/_default/single.html
index 49abf0ff..a1b0b111 100644
--- a/themes/yinyang/layouts/_default/single.html
+++ b/themes/yinyang/layouts/_default/single.html
@@ -15,7 +15,7 @@
             <small class="post-subtitle">{{ . }}</small>
           {{ end }}
         </h1>
-        <!-- Post Meta -->          
+        <!-- Post Meta -->
         <div class="row post-desc">
           <div class="col-xs-6">
             {{ if .Date }}
@@ -55,10 +55,6 @@
         <div style="height: 50px;"></div>
         <div class="post-comments">
           <div id="waline"></div>
-          <script type="module">
-            import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
-            {{ partial "snippets/waline-init.html" . | safeJS }} 
-          </script>
         </div>
       {{ end }}
 
@@ -66,4 +62,4 @@
     <!-- use fancybox -->
     <!-- the reason it is replace here it that the fancybox.js is loaded after the swup.js -->
     <script>Fancybox.bind("[data-fancybox]");</script>
-{{ partial "snippets/document-end.html" . }}
\ No newline at end of file
+{{ partial "snippets/document-end.html" . }}
diff --git a/themes/yinyang/layouts/partials/head/css.html b/themes/yinyang/layouts/partials/head/css.html
index 5622a117..7e342da4 100644
--- a/themes/yinyang/layouts/partials/head/css.html
+++ b/themes/yinyang/layouts/partials/head/css.html
@@ -18,7 +18,6 @@ href="https://unpkg.com/@waline/client@v3/dist/waline.css"
 />
 
 <!-- FancyBox -->
-<script src="https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.umd.js"></script>
 <link
 rel="stylesheet"
 href="https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.css"
diff --git a/themes/yinyang/layouts/partials/head/headscript.html b/themes/yinyang/layouts/partials/head/headscript.html
index 1e62bee3..8ed6fd40 100644
--- a/themes/yinyang/layouts/partials/head/headscript.html
+++ b/themes/yinyang/layouts/partials/head/headscript.html
@@ -1,11 +1,24 @@
-<!-- Umami -->
+<!-- Global JavaScript Variables -->
 <script>
-  if (window.location.hostname !== 'localhost') {
-    // track traffic
-    const script = document.createElement('script');
-    script.defer = true;
-    script.src = 'https://cloud.umami.is/script.js';
-    script.dataset.websiteId = 'ae8c2619-56eb-4577-ac31-9dc6ea44bda7';
-    document.head.appendChild(script);
-  }
+  var waline_options = {
+    // basic configuration
+    el: '#waline',
+    serverURL: 'https://waline.geedea.pro',
+    dark: 'auto',
+    search: false,
+    // if localhost then disable pageview count
+    pageview: (location.href.includes('localhost')) ? false : true
+  };
+</script>
+
+<script>
+/* === umami tracking === */
+if (window.location.hostname !== 'localhost') {
+  // track traffic
+  const script = document.createElement('script');
+  script.defer = true;
+  script.src = 'https://cloud.umami.is/script.js';
+  script.dataset.websiteId = 'ae8c2619-56eb-4577-ac31-9dc6ea44bda7';
+  document.head.appendChild(script);
+}
 </script>
diff --git a/themes/yinyang/layouts/partials/scripts.html b/themes/yinyang/layouts/partials/scripts.html
index a0823181..a2cbb997 100644
--- a/themes/yinyang/layouts/partials/scripts.html
+++ b/themes/yinyang/layouts/partials/scripts.html
@@ -1,10 +1,31 @@
-<!-- Swup -->
+<!-- third-party libraries -->
 <script src="https://unpkg.com/swup@4"></script>
+<script src="https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.umd.js"></script>
 <script type="module">
-    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
-    const swup = new Swup();
+import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
 
-    swup.hooks.on('page:view', (visit) => {
-        {{ partial "snippets/waline-init.html" . | safeJS }}
-    });
+/* === waline === */
+
+function loadWalineComment() {
+  // terminate if no waline container is found
+  const container = document.getElementById("waline");
+  if (!container) return;
+
+  // initialize waline
+  const path_suffix = window.location.pathname.endsWith('/') ? '' : '/';
+  waline_options.path = window.location.pathname + path_suffix;
+  try {
+    init(waline_options);
+  } catch (error) { console.log(error) }
+
+  // track waline button events
+  const walineButton = document.querySelector("#waline > div > div.wl-comment > div > div.wl-footer > div.wl-info > button.primary.wl-btn");
+  walineButton.addEventListener("click", () => umami.track("Comment"));
+}
+
+loadWalineComment();
+
+/* === swup === */
+const swup = new Swup();
+swup.hooks.on('page:view', loadWalineComment);
 </script>
diff --git a/themes/yinyang/layouts/partials/snippets/waline-init.html b/themes/yinyang/layouts/partials/snippets/waline-init.html
deleted file mode 100644
index 4d89fc93..00000000
--- a/themes/yinyang/layouts/partials/snippets/waline-init.html
+++ /dev/null
@@ -1,20 +0,0 @@
-const options = {
-    el: '#waline',
-    serverURL: 'https://waline.geedea.pro',
-    dark: 'auto',
-    pageview: true,
-    search: false
-};
-
-if (location.href.includes('localhost') || location.href.includes('127.0.0.1')) {
-    options.pageview = false;
-}
-
-if (!window.location.pathname.endsWith('/')) {
-    options.path = window.location.pathname + '/'
-}
-
-init(options);
-
-const walineButton = document.querySelector("#waline > div > div.wl-comment > div > div.wl-footer > div.wl-info > button.primary.wl-btn");
-walineButton.addEventListener("click", () => umami.track("Comment"))