perf: speed up page rendering and jekyll build process (#2034)

- Ensure inline scripts execute after the DOM has fully loaded.
- Use Rollup to bundle the theme-mode and Mermaid scripts, reducing the number of Jekyll include snippets.

_includes/analytics/cloudflare.html

@@ -4,4 +4,3 @@
   src="https://static.cloudflareinsights.com/beacon.min.js"
   data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
 ></script>
-<!-- End Cloudflare Web Analytics -->

_includes/analytics/fathom.html

@@ -2,6 +2,5 @@
 <script
   src="https://cdn.usefathom.com/script.js"
   data-site="{{ site.analytics.fathom.id }}"
-  defer>
-</script>
-<!-- End Fathom Code -->
+  defer
+></script>

_includes/analytics/google.html

@@ -1,7 +1,7 @@
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
 <script>
-  document.addEventListener('DOMContentLoaded', function (event) {
+  document.addEventListener('DOMContentLoaded', () => {
     window.dataLayer = window.dataLayer || [];
     function gtag() {
       dataLayer.push(arguments);

_includes/analytics/matomo.html

@@ -1,14 +1,13 @@
 <!-- Matomo -->
-<script type="text/javascript">
-  var _paq = window._paq = window._paq || [];
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    var _paq = (window._paq = window._paq || []);
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
     var u="//{{ site.analytics.matomo.domain }}/";
     _paq.push(['setTrackerUrl', u+'matomo.php']);
     _paq.push(['setSiteId', {{ site.analytics.matomo.id }}]);
     var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
     g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
+  });
 </script>
-<!-- End Matomo Code -->

_includes/comments/disqus.html

@@ -1,38 +1,25 @@
-<!-- The Disqus lazy loading. -->
-
-<div id="disqus_thread">
-  <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
-</div>
-
-<script type="text/javascript">
+<script>
   var disqus_config = function () {
     this.page.url = '{{ page.url | absolute_url }}';
     this.page.identifier = '{{ page.url }}';
   };
 
-  {%- comment -%} Lazy loading {%- endcomment -%}
-  var disqus_observer = new IntersectionObserver(
-    function (entries) {
-      if (entries[0].isIntersecting) {
-        (function () {
-          var d = document,
-            s = d.createElement('script');
-          s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
-          s.setAttribute('data-timestamp', +new Date());
-          (d.head || d.body).appendChild(s);
-        })();
+  function addDisqus() {
+    let disqusThread = document.createElement('div');
+    let paragraph = document.createElement('p');
 
-        disqus_observer.disconnect();
-      }
-    },
-    { threshold: [0] }
-  );
+    disqusThread.id = 'disqus_thread';
+    paragraph.className = 'text-center text-muted small';
+    paragraph.innerHTML = 'Comments powered by <a href="https://disqus.com/">Disqus</a>.';
+    disqusThread.appendChild(paragraph);
 
-  disqus_observer.observe(document.getElementById('disqus_thread'));
+    const footer = document.querySelector('footer');
+    footer.insertAdjacentElement("beforebegin", disqusThread);
+  }
 
   {%- comment -%} Auto switch theme {%- endcomment -%}
-  function reloadDisqus() {
-    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+  function reloadDisqus(event) {
+    if (event.source === window && event.data && event.data.id === Theme.ID) {
       {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
@@ -44,7 +31,27 @@
     }
   }
 
-  if (document.getElementById('mode-toggle')) {
-    window.addEventListener('message', reloadDisqus);
+  addDisqus();
+
+  if (Theme.switchable) {
+    addEventListener('message', reloadDisqus);
   }
+
+  {%- comment -%} Lazy loading {%- endcomment -%}
+  var disqusObserver = new IntersectionObserver(
+    function (entries) {
+      if (entries[0].isIntersecting) {
+        var d = document,
+          s = d.createElement('script');
+        s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+        s.setAttribute('data-timestamp', +new Date());
+        (d.head || d.body).appendChild(s);
+
+        disqusObserver.disconnect();
+      }
+    },
+    { threshold: [0] }
+  );
+
+  disqusObserver.observe(document.getElementById('disqus_thread'));
 </script>

_includes/comments/giscus.html

@@ -1,21 +1,8 @@
 <!-- https://giscus.app/ -->
-<script type="text/javascript">
+<script>
   (function () {
-    const origin = 'https://giscus.app';
-    const lightTheme = 'light';
-    const darkTheme = 'dark_dimmed';
-
-    let initTheme = lightTheme;
-    const html = document.documentElement;
-
-    if (
-      (html.hasAttribute('data-mode') &&
-        html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = darkTheme;
-    }
+    const themeMapper = Theme.getThemeMapper('light', 'dark_dimmed');
+    const initTheme = themeMapper[Theme.visualState];
 
     let lang = '{{ site.comments.giscus.lang | default: lang }}';
     {%- comment -%} https://github.com/giscus/giscus/tree/main/locales {%- endcomment -%}
@@ -41,30 +28,27 @@
       async: ''
     };
 
-    let giscusScript = document.createElement('script');
+    let giscusNode = document.createElement('script');
     Object.entries(giscusAttributes).forEach(([key, value]) =>
-      giscusScript.setAttribute(key, value)
+      giscusNode.setAttribute(key, value)
     );
-    document.getElementById('tail-wrapper').appendChild(giscusScript);
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement("beforebegin", giscusNode);
 
     addEventListener('message', (event) => {
-      if (
-        event.source === window &&
-        event.data &&
-        event.data.direction === ModeToggle.ID
-      ) {
-        {%- comment -%} global theme mode changed {%- endcomment -%}
-        const mode = event.data.message;
-        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        const newTheme = themeMapper[Theme.visualState];
 
         const message = {
           setConfig: {
-            theme: theme
+            theme: newTheme
           }
         };
 
-        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
-        giscus.postMessage({ giscus: message }, origin);
+        const giscus =
+          document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, 'https://giscus.app');
       }
     });
   })();

_includes/comments/utterances.html

@@ -1,49 +1,38 @@
 <!-- https://utteranc.es/ -->
-<script
-  src="https://utteranc.es/client.js"
-  repo="{{ site.comments.utterances.repo }}"
-  issue-term="{{ site.comments.utterances.issue_term }}"
-  crossorigin="anonymous"
-  async
-></script>
-
-<script type="text/javascript">
+<script>
   (function () {
     const origin = 'https://utteranc.es';
-    const lightTheme = 'github-light';
-    const darkTheme = 'github-dark';
-    let initTheme = lightTheme;
-    const html = document.documentElement;
+    const themeMapper = Theme.getThemeMapper('github-light', 'github-dark');
+    const initTheme = themeMapper[Theme.visualState];
 
-    if (
-      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = darkTheme;
-    }
+    let script = document.createElement('script');
+    script.src = 'https://utteranc.es/client.js';
+    script.setAttribute('repo', '{{ site.comments.utterances.repo }}');
+    script.setAttribute('issue-term', '{{ site.comments.utterances.issue_term }}');
+    script.setAttribute('theme', initTheme);
+    script.crossOrigin = 'anonymous';
+    script.async = true;
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement('beforebegin', script);
 
     addEventListener('message', (event) => {
-      let theme;
+      let newTheme;
 
-      {%- comment -%} credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> {%- endcomment -%}
-      if (event.origin === origin) {
-        {%- comment -%} page initial {%- endcomment -%}
-        theme = initTheme;
-      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        {%- comment -%} global theme mode changed {%- endcomment -%}
-        const mode = event.data.message;
-        theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
-      } else {
-        return;
+      {%- comment -%}
+        Credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347>
+      {%- endcomment -%}
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        newTheme = themeMapper[Theme.visualState];
+
+        const message = {
+          type: 'set-theme',
+          theme: newTheme
+        };
+
+        const utterances = document.querySelector('.utterances-frame').contentWindow;
+        utterances.postMessage(message, origin);
       }
-
-      const message = {
-        type: 'set-theme',
-        theme: theme
-      };
-
-      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
-      utterances.postMessage(message, origin);
     });
   })();
 </script>

_includes/head.html

@@ -97,11 +97,32 @@
     <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
-  <!-- JavaScript -->
+  <!-- Scripts -->
 
   {% unless site.theme_mode %}
-    {% include mode-toggle.html %}
+    <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
   {% endunless %}
 
+  {% include js-selector.html lang=lang %}
+
+  {% if jekyll.environment == 'production' %}
+    <!-- PWA -->
+    {% if site.pwa.enabled %}
+      <script
+        defer
+        src="{{ '/app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
+      ></script>
+    {% endif %}
+
+    <!-- Web Analytics -->
+    {% for analytics in site.analytics %}
+      {% capture str %}{{ analytics }}{% endcapture %}
+      {% assign platform = str | split: '{' | first %}
+      {% if site.analytics[platform].id and site.analytics[platform].id != empty %}
+        {% include analytics/{{ platform }}.html %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+
   {% include metadata-hook.html %}
 </head>

_includes/js-selector.html

@@ -62,12 +62,12 @@
 
 {% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
 
-<script src="{{ script | relative_url }}"></script>
+<script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
-  <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
-  <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
+  <script async src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
+  <script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
@@ -84,26 +84,3 @@
     {% endcase %}
   {% endif %}
 {% endif %}
-
-{% if page.mermaid %}
-  {% include mermaid.html %}
-{% endif %}
-
-{% if jekyll.environment == 'production' %}
-  <!-- PWA -->
-  {% if site.pwa.enabled %}
-    <script
-      defer
-      src="{{ 'app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
-    ></script>
-  {% endif %}
-
-  <!-- Web Analytics -->
-  {% for analytics in site.analytics %}
-    {% capture str %}{{ analytics }}{% endcapture %}
-    {% assign type = str | split: '{' | first %}
-    {% if site.analytics[type].id and site.analytics[type].id != empty %}
-      {% include analytics/{{ type }}.html %}
-    {% endif %}
-  {% endfor %}
-{% endif %}

_includes/jsdelivr-combine.html

@@ -1,6 +1,6 @@
 {% assign urls = include.urls | split: ',' %}
 
-{% assign combined_urls = nil %}
+{% assign combined_urls = null %}
 
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
@@ -15,12 +15,12 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-    <script src="{{ url }}"></script>
+    <script defer src="{{ url }}"></script>
   {% else %}
-    <script src="{{ url | relative_url }}"></script>
+    <script defer src="{{ url | relative_url }}"></script>
   {% endif %}
 {% endfor %}
 
 {% if combined_urls %}
-  <script src="{{ combined_urls }}"></script>
+  <script defer src="{{ combined_urls }}"></script>
 {% endif %}

_includes/mermaid.html

@@ -1,62 +0,0 @@
-<!-- mermaid-js loader -->
-<script type="text/javascript">
-  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 };
-
-      {%- comment -%}
-        Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
-      {%- endcomment -%}
-      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;
-
-    if (
-      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = 'dark';
-    }
-
-    let mermaidConf = {
-      theme: initTheme {%- comment -%}  <default | dark | forest | neutral> {%- endcomment -%}
-    };
-
-    {%- comment -%} Create mermaid tag {%- endcomment -%}
-    const basicList = document.getElementsByClassName('language-mermaid');
-    [...basicList].forEach((elem) => {
-      const svgCode = elem.textContent;
-      const backup = elem.parentElement;
-      backup.classList.add('d-none');
-      {%- comment -%} create mermaid node {%- endcomment -%}
-      let mermaid = document.createElement('pre');
-      mermaid.classList.add('mermaid');
-      const text = document.createTextNode(svgCode);
-      mermaid.appendChild(text);
-      backup.after(mermaid);
-    });
-
-    mermaid.initialize(mermaidConf);
-    window.addEventListener('message', updateMermaid);
-  })();
-</script>

_includes/mode-toggle.html

@@ -1,116 +0,0 @@
-<!-- Switch the mode between dark and light. -->
-
-<script type="text/javascript">
-  class ModeToggle {
-    static get MODE_KEY() {
-      return 'mode';
-    }
-    static get MODE_ATTR() {
-      return 'data-mode';
-    }
-    static get DARK_MODE() {
-      return 'dark';
-    }
-    static get LIGHT_MODE() {
-      return 'light';
-    }
-    static get ID() {
-      return 'mode-toggle';
-    }
-
-    constructor() {
-      let self = this;
-
-      {%- comment -%} always follow the system prefers {%- endcomment -%}
-      this.sysDarkPrefers.addEventListener('change', () => {
-        if (self.hasMode) {
-          self.clearMode();
-        }
-        self.notify();
-      });
-
-      if (!this.hasMode) {
-        return;
-      }
-
-      if (this.isDarkMode) {
-        this.setDark();
-      } else {
-        this.setLight();
-      }
-    }
-
-    get sysDarkPrefers() {
-      return window.matchMedia('(prefers-color-scheme: dark)');
-    }
-
-    get isPreferDark() {
-      return this.sysDarkPrefers.matches;
-    }
-
-    get isDarkMode() {
-      return this.mode === ModeToggle.DARK_MODE;
-    }
-
-    get hasMode() {
-      return this.mode != null;
-    }
-
-    get mode() {
-      return sessionStorage.getItem(ModeToggle.MODE_KEY);
-    }
-
-    {%- comment -%} get the current mode on screen {%- endcomment -%}
-    get modeStatus() {
-      if (this.hasMode) {
-        return this.mode;
-      } else {
-        return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE;
-      }
-    }
-
-    setDark() {
-      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
-      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
-    }
-
-    setLight() {
-      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
-      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
-    }
-
-    clearMode() {
-      document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
-      sessionStorage.removeItem(ModeToggle.MODE_KEY);
-    }
-
-    {%- comment -%}
-      Notify another plugins that the theme mode has changed
-    {%- endcomment -%}
-    notify() {
-      window.postMessage(
-        {
-          direction: ModeToggle.ID,
-          message: this.modeStatus
-        },
-        '*'
-      );
-    }
-
-    flipMode() {
-      if (this.hasMode) {
-        this.clearMode();
-      } else {
-        if (this.isPreferDark) {
-          this.setLight();
-        } else {
-          this.setDark();
-        }
-      }
-
-      this.notify();
-    }
-  }
-
-  const modeToggle = new ModeToggle();
-</script>

_includes/search-loader.html

@@ -19,29 +19,31 @@
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
 <script>
-  {%- comment -%} Note: dependent library will be loaded in `js-selector.html` {%- endcomment -%}
-  SimpleJekyllSearch({
-    searchInput: document.getElementById('search-input'),
-    resultsContainer: document.getElementById('search-results'),
-    json: '{{ '/assets/js/data/search.json' | relative_url }}',
-    searchResultTemplate: '{{ result_elem | strip_newlines }}',
-    noResultsText: '{{ not_found }}',
-    templateMiddleware: function(prop, value, template) {
-      if (prop === 'categories') {
-        if (value === '') {
-          return `${value}`;
-        } else {
-          return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+  {% comment %} Note: dependent library will be loaded in `js-selector.html` {% endcomment %}
+  document.addEventListener('DOMContentLoaded', () => {
+    SimpleJekyllSearch({
+      searchInput: document.getElementById('search-input'),
+      resultsContainer: document.getElementById('search-results'),
+      json: '{{ '/assets/js/data/search.json' | relative_url }}',
+      searchResultTemplate: '{{ result_elem | strip_newlines }}',
+      noResultsText: '{{ not_found }}',
+      templateMiddleware: function(prop, value, template) {
+        if (prop === 'categories') {
+          if (value === '') {
+            return `${value}`;
+          } else {
+            return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+          }
         }
-      }
 
-      if (prop === 'tags') {
-        if (value === '') {
-          return `${value}`;
-        } else {
-          return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+        if (prop === 'tags') {
+          if (value === '') {
+            return `${value}`;
+          } else {
+            return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+          }
         }
       }
-    }
+    });
   });
 </script>