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
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 72%
rename from _data/assets/cross_origin.yml
rename to _data/origin/cors.yml
index 594e9dc..cf8f0ec 100644
--- a/_data/assets/cross_origin.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/_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..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,30 +90,27 @@
   {% 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 -->
 
-  <script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
-
   {% unless site.theme_mode %}
     {% include mode-toggle.html %}
   {% endunless %}
 
   {% include metadata-hook.html %}
-
 </head>
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 7d2224c..177aaf2 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -1,27 +1,35 @@
 <!-- JS selector for site. -->
 
+<!-- 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
+%}
+
 <!-- 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.origin[type].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.origin[type].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: site.data.origin[type]['magnific-popup'].js
       | append: ','
-      | append: site.data.assets[origin].clipboard.js
+      | append: site.data.origin[type].clipboard.js
     %}
   {% endunless %}
-
-  {% include jsdelivr-combine.html urls=_urls %}
 {% endif %}
 
 {% if page.layout == 'home'
@@ -32,29 +40,39 @@
 %}
   {% 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.locale
+    | append: site.data.origin[type].dayjs.js.common
+    | append: ','
+    | 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
   %}
-
-  {% 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.origin[type].toc.js %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% 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 %}
@@ -76,14 +94,10 @@
       }
     };
   </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 %}
 
-<!-- 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/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/_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/_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);
 }
diff --git a/_layouts/default.html b/_layouts/default.html
index 2349852..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 %}
 
@@ -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>
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 -->
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