perf: replace jQuery with Vanilla JS (#1681)

Also replaced `magnific-popup` with `GLightbox`

_includes/comments/disqus.html

@@ -28,7 +28,7 @@
     { threshold: [0] }
   );
 
-  disqus_observer.observe(document.querySelector('#disqus_thread'));
+  disqus_observer.observe(document.getElementById('disqus_thread'));
 
   /* Auto switch theme */
   function reloadDisqus() {
@@ -44,7 +44,7 @@
     }
   }
 
-  if (document.querySelector('.mode-toggle')) {
+  if (document.getElementById('mode-toggle')) {
     window.addEventListener('message', reloadDisqus);
   }
 </script>

_includes/comments/giscus.html

@@ -2,7 +2,6 @@
 <script type="text/javascript">
   (function () {
     const origin = 'https://giscus.app';
-    const iframe = 'iframe.giscus-frame';
     const lightTheme = 'light';
     const darkTheme = 'dark_dimmed';
 
@@ -58,7 +57,7 @@
           }
         };
 
-        const giscus = document.querySelector(iframe).contentWindow;
+        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
         giscus.postMessage({ giscus: message }, origin);
       }
     });

_includes/comments/utterances.html

@@ -10,7 +10,6 @@
 <script type="text/javascript">
   (function () {
     const origin = 'https://utteranc.es';
-    const iframe = 'iframe.utterances-frame';
     const lightTheme = 'github-light';
     const darkTheme = 'github-dark';
     let initTheme = lightTheme;
@@ -43,7 +42,7 @@
         theme: theme
       };
 
-      const utterances = document.querySelector(iframe).contentWindow;
+      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
       utterances.postMessage(message, origin);
     });
   })();

_includes/head.html

@@ -97,8 +97,8 @@
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
-    <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
+    <!-- Image Popup -->
+    <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->

_includes/js-selector.html

@@ -2,12 +2,9 @@
 
 <!-- commons -->
 
-{% assign urls = site.data.origin[type].jquery.js
-  | append: ','
-  | append: site.data.origin[type].bootstrap.js
-  | append: ','
-  | append: site.data.origin[type].search.js
-%}
+{%- capture urls -%}
+  {{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
+{%- endcapture -%}
 
 <!-- layout specified -->
 
@@ -20,7 +17,7 @@
     <!-- image lazy-loading & popup & clipboard -->
     {% assign urls = urls
       | append: ','
-      | append: site.data.origin[type]['magnific-popup'].js
+      | append: site.data.origin[type].glightbox.js
       | append: ','
       | append: site.data.origin[type].clipboard.js
     %}

_includes/mermaid.html

@@ -1,29 +1,31 @@
 <!-- mermaid-js loader -->
 <script type="text/javascript">
-  (function () {
-    function updateMermaid(event) {
-      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        const mode = event.data.message;
+  function updateMermaid(event) {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      const mode = event.data.message;
 
-        if (typeof mermaid === 'undefined') {
-          return;
-        }
-
-        let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
-        let config = { theme: expectedTheme };
-
-        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $('.mermaid').each(function () {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr('data-processed');
-          $(this).html(svgCode);
-        });
-
-        mermaid.initialize(config);
-        mermaid.init(undefined, '.mermaid');
+      if (typeof mermaid === 'undefined') {
+        return;
       }
-    }
 
+      let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
+      let config = { theme: expectedTheme };
+
+      /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+      const mermaidList = document.getElementsByClassName('mermaid');
+
+      [...mermaidList].forEach((elem) => {
+        const svgCode = elem.previousSibling.children.item(0).innerHTML;
+        elem.innerHTML = svgCode;
+        elem.removeAttribute('data-processed');
+      });
+
+      mermaid.initialize(config);
+      mermaid.init(undefined, '.mermaid');
+    }
+  }
+
+  (function () {
     let initTheme = 'default';
     const html = document.documentElement;
 
@@ -35,11 +37,12 @@
     }
 
     let mermaidConf = {
-      theme: initTheme /* <default|dark|forest|neutral> */
+      theme: initTheme /* <default | dark | forest | neutral> */
     };
 
     /* Create mermaid tag */
-    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+    const basicList = document.getElementsByClassName('language-mermaid');
+    [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
       backup.classList.add('unloaded');
@@ -52,7 +55,6 @@
     });
 
     mermaid.initialize(mermaidConf);
-
     window.addEventListener('message', updateMermaid);
   })();
 </script>

_includes/sidebar.html

@@ -44,7 +44,7 @@
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 

_includes/topbar.html

@@ -59,7 +59,7 @@
       <i class="fas fa-search fa-fw"></i>
     </button>
 
-    <search class="align-items-center ms-3 ms-lg-0">
+    <search id="search" class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"