From 9d971201978e993a9af337d9cd5396a1ea225f00 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 23 Mar 2023 01:29:17 +0800
Subject: [PATCH 1/5] perf(assets): reduce HTTP requests to CDN

---
 _includes/comments/giscus.html  | 72 ++++++++++++++++++---------------
 _includes/head.html             |  2 -
 _includes/js-selector.html      | 38 +++++++++++------
 _includes/jsdelivr-combine.html |  6 ---
 _includes/mermaid.html          | 57 +++++++++++++-------------
 _includes/mode-toggle.html      | 65 +++++++++++++++++++----------
 _includes/search-loader.html    | 49 +++++++++++-----------
 _includes/toc.html              |  3 --
 _layouts/default.html           | 14 +++----
 9 files changed, 167 insertions(+), 139 deletions(-)

diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
index 29b848f..ed918a9 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -1,44 +1,54 @@
 <!-- https://giscus.app/ -->
 <script type="text/javascript">
-  $(function () {
-    const origin = "https://giscus.app";
-    const iframe = "iframe.giscus-frame";
-    const lightTheme = "light";
-    const darkTheme = "dark_dimmed";
-    let initTheme = lightTheme;
+  (function () {
+    const origin = 'https://giscus.app';
+    const iframe = 'iframe.giscus-frame';
+    const lightTheme = 'light';
+    const darkTheme = 'dark_dimmed';
 
-    if ($("html[data-mode=dark]").length > 0
-        || ($("html[data-mode]").length == 0
-            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    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;
     }
 
     let giscusAttributes = {
-      "src": "https://giscus.app/client.js",
-      "data-repo": "{{ site.comments.giscus.repo}}",
-      "data-repo-id": "{{ site.comments.giscus.repo_id }}",
-      "data-category": "{{ site.comments.giscus.category }}",
-      "data-category-id": "{{ site.comments.giscus.category_id }}",
-      "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
-      "data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
-      "data-emit-metadata": "0",
-      "data-theme": initTheme,
-      "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
-      "data-lang": "{{ site.comments.giscus.lang | default: lang }}",
-      "crossorigin": "anonymous",
-      "async": ""
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ site.comments.giscus.repo}}',
+      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
+      'data-category': '{{ site.comments.giscus.category }}',
+      'data-category-id': '{{ site.comments.giscus.category_id }}',
+      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
+      'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      crossorigin: 'anonymous',
+      async: ''
     };
 
-    let giscusScript = document.createElement("script");
-    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
-    document.getElementById("tail-wrapper").appendChild(giscusScript);
+    let giscusScript = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusScript.setAttribute(key, value)
+    );
+    document.getElementById('tail-wrapper').appendChild(giscusScript);
 
-    addEventListener("message", (event) => {
-      if (event.source === window && event.data &&
-            event.data.direction === ModeToggle.ID) {
+    addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
         /* global theme mode changed */
         const mode = event.data.message;
-        const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
 
         const message = {
           setConfig: {
@@ -49,8 +59,6 @@
         const giscus = document.querySelector(iframe).contentWindow;
         giscus.postMessage({ giscus: message }, origin);
       }
-
     });
-
-  });
+  })();
 </script>
diff --git a/_includes/head.html b/_includes/head.html
index 6407c9c..f767edb 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -108,8 +108,6 @@
 
   <!-- JavaScript -->
 
-  <script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
-
   {% unless site.theme_mode %}
     {% include mode-toggle.html %}
   {% endunless %}
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 7d2224c..895ccef 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -1,27 +1,35 @@
 <!-- JS selector for site. -->
 
+<!-- commons -->
+
+{% assign urls = site.data.assets[origin].jquery.js
+  | append: ','
+  | append: site.data.assets[origin].bootstrap.js
+  | append: ','
+  | append: site.data.assets[origin].search.js
+%}
+
 <!-- layout specified -->
 
 {% if page.layout == 'post' %}
   {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
-    <script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
+    {% assign urls = urls | append: ',' | append: site.data.assets[origin].countup.js %}
   {% endif %}
 {% endif %}
 
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
-  {% assign _urls = site.data.assets[origin].lazysizes.js %}
+  {% assign urls = urls | append: ',' | append: site.data.assets[origin].lazysizes.js %}
 
   {% unless page.layout == 'home' %}
-    {% assign _urls = _urls
+    <!-- image lazy-loading & popup & clipboard -->
+    {% assign urls = urls
       | append: ','
       | append: site.data.assets[origin]['magnific-popup'].js
       | append: ','
       | append: site.data.assets[origin].clipboard.js
     %}
   {% endunless %}
-
-  {% include jsdelivr-combine.html urls=_urls %}
 {% endif %}
 
 {% if page.layout == 'home'
@@ -32,7 +40,9 @@
 %}
   {% assign locale = site.lang | split: '-' | first %}
 
-  {% assign _urls = site.data.assets[origin].dayjs.js.common
+  {% assign urls = urls
+    | append: ','
+    | append: site.data.assets[origin].dayjs.js.common
     | append: ','
     | append: site.data.assets[origin].dayjs.js.locale
     | replace: ':LOCALE', locale
@@ -41,10 +51,18 @@
     | append: ','
     | append: site.data.assets[origin].dayjs.js.localizedFormat
   %}
-
-  {% include jsdelivr-combine.html urls=_urls %}
 {% endif %}
 
+{% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
+  {% assign urls = urls | append: ',' | append: site.data.assets[origin].toc.js %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% assign urls = urls | append: ',' | append: site.data.assets[origin].mermaid.js %}
+{% endif %}
+
+{% include jsdelivr-combine.html urls=urls %}
+
 {% case page.layout %}
   {% when 'home', 'categories', 'post', 'page' %}
     {% assign type = page.layout %}
@@ -80,10 +98,6 @@
   <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
 {% endif %}
 
-<!-- commons -->
-
-<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
-
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
diff --git a/_includes/jsdelivr-combine.html b/_includes/jsdelivr-combine.html
index 960eeb1..cffa699 100644
--- a/_includes/jsdelivr-combine.html
+++ b/_includes/jsdelivr-combine.html
@@ -5,7 +5,6 @@
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
 {% for url in urls %}
-
   {% if url contains domain %}
     {% assign url_snippet = url | slice: domain.size, url.size %}
 
@@ -16,15 +15,10 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-
     <script src="{{ url }}"></script>
-
   {% else %}
-
     <script src="{{ url | relative_url }}"></script>
-
   {% endif %}
-
 {% endfor %}
 
 {% if combined_urls %}
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index 2ec8029..967cfb4 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -1,59 +1,58 @@
-<!--
-  mermaid-js loader
--->
-
-<script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
-
-<script>
+<!-- mermaid-js loader -->
+<script type="text/javascript">
   (function () {
-
     function updateMermaid(event) {
-      if (event.source === window && event.data &&
-        event.data.direction === ModeToggle.ID) {
-
+      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
         const mode = event.data.message;
 
-        if (typeof mermaid === "undefined") {
+        if (typeof mermaid === 'undefined') {
           return;
         }
 
-        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
-        let config = {theme: expectedTheme};
+        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 () {
+        $('.mermaid').each(function () {
           let svgCode = $(this).prev().children().html();
-          $(this).removeAttr("data-processed");
+          $(this).removeAttr('data-processed');
           $(this).html(svgCode);
         });
 
         mermaid.initialize(config);
-        mermaid.init(undefined, ".mermaid");
+        mermaid.init(undefined, '.mermaid');
       }
     }
 
-    let initTheme = "default";
+    let initTheme = 'default';
+    const html = document.documentElement;
 
-    if ($("html[data-mode=dark]").length > 0
-      || ($("html[data-mode]").length == 0
-        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-      initTheme = "dark";
+    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  /* <default|dark|forest|neutral> */
+      theme: initTheme /* <default|dark|forest|neutral> */
     };
 
     /* Create mermaid tag */
-    $("pre").has("code.language-mermaid").each(function () {
-      let svgCode = $(this).children().html();
-      $(this).addClass("unloaded");
-      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
+    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create mermaid node */
+      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);
+    window.addEventListener('message', updateMermaid);
   })();
-
 </script>
diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index ada0061..a347750 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -1,14 +1,22 @@
-<!--
-  Switch the mode between dark and light.
--->
+<!-- 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"; }
+    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() {
       if (this.hasMode) {
@@ -45,17 +53,29 @@
       });
     } /* constructor() */
 
-    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+    get sysDarkPrefers() {
+      return window.matchMedia('(prefers-color-scheme: dark)');
+    }
 
-    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+    get isSysDarkPrefer() {
+      return this.sysDarkPrefers.matches;
+    }
 
-    get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
+    get isDarkMode() {
+      return this.mode === ModeToggle.DARK_MODE;
+    }
 
-    get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
+    get isLightMode() {
+      return this.mode === ModeToggle.LIGHT_MODE;
+    }
 
-    get hasMode() { return this.mode != null; }
+    get hasMode() {
+      return this.mode != null;
+    }
 
-    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
+    get mode() {
+      return sessionStorage.getItem(ModeToggle.MODE_KEY);
+    }
 
     /* get the current mode on screen */
     get modeStatus() {
@@ -67,26 +87,29 @@
     }
 
     setDark() {
-      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
+      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
     }
 
     setLight() {
-      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
+      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
     }
 
     clearMode() {
-      $('html').removeAttr(ModeToggle.MODE_ATTR);
+      document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
     /* Notify another plugins that the theme mode has changed */
     notify() {
-      window.postMessage({
-        direction: ModeToggle.ID,
-        message: this.modeStatus
-      }, "*");
+      window.postMessage(
+        {
+          direction: ModeToggle.ID,
+          message: this.modeStatus
+        },
+        '*'
+      );
     }
 
     flipMode() {
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
index 389d228..634325b 100644
--- a/_includes/search-loader.html
+++ b/_includes/search-loader.html
@@ -16,33 +16,30 @@
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
-<script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
-
 <script>
-  
-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>`;
+  /* Note: dependent library will be loaded in `js-selector.html` */
+  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>
diff --git a/_includes/toc.html b/_includes/toc.html
index 6b18693..1eb3dcd 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -10,7 +10,4 @@
     <div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
     <nav id="toc"></nav>
   </div>
-
-  <!-- toc.js will be loaded at medium priority -->
-  <script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
 {% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 2349852..755c59e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -21,7 +21,6 @@ layout: compress
 
   <body data-topbar-visible="true">
     {% include sidebar.html lang=lang %}
-
     {% include topbar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
@@ -31,14 +30,9 @@ layout: compress
 
       {% include search-results.html lang=lang %}
     </div>
-    <!-- #main-wrapper -->
 
     {% include footer.html lang=lang %}
 
-    {% if page.mermaid %}
-      {% include mermaid.html %}
-    {% endif %}
-
     <div id="mask"></div>
 
     <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
@@ -72,8 +66,12 @@ layout: compress
       </div>
     {% endif %}
 
-    {% include search-loader.html %}
-
     {% include js-selector.html %}
+
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
+    {% include search-loader.html %}
   </body>
 </html>

From c283e7782fa9562d82d9855fd280a573fd58c75f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 31 Mar 2023 06:41:51 +0800
Subject: [PATCH 2/5] refactor!: rename assets origin configuration files

---
 .../self_host.yml => origin/basic.yml}        |  0
 .../cross_origin.yml => origin/cors.yml}      |  0
 _includes/head.html                           | 15 ++++----
 _includes/js-selector.html                    | 38 +++++++++----------
 .../{assets-origin.html => origin-type.html}  |  9 +++--
 _layouts/default.html                         |  2 +-
 _layouts/page.html                            |  2 +-
 7 files changed, 33 insertions(+), 33 deletions(-)
 rename _data/{assets/self_host.yml => origin/basic.yml} (100%)
 rename _data/{assets/cross_origin.yml => origin/cors.yml} (100%)
 rename _includes/{assets-origin.html => origin-type.html} (52%)

diff --git a/_data/assets/self_host.yml b/_data/origin/basic.yml
similarity index 100%
rename from _data/assets/self_host.yml
rename to _data/origin/basic.yml
diff --git a/_data/assets/cross_origin.yml b/_data/origin/cors.yml
similarity index 100%
rename from _data/assets/cross_origin.yml
rename to _data/origin/cors.yml
diff --git a/_includes/head.html b/_includes/head.html
index f767edb..0c85fe1 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -58,15 +58,15 @@
   {% include favicons.html %}
 
   {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
+    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
 
   {% else %}
-    {% for cdn in site.data.assets[origin].cdns %}
+    {% for cdn in site.data.origin[type].cdns %}
       <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
       <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
     {% endfor %}
 
-    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
   {% endif %}
 
   <!-- GA -->
@@ -90,20 +90,20 @@
   {% endif %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css | relative_url}}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css | relative_url }}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
   {% if site.toc and page.toc %}
-    <link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
     <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->
@@ -113,5 +113,4 @@
   {% endunless %}
 
   {% include metadata-hook.html %}
-
 </head>
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 895ccef..177aaf2 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -2,11 +2,11 @@
 
 <!-- commons -->
 
-{% assign urls = site.data.assets[origin].jquery.js
+{% assign urls = site.data.origin[type].jquery.js
   | append: ','
-  | append: site.data.assets[origin].bootstrap.js
+  | append: site.data.origin[type].bootstrap.js
   | append: ','
-  | append: site.data.assets[origin].search.js
+  | append: site.data.origin[type].search.js
 %}
 
 <!-- layout specified -->
@@ -14,20 +14,20 @@
 {% if page.layout == 'post' %}
   {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
-    {% assign urls = urls | append: ',' | append: site.data.assets[origin].countup.js %}
+    {% assign urls = urls | append: ',' | append: site.data.origin[type].countup.js %}
   {% endif %}
 {% endif %}
 
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
-  {% assign urls = urls | append: ',' | append: site.data.assets[origin].lazysizes.js %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
 
   {% unless page.layout == 'home' %}
     <!-- image lazy-loading & popup & clipboard -->
     {% assign urls = urls
       | append: ','
-      | append: site.data.assets[origin]['magnific-popup'].js
+      | append: site.data.origin[type]['magnific-popup'].js
       | append: ','
-      | append: site.data.assets[origin].clipboard.js
+      | append: site.data.origin[type].clipboard.js
     %}
   {% endunless %}
 {% endif %}
@@ -42,37 +42,37 @@
 
   {% assign urls = urls
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.common
+    | append: site.data.origin[type].dayjs.js.common
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.locale
+    | append: site.data.origin[type].dayjs.js.locale
     | replace: ':LOCALE', locale
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.relativeTime
+    | append: site.data.origin[type].dayjs.js.relativeTime
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.localizedFormat
+    | append: site.data.origin[type].dayjs.js.localizedFormat
   %}
 {% endif %}
 
 {% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
-  {% assign urls = urls | append: ',' | append: site.data.assets[origin].toc.js %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
 {% endif %}
 
 {% if page.mermaid %}
-  {% assign urls = urls | append: ',' | append: site.data.assets[origin].mermaid.js %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].mermaid.js %}
 {% endif %}
 
 {% include jsdelivr-combine.html urls=urls %}
 
 {% case page.layout %}
   {% when 'home', 'categories', 'post', 'page' %}
-    {% assign type = page.layout %}
+    {% assign js = page.layout %}
   {% when 'archives', 'category', 'tag' %}
-    {% assign type = 'misc' %}
+    {% assign js = 'misc' %}
   {% else %}
-    {% assign type = 'commons' %}
+    {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
+{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
 <script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
@@ -94,8 +94,8 @@
       }
     };
   </script>
-  <script src="{{ site.data.assets[origin].polyfill.js | relative_url }}"></script>
-  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
+  <script src="{{ site.data.origin[type].polyfill.js | relative_url }}"></script>
+  <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
 {% if jekyll.environment == 'production' %}
diff --git a/_includes/assets-origin.html b/_includes/origin-type.html
similarity index 52%
rename from _includes/assets-origin.html
rename to _includes/origin-type.html
index 841e252..7f72012 100644
--- a/_includes/assets-origin.html
+++ b/_includes/origin-type.html
@@ -1,12 +1,13 @@
-{% comment %} Site static assets origin {% endcomment %}
-{% assign origin = 'cross_origin' %}
+{% comment %} Site static assets origin type {% endcomment %}
+
+{% assign type = 'cors' %}
 
 {% if site.assets.self_host.enabled %}
   {% if site.assets.self_host.env %}
     {% if site.assets.self_host.env == jekyll.environment %}
-      {% assign origin = 'self_host' %}
+      {% assign type = 'basic' %}
     {% endif %}
   {% else %}
-    {% assign origin = 'self_host' %}
+    {% assign type = 'basic' %}
   {% endif %}
 {% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 755c59e..d6ff29c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,7 +5,7 @@ layout: compress
 
 <!doctype html>
 
-{% include assets-origin.html %}
+{% include origin-type.html %}
 
 {% include lang.html %}
 
diff --git a/_layouts/page.html b/_layouts/page.html
index 917a4f4..fc2c915 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -3,7 +3,7 @@ layout: default
 ---
 
 {% include lang.html %}
-{% include assets-origin.html %}
+{% include origin-type.html %}
 
 <div class="row">
   <!-- core -->

From 1967de1f1da5d97b97aa5f829a40c2b37bf78ed5 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 9 Apr 2023 20:44:55 +0800
Subject: [PATCH 3/5] refactor(js): reduce function complexity

---
 .../modules/components/topbar-switcher.js     | 54 ++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/_javascript/modules/components/topbar-switcher.js b/_javascript/modules/components/topbar-switcher.js
index f3eebb7..1b0d025 100644
--- a/_javascript/modules/components/topbar-switcher.js
+++ b/_javascript/modules/components/topbar-switcher.js
@@ -6,7 +6,6 @@ import ScrollHelper from './utils/scroll-helper';
 const $searchInput = $('#search-input');
 const delta = ScrollHelper.getTopbarHeight();
 
-let didScroll;
 let lastScrollTop = 0;
 
 function hasScrolled() {
@@ -60,34 +59,41 @@ function handleLandscape() {
 
 export function switchTopbar() {
   const orientation = screen.orientation;
-  if (orientation) {
-    orientation.onchange = () => {
-      const type = orientation.type;
-      if (type === 'landscape-primary' || type === 'landscape-secondary') {
-        handleLandscape();
-      }
-    };
-  } else {
-    // for the browsers that not support `window.screen.orientation` API
-    $(window).on('orientationchange', () => {
-      if ($(window).width() < $(window).height()) {
-        // before rotating, it is still in portrait mode.
-        handleLandscape();
-      }
-    });
-  }
+  let didScroll = false;
 
-  $(window).on('scroll', () => {
-    if (didScroll) {
-      return;
+  const handleOrientationChange = () => {
+    const type = orientation.type;
+    if (type === 'landscape-primary' || type === 'landscape-secondary') {
+      handleLandscape();
     }
-    didScroll = true;
-  });
+  };
 
-  setInterval(() => {
+  const handleWindowChange = () => {
+    if ($(window).width() < $(window).height()) {
+      // before rotating, it is still in portrait mode.
+      handleLandscape();
+    }
+  };
+
+  const handleScroll = () => {
+    didScroll = true;
+  };
+
+  const checkScroll = () => {
     if (didScroll) {
       hasScrolled();
       didScroll = false;
     }
-  }, 250);
+  };
+
+  if (orientation) {
+    orientation.addEventListener('change', handleOrientationChange);
+  } else {
+    // for the browsers that not support `window.screen.orientation` API
+    $(window).on('orientationchange', handleWindowChange);
+  }
+
+  $(window).on('scroll', handleScroll);
+
+  setInterval(checkScroll, 250);
 }

From ea6268d7a5035e9ef7e39544ed49432f828c043f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 3 May 2023 01:48:57 +0800
Subject: [PATCH 4/5] chore(ci): upgrade commit-lint actions

---
 .github/workflows/commitlint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
index 1e05511..affd492 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -5,7 +5,7 @@ jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v4
+      - uses: wagoid/commitlint-github-action@v5

From 25ec7649cd80b788ecfcc51e7c8a4bc9e8150069 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 13 May 2023 05:45:18 +0800
Subject: [PATCH 5/5] chore(deps): upgrade the version of depdencies (#953,
 #994)

Resolves #953, #994
---
 _data/origin/cors.yml | 18 +++++++++---------
 assets/lib            |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index 594e9dc..cf8f0ec 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -16,31 +16,31 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
 
 bootstrap:
   css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
   js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.min.js
 
 countup:
   js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
diff --git a/assets/lib b/assets/lib
index 24ebdb7..5f28c7d 160000
--- a/assets/lib
+++ b/assets/lib
@@ -1 +1 @@
-Subproject commit 24ebdb708f3f5451df953cb5f9deb3ad4433404a
+Subproject commit 5f28c7d5107a1c2e30381765194269680a3d0eae