jekyll-theme-chirpy 5.0.2 → 6.2.2

data/_includes/js-selector.html

@@ -1,68 +1,106 @@
-<!--
-  JS selector for site.
--->
+<!-- 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="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
-    <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
-  {% endif %}
-{% endif %}
+{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
 
-{% if page.layout == 'post' or page.layout == 'page' %}
-  <!-- image lazy-loading & popup -->
-  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
+  {% unless page.layout == 'home' %}
+    <!-- image lazy-loading & popup & clipboard -->
+    {% assign urls = urls
+      | append: ','
+      | append: site.data.origin[type]['magnific-popup'].js
+      | append: ','
+      | append: site.data.origin[type].clipboard.js
+    %}
+  {% endunless %}
 {% endif %}
 
 {% if page.layout == 'home'
-    or page.layout == 'categories'
-    or page.layout == 'post'
-    or page.layout == 'page' %}
-  {% assign type = page.layout %}
-{% else %}
-  {% assign type = "commons" %}
+  or page.layout == 'post'
+  or page.layout == 'archives'
+  or page.layout == 'category'
+  or page.layout == 'tag'
+%}
+  {% assign locale = site.lang | split: '-' | first %}
+
+  {% assign urls = urls
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.common
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.locale
+    | replace: ':LOCALE', locale
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.relativeTime
+    | append: ','
+    | 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.origin[type].toc.js %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].mermaid.js %}
 {% endif %}
 
-{% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
-<script defer src="{{ js | relative_url }}"></script>
+{% include jsdelivr-combine.html urls=urls %}
+
+{% case page.layout %}
+  {% when 'home', 'categories', 'post', 'page' %}
+    {% assign js = page.layout %}
+  {% when 'archives', 'category', 'tag' %}
+    {% assign js = 'misc' %}
+  {% else %}
+    {% assign js = 'commons' %}
+{% endcase %}
+
+{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
+<script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
   <script>
-  /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
-  MathJax = {
-    tex: {
-      inlineMath: [              /* start/end delimiter pairs for in-line math */
-        ['$','$'],
-        ['\\(','\\)']
-      ],
-      displayMath: [             /* start/end delimiter pairs for display math */
-        ['$$', '$$'],
-        ['\\[', '\\]']
-      ]
-    }
-  };
-  </script>
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-  <script type="text/javascript" id="MathJax-script" async
-    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+    /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
+    MathJax = {
+      tex: {
+        /* start/end delimiter pairs for in-line math */
+        inlineMath: [
+          ['$', '$'],
+          ['\\(', '\\)']
+        ],
+        /* start/end delimiter pairs for display math */
+        displayMath: [
+          ['$$', '$$'],
+          ['\\[', '\\]']
+        ]
+      }
+    };
   </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="https://cdn.jsdelivr.net/combine/npm/popper.js@1.16.1,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
-
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
-  <script defer src="{{ '/app.js' | relative_url }}"></script>
+  {% if site.pwa.enabled %}
+    <script defer src="{{ '/app.js' | relative_url }}"></script>
+  {% else %}
+    <script defer src="{{ '/unregister.js' | relative_url }}"></script>
+  {% endif %}
 
   <!-- GA -->
-  {% if site.google_analytics.id %}
+  {% if site.google_analytics.id != empty and site.google_analytics.id %}
     {% include google-analytics.html %}
   {% endif %}
-
 {% endif %}

data/_includes/jsdelivr-combine.html

@@ -0,0 +1,26 @@
+{% assign urls = include.urls | split: ',' %}
+
+{% assign combined_urls = nil %}
+
+{% assign domain = 'https://cdn.jsdelivr.net/' %}
+
+{% for url in urls %}
+  {% if url contains domain %}
+    {% assign url_snippet = url | slice: domain.size, url.size %}
+
+    {% if combined_urls %}
+      {% assign combined_urls = combined_urls | append: ',' | append: url_snippet %}
+    {% else %}
+      {% assign combined_urls = domain | append: 'combine/' | append: url_snippet %}
+    {% endif %}
+
+  {% elsif url contains '//' %}
+    <script src="{{ url }}"></script>
+  {% else %}
+    <script src="{{ url | relative_url }}"></script>
+  {% endif %}
+{% endfor %}
+
+{% if combined_urls %}
+  <script src="{{ combined_urls }}"></script>
+{% endif %}

data/_includes/lang.html

@@ -1,5 +1,5 @@
 {% comment %}
-Detect appearance language and return it through variable "lang"
+  Detect appearance language and return it through variable "lang"
 {% endcomment %}
 {% if site.data.locales[site.lang] %}
   {% assign lang = site.lang %}

data/_includes/mermaid.html

@@ -1,57 +1,58 @@
-<!--
-  mermaid-js loader
--->
-
-<script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
-
-<script>
-  $(function() {
+<!-- 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 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[mode=dark]").length > 0
-      || ($("html[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> */
     };
 
-    /* Markdown converts to HTML */
-    $("pre").has("code.language-mermaid").each(function() {
-      let svgCode = $(this).children().html();
-      $(this).addClass("unloaded");
-      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    /* Create mermaid tag */
+    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>

data/_includes/metadata-hook.html

@@ -0,0 +1 @@
+<!-- A placeholder to allow defining custom metadata -->

data/_includes/mode-toggle.html

@@ -1,13 +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 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) {
@@ -25,13 +34,12 @@
       let self = this;
 
       /* always follow the system prefers */
-      this.sysDarkPrefers.addEventListener("change", () => {
+      this.sysDarkPrefers.addEventListener('change', () => {
         if (self.hasMode) {
           if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
               self.setDark();
             }
-
           } else {
             if (self.isSysDarkPrefer) {
               self.setLight();
@@ -42,27 +50,36 @@
         }
 
         self.notify();
-
       });
-
     } /* 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() {
-      if (this.isDarkMode
-        || (!this.hasMode && this.isSysDarkPrefer)) {
+      if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
         return ModeToggle.DARK_MODE;
       } else {
         return ModeToggle.LIGHT_MODE;
@@ -70,59 +87,57 @@
     }
 
     setDark() {
-      $('html').attr(ModeToggle.MODE_KEY, 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_KEY, 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_KEY);
+      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
+        },
+        '*'
+      );
     }
 
-  } /* ModeToggle */
-
-  const toggle = new ModeToggle();
-
-  function flipMode() {
-    if (toggle.hasMode) {
-      if (toggle.isSysDarkPrefer) {
-        if (toggle.isLightMode) {
-          toggle.clearMode();
+    flipMode() {
+      if (this.hasMode) {
+        if (this.isSysDarkPrefer) {
+          if (this.isLightMode) {
+            this.clearMode();
+          } else {
+            this.setLight();
+          }
         } else {
-          toggle.setLight();
+          if (this.isDarkMode) {
+            this.clearMode();
+          } else {
+            this.setDark();
+          }
         }
-
       } else {
-        if (toggle.isDarkMode) {
-          toggle.clearMode();
+        if (this.isSysDarkPrefer) {
+          this.setLight();
         } else {
-          toggle.setDark();
+          this.setDark();
         }
       }
 
-    } else {
-      if (toggle.isSysDarkPrefer) {
-        toggle.setLight();
-      } else {
-        toggle.setDark();
-      }
-    }
-
-    toggle.notify();
-
-  } /* flipMode() */
+      this.notify();
+    } /* flipMode() */
+  } /* ModeToggle */
 
+  const modeToggle = new ModeToggle();
 </script>

data/_includes/notification.html

@@ -0,0 +1,24 @@
+<aside
+  id="notification"
+  class="toast"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-bs-animation="true"
+  data-bs-autohide="false"
+>
+  <div class="toast-header">
+    <button
+      type="button"
+      class="btn-close ms-auto"
+      data-bs-dismiss="toast"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="toast-body text-center pt-0">
+    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
+    <button type="button" class="btn btn-primary" aria-label="Update">
+      {{ site.data.locales[include.lang].notification.update }}
+    </button>
+  </div>
+</aside>

data/_includes/origin-type.html

@@ -0,0 +1,13 @@
+{% 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 type = 'basic' %}
+    {% endif %}
+  {% else %}
+    {% assign type = 'basic' %}
+  {% endif %}
+{% endif %}

data/_includes/post-nav.html

@@ -1,30 +1,34 @@
-<!--
-  Navigation buttons at the bottom of the post.
--->
+<!-- Navigation buttons at the bottom of the post. -->
+
+<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
+  {% assign previous = site.data.locales[include.lang].post.button.previous %}
+  {% assign next = site.data.locales[include.lang].post.button.next %}
 
-<div class="post-navigation d-flex justify-content-between">
   {% if page.previous.url %}
-  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[lang].post.button.previous }}">
-    <p>{{ page.previous.title }}</p>
-  </a>
+    <a
+      href="{{ site.baseurl }}{{ page.previous.url }}"
+      class="btn btn-outline-primary"
+      aria-label="{{ previous }}"
+    >
+      <p>{{ page.previous.title }}</p>
+    </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[lang].post.button.previous }}">
-    <p>-</p>
-  </span>
+    <div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
+      <p>-</p>
+    </div>
   {% endif %}
 
   {% if page.next.url %}
-  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[lang].post.button.next }}">
-    <p>{{ page.next.title }}</p>
-  </a>
+    <a
+      href="{{ site.baseurl }}{{page.next.url}}"
+      class="btn btn-outline-primary"
+      aria-label="{{ next }}"
+    >
+      <p>{{ page.next.title }}</p>
+    </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[lang].post.button.next }}">
-    <p>-</p>
-  </span>
+    <div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
+      <p>-</p>
+    </div>
   {% endif %}
-
-</div>
+</nav>