From 5dbda0c09f3f03d5c42ba48a3f6698464443bd3e Mon Sep 17 00:00:00 2001
From: Dongee Seo <74766722+seod0209@users.noreply.github.com>
Date: Sun, 25 Feb 2024 21:30:21 +0900
Subject: [PATCH 01/64] build(deps-dev): replace the deprecated libraries
 (#1559)

Replace `@babel/plugin-proposal-class-properties` with `@babel/plugin-transform-class-properties`

See: https://www.npmjs.com/package/@babel/plugin-proposal-class-properties
---
 package.json     | 2 +-
 rollup.config.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9ba42ff..dc5603b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-env": "^7.23.9",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.2",
diff --git a/rollup.config.js b/rollup.config.js
index 7f2d14a..6226080 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -23,7 +23,7 @@ function build(filename) {
       babel({
         babelHelpers: 'bundled',
         presets: ['@babel/env'],
-        plugins: ['@babel/plugin-proposal-class-properties']
+        plugins: ['@babel/plugin-transform-class-properties']
       }),
       license({
         banner: {

From b641b3f1f2e54bcfe96d8dff46d4f94186492d98 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Sun, 25 Feb 2024 22:50:41 +0400
Subject: [PATCH 02/64] feat(analytics)!: add post pageviews for GoatCounter
 (#1543)

---------

Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
---
 _config.yml                          | 13 ++++++++----
 _includes/analytics/goatcounter.html |  6 ++++++
 _includes/analytics/google.html      | 13 ++++++++++++
 _includes/goatcounter.html           |  8 -------
 _includes/google-analytics.html      | 14 -------------
 _includes/head.html                  |  2 +-
 _includes/js-selector.html           | 31 ++++++++++++++++++++--------
 _includes/pageviews/goatcounter.html | 18 ++++++++++++++++
 _layouts/post.html                   | 18 ++++++++++++----
 _sass/layout/post.scss               |  2 +-
 10 files changed, 84 insertions(+), 41 deletions(-)
 create mode 100644 _includes/analytics/goatcounter.html
 create mode 100644 _includes/analytics/google.html
 delete mode 100644 _includes/goatcounter.html
 delete mode 100644 _includes/google-analytics.html
 create mode 100644 _includes/pageviews/goatcounter.html

diff --git a/_config.yml b/_config.yml
index 79d451f..79f153d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -49,11 +49,16 @@ google_site_verification: # fill in to your verification string
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-google_analytics:
-  id: # fill in your Google Analytics ID
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
 
-goatcounter:
-  id: # fill in your Goatcounter ID
+# Pageviews settings
+pageviews:
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
diff --git a/_includes/analytics/goatcounter.html b/_includes/analytics/goatcounter.html
new file mode 100644
index 0000000..78c90b7
--- /dev/null
+++ b/_includes/analytics/goatcounter.html
@@ -0,0 +1,6 @@
+<!-- GoatCounter -->
+<script
+  async
+  src="//gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
+></script>
diff --git a/_includes/analytics/google.html b/_includes/analytics/google.html
new file mode 100644
index 0000000..d0aac65
--- /dev/null
+++ b/_includes/analytics/google.html
@@ -0,0 +1,13 @@
+<!-- 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) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.analytics.google.id }}');
+  });
+</script>
diff --git a/_includes/goatcounter.html b/_includes/goatcounter.html
deleted file mode 100644
index 4d21d21..0000000
--- a/_includes/goatcounter.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- GoatCounter -->
-
-<script
-  data-goatcounter="https://{{ site.goatcounter.id }}.goatcounter.com/count"
-  async
-  src="https://gc.zgo.at/count.js"
-></script>
-
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
deleted file mode 100644
index e5e5119..0000000
--- a/_includes/google-analytics.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-  The GA snippet
--->
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-
-    gtag('js', new Date());
-    gtag('config', '{{ site.google_analytics.id }}');
-  });
-</script>
diff --git a/_includes/head.html b/_includes/head.html
index 9bad78a..7c09359 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -72,7 +72,7 @@
   {% endif %}
 
   <!-- GA -->
-  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
+  {% if jekyll.environment == 'production' and site.analytics.google.id != empty and site.analytics.google.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 1a1fa58..b37d710 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -95,19 +95,32 @@
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
+<!-- Pageviews -->
+{% if page.layout == 'post' %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
+      {% when 'goatcounter' %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
+        {% endif %}
+    {% endcase %}
+  {% endif %}
+{% endif %}
+
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
     <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
   {% endif %}
 
-  <!-- GA -->
-  {% if site.google_analytics.id != empty and site.google_analytics.id %}
-    {% include google-analytics.html %}
-  {% endif %}
-
-  <!-- GoatCounter -->
-  {% if site.goatcounter.id != empty and site.goatcounter.id %}
-    {% include goatcounter.html %}
-  {% 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 %}
diff --git a/_includes/pageviews/goatcounter.html b/_includes/pageviews/goatcounter.html
new file mode 100644
index 0000000..af536db
--- /dev/null
+++ b/_includes/pageviews/goatcounter.html
@@ -0,0 +1,18 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  let pv = document.getElementById('pageviews');
+
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        pv.innerText = new Intl.NumberFormat().format(data.count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
+</script>
diff --git a/_layouts/post.html b/_layouts/post.html
index f7818bf..f666d71 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -74,12 +74,22 @@ tail_includes:
           </em>
         </span>
 
-        <!-- read time -->
-        {% include read-time.html content=content prompt=true lang=lang %}
+        <div>
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true lang=lang %}
+        </div>
       </div>
-      <!-- .d-flex -->
     </div>
-    <!-- .post-meta -->
   </header>
 
   <div class="content">
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index efbde82..a6dc878 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -15,7 +15,7 @@
 }
 
 h1 + .post-meta {
-  > span + span::before {
+  span + span::before {
     @include dot;
   }
 

From e4363871b5be0608d2b92b8aff482825a8044c1b Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Mon, 26 Feb 2024 18:17:18 +0400
Subject: [PATCH 03/64] feat: change site verification settings (#1561)

---
 _config.yml | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index 79f153d..215c618 100644
--- a/_config.yml
+++ b/_config.yml
@@ -44,7 +44,14 @@ social:
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
-google_site_verification: # fill in to your verification string
+# Site Verification Settings
+webmaster_verifications:
+  google: # fill in your Google verification code
+  bing: # fill in your Bing verification code
+  alexa: # fill in your Alexa verification code
+  yandex: # fill in your Yandex verification code
+  baidu: # fill in your Baidu verification code
+  facebook: # fill in your Facebook verification code
 
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings

From f8390d4384600fb015728b1b186570fa58ca216f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 27 Feb 2024 01:39:04 +0800
Subject: [PATCH 04/64] perf!: rename comment setting parameter (#1563)

Rename `site.comments.active` to `site.comments.provider`
---
 _config.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/_config.yml b/_config.yml
index 215c618..aaaa2ad 100644
--- a/_config.yml
+++ b/_config.yml
@@ -98,8 +98,9 @@ social_preview_image: # string, local or CORS resources
 toc: true
 
 comments:
-  active: # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
-  # The active options are as follows:
+  # Global switch for the post comment system. Keeping it empty means disabled.
+  provider: # [disqus | utterances | giscus]
+  # The provider options are as follows:
   disqus:
     shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
   # utterances settings › https://utteranc.es/

From 9592146ca392236e69ee358412ecc32ef1662127 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Wed, 28 Feb 2024 00:51:33 +0400
Subject: [PATCH 05/64] feat: add support for embed video files (#1558)

---
 _includes/embed/bilibili.html         |  7 +++--
 _includes/embed/video.html            | 38 +++++++++++++++++++++++++++
 _includes/embed/youtube.html          |  2 +-
 _posts/2019-08-08-write-a-new-post.md | 27 +++++++++++++++++++
 _sass/addon/commons.scss              | 18 +++++++++----
 5 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 _includes/embed/video.html

diff --git a/_includes/embed/bilibili.html b/_includes/embed/bilibili.html
index eaa09d8..0aa5552 100644
--- a/_includes/embed/bilibili.html
+++ b/_includes/embed/bilibili.html
@@ -1,10 +1,9 @@
 <iframe
-  class="embed-video bilibili"
+  class="embed-video"
   loading="lazy"
   src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
   scrolling="no"
-  border="0"
-  frameborder="no"
+  frameborder="0"
   framespacing="0"
   allowfullscreen="true"
-></iframe>
\ No newline at end of file
+></iframe>
diff --git a/_includes/embed/video.html b/_includes/embed/video.html
new file mode 100644
index 0000000..eb46c25
--- /dev/null
+++ b/_includes/embed/video.html
@@ -0,0 +1,38 @@
+{% assign video_url = include.src %}
+{% assign poster_url = include.poster %}
+
+{% unless video_url contains '://' %}
+  {%- capture video_url -%}
+    {% include img-url.html src=video_url img_path=page.img_path %}
+  {%- endcapture -%}
+{% endunless %}
+
+{% if poster_url %}
+  {% unless poster_url contains '://' %}
+    {%- capture poster_url -%}
+      {% include img-url.html src=poster_url img_path=page.img_path %}
+    {%- endcapture -%}
+  {% endunless %}
+  {% assign poster = 'poster="' | append: poster_url | append: '"' %}
+{% endif %}
+
+{% assign attributes = 'controls' %}
+
+{% if include.autoplay %}
+  {% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
+{% endif %}
+
+{% if include.loop %}
+  {% assign attributes = attributes | append: ' ' | append: 'loop' %}
+{% endif %}
+
+{% if include.muted %}
+  {% assign attributes = attributes | append: ' ' | append: 'muted' %}
+{% endif %}
+
+<p>
+  <video class="embed-video file" src="{{ video_url }}" {{ poster }} {{ attributes }}>
+    Your browser doesn't support HTML video. Here is a <a href="{{ url }}">link to the video</a> instead.
+  </video>
+  <em>{{ include.title }}</em>
+</p>
diff --git a/_includes/embed/youtube.html b/_includes/embed/youtube.html
index 640011f..8f08002 100644
--- a/_includes/embed/youtube.html
+++ b/_includes/embed/youtube.html
@@ -1,5 +1,5 @@
 <iframe
-  class="embed-video youtube"
+  class="embed-video"
   loading="lazy"
   src="https://www.youtube.com/embed/{{ include.id }}"
   title="YouTube video player"
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 86194ed..63a0116 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -427,6 +427,8 @@ Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the pos
 
 ## Videos
 
+### Video Sharing Platform
+
 You can embed a video with the following syntax:
 
 ```liquid
@@ -443,6 +445,31 @@ The following table shows how to get the two parameters we need in a given video
 | [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`   | `1634779211`   |
 | [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
 
+### Video File
+
+If you want to embed a video file directly, use the following syntax:
+
+```liquid
+{% include embed/video.html src='{URL}' %}
+```
+
+Where `URL` is an URL to a video file e.g. `/assets/img/sample/video.mp4`.
+
+You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.
+
+- `poster='/path/to/poster.png'` - poster image for a video that is shown while video is downloading
+- `title='Text'` - title for a video that appears below the video and looks same as for images
+- `autoplay=true` - video automatically begins to play back as soon as it can
+- `loop=true` - automatically seek back to the start upon reaching the end of the video
+- `muted=true` - audio will be initially silenced
+
+Consider an example utilizing all of the above:
+
+```liquid
+{% include embed/video.html src='video.mp4' poster='poster.png' title='Demo video'
+   autoplay=true loop=true muted=true %}
+```
+
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index d73a051..8db34ae 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -550,17 +550,25 @@ main {
   width: 100%;
   height: 100%;
   margin-bottom: 1rem;
+  aspect-ratio: 16 / 9;
 
   @extend %rounded;
 
-  &.youtube,
-  &.bilibili {
-    aspect-ratio: 16 / 9;
-  }
-
   &.twitch {
     aspect-ratio: 310 / 189;
   }
+
+  &.file {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    margin-bottom: 0;
+  }
+
+  @extend %img-caption;
 }
 
 /* --- buttons --- */

From 4ddd5c437046a1e70cf396113e2351c452a25493 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Wed, 28 Feb 2024 20:58:20 +0400
Subject: [PATCH 06/64] perf: improve <hr> visibility in dark mode (#1565)

---
 _sass/addon/commons.scss          | 5 +++++
 _sass/colors/typography-dark.scss | 4 ----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 8db34ae..f2e7ba6 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -129,6 +129,11 @@ kbd {
   box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
 
+hr {
+  border-color: var(--main-border-color);
+  opacity: 1;
+}
+
 footer {
   background-color: var(--main-bg);
   height: $footer-height;
diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
index 1ccfa03..d9b1df6 100644
--- a/_sass/colors/typography-dark.scss
+++ b/_sass/colors/typography-dark.scss
@@ -104,10 +104,6 @@
     display: none;
   }
 
-  hr {
-    border-color: var(--main-border-color);
-  }
-
   /* categories */
   .categories.card,
   .list-group-item {

From e24a0c73ba00a902afa07184d20d9222eab7a47a Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Fri, 1 Mar 2024 00:01:10 +0400
Subject: [PATCH 07/64] refactor: use explicit url for goatcounter (#1578)

---
 _includes/analytics/goatcounter.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/analytics/goatcounter.html b/_includes/analytics/goatcounter.html
index 78c90b7..3867fdb 100644
--- a/_includes/analytics/goatcounter.html
+++ b/_includes/analytics/goatcounter.html
@@ -1,6 +1,6 @@
 <!-- GoatCounter -->
 <script
   async
-  src="//gc.zgo.at/count.js"
+  src="https://gc.zgo.at/count.js"
   data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
 ></script>

From 6112b15b8ebb6a58043b778aafbb2cab4540bfb0 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Fri, 1 Mar 2024 00:55:30 +0400
Subject: [PATCH 08/64] refactor: change alternate url for embed video file
 (#1579)

---
 _includes/embed/video.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_includes/embed/video.html b/_includes/embed/video.html
index eb46c25..f038938 100644
--- a/_includes/embed/video.html
+++ b/_includes/embed/video.html
@@ -32,7 +32,7 @@
 
 <p>
   <video class="embed-video file" src="{{ video_url }}" {{ poster }} {{ attributes }}>
-    Your browser doesn't support HTML video. Here is a <a href="{{ url }}">link to the video</a> instead.
+    Your browser doesn't support HTML video. Here is a <a href="{{ video_url }}">link to the video</a> instead.
   </video>
   <em>{{ include.title }}</em>
 </p>

From 8a2afae6cab8fc9639be0a866b71699c8a80084c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 1 Mar 2024 20:06:34 +0800
Subject: [PATCH 09/64] fix: search result prompt is empty (#1583)

---
 _layouts/default.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index f938a94..7e355fe 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -82,6 +82,6 @@ layout: compress
       {% include mermaid.html %}
     {% endif %}
 
-    {% include_cached search-loader.html %}
+    {% include_cached search-loader.html lang=lang %}
   </body>
 </html>

From 25b2ffa9bacc5aa04883cd3eda09696c1bc86a97 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 2 Mar 2024 00:56:55 +0800
Subject: [PATCH 10/64] build: configure rules for `markdownlint`

---
 .markdownlint.json    | 8 ++++++++
 .vscode/settings.json | 3 +++
 2 files changed, 11 insertions(+)
 create mode 100644 .markdownlint.json

diff --git a/.markdownlint.json b/.markdownlint.json
new file mode 100644
index 0000000..831991e
--- /dev/null
+++ b/.markdownlint.json
@@ -0,0 +1,8 @@
+{
+  "commands-show-output": false,
+  "blanks-around-fences": false,
+  "line-length": false,
+  "no-inline-html": {
+    "allowed_elements": ["kbd", "sub"]
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4fcded4..d3c87b8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,9 @@
   "files.associations": {
     "*.html": "liquid"
   },
+  "[markdown]": {
+    "editor.formatOnSave": false
+  },
   // Formatter
   "[html][liquid]": {
     "editor.defaultFormatter": "Shopify.theme-check-vscode"

From 25c4166722621f544e7a2590a790e6cab798fb75 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 2 Mar 2024 01:28:45 +0800
Subject: [PATCH 11/64] style(markdown): resolve `markdownlint` warnings

---
 README.md                                  |  2 ++
 _posts/2019-08-08-text-and-typography.md   | 24 ++++++++++++++--------
 _posts/2019-08-08-write-a-new-post.md      |  2 --
 _posts/2019-08-11-customize-the-favicon.md |  1 +
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 0e074cf..f084852 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
+<!-- markdownlint-disable-next-line -->
 <div align="center">
 
+  <!-- markdownlint-disable-next-line -->
   # Chirpy Jekyll Theme
 
   A minimal, responsive, and feature-rich Jekyll theme for technical writing.
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 7bf569d..6551cb5 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -17,6 +17,8 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 ## Headings
 
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
 # H1 - heading
 {: .mt-4 .mb-0 }
 
@@ -28,6 +30,7 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 #### H4 - heading
 {: data-toc-skip='' .mt-4 }
+<!-- markdownlint-restore -->
 
 ## Paragraph
 
@@ -44,15 +47,15 @@ Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas int
 ### Unordered list
 
 - Chapter
-  + Section
-    * Paragraph
+  - Section
+    - Paragraph
 
 ### ToDo list
 
 - [ ] Job
-  + [x] Step 1
-  + [x] Step 2
-  + [ ] Step 3
+  - [x] Step 1
+  - [x] Step 2
+  - [ ] Step 3
 
 ### Description list
 
@@ -68,6 +71,8 @@ Moon
 
 ## Prompts
 
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
 > An example showing the `tip` type prompt.
 {: .prompt-tip }
 
@@ -79,14 +84,15 @@ Moon
 
 > An example showing the `danger` type prompt.
 {: .prompt-danger }
+<!-- markdownlint-restore -->
 
 ## Tables
 
 | Company                      | Contact          | Country |
-|:-----------------------------|:-----------------|--------:|
+| :--------------------------- | :--------------- | ------: |
 | Alfreds Futterkiste          | Maria Anders     | Germany |
-| Island Trading               | Helen Bennett    | UK      |
-| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
+| Island Trading               | Helen Bennett    |      UK |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli |   Italy |
 
 ## Links
 
@@ -108,7 +114,7 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 
 ### Common
 
-```
+```text
 This is a common code snippet, without syntax highlight and line number.
 ```
 
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 63a0116..08fb8e7 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -58,7 +58,6 @@ Adding author information in `_data/authors.yml` (If your website doesn't have t
 ```
 {: file="_data/authors.yml" }
 
-
 And then use `author` to specify a single entry or `authors` to specify multiple entries:
 
 ```yaml
@@ -320,7 +319,6 @@ image:
 
 > You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
 
-
 For normal images:
 
 ```markdown
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
index 6a3e2da..a3278fa 100644
--- a/_posts/2019-08-11-customize-the-favicon.md
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -30,6 +30,7 @@ The following table will help you understand the changes to the favicon files:
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 
+<!-- markdownlint-disable-next-line -->
 >  ✓ means keep, ✗ means delete.
 {: .prompt-info }
 

From 2a7b56bb3606c806c5c9402f281844a350ea717a Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 4 Mar 2024 18:03:51 +0800
Subject: [PATCH 12/64] build(deps-dev): bump the npm group with 5 updates

Updates `@babel/core` to 7.24.0
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.0/packages/babel-core)

Updates `@babel/preset-env` to 7.24.0
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.0/packages/babel-preset-env)

Updates `@commitlint/cli` from 18.6.1 to 19.0.3
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.0.3/@commitlint/cli)

Updates `@commitlint/config-conventional` from 18.6.2 to 19.0.3
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.0.3/@commitlint/config-conventional)

Updates `rollup` to 4.12.0
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.10.0...v4.12.0)

Close #1580
---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7d9f252..72d9128 100644
--- a/package.json
+++ b/package.json
@@ -21,16 +21,16 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/preset-env": "^7.23.9",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
+    "@babel/preset-env": "^7.24.0",
+    "@commitlint/cli": "^19.0.3",
+    "@commitlint/config-conventional": "^19.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "husky": "^9.0.11",
     "rimraf": "^5.0.5",
-    "rollup": "^4.10.0",
+    "rollup": "^4.12.0",
     "rollup-plugin-license": "^3.2.0",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0"

From 547b95cc7ae35018dadcc01b6eb1dc8c8943e67e Mon Sep 17 00:00:00 2001
From: Neil Boyd <NeilBoyd@gmail.com>
Date: Mon, 4 Mar 2024 20:09:39 +0100
Subject: [PATCH 13/64] feat(i18n): allow `page.lang` to override `site.lang`
 (#1586)

---
 _includes/js-selector.html | 2 +-
 _includes/lang.html        | 4 +++-
 _layouts/default.html      | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index b37d710..65c6453 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -33,7 +33,7 @@
   or page.layout == 'category'
   or page.layout == 'tag'
 %}
-  {% assign locale = site.lang | split: '-' | first %}
+  {% assign locale = include.lang | split: '-' | first %}
 
   {% assign urls = urls
     | append: ','
diff --git a/_includes/lang.html b/_includes/lang.html
index 19558a0..34b50df 100644
--- a/_includes/lang.html
+++ b/_includes/lang.html
@@ -1,7 +1,9 @@
 {% comment %}
   Detect appearance language and return it through variable "lang"
 {% endcomment %}
-{% if site.data.locales[site.lang] %}
+{% if site.data.locales[page.lang] %}
+  {% assign lang = page.lang %}
+{% elsif site.data.locales[site.lang] %}
   {% assign lang = site.lang %}
 {% else %}
   {% assign lang = 'en' %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 7e355fe..6e865b9 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,7 +13,7 @@ layout: compress
 {% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
+<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
 
   <body>
@@ -76,7 +76,7 @@ layout: compress
 
     <!-- JavaScripts -->
 
-    {% include js-selector.html %}
+    {% include js-selector.html lang=lang %}
 
     {% if page.mermaid %}
       {% include mermaid.html %}

From f865336c896e0db34edf8482a53e0e5d8f07ff95 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Mon, 18 Mar 2024 14:50:05 +0400
Subject: [PATCH 14/64] feat: make post description customizable (#1602)

---------

Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
---
 _data/origin/cors.yml                    |  2 +-
 _includes/post-description.html          | 16 +++++++++++++
 _includes/related-posts.html             |  5 +---
 _layouts/home.html                       |  5 +---
 _layouts/post.html                       |  3 +++
 _posts/2019-08-08-text-and-typography.md |  3 +--
 _posts/2019-08-08-write-a-new-post.md    | 12 ++++++++++
 _posts/2019-08-09-getting-started.md     |  3 +++
 _sass/layout/post.scss                   | 29 ++++++++++++++++--------
 assets/feed.xml                          |  9 +-------
 10 files changed, 58 insertions(+), 29 deletions(-)
 create mode 100644 _includes/post-description.html

diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index b6c8674..614139f 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -13,7 +13,7 @@ cdns:
 
 # fonts
 
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
 
 # Libraries
 
diff --git a/_includes/post-description.html b/_includes/post-description.html
new file mode 100644
index 0000000..6c40036
--- /dev/null
+++ b/_includes/post-description.html
@@ -0,0 +1,16 @@
+{%- comment -%}
+  Get post description or generate it from the post content.
+{%- endcomment -%}
+
+{%- assign max_length = include.max_length | default: 200 -%}
+
+{%- capture description -%}
+{%- if post.description -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
+{%- endif -%}
+{%- endcapture -%}
+
+{{- description | strip | truncate: max_length | escape -}}
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index 1ba2f32..ae39da4 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -81,10 +81,7 @@
               {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted">
-                <p>
-                  {% include no-linenos.html content=post.content %}
-                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
-                </p>
+                <p>{% include post-description.html %}</p>
               </div>
             </div>
           </a>
diff --git a/_layouts/home.html b/_layouts/home.html
index 4cf4c1d..a9f5bd3 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -72,10 +72,7 @@ refactor: true
             <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
             <div class="card-text content mt-0 mb-3">
-              <p>
-                {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+              <p>{% include post-description.html %}</p>
             </div>
 
             <div class="post-meta flex-grow-1 d-flex align-items-end">
diff --git a/_layouts/post.html b/_layouts/post.html
index f666d71..f17ceea 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -14,6 +14,9 @@ tail_includes:
 <article class="px-1">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+      <p class="post-desc fw-light mb-4">{{ page.description }}</p>
+    {% endif %}
 
     <div class="post-meta text-muted">
       <!-- published date -->
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 6551cb5..7064d5d 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -1,5 +1,6 @@
 ---
 title: Text and Typography
+description: Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
 author: cotes
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
@@ -13,8 +14,6 @@ image:
   alt: Responsive rendering of Chirpy theme on multiple devices.
 ---
 
-This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
-
 ## Headings
 
 <!-- markdownlint-capture -->
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 08fb8e7..aab434c 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -73,6 +73,18 @@ Having said that, the key `author` can also identify multiple entries.
 > The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
 {: .prompt-info }
 
+### Post Description
+
+By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:
+
+```yaml
+---
+description: Short summary of the post.
+---
+```
+
+Additionally, the `description` text will also be displayed under the post title on the post's page.
+
 ## Table of Contents
 
 By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index a411dbc..701824f 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -1,5 +1,8 @@
 ---
 title: Getting Started
+description: >-
+  Get started with Chirpy basics in this comprehensive overview.
+  You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
 author: cotes
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index a6dc878..fe96058 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -14,19 +14,28 @@
   padding-right: $pr;
 }
 
-h1 + .post-meta {
-  span + span::before {
-    @include dot;
+header {
+  .post-desc {
+    @extend %heading;
+
+    font-size: 1.125rem;
+    line-height: 1.6;
   }
 
-  em,
-  time {
-    @extend %text-highlight;
-  }
+  .post-meta {
+    span + span::before {
+      @include dot;
+    }
 
-  em {
-    a {
-      color: inherit;
+    em,
+    time {
+      @extend %text-highlight;
+    }
+
+    em {
+      a {
+        color: inherit;
+      }
     }
   }
 }
diff --git a/assets/feed.xml b/assets/feed.xml
index a244a56..0ab20e3 100644
--- a/assets/feed.xml
+++ b/assets/feed.xml
@@ -45,14 +45,7 @@ permalink: /feed.xml
     {% endfor %}
   {% endif %}
 
-  {% if post.summary %}
-    <summary>{{ post.summary | strip }}</summary>
-  {% else %}
-    <summary>
-      {% include no-linenos.html content=post.content %}
-      {{ content  | strip_html | truncate: 400 }}
-    </summary>
-  {% endif %}
+  <summary>{% include post-description.html max_length=400 %}</summary>
 
   </entry>
 {% endfor %}

From 834931486dc3e5ed544ce4ff47cd1b2bc45f42fd Mon Sep 17 00:00:00 2001
From: Azamat Mambetov <zikbest11@yandex.ru>
Date: Mon, 18 Mar 2024 14:52:33 +0400
Subject: [PATCH 15/64] feat: display theme version in footer (#1611)

---
 _includes/footer.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index a015f46..1ba9b63 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -34,7 +34,14 @@
     {%- endcapture -%}
 
     {%- capture _theme -%}
-      <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+      <a
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="v{{ theme.version }}"
+        href="https://github.com/cotes2020/jekyll-theme-chirpy"
+        target="_blank"
+        rel="noopener"
+      >Chirpy</a>
     {%- endcapture -%}
 
     {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}

From 8e5fbb7a74d04a4b3cdde69bcc821f8ccd1a3bc0 Mon Sep 17 00:00:00 2001
From: Small Long <910.long@gmail.com>
Date: Mon, 18 Mar 2024 19:54:37 +0900
Subject: [PATCH 16/64] fix: use `https` for Weibo sharing URL (#1612)

---
 _data/share.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_data/share.yml b/_data/share.yml
index d572e6d..b1d077d 100644
--- a/_data/share.yml
+++ b/_data/share.yml
@@ -22,7 +22,7 @@ platforms:
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"
-  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #   link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL"
   #
   # - type: Mastodon
   #   icon: "fa-brands fa-mastodon"

From 700fd5bad7272dd950f861e8550215cd8fafb413 Mon Sep 17 00:00:00 2001
From: GetOutOfMyBakery <12701930+GetOutOfMyBakery@users.noreply.github.com>
Date: Mon, 18 Mar 2024 11:08:05 +0000
Subject: [PATCH 17/64] feat: add support for giscus strict title matching
 (#1614)

---
 _config.yml                    | 1 +
 _includes/comments/giscus.html | 1 +
 2 files changed, 2 insertions(+)

diff --git a/_config.yml b/_config.yml
index aaaa2ad..1076673 100644
--- a/_config.yml
+++ b/_config.yml
@@ -114,6 +114,7 @@ comments:
     category:
     category_id:
     mapping: # optional, default to 'pathname'
+    strict: # optional, default to '0'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
index 8f04246..526aa22 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -25,6 +25,7 @@
       'data-category': '{{ site.comments.giscus.category }}',
       'data-category-id': '{{ site.comments.giscus.category_id }}',
       'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
       'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
       'data-emit-metadata': '0',
       'data-theme': initTheme,

From 319a082940ea226da6e351217e71c278ec76157a Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 23 Mar 2024 03:52:13 +0800
Subject: [PATCH 18/64] refactor(post): reduce the margin between title and
 description

---
 _sass/addon/commons.scss | 1 -
 _sass/layout/post.scss   | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index f2e7ba6..c921619 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -369,7 +369,6 @@ main {
 
   h1 {
     margin-top: 2rem;
-    margin-bottom: 1.5rem;
   }
 
   p {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index fe96058..112541d 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -38,6 +38,10 @@ header {
       }
     }
   }
+
+  h1 + .post-meta {
+    margin-top: 1.5rem;
+  }
 }
 
 .post-tail-wrapper {

From c5d5e1f75ae55a2550589a41b4a54fde308a0e4f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 23 Mar 2024 08:01:23 +0800
Subject: [PATCH 19/64] build(deps-dev): bump the npm group with 7 updates

Updates `@babel/core` to 7.24.3
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.3/packages/babel-core)

Updates `@babel/plugin-transform-class-properties` to 7.24.1
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-plugin-transform-class-properties)

Updates `@babel/preset-env` to 7.24.3
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.3/packages/babel-preset-env)

Updates `@commitlint/cli` to 19.2.1
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.2.1/@commitlint/cli)

Updates `@commitlint/config-conventional` to 19.1.0
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.1.0/@commitlint/config-conventional)

Updates `rollup` to 4.13.0
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.12.0...v4.13.0)

Updates `rollup-plugin-license` to 3.3.1
- [Changelog](https://github.com/mjeanroy/rollup-plugin-license/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mjeanroy/rollup-plugin-license/compare/v3.2.0...v3.3.1)
---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index f561766..b1aaaef 100644
--- a/package.json
+++ b/package.json
@@ -21,17 +21,17 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/plugin-transform-class-properties": "^7.23.3",
-    "@babel/preset-env": "^7.24.0",
-    "@commitlint/cli": "^19.0.3",
-    "@commitlint/config-conventional": "^19.0.3",
+    "@babel/core": "^7.24.3",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/preset-env": "^7.24.3",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "husky": "^9.0.11",
     "rimraf": "^5.0.5",
-    "rollup": "^4.12.0",
-    "rollup-plugin-license": "^3.2.0",
+    "rollup": "^4.13.0",
+    "rollup-plugin-license": "^3.3.1",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0"
   },

From 13bf51e03d2a3f8572614a3f8bbd57de69a012d8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 24 Mar 2024 02:35:48 +0800
Subject: [PATCH 20/64] chore(editor): update markdown extension settings

---
 .vscode/extensions.json | 3 ++-
 .vscode/settings.json   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 6927cd1..52bd6fb 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -7,6 +7,7 @@
     // Common formatter
     "esbenp.prettier-vscode",
     "foxundermoon.shell-format",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "yzhang.markdown-all-in-one"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d3c87b8..b0e2e09 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,7 +8,7 @@
     "*.html": "liquid"
   },
   "[markdown]": {
-    "editor.formatOnSave": false
+    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
   },
   // Formatter
   "[html][liquid]": {

From 950839175ab232103f6127fd6a99ac724ecc9e89 Mon Sep 17 00:00:00 2001
From: Mascari4615 <55438621+Mascari4615@users.noreply.github.com>
Date: Mon, 25 Mar 2024 01:57:43 +0900
Subject: [PATCH 21/64] refactor: fix reference to comment parameter
 `site.comments.provider` (#1629)

---
 _includes/comments.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_includes/comments.html b/_includes/comments.html
index 39e521f..fef135f 100644
--- a/_includes/comments.html
+++ b/_includes/comments.html
@@ -1,5 +1,5 @@
-<!--  The comments switcher -->
-{% if page.comments and site.comments.active %}
-  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
+<!-- The comments switcher -->
+{% if page.comments and site.comments.provider %}
+  {% capture path %}comments/{{ site.comments.provider }}.html{% endcapture %}
   {% include {{ path }} %}
 {% endif %}

From 3cc1510071f4933dc403136191dadb404896e053 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 3 Apr 2024 05:12:44 +0800
Subject: [PATCH 22/64] build(deps): update `wagoid/commitlint-github-action`
 from 5 to 6

Bumps the gh-actions group with 1 update: [wagoid/commitlint-github-action](https://github.com/wagoid/commitlint-github-action).

Updates `wagoid/commitlint-github-action` from 5 to 6
- [Changelog](https://github.com/wagoid/commitlint-github-action/blob/master/CHANGELOG.md)
- [Commits](https://github.com/wagoid/commitlint-github-action/compare/v5...v6)
---
 .github/workflows/commitlint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
index d79814a..f8cb2d5 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -8,4 +8,4 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v5
+      - uses: wagoid/commitlint-github-action@v6

From 01076cb1c27ceea3b0f55ff9934933714e2f71d5 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 3 Apr 2024 05:14:33 +0800
Subject: [PATCH 23/64] build(deps-dev): bump the npm group with 2 updates

Updates `rollup` to 4.13.2
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.13.0...v4.13.2)

Updates `stylelint` to 16.3.1
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/16.2.1...16.3.1)
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3930c38..b023362 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,9 @@
     "@rollup/plugin-terser": "^0.4.4",
     "husky": "^9.0.11",
     "rimraf": "^5.0.5",
-    "rollup": "^4.13.0",
+    "rollup": "^4.13.2",
     "rollup-plugin-license": "^3.3.1",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.0.0"
   },
   "prettier": {

From 23be4162b3f8598db14dc5b39726932ccf2cdc23 Mon Sep 17 00:00:00 2001
From: Azamat Mambetov <zikbest11@yandex.ru>
Date: Thu, 4 Apr 2024 20:54:50 +0400
Subject: [PATCH 24/64] feat(media): support audio and video tag with multi
 sources (#1618)

---
 _data/media.yml                       | 18 ++++++++++
 _includes/embed/audio.html            | 35 +++++++++++++++++++
 _includes/embed/video.html            | 29 +++++++++++++---
 _posts/2019-08-08-write-a-new-post.md | 49 +++++++++++++++++++++++++--
 _sass/addon/commons.scss              |  7 ++++
 5 files changed, 132 insertions(+), 6 deletions(-)
 create mode 100644 _data/media.yml
 create mode 100644 _includes/embed/audio.html

diff --git a/_data/media.yml b/_data/media.yml
new file mode 100644
index 0000000..9cd69b4
--- /dev/null
+++ b/_data/media.yml
@@ -0,0 +1,18 @@
+- extension: mp3
+  mime_type: mpeg
+- extension: mov
+  mime_type: quicktime
+- extension: avi
+  mime_type: x-msvideo
+- extension: mkv
+  mime_type: x-matroska
+- extension: ogv
+  mime_type: ogg
+- extension: weba
+  mime_type: webm
+- extension: 3gp
+  mime_type: 3gpp
+- extension: 3g2
+  mime_type: 3gpp2
+- extension: mid
+  mime_type: midi
diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html
new file mode 100644
index 0000000..d618890
--- /dev/null
+++ b/_includes/embed/audio.html
@@ -0,0 +1,35 @@
+{% assign src = include.src | strip %}
+{% assign title = include.title | strip %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless src contains '://' %}
+  {%- capture src -%}
+    {% include img-url.html src=src %}
+  {%- endcapture -%}
+{% endunless %}
+
+<p>
+  <audio class="embed-audio" controls>
+    {% assign extension = src | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = src | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = src | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="audio/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the audio tag. Here is a
+    <a href="{{ src | strip }}">link to the audio file</a> instead.
+  </audio>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>
diff --git a/_includes/embed/video.html b/_includes/embed/video.html
index f038938..72ec4fb 100644
--- a/_includes/embed/video.html
+++ b/_includes/embed/video.html
@@ -1,9 +1,11 @@
 {% assign video_url = include.src %}
+{% assign title = include.title %}
 {% assign poster_url = include.poster %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
 
 {% unless video_url contains '://' %}
   {%- capture video_url -%}
-    {% include img-url.html src=video_url img_path=page.img_path %}
+    {% include img-url.html src=video_url %}
   {%- endcapture -%}
 {% endunless %}
 
@@ -31,8 +33,27 @@
 {% endif %}
 
 <p>
-  <video class="embed-video file" src="{{ video_url }}" {{ poster }} {{ attributes }}>
-    Your browser doesn't support HTML video. Here is a <a href="{{ video_url }}">link to the video</a> instead.
+  <video class="embed-video file" {{ poster }} {{ attributes }}>
+    {% assign extension = video_url | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = video_url | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = video_url | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="video/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the video tag. Here is a
+    <a href="{{ video_url | strip }}">link to the video file</a> instead.
   </video>
-  <em>{{ include.title }}</em>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
 </p>
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index aab434c..0a451fa 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -472,14 +472,59 @@ You can also specify additional attributes for the embedded video file. Here is
 - `autoplay=true` - video automatically begins to play back as soon as it can
 - `loop=true` - automatically seek back to the start upon reaching the end of the video
 - `muted=true` - audio will be initially silenced
+- `types` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
 
 Consider an example utilizing all of the above:
 
 ```liquid
-{% include embed/video.html src='video.mp4' poster='poster.png' title='Demo video'
-   autoplay=true loop=true muted=true %}
+{%
+  include embed/video.html
+  src='/path/to/video/video.mp4'
+  types='ogg|mov'
+  poster='poster.png'
+  title='Demo video'
+  autoplay=true
+  loop=true
+  muted=true
+%}
 ```
 
+> It's not recommended to host video files in `assets` folder as they cannot be cached by PWA and may cause issues.
+> Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
+{: .prompt-warning }
+
+## Audios
+
+### Audio File
+
+If you want to embed an audio file directly, use the following syntax:
+
+```liquid
+{% include embed/audio.html src='{URL}' %}
+```
+
+Where `URL` is an URL to an audio file e.g. `/assets/img/sample/audio.mp3`.
+
+You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.
+
+- `title='Text'` - title for an audio that appears below the audio and looks same as for images
+- `types` - specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
+
+Consider an example utilizing all of the above:
+
+```liquid
+{%
+  include embed/audio.html
+  src='/path/to/audio/audio.mp3'
+  types='ogg|wav|aac'
+  title='Demo audio'
+%}
+```
+
+> It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues.
+> Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
+{: .prompt-warning }
+
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index c921619..678db47 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -575,6 +575,13 @@ main {
   @extend %img-caption;
 }
 
+.embed-audio {
+  width: 100%;
+  display: block;
+
+  @extend %img-caption;
+}
+
 /* --- buttons --- */
 .btn-lang {
   border: 1px solid !important;

From 61bdca2db45179cd0d1b4b885a4c4864e3ffa3c1 Mon Sep 17 00:00:00 2001
From: Filippo <il_doc@protonmail.com>
Date: Tue, 9 Apr 2024 16:57:06 +0200
Subject: [PATCH 25/64] feat(analytics): add Umami and Matomo tracking codes
 (#1658)

---
 README.md                       |  2 +-
 _config.yml                     |  6 ++++++
 _includes/analytics/matomo.html | 14 ++++++++++++++
 _includes/analytics/umami.html  |  6 ++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 _includes/analytics/matomo.html
 create mode 100644 _includes/analytics/umami.html

diff --git a/README.md b/README.md
index f084852..5bcfcb7 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@
 - Built-in Search
 - Atom Feeds
 - PWA
-- Google Analytics / GoatCounter
+- Web Analytics
 - SEO & Performance Optimization
 
 ## Documentation
diff --git a/_config.yml b/_config.yml
index 1076673..f64411d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -62,6 +62,12 @@ analytics:
     id: # fill in your Google Analytics ID
   goatcounter:
     id: # fill in your GoatCounter ID
+  umami:
+    id: # fill in your Umami ID
+    domain: # fill in your Umami domain
+  matomo:
+    id: # fill in your Matomo ID
+    domain: # fill in your Matomo domain
 
 # Pageviews settings
 pageviews:
diff --git a/_includes/analytics/matomo.html b/_includes/analytics/matomo.html
new file mode 100644
index 0000000..72b2c46
--- /dev/null
+++ b/_includes/analytics/matomo.html
@@ -0,0 +1,14 @@
+<!-- Matomo -->
+<script type="text/javascript">
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    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 -->
diff --git a/_includes/analytics/umami.html b/_includes/analytics/umami.html
new file mode 100644
index 0000000..bfcb1d0
--- /dev/null
+++ b/_includes/analytics/umami.html
@@ -0,0 +1,6 @@
+<!-- Umami -->
+<script
+  defer
+  src="{{ site.analytics.umami.domain }}/script.js"
+  data-website-id="{{ site.analytics.umami.id }}"
+></script>

From 9f8aeaadbfef9967a9b0a9dd323d8bed46e14d9f Mon Sep 17 00:00:00 2001
From: Azamat Mambetov <zikbest11@yandex.ru>
Date: Sat, 13 Apr 2024 00:34:48 +0400
Subject: [PATCH 26/64] refactor!: rename media-url file and related parameters
 (#1651)

- Changed variable `img_cdn` to `cdn` in site configuration file.
- Changed the variable defining the relative path of the image in the post from `img_url` to `media_subpath`
---
 _config.yml                                |  6 +++---
 _includes/embed/audio.html                 |  2 +-
 _includes/embed/video.html                 |  4 ++--
 _includes/head.html                        |  4 ++--
 _includes/{img-url.html => media-url.html} | 16 ++++++++--------
 _includes/refactor-content.html            |  2 +-
 _includes/sidebar.html                     |  2 +-
 _layouts/home.html                         |  2 +-
 _posts/2019-08-08-write-a-new-post.md      | 14 +++++++-------
 _posts/2019-08-09-getting-started.md       |  2 +-
 assets/js/data/swconf.js                   |  4 ++--
 tools/init                                 |  2 +-
 tools/release                              |  2 +-
 13 files changed, 31 insertions(+), 31 deletions(-)
 rename _includes/{img-url.html => media-url.html} (59%)

diff --git a/_config.yml b/_config.yml
index f64411d..6062ac6 100644
--- a/_config.yml
+++ b/_config.yml
@@ -86,12 +86,12 @@ pageviews:
 #
 theme_mode: # [light | dark]
 
-# The CDN endpoint for images.
+# The CDN endpoint for media resources.
 # Notice that once it is assigned, the CDN url
-# will be added to all image (site avatar & posts' images) paths starting with '/'
+# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: "https://chirpy-img.netlify.app"
+cdn: "https://chirpy-img.netlify.app"
 
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"
diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html
index d618890..e2b8979 100644
--- a/_includes/embed/audio.html
+++ b/_includes/embed/audio.html
@@ -4,7 +4,7 @@
 
 {% unless src contains '://' %}
   {%- capture src -%}
-    {% include img-url.html src=src %}
+    {% include media-url.html src=src %}
   {%- endcapture -%}
 {% endunless %}
 
diff --git a/_includes/embed/video.html b/_includes/embed/video.html
index 72ec4fb..712a266 100644
--- a/_includes/embed/video.html
+++ b/_includes/embed/video.html
@@ -5,14 +5,14 @@
 
 {% unless video_url contains '://' %}
   {%- capture video_url -%}
-    {% include img-url.html src=video_url %}
+    {% include media-url.html src=video_url %}
   {%- endcapture -%}
 {% endunless %}
 
 {% if poster_url %}
   {% unless poster_url contains '://' %}
     {%- capture poster_url -%}
-      {% include img-url.html src=poster_url img_path=page.img_path %}
+      {% include media-url.html src=poster_url subpath=page.media_subpath %}
     {%- endcapture -%}
   {% endunless %}
   {% assign poster = 'poster="' | append: poster_url | append: '"' %}
diff --git a/_includes/head.html b/_includes/head.html
index 2848c86..67c5390 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -20,7 +20,7 @@
 
     {% unless src contains '://' %}
       {%- capture img_url -%}
-        {% include img-url.html src=src img_path=page.img_path absolute=true %}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
       {%- endcapture -%}
 
       {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
@@ -31,7 +31,7 @@
 
   {% elsif site.social_preview_image %}
     {%- capture img_url -%}
-      {% include img-url.html src=site.social_preview_image absolute=true %}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
     {%- endcapture -%}
 
     {%- capture og_image -%}
diff --git a/_includes/img-url.html b/_includes/media-url.html
similarity index 59%
rename from _includes/img-url.html
rename to _includes/media-url.html
index bb4758c..ea41075 100644
--- a/_includes/img-url.html
+++ b/_includes/media-url.html
@@ -1,25 +1,25 @@
 {%- comment -%}
-  Generate image final URL based on `site.img_cdn`, `page.img_path`
+  Generate media resource final URL based on `site.cdn`, `page.media_subpath`
 
   Arguments:
-    src - required, basic image path
-    img_path - optional, relative path of image
+    src - required, basic media resources path
+    subpath - optional, relative path of media resources
     absolute - optional, boolean, if true, generate absolute URL
 
   Return:
-    image URL
+    media resources URL
 {%- endcomment -%}
 
 {% assign url = include.src %}
 
 {%- if url -%}
   {% unless url contains ':' %}
-    {%- comment -%} Add page image path prefix {%- endcomment -%}
-    {% assign url = include.img_path | default: '' | append: '/' | append: url %}
+    {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
+    {% assign url = include.subpath | default: '' | append: '/' | append: url %}
 
     {%- comment -%} Prepend CND URL {%- endcomment -%}
-    {% if site.img_cdn %}
-      {% assign url = site.img_cdn | append: '/' | append: url %}
+    {% if site.cdn %}
+      {% assign url = site.cdn | append: '/' | append: url %}
     {% endif %}
 
     {% assign url = url | replace: '///', '/' | replace: '//', '/' | replace: ':/', '://' %}
diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index e4abcbc..8d298cd 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -97,7 +97,7 @@
     {% assign _lazyload = true %}
 
     {%- capture _img_url -%}
-      {% include img-url.html src=_src img_path=page.img_path %}
+      {% include media-url.html src=_src subpath=page.media_subpath %}
     {%- endcapture -%}
 
     {% assign _path_prefix = _img_url | remove: _src %}
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index b8f92e3..0b5560a 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -5,7 +5,7 @@
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {%- if site.avatar != empty and site.avatar -%}
         {%- capture avatar_url -%}
-          {% include img-url.html src=site.avatar %}
+          {% include media-url.html src=site.avatar %}
         {%- endcapture -%}
         <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
       {%- endif -%}
diff --git a/_layouts/home.html b/_layouts/home.html
index a9f5bd3..e44efe8 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -49,7 +49,7 @@ refactor: true
         {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
-            {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
+            {% assign src = post.media_subpath | append: '/' | append: src | replace: '//', '/' %}
           {% endunless %}
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 0a451fa..090453b 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -247,14 +247,14 @@ The screenshots of the program window can be considered to show the shadow effec
 
 ### CDN URL
 
-If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file:
+If you host the media resources on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `cdn` of `_config.yml`{: .filepath} file:
 
 ```yaml
-img_cdn: https://cdn.com
+cdn: https://cdn.com
 ```
 {: file='_config.yml' .nolineno}
 
-Once `img_cdn` is assigned, the CDN URL will be added to the path of all images (images of site avatar and posts) starting with `/`.
+Once `cdn` is assigned, the CDN URL will be added to the path of all media resources (site avatar, posts' images, audio and video files) starting with `/`.
 
 For instance, when using images:
 
@@ -270,13 +270,13 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```
 {: .nolineno }
 
-### Image Path
+### Media Subpath
 
-When a post contains many images, it will be a time-consuming task to repeatedly define the path of the images. To solve this, we can define this path in the YAML block of the post:
+When a post contains many images, it will be a time-consuming task to repeatedly define the path of the media resources. To solve this, we can define this path in the YAML block of the post:
 
 ```yml
 ---
-img_path: /img/path/
+media_subpath: /img/path/
 ---
 ```
 
@@ -308,7 +308,7 @@ image:
 ---
 ```
 
-Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
+Note that the [`media_subpath`](#media-subpath) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
 
 For simple use, you can also just use `image` to define the path.
 
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index 701824f..6653c62 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -8,7 +8,7 @@ date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 pin: true
-img_path: '/posts/20180809'
+media_subpath: '/posts/20180809'
 ---
 
 ## Prerequisites
diff --git a/assets/js/data/swconf.js b/assets/js/data/swconf.js
index cc11f79..c02638f 100644
--- a/assets/js/data/swconf.js
+++ b/assets/js/data/swconf.js
@@ -24,8 +24,8 @@ const swconf = {
 
     {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
     allowHosts: [
-      {% if site.img_cdn and site.img_cdn contains '//' %}
-        '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
+      {% if site.cdn and site.cdn contains '//' %}
+        '{{ site.cdn | split: '//' | last | split: '/' | first }}',
       {% endif %}
 
       {%- unless site.assets.self_host.enabled -%}
diff --git a/tools/init b/tools/init
index 5baac5d..bf1ef85 100755
--- a/tools/init
+++ b/tools/init
@@ -93,7 +93,7 @@ init_files() {
     mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
 
     ## Cleanup image settings in site config
-    _sedi "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+    _sedi "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
   fi
 
   # remove the other files
diff --git a/tools/release b/tools/release
index 9ca63dc..965828b 100755
--- a/tools/release
+++ b/tools/release
@@ -156,7 +156,7 @@ build_gem() {
   git checkout "$PROD_BRANCH"
 
   # Remove unnecessary theme settings
-  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
   rm -f ./*.gem
 
   npm run build

From 7d48d32c7b272c48f1ce76dc3dc7f6ebf09468b4 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 04:16:15 +0800
Subject: [PATCH 27/64] ci: avoid duplicate builds for PR commits

---
 .github/workflows/ci.yml | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c7b1f5a..e1d4670 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,9 +1,8 @@
 name: "CI"
 on:
   push:
-    branches-ignore:
-      - "production"
-      - "docs"
+    branches:
+      - "master"
     paths-ignore:
       - ".github/**"
       - "!.github/workflows/ci.yml"
@@ -12,8 +11,6 @@ on:
       - "README.md"
       - "LICENSE"
   pull_request:
-    paths:
-      - "**"
 
 jobs:
   build:

From 44f552cbcee83d037de0e59496bf6bb19eea2691 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 04:34:32 +0800
Subject: [PATCH 28/64] feat(deps): move `MathJax` configuration to a separate
 file (#1670)

Move `MathJax` configuration to file `assets/js/data/mathjax.js` will help add extensions.
---
 _includes/js-selector.html            | 20 +-------------------
 _posts/2019-08-08-write-a-new-post.md | 10 +++++++++-
 assets/js/data/mathjax.js             | 25 +++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 assets/js/data/mathjax.js

diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 662e9a4..2e52c96 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -72,25 +72,7 @@
 
 {% if page.math %}
   <!-- MathJax -->
-  <script>
-    /* 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: [
-          ['$$', '$$'],
-          ['\\[', '\\]']
-        ],
-        /* equation numbering */
-        tags: 'ams'
-      }
-    };
-  </script>
+  <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 id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 090453b..0492b02 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -109,7 +109,9 @@ comments: false
 
 ## Mathematics
 
-For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+We use [**MathJax**][mathjax] to generate mathematics. For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+
+[mathjax]: https://www.mathjax.org/
 
 ```yaml
 ---
@@ -154,6 +156,12 @@ Can be referenced as \eqref{eq:label_name}.
 3. \$$ LaTeX_math_expression $$
 ```
 
+> Starting with `v7.0.0`, configuration options for **MathJax** have been moved to file `assets/js/data/mathjax.js`{: .filepath }, and you can change the options as needed, such as adding [extensions][mathjax-exts].  
+> If you are building the site via `chirpy-starter`, copy that file from the gem installation directory (check with command `bundle info --path jekyll-theme-chirpy`) to the same directory in your repository.
+{: .prompt-tip }
+
+[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
+
 ## Mermaid
 
 [**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
diff --git a/assets/js/data/mathjax.js b/assets/js/data/mathjax.js
new file mode 100644
index 0000000..ca3d0de
--- /dev/null
+++ b/assets/js/data/mathjax.js
@@ -0,0 +1,25 @@
+---
+layout: compress
+# WARNING: Don't use '//' to comment out code, use '{% comment %}' and '{% endcomment %}' instead.
+---
+
+{%- comment -%}
+  See: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options>
+{%- endcomment -%}
+
+MathJax = {
+  tex: {
+    {%- comment -%} start/end delimiter pairs for in-line math {%- endcomment -%}
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)']
+    ],
+    {%- comment -%} start/end delimiter pairs for display math {%- endcomment -%}
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]']
+    ],
+    {%- comment -%} equation numbering {%- endcomment -%}
+    tags: 'ams'
+  }
+};

From 1914c786a0bdd00ac15db4de45709f31e20e6010 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 04:40:01 +0800
Subject: [PATCH 29/64] docs: add missing head to changelog

---
 docs/CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index bc86dbc..8a686ab 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -17,6 +17,8 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [6.5.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.2...v6.5.3) (2024-03-07)
 
+### Changes
+
 * replace `polyfill.io` with `cdnjs` hosted link ([#1598](https://github.com/cotes2020/jekyll-theme-chirpy/pull/1598)) ([75a3d73](https://github.com/cotes2020/jekyll-theme-chirpy/commit/75a3d7399b257256a09d602cbe01062fe1cdf68d))
 
 ## [6.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.1...v6.5.2) (2024-02-29)

From 7808ee157c7714e88e3ae2b504ae8a2961a02ec6 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 04:45:52 +0800
Subject: [PATCH 30/64] chore: move starter workflow into subfolder

The `.hook` suffix does not make it easy to maintain code in the editor
---
 .../{pages-deploy.yml.hook => starter/pages-deploy.yml}    | 0
 tools/init                                                 | 7 +++----
 2 files changed, 3 insertions(+), 4 deletions(-)
 rename .github/workflows/{pages-deploy.yml.hook => starter/pages-deploy.yml} (100%)

diff --git a/.github/workflows/pages-deploy.yml.hook b/.github/workflows/starter/pages-deploy.yml
similarity index 100%
rename from .github/workflows/pages-deploy.yml.hook
rename to .github/workflows/starter/pages-deploy.yml
diff --git a/tools/init b/tools/init
index bf1ef85..dd15c69 100755
--- a/tools/init
+++ b/tools/init
@@ -87,10 +87,9 @@ init_files() {
     rm -rf .github
   else
     ## Change the files of `.github`
-    mv .github/workflows/$ACTIONS_WORKFLOW.hook .
-    rm -rf .github
-    mkdir -p .github/workflows
-    mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
+    mv .github/workflows/starter/$ACTIONS_WORKFLOW .
+    rm -rf .github && mkdir -p .github/workflows
+    mv ./$ACTIONS_WORKFLOW .github/workflows/${ACTIONS_WORKFLOW}
 
     ## Cleanup image settings in site config
     _sedi "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml

From 8c1be9f2f38606a82925585dc8ad2bc36df8e6d5 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 05:06:06 +0800
Subject: [PATCH 31/64] ci: fix checkout depth for commitlint

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

diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
index f8cb2d5..c9c48c3 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -6,6 +6,4 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
       - uses: wagoid/commitlint-github-action@v6

From bf16d6039ad8e6f9698c45b924725368a1d9d79d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 14 Apr 2024 05:15:27 +0800
Subject: [PATCH 32/64] ci(release): replace `standard-version` with
 `semantic-release` (#1666)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[`standard-version`](https://github.com/conventional-changelog/standard-version/) has been deprecated since May 2022, so it is necessary to stop using it for this project.

[**`semantic-release`**](https://github.com/semantic-release/semantic-release) is available as a more capable alternative to help automate the release process:

1. Updating Node/Gem version numbers
2. Generating changelogs
3. Automating GitHub Releases
4. Building Chirpy-gem and pushing it to RubyGems.org
5. Create commits and tags on the `production` branch
6. Merge the `production` branch into the `master` branch

> ⚠️ Note: Step _6_ may be canceled in CD environments due to merge conflicts, so we need to do this step manually in such cases.

Whenever a commit is pushed to the release branch (`production`), all of the above release processes will be triggered.
---
 .github/workflows/cd.yml      |  38 ++++++--
 .github/workflows/publish.yml |  17 ++++
 docs/CHANGELOG.md             |   2 -
 package.json                  |  93 +++++++++++++++----
 tools/release                 | 170 +++++++++++++++-------------------
 5 files changed, 194 insertions(+), 126 deletions(-)
 create mode 100644 .github/workflows/publish.yml

diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index 2e239a4..bd9d294 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -1,17 +1,37 @@
 name: CD
+
 on:
   push:
-    tags:
-      - "v[0-9]+.[0-9]+.[0-9]+"
     branches:
-      - docs
+      - production
+    tags-ignore:
+      - "**"
 
 jobs:
-  launch:
+  release:
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - run: |
-          curl -X POST -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
-            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
-            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
+      - uses: actions/checkout@v4
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.2
+          bundler-cache: true
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - run: npm install
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GEM_HOST_API_KEY: ${{ secrets.GEM_HOST_API_KEY }}
+
+  publish:
+    needs: release
+    uses: ./.github/workflows/publish.yml
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..20e4691
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,17 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - docs
+  workflow_call:
+
+jobs:
+  launch:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          curl -X POST -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
+            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 8a686ab..8f28580 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,7 +1,5 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
 ## [6.5.5](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.4...v6.5.5) (2024-03-23)
 
 ### Bug Fixes
diff --git a/package.json b/package.json
index b023362..79b8161 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,15 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "conventional-changelog-conventionalcommits": "^7.0.2",
     "husky": "^9.0.11",
     "rimraf": "^5.0.5",
     "rollup": "^4.13.2",
     "rollup-plugin-license": "^3.3.1",
+    "semantic-release": "^23.0.8",
     "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.0.0"
   },
@@ -89,24 +94,76 @@
       "media-feature-range-notation": "prefix"
     }
   },
-  "standard-version": {
-    "skip": {
-      "commit": true,
-      "tag": true
-    },
-    "types": [
-      {
-        "type": "feat",
-        "section": "Features"
-      },
-      {
-        "type": "fix",
-        "section": "Bug Fixes"
-      },
-      {
-        "type": "perf",
-        "section": "Improvements"
-      }
+  "release": {
+    "branches": [
+      "production"
+    ],
+    "plugins": [
+      [
+        "@semantic-release/commit-analyzer",
+        {
+          "preset": "conventionalcommits"
+        }
+      ],
+      [
+        "@semantic-release/release-notes-generator",
+        {
+          "preset": "conventionalcommits",
+          "presetConfig": {
+            "types": [
+              {
+                "type": "feat",
+                "section": "Features"
+              },
+              {
+                "type": "fix",
+                "section": "Bug Fixes"
+              },
+              {
+                "type": "perf",
+                "section": "Improvements"
+              },
+              {
+                "type": "refactor",
+                "section": "Changes",
+                "hidden": true
+              }
+            ]
+          }
+        }
+      ],
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "docs/CHANGELOG.md",
+          "changelogTitle": "# Changelog"
+        }
+      ],
+      [
+        "@semantic-release/npm",
+        {
+          "npmPublish": false
+        }
+      ],
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "bash tools/release --prepare",
+          "publishCmd": "bash tools/release"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "docs",
+            "package.json",
+            "*.gemspec"
+          ],
+          "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
+        }
+      ],
+      "@semantic-release/github"
     ]
   }
 }
diff --git a/tools/release b/tools/release
index 965828b..90b1823 100755
--- a/tools/release
+++ b/tools/release
@@ -1,56 +1,47 @@
 #!/usr/bin/env bash
 #
-# Release a new version to the GitLab flow production branch.
-#
-# For a new major/minor version, bump version on the main branch, and then merge into the production branch.
-#
-# For a patch version, bump the version number on the patch branch, then merge that branch into the main branch
-# and production branch.
-#
-#
-# Usage: run on the default, release or the patch branch
-#
 # Requires: Git, NPM and RubyGems
 
 set -eu
 
-opt_pre=false # preview mode option
+opt_pre=false # option for bump gem version
+opt_pkg=false # option for building gem package
 
-working_branch="$(git branch --show-current)"
-
-DEFAULT_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
-
-PROD_BRANCH="production"
+MAIN_BRANCH="master"
+RELEASE_BRANCH="production"
 
 GEM_SPEC="jekyll-theme-chirpy.gemspec"
-NODE_CONFIG="package.json"
-CHANGE_LOG="docs/CHANGELOG.md"
+NODE_SPEC="package.json"
+CHANGELOG="docs/CHANGELOG.md"
+CONFIG="_config.yml"
 
 JS_DIST="assets/js/dist"
-BACKUP_PATH="$(mktemp -d)"
 
 FILES=(
   "$GEM_SPEC"
-  "$NODE_CONFIG"
+  "$NODE_SPEC"
+  "$CHANGELOG"
+  "$CONFIG"
 )
 
 TOOLS=(
   "git"
   "npm"
-  "standard-version"
   "gem"
 )
 
 help() {
-  echo "A tool to release new version Chirpy gem"
+  echo -e "A tool to release new version Chirpy gem.\nThis tool will:"
+  echo "  1. Build a new gem and publish it to RubyGems.org"
+  echo "  2. Merge the release branch into the default branch"
   echo
   echo "Usage:"
-  echo
-  echo "   bash ./tools/release [options]"
+  echo "  bash ./tools/release [options]"
   echo
   echo "Options:"
-  echo "     -p, --preview            Enable preview mode, only package, and will not modify the branches"
-  echo "     -h, --help               Print this information."
+  echo "  --prepare           Preparation for release"
+  echo "  -p, --package       Build a gem package only, for local packaging in case of auto-publishing failure"
+  echo "  -h, --help          Display this help message"
 }
 
 _check_cli() {
@@ -70,11 +61,9 @@ _check_git() {
     exit 1
   fi
 
-  $opt_pre || (
-    if [[ $working_branch != "$DEFAULT_BRANCH" &&
-      $working_branch != hotfix/* &&
-      $working_branch != "$PROD_BRANCH" ]]; then
-      echo "> Abort: Please run on the default, release or patch branch."
+  $opt_pkg || (
+    if [[ "$(git branch --show-current)" != "$RELEASE_BRANCH" ]]; then
+      echo "> Abort: Please run the tool in the '$RELEASE_BRANCH' branch."
       exit 1
     fi
   )
@@ -103,108 +92,95 @@ check() {
   _check_node_packages
 }
 
-# Auto-generate a new version number to the file 'package.json'
-bump_node() {
-  bump="standard-version -i $CHANGE_LOG"
+## Bump new version to gem-spec file
+_bump_version() {
+  _version="$(grep '"version":' "$NODE_SPEC" | sed 's/.*: "//;s/".*//')"
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_version/" "$GEM_SPEC"
+  echo "> Bump gem version to $_version"
+}
 
-  if $opt_pre; then
-    bump="$bump -p rc"
-  fi
-
-  eval "$bump"
-
-  # Change heading of Patch version to heading level 2 (a bug from `standard-version`)
-  sed -i "s/^### \[/## \[/g" "$CHANGE_LOG"
+_improve_changelog() {
   # Replace multiple empty lines with a single empty line
-  sed -i "/^$/N;/^\n$/D" "$CHANGE_LOG"
+  sed -i '/^$/N;/^\n$/D' "$CHANGELOG"
+  # Escape left angle brackets of HTML tag in the changelog as they break the markdown structure. e.g., '<hr>'
+  sed -i -E 's/\s(<[a-z])/ \\\1/g' "$CHANGELOG"
 }
 
-## Bump new version to gem config file
-bump_gem() {
-  _ver="$1"
-
-  if $opt_pre; then
-    _ver="${1/-/.}"
-  fi
-
-  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_ver/" "$GEM_SPEC"
-}
-
-# Creates a new tag on the production branch with the given version number.
-# Also commits the changes and merges the production branch into the default branch.
-branch() {
-  _version="$1" # X.Y.Z
-
-  git add .
-  git commit -m "chore(release): $_version"
-
-  # Create a new tag on production branch
-  echo -e "> Create tag v$_version\n"
-  git tag "v$_version"
-
-  git checkout "$DEFAULT_BRANCH"
-  git merge --no-ff --no-edit "$PROD_BRANCH"
-
-  if [[ $working_branch == hotfix/* ]]; then
-    # delete the patch branch
-    git branch -D "$working_branch"
-  fi
+prepare() {
+  _bump_version
+  _improve_changelog
 }
 
 ## Build a Gem package
 build_gem() {
-  git checkout "$PROD_BRANCH"
+  if $opt_pkg; then
+    BACKUP_PATH="$(mktemp -d)"
+    cp "$JS_DIST"/* "$BACKUP_PATH"
+  fi
 
   # Remove unnecessary theme settings
-  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
+  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" $CONFIG
   rm -f ./*.gem
 
   npm run build
   git add "$JS_DIST" -f # add JS distribution files to gem
   gem build "$GEM_SPEC"
-  cp "$JS_DIST"/* "$BACKUP_PATH"
 
-  # Resume the settings
+  # resume the settings
   git reset
   git checkout .
 
-  # restore the dist files for future development
-  mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
+  if $opt_pkg; then
+    # restore the dist files for future development
+    mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
+    rm -rf "$BACKUP_PATH"
+  fi
+}
 
-  # back to the default branch
-  git checkout "$DEFAULT_BRANCH"
+# Push the gem to RubyGems.org (using $GEM_HOST_API_KEY)
+push_gem() {
+  gem push ./*.gem
+}
+
+## Merge the release branch into the default branch
+merge() {
+  git fetch origin "$MAIN_BRANCH"
+  git checkout -b "$MAIN_BRANCH" origin/"$MAIN_BRANCH"
+
+  git merge --no-ff --no-edit "$RELEASE_BRANCH" || (
+    git merge --abort
+    echo -e "\n> Conflict detected. Aborting merge.\n"
+    exit 0
+  )
+
+  git push origin "$MAIN_BRANCH"
 }
 
 main() {
   check
 
-  if [[ $opt_pre = false && $working_branch != "$PROD_BRANCH" ]]; then
-    git checkout "$PROD_BRANCH"
-    git merge --no-ff --no-edit "$working_branch"
+  if $opt_pre; then
+    prepare
+    exit 0
   fi
 
-  bump_node
-
-  _version="$(grep '"version":' "$NODE_CONFIG" | sed 's/.*: "//;s/".*//')"
-
-  bump_gem "$_version"
-
-  if [[ $opt_pre = false ]]; then
-    branch "$_version"
-  fi
-
-  echo -e "> Build the gem package for v$_version\n"
-
   build_gem
+  $opt_pkg && exit 0
+  push_gem
+  merge
 }
 
 while (($#)); do
   opt="$1"
   case $opt in
-  -p | --preview)
+  --prepare)
     opt_pre=true
     shift
     ;;
+  -p | --package)
+    opt_pkg=true
+    shift
+    ;;
   -h | --help)
     help
     exit 0

From c85e9e239491dfafea83b68660807e6675edce44 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 17 Apr 2024 06:00:36 +0800
Subject: [PATCH 33/64] ci: avoid trigger redundant workflows (#1682)

CodeQL and Sytle Lint
---
 .github/workflows/codeql.yml     |  1 +
 .github/workflows/style-lint.yml | 10 +++-------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index b09590d..06feb7f 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -2,6 +2,7 @@ name: "CodeQL"
 
 on:
   push:
+    branches: ["master"]
     paths: ["_javascript/**/*.js"]
   pull_request:
     paths: ["_javascript/**/*.js"]
diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml
index f7aa54d..e095978 100644
--- a/.github/workflows/style-lint.yml
+++ b/.github/workflows/style-lint.yml
@@ -2,14 +2,10 @@ name: "Style Lint"
 
 on:
   push:
-    branches-ignore:
-      - "production"
-      - "docs"
-    paths:
-      - "_sass/**/*.scss"
+    branches: ["master"]
+    paths: ["_sass/**/*.scss"]
   pull_request:
-    paths:
-      - "_sass/**/*.scss"
+    paths: ["_sass/**/*.scss"]
 
 jobs:
   stylelint:

From fe7afa379f0af0ca98a207f85bdc0fa98575b1ad Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 17 Apr 2024 06:10:01 +0800
Subject: [PATCH 34/64] perf: replace jQuery with Vanilla JS (#1681)

Also replaced `magnific-popup` with `GLightbox`
---
 _data/origin/basic.yml                        |   9 +-
 _data/origin/cors.yml                         |   9 +-
 _includes/comments/disqus.html                |   4 +-
 _includes/comments/giscus.html                |   3 +-
 _includes/comments/utterances.html            |   3 +-
 _includes/head.html                           |   4 +-
 _includes/js-selector.html                    |  11 +-
 _includes/mermaid.html                        |  50 +++----
 _includes/sidebar.html                        |   2 +-
 _includes/topbar.html                         |   2 +-
 _javascript/modules/components/back-to-top.js |  15 +-
 .../modules/components/category-collapse.js   |  49 +++----
 _javascript/modules/components/clipboard.js   | 131 +++++++++---------
 _javascript/modules/components/img-loading.js |  36 +++--
 _javascript/modules/components/img-popup.js   |  17 +--
 .../modules/components/locale-datetime.js     |  40 +++---
 .../modules/components/mode-watcher.js        |  15 +-
 .../modules/components/search-display.js      | 126 ++++++++---------
 _javascript/modules/components/sidebar.js     |  12 +-
 _sass/addon/commons.scss                      |  25 ++--
 assets/js/pwa/app.js                          |  14 +-
 assets/lib                                    |   2 +-
 22 files changed, 274 insertions(+), 305 deletions(-)

diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml
index ed99ea8..7382251 100644
--- a/_data/origin/basic.yml
+++ b/_data/origin/basic.yml
@@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css
 
 # Libraries
 
-jquery:
-  js: /assets/lib/jquery/jquery.min.js
-
 bootstrap:
   css: /assets/lib/bootstrap/bootstrap.min.css
   js: /assets/lib/bootstrap/bootstrap.bundle.min.js
@@ -31,9 +28,9 @@ dayjs:
     relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
     localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
 
-magnific-popup:
-  css: /assets/lib/magnific-popup/magnific-popup.css
-  js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
+glightbox:
+  css: /assets/lib/glightbox/glightbox.min.css
+  js: /assets/lib/glightbox/glightbox.min.js
 
 lazy-polyfill:
   css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index 614139f..a10d31c 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -17,9 +17,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 # Libraries
 
-jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
-
 bootstrap:
   css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
   js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
@@ -44,9 +41,9 @@ dayjs:
     relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.min.js
     localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/localizedFormat.min.js
 
-magnific-popup:
-  css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
-  js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
+glightbox:
+  css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js
 
 lazy-polyfill:
   css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css
diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
index e59ed37..bef843a 100644
--- a/_includes/comments/disqus.html
+++ b/_includes/comments/disqus.html
@@ -28,7 +28,7 @@
     { threshold: [0] }
   );
 
-  disqus_observer.observe(document.querySelector('#disqus_thread'));
+  disqus_observer.observe(document.getElementById('disqus_thread'));
 
   /* Auto switch theme */
   function reloadDisqus() {
@@ -44,7 +44,7 @@
     }
   }
 
-  if (document.querySelector('.mode-toggle')) {
+  if (document.getElementById('mode-toggle')) {
     window.addEventListener('message', reloadDisqus);
   }
 </script>
diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
index 526aa22..f3b8a54 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -2,7 +2,6 @@
 <script type="text/javascript">
   (function () {
     const origin = 'https://giscus.app';
-    const iframe = 'iframe.giscus-frame';
     const lightTheme = 'light';
     const darkTheme = 'dark_dimmed';
 
@@ -58,7 +57,7 @@
           }
         };
 
-        const giscus = document.querySelector(iframe).contentWindow;
+        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
         giscus.postMessage({ giscus: message }, origin);
       }
     });
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
index 34dddcd..84818be 100644
--- a/_includes/comments/utterances.html
+++ b/_includes/comments/utterances.html
@@ -10,7 +10,6 @@
 <script type="text/javascript">
   (function () {
     const origin = 'https://utteranc.es';
-    const iframe = 'iframe.utterances-frame';
     const lightTheme = 'github-light';
     const darkTheme = 'github-dark';
     let initTheme = lightTheme;
@@ -43,7 +42,7 @@
         theme: theme
       };
 
-      const utterances = document.querySelector(iframe).contentWindow;
+      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
       utterances.postMessage(message, origin);
     });
   })();
diff --git a/_includes/head.html b/_includes/head.html
index 67c5390..f3434cf 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -97,8 +97,8 @@
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
-    <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
+    <!-- Image Popup -->
+    <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 2e52c96..78ef541 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -2,12 +2,9 @@
 
 <!-- commons -->
 
-{% assign urls = site.data.origin[type].jquery.js
-  | append: ','
-  | append: site.data.origin[type].bootstrap.js
-  | append: ','
-  | append: site.data.origin[type].search.js
-%}
+{%- capture urls -%}
+  {{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
+{%- endcapture -%}
 
 <!-- layout specified -->
 
@@ -20,7 +17,7 @@
     <!-- image lazy-loading & popup & clipboard -->
     {% assign urls = urls
       | append: ','
-      | append: site.data.origin[type]['magnific-popup'].js
+      | append: site.data.origin[type].glightbox.js
       | append: ','
       | append: site.data.origin[type].clipboard.js
     %}
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index 967cfb4..a6eac8b 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -1,29 +1,31 @@
 <!-- mermaid-js loader -->
 <script type="text/javascript">
-  (function () {
-    function updateMermaid(event) {
-      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        const mode = event.data.message;
+  function updateMermaid(event) {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      const mode = event.data.message;
 
-        if (typeof mermaid === 'undefined') {
-          return;
-        }
-
-        let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
-        let config = { theme: expectedTheme };
-
-        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $('.mermaid').each(function () {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr('data-processed');
-          $(this).html(svgCode);
-        });
-
-        mermaid.initialize(config);
-        mermaid.init(undefined, '.mermaid');
+      if (typeof mermaid === 'undefined') {
+        return;
       }
-    }
 
+      let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
+      let config = { theme: expectedTheme };
+
+      /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+      const mermaidList = document.getElementsByClassName('mermaid');
+
+      [...mermaidList].forEach((elem) => {
+        const svgCode = elem.previousSibling.children.item(0).innerHTML;
+        elem.innerHTML = svgCode;
+        elem.removeAttribute('data-processed');
+      });
+
+      mermaid.initialize(config);
+      mermaid.init(undefined, '.mermaid');
+    }
+  }
+
+  (function () {
     let initTheme = 'default';
     const html = document.documentElement;
 
@@ -35,11 +37,12 @@
     }
 
     let mermaidConf = {
-      theme: initTheme /* <default|dark|forest|neutral> */
+      theme: initTheme /* <default | dark | forest | neutral> */
     };
 
     /* Create mermaid tag */
-    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+    const basicList = document.getElementsByClassName('language-mermaid');
+    [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
       backup.classList.add('unloaded');
@@ -52,7 +55,6 @@
     });
 
     mermaid.initialize(mermaidConf);
-
     window.addEventListener('message', updateMermaid);
   })();
 </script>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 0b5560a..577cc13 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -44,7 +44,7 @@
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 
diff --git a/_includes/topbar.html b/_includes/topbar.html
index d85101a..fd68d1f 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -59,7 +59,7 @@
       <i class="fas fa-search fa-fw"></i>
     </button>
 
-    <search class="align-items-center ms-3 ms-lg-0">
+    <search id="search" class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"
diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js
index 777a659..40d9cd1 100644
--- a/_javascript/modules/components/back-to-top.js
+++ b/_javascript/modules/components/back-to-top.js
@@ -3,18 +3,17 @@
  */
 
 export function back2top() {
-  const $window = $(window);
-  const $btn = $('#back-to-top');
+  const btn = document.getElementById('back-to-top');
 
-  $window.on('scroll', () => {
-    if ($window.scrollTop() > 50) {
-      $btn.fadeIn();
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      btn.classList.add('show');
     } else {
-      $btn.fadeOut();
+      btn.classList.remove('show');
     }
   });
 
-  $btn.on('click', () => {
-    $window.scrollTop(0);
+  btn.addEventListener('click', () => {
+    window.scrollTo({ top: 0 });
   });
 }
diff --git a/_javascript/modules/components/category-collapse.js b/_javascript/modules/components/category-collapse.js
index d6027a1..b530626 100644
--- a/_javascript/modules/components/category-collapse.js
+++ b/_javascript/modules/components/category-collapse.js
@@ -3,34 +3,31 @@
  */
 const childPrefix = 'l_';
 const parentPrefix = 'h_';
-const collapse = $('.collapse');
+const children = document.getElementsByClassName('collapse');
 
 export function categoryCollapse() {
-  /* close up top-category */
-  collapse.on('hide.bs.collapse', function () {
-    /* Bootstrap collapse events. */ const parentId =
-      parentPrefix + $(this).attr('id').substring(childPrefix.length);
-    if (parentId) {
-      $(`#${parentId} .far.fa-folder-open`).attr(
-        'class',
-        'far fa-folder fa-fw'
-      );
-      $(`#${parentId} i.fas`).addClass('rotate');
-      $(`#${parentId}`).removeClass('hide-border-bottom');
-    }
-  });
+  [...children].forEach((elem) => {
+    const id = parentPrefix + elem.id.substring(childPrefix.length);
+    const parent = document.getElementById(id);
 
-  /* expand the top category */
-  collapse.on('show.bs.collapse', function () {
-    const parentId =
-      parentPrefix + $(this).attr('id').substring(childPrefix.length);
-    if (parentId) {
-      $(`#${parentId} .far.fa-folder`).attr(
-        'class',
-        'far fa-folder-open fa-fw'
-      );
-      $(`#${parentId} i.fas`).removeClass('rotate');
-      $(`#${parentId}`).addClass('hide-border-bottom');
-    }
+    // collapse sub-categories
+    elem.addEventListener('hide.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder-open').className =
+          'far fa-folder fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
+        parent.classList.remove('hide-border-bottom');
+      }
+    });
+
+    // expand sub-categories
+    elem.addEventListener('show.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder').className =
+          'far fa-folder-open fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.remove('rotate');
+        parent.classList.add('hide-border-bottom');
+      }
+    });
   });
 }
diff --git a/_javascript/modules/components/clipboard.js b/_javascript/modules/components/clipboard.js
index 68f6afd..8d4b23f 100644
--- a/_javascript/modules/components/clipboard.js
+++ b/_javascript/modules/components/clipboard.js
@@ -7,102 +7,103 @@
  */
 
 const clipboardSelector = '.code-header>button';
+
+const ICON_DEFAULT = 'far fa-clipboard';
 const ICON_SUCCESS = 'fas fa-check';
+
 const ATTR_TIMEOUT = 'timeout';
 const ATTR_TITLE_SUCCEED = 'data-title-succeed';
 const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
 const TIMEOUT = 2000; // in milliseconds
 
 function isLocked(node) {
-  if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
-    let timeout = $(node).attr(ATTR_TIMEOUT);
+  if (node.hasAttribute(ATTR_TIMEOUT)) {
+    let timeout = node.getAttribute(ATTR_TIMEOUT);
     if (Number(timeout) > Date.now()) {
       return true;
     }
   }
+
   return false;
 }
 
 function lock(node) {
-  $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+  node.setAttribute(ATTR_TIMEOUT, Date.now() + TIMEOUT);
 }
 
 function unlock(node) {
-  $(node).removeAttr(ATTR_TIMEOUT);
+  node.removeAttribute(ATTR_TIMEOUT);
 }
 
-function getIcon(btn) {
-  let iconNode = $(btn).children();
-  return iconNode.attr('class');
-}
-
-const ICON_DEFAULT = getIcon(clipboardSelector);
-
 function showTooltip(btn) {
-  const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
-  $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+  const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
+  btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+  bootstrap.Tooltip.getInstance(btn).show();
 }
 
 function hideTooltip(btn) {
-  $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN);
+  bootstrap.Tooltip.getInstance(btn).hide();
+  btn.removeAttribute(ATTR_TITLE_ORIGIN);
 }
 
 function setSuccessIcon(btn) {
-  let btnNode = $(btn);
-  let iconNode = btnNode.children();
-  iconNode.attr('class', ICON_SUCCESS);
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_SUCCESS);
 }
 
 function resumeIcon(btn) {
-  let btnNode = $(btn);
-  let iconNode = btnNode.children();
-  iconNode.attr('class', ICON_DEFAULT);
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_DEFAULT);
 }
 
 export function initClipboard() {
-  // Initial the clipboard.js object
-  if ($(clipboardSelector).length) {
-    const clipboard = new ClipboardJS(clipboardSelector, {
-      target(trigger) {
-        let codeBlock = trigger.parentNode.nextElementSibling;
-        return codeBlock.querySelector('code .rouge-code');
-      }
-    });
+  const clipboardList = document.querySelectorAll(clipboardSelector);
 
-    const clipboardList = document.querySelectorAll(clipboardSelector);
-    [...clipboardList].map(
-      (elem) =>
-        new bootstrap.Tooltip(elem, {
-          placement: 'left'
-        })
-    );
-
-    clipboard.on('success', (e) => {
-      e.clearSelection();
-
-      const trigger = e.trigger;
-      if (isLocked(trigger)) {
-        return;
-      }
-
-      setSuccessIcon(trigger);
-      showTooltip(trigger);
-      lock(trigger);
-
-      setTimeout(() => {
-        hideTooltip(trigger);
-        resumeIcon(trigger);
-        unlock(trigger);
-      }, TIMEOUT);
-    });
+  if (clipboardList.length === 0) {
+    return;
   }
 
+  // Initial the clipboard.js object
+  const clipboard = new ClipboardJS(clipboardSelector, {
+    target: (trigger) => {
+      const codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
+    }
+  });
+
+  [...clipboardList].map(
+    (elem) =>
+      new bootstrap.Tooltip(elem, {
+        placement: 'left'
+      })
+  );
+
+  clipboard.on('success', (e) => {
+    const trigger = e.trigger;
+
+    e.clearSelection();
+
+    if (isLocked(trigger)) {
+      return;
+    }
+
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+    lock(trigger);
+
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+      unlock(trigger);
+    }, TIMEOUT);
+  });
+
   /* --- Post link sharing --- */
 
-  const btnCopyLink = $('#copy-link');
+  const btnCopyLink = document.getElementById('copy-link');
 
-  btnCopyLink.on('click', (e) => {
-    let target = $(e.target);
+  btnCopyLink.addEventListener('click', (e) => {
+    const target = e.target;
 
     if (isLocked(target)) {
       return;
@@ -110,21 +111,23 @@ export function initClipboard() {
 
     // Copy URL to clipboard
     navigator.clipboard.writeText(window.location.href).then(() => {
-      const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
-      const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
+      const defaultTitle = target.getAttribute(ATTR_TITLE_ORIGIN);
+      const succeedTitle = target.getAttribute(ATTR_TITLE_SUCCEED);
+
       // Switch tooltip title
-      target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+      target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+      bootstrap.Tooltip.getInstance(target).show();
+
       lock(target);
 
       setTimeout(() => {
-        target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
+        target.setAttribute(ATTR_TITLE_ORIGIN, defaultTitle);
         unlock(target);
       }, TIMEOUT);
     });
   });
 
-  btnCopyLink.on('mouseleave', function (e) {
-    const target = $(e.target);
-    target.tooltip('hide');
+  btnCopyLink.addEventListener('mouseleave', (e) => {
+    bootstrap.Tooltip.getInstance(e.target).hide();
   });
 }
diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js
index c9b7b7f..989d9e6 100644
--- a/_javascript/modules/components/img-loading.js
+++ b/_javascript/modules/components/img-loading.js
@@ -11,7 +11,7 @@ const cover = {
 };
 
 function removeCover(clzss) {
-  $(this).parent().removeClass(clzss);
+  this.parentElement.classList.remove(clzss);
 }
 
 function handleImage() {
@@ -30,32 +30,38 @@ function handleImage() {
  * Switches the LQIP with the real image URL.
  */
 function switchLQIP() {
-  const $img = $(this);
-  const src = $img.attr(ATTR_DATA_SRC);
-
-  $img.attr('src', encodeURI(src));
-  $img.removeAttr(ATTR_DATA_SRC);
+  const src = this.getAttribute(ATTR_DATA_SRC);
+  this.setAttribute('src', encodeURI(src));
+  this.removeAttribute(ATTR_DATA_SRC);
 }
 
 export function loadImg() {
-  const $images = $('article img');
+  const images = document.querySelectorAll('article img');
 
-  if ($images.length) {
-    $images.on('load', handleImage);
+  if (images.length === 0) {
+    return;
   }
 
+  images.forEach((img) => {
+    img.addEventListener('load', handleImage);
+  });
+
   // Images loaded from the browser cache do not trigger the 'load' event
-  $('article img[loading="lazy"]').each(function () {
-    if (this.complete) {
-      removeCover.call(this, cover.SHIMMER);
+  document.querySelectorAll('article img[loading="lazy"]').forEach((img) => {
+    if (img.complete) {
+      removeCover.call(img, cover.SHIMMER);
     }
   });
 
   // LQIPs set by the data URI or WebP will not trigger the 'load' event,
   // so manually convert the URI to the URL of a high-resolution image.
-  const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`);
+  const lqips = document.querySelectorAll(
+    `article img[${ATTR_DATA_LQIP}="true"]`
+  );
 
-  if ($lqips.length) {
-    $lqips.each(switchLQIP);
+  if (lqips.length) {
+    lqips.forEach((lqip) => {
+      switchLQIP.call(lqip);
+    });
   }
 }
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
index 7f78d99..b5c7c6e 100644
--- a/_javascript/modules/components/img-popup.js
+++ b/_javascript/modules/components/img-popup.js
@@ -1,22 +1,15 @@
 /**
  * Set up image popup
  *
- * See: https://github.com/dimsemenov/Magnific-Popup
+ * Dependencies: https://github.com/biati-digital/glightbox
  */
 
+const IMG_CLASS = 'popup';
+
 export function imgPopup() {
-  if ($('.popup') <= 0) {
+  if (document.getElementsByClassName(IMG_CLASS).length === 0) {
     return;
   }
 
-  $('.popup').magnificPopup({
-    type: 'image',
-    closeOnContentClick: true,
-    showCloseBtn: false,
-    zoom: {
-      enabled: true,
-      duration: 300,
-      easing: 'ease-in-out'
-    }
-  });
+  GLightbox({ selector: `.${IMG_CLASS}` });
 }
diff --git a/_javascript/modules/components/locale-datetime.js b/_javascript/modules/components/locale-datetime.js
index 214f2bf..eb75626 100644
--- a/_javascript/modules/components/locale-datetime.js
+++ b/_javascript/modules/components/locale-datetime.js
@@ -15,15 +15,15 @@ class LocaleHelper {
   }
 
   static get locale() {
-    return $('html').attr('lang').substring(0, 2);
+    return document.documentElement.getAttribute('lang').substring(0, 2);
   }
 
   static getTimestamp(elem) {
-    return Number(elem.attr(LocaleHelper.attrTimestamp)); // unix timestamp
+    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
   }
 
   static getDateFormat(elem) {
-    return elem.attr(LocaleHelper.attrDateFormat);
+    return elem.getAttribute(this.attrDateFormat);
   }
 }
 
@@ -31,21 +31,23 @@ export function initLocaleDatetime() {
   dayjs.locale(LocaleHelper.locale);
   dayjs.extend(window.dayjs_plugin_localizedFormat);
 
-  $(`[${LocaleHelper.attrTimestamp}]`).each(function () {
-    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
-    const text = date.format(LocaleHelper.getDateFormat($(this)));
-    $(this).text(text);
-    $(this).removeAttr(LocaleHelper.attrTimestamp);
-    $(this).removeAttr(LocaleHelper.attrDateFormat);
+  document
+    .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`)
+    .forEach((elem) => {
+      const date = dayjs.unix(LocaleHelper.getTimestamp(elem));
+      const text = date.format(LocaleHelper.getDateFormat(elem));
+      elem.textContent = text;
+      elem.removeAttribute(LocaleHelper.attrTimestamp);
+      elem.removeAttribute(LocaleHelper.attrDateFormat);
 
-    // setup tooltips
-    const tooltip = $(this).attr('data-bs-toggle');
-    if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
-      return;
-    }
-
-    const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    $(this).attr('data-bs-title', tooltipText);
-    new bootstrap.Tooltip($(this));
-  });
+      // setup tooltips
+      if (
+        elem.hasAttribute('data-bs-toggle') &&
+        elem.getAttribute('data-bs-toggle') === 'tooltip'
+      ) {
+        // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
+        const tooltipText = date.format('llll');
+        elem.setAttribute('data-bs-title', tooltipText);
+      }
+    });
 }
diff --git a/_javascript/modules/components/mode-watcher.js b/_javascript/modules/components/mode-watcher.js
index 7b2298a..9eecd09 100644
--- a/_javascript/modules/components/mode-watcher.js
+++ b/_javascript/modules/components/mode-watcher.js
@@ -1,21 +1,14 @@
 /**
  * Add listener for theme mode toggle
  */
-const $toggleElem = $('.mode-toggle');
+const toggle = document.getElementById('mode-toggle');
 
 export function modeWatcher() {
-  if ($toggleElem.length === 0) {
+  if (!toggle) {
     return;
   }
 
-  $toggleElem.off().on('click', (e) => {
-    const $target = $(e.target);
-    let $btn =
-      $target.prop('tagName') === 'button'.toUpperCase()
-        ? $target
-        : $target.parent();
-
-    modeToggle.flipMode(); // modeToggle: `_includes/mode-toggle.html`
-    $btn.trigger('blur'); // remove the clicking outline
+  toggle.addEventListener('click', () => {
+    modeToggle.flipMode();
   });
 }
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
index ad009c2..98a97ab 100644
--- a/_javascript/modules/components/search-display.js
+++ b/_javascript/modules/components/search-display.js
@@ -1,121 +1,109 @@
 /**
  * This script make #search-result-wrapper switch to unloaded or shown automatically.
  */
-const $btnSbTrigger = $('#sidebar-trigger');
-const $btnSearchTrigger = $('#search-trigger');
-const $btnCancel = $('#search-cancel');
-const $content = $('#main-wrapper>.container>.row');
-const $topbarTitle = $('#topbar-title');
-const $search = $('search');
-const $resultWrapper = $('#search-result-wrapper');
-const $results = $('#search-results');
-const $input = $('#search-input');
-const $hints = $('#search-hints');
-const $viewport = $('html,body');
 
-// class names
-const C_LOADED = 'loaded';
-const C_UNLOADED = 'unloaded';
-const C_FOCUS = 'input-focus';
-const C_FLEX = 'd-flex';
+const btnSbTrigger = document.getElementById('sidebar-trigger');
+const btnSearchTrigger = document.getElementById('search-trigger');
+const btnCancel = document.getElementById('search-cancel');
+const content = document.querySelectorAll('#main-wrapper>.container>.row');
+const topbarTitle = document.getElementById('topbar-title');
+const search = document.getElementById('search');
+const resultWrapper = document.getElementById('search-result-wrapper');
+const results = document.getElementById('search-results');
+const input = document.getElementById('search-input');
+const hints = document.getElementById('search-hints');
 
-class ScrollBlocker {
-  static offset = 0;
-  static resultVisible = false;
+// CSS class names
+const LOADED = 'loaded';
+const UNLOADED = 'unloaded';
+const FOCUS = 'input-focus';
+const FLEX = 'd-flex';
 
-  static on() {
-    ScrollBlocker.offset = window.scrollY;
-    $viewport.scrollTop(0);
-  }
-
-  static off() {
-    $viewport.scrollTop(ScrollBlocker.offset);
-  }
-}
-
-/*--- Actions in mobile screens (Sidebar hidden) ---*/
+/* Actions in mobile screens (Sidebar hidden) */
 class MobileSearchBar {
   static on() {
-    $btnSbTrigger.addClass(C_UNLOADED);
-    $topbarTitle.addClass(C_UNLOADED);
-    $btnSearchTrigger.addClass(C_UNLOADED);
-    $search.addClass(C_FLEX);
-    $btnCancel.addClass(C_LOADED);
+    btnSbTrigger.classList.add(UNLOADED);
+    topbarTitle.classList.add(UNLOADED);
+    btnSearchTrigger.classList.add(UNLOADED);
+    search.classList.add(FLEX);
+    btnCancel.classList.add(LOADED);
   }
 
   static off() {
-    $btnCancel.removeClass(C_LOADED);
-    $search.removeClass(C_FLEX);
-    $btnSbTrigger.removeClass(C_UNLOADED);
-    $topbarTitle.removeClass(C_UNLOADED);
-    $btnSearchTrigger.removeClass(C_UNLOADED);
+    btnCancel.classList.remove(LOADED);
+    search.classList.remove(FLEX);
+    btnSbTrigger.classList.remove(UNLOADED);
+    topbarTitle.classList.remove(UNLOADED);
+    btnSearchTrigger.classList.remove(UNLOADED);
   }
 }
 
 class ResultSwitch {
+  static resultVisible = false;
+
   static on() {
-    if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main-wrapper>.container) unloaded.
-      ScrollBlocker.on();
-      $resultWrapper.removeClass(C_UNLOADED);
-      $content.addClass(C_UNLOADED);
-      ScrollBlocker.resultVisible = true;
+    if (!this.resultVisible) {
+      resultWrapper.classList.remove(UNLOADED);
+      content.forEach((el) => {
+        el.classList.add(UNLOADED);
+      });
+      this.resultVisible = true;
     }
   }
 
   static off() {
-    if (ScrollBlocker.resultVisible) {
-      $results.empty();
-      if ($hints.hasClass(C_UNLOADED)) {
-        $hints.removeClass(C_UNLOADED);
+    if (this.resultVisible) {
+      results.innerHTML = '';
+
+      if (hints.classList.contains(UNLOADED)) {
+        hints.classList.remove(UNLOADED);
       }
-      $resultWrapper.addClass(C_UNLOADED);
-      $content.removeClass(C_UNLOADED);
 
-      // now the release method must be called after $(#main-wrapper>.container) display
-      ScrollBlocker.off();
-
-      $input.val('');
-      ScrollBlocker.resultVisible = false;
+      resultWrapper.classList.add(UNLOADED);
+      content.forEach((el) => {
+        el.classList.remove(UNLOADED);
+      });
+      input.textContent = '';
+      this.resultVisible = false;
     }
   }
 }
 
 function isMobileView() {
-  return $btnCancel.hasClass(C_LOADED);
+  return btnCancel.classList.contains(LOADED);
 }
 
 export function displaySearch() {
-  $btnSearchTrigger.on('click', function () {
+  btnSearchTrigger.addEventListener('click', () => {
     MobileSearchBar.on();
     ResultSwitch.on();
-    $input.trigger('focus');
+    input.focus();
   });
 
-  $btnCancel.on('click', function () {
+  btnCancel.addEventListener('click', () => {
     MobileSearchBar.off();
     ResultSwitch.off();
   });
 
-  $input.on('focus', function () {
-    $search.addClass(C_FOCUS);
+  input.addEventListener('focus', () => {
+    search.classList.add(FOCUS);
   });
 
-  $input.on('focusout', function () {
-    $search.removeClass(C_FOCUS);
+  input.addEventListener('focusout', () => {
+    search.classList.remove(FOCUS);
   });
 
-  $input.on('input', () => {
-    if ($input.val() === '') {
+  input.addEventListener('input', () => {
+    if (input.value === '') {
       if (isMobileView()) {
-        $hints.removeClass(C_UNLOADED);
+        hints.classList.remove(UNLOADED);
       } else {
         ResultSwitch.off();
       }
     } else {
       ResultSwitch.on();
       if (isMobileView()) {
-        $hints.addClass(C_UNLOADED);
+        hints.classList.add(UNLOADED);
       }
     }
   });
diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js
index 9d8567e..6b562d8 100644
--- a/_javascript/modules/components/sidebar.js
+++ b/_javascript/modules/components/sidebar.js
@@ -2,7 +2,6 @@
  * Expand or close the sidebar in mobile screens.
  */
 
-const $body = $('body');
 const ATTR_DISPLAY = 'sidebar-display';
 
 class SidebarUtil {
@@ -10,9 +9,9 @@ class SidebarUtil {
 
   static toggle() {
     if (SidebarUtil.isExpanded === false) {
-      $body.attr(ATTR_DISPLAY, '');
+      document.body.setAttribute(ATTR_DISPLAY, '');
     } else {
-      $body.removeAttr(ATTR_DISPLAY);
+      document.body.removeAttribute(ATTR_DISPLAY);
     }
 
     SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
@@ -20,6 +19,9 @@ class SidebarUtil {
 }
 
 export function sidebarExpand() {
-  $('#sidebar-trigger').on('click', SidebarUtil.toggle);
-  $('#mask').on('click', SidebarUtil.toggle);
+  document
+    .getElementById('sidebar-trigger')
+    .addEventListener('click', SidebarUtil.toggle);
+
+  document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
 }
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 678db47..e02a79f 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -672,18 +672,6 @@ main {
 
 /* --- Overriding --- */
 
-/* magnific-popup */
-
-figure .mfp-title {
-  text-align: center;
-  padding-right: 0;
-  margin-top: 0.5rem;
-}
-
-.mfp-img {
-  transition: none;
-}
-
 /* mermaid */
 .mermaid {
   text-align: center;
@@ -876,7 +864,7 @@ $btn-mb: 0.5rem;
       line-height: $btn-size;
     }
 
-    .mode-toggle {
+    #mode-toggle {
       padding: 0;
       border: 0;
 
@@ -1158,7 +1146,8 @@ search {
 /* --- button back-to-top --- */
 
 #back-to-top {
-  display: none;
+  visibility: hidden;
+  opacity: 0;
   z-index: 1;
   cursor: pointer;
   position: fixed;
@@ -1171,8 +1160,7 @@ search {
   height: $back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
-  transition: transform 0.2s ease-out;
-  -webkit-transition: transform 0.2s ease-out;
+  transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
 
   &:hover {
     transform: translate3d(0, -5px, 0);
@@ -1184,6 +1172,11 @@ search {
     position: relative;
     bottom: 2px;
   }
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 
 #notification {
diff --git a/assets/js/pwa/app.js b/assets/js/pwa/app.js
index 8599fe3..173ea29 100644
--- a/assets/js/pwa/app.js
+++ b/assets/js/pwa/app.js
@@ -8,30 +8,32 @@ if ('serviceWorker' in navigator) {
 
   if (isEnabled) {
     const swUrl = '{{ '/sw.min.js' | relative_url }}';
-    const $notification = $('#notification');
-    const $btnRefresh = $('#notification .toast-body>button');
+    const notification = document.getElementById('notification');
+    const btnRefresh = notification.querySelector('.toast-body>button');
+    const popupWindow = bootstrap.Toast.getOrCreateInstance(notification);
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
       {% comment %}In case the user ignores the notification{% endcomment %}
       if (registration.waiting) {
-        $notification.toast('show');
+        popupWindow.show();
       }
 
       registration.addEventListener('updatefound', () => {
         registration.installing.addEventListener('statechange', () => {
           if (registration.waiting) {
             if (navigator.serviceWorker.controller) {
-              $notification.toast('show');
+              popupWindow.show();
             }
           }
         });
       });
 
-      $btnRefresh.on('click', () => {
+      btnRefresh.addEventListener('click', () => {
         if (registration.waiting) {
           registration.waiting.postMessage('SKIP_WAITING');
         }
-        $notification.toast('hide');
+
+        popupWindow.hide();
       });
     });
 
diff --git a/assets/lib b/assets/lib
index 7bc0d86..29d7021 160000
--- a/assets/lib
+++ b/assets/lib
@@ -1 +1 @@
-Subproject commit 7bc0d86b6af83d7acfc63db50f29a5975cec2513
+Subproject commit 29d7021f45317d02df9a3297d3c52a30bd4ae795

From d013c11c8d7b980261f54b3dd31c2b00399ad814 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 17 Apr 2024 19:25:28 +0800
Subject: [PATCH 35/64] docs: update readme

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 5bcfcb7..747b8bc 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
 
 ## Features
 
-- Dark / Light Theme Mode
+- Dark Theme
 - Localized UI language
 - Pinned Posts on Home Page
 - Hierarchical Categories
@@ -30,9 +30,9 @@
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagrams & Flowcharts
-- Dark / Light Mode Images
-- Embed Videos
-- Disqus / Giscus / Utterances Comments
+- Dark Mode Images
+- Embed Media
+- Comment Systems
 - Built-in Search
 - Atom Feeds
 - PWA
@@ -56,7 +56,7 @@ For details, see the "[Contributing Guidelines][contribute-guide]".
 Thanks to [all the contributors][contributors] involved in the development of the project!
 
 [![all-contributors](https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16)][contributors]
-<sub> —— Made with [contrib.rocks](https://contrib.rocks)</sub>
+<sub> — Made with [contrib.rocks](https://contrib.rocks)</sub>
 
 ### Third-Party Assets
 

From 662cd331e3f724a2d1b428dd07b7769c8dd86caa Mon Sep 17 00:00:00 2001
From: Vinicius Rocha <vmrocha@gmail.com>
Date: Fri, 19 Apr 2024 09:36:44 -0400
Subject: [PATCH 36/64] chore: add `.jekyll-metadata` to .gitignore (#1686)

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index cee9e12..3f4427c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ Gemfile.lock
 
 # Jekyll cache
 .jekyll-cache
+.jekyll-metadata
 _site
 
 # RubyGems

From 63c51384dfb8e7ad17dbd92259ae741c8bb77fd3 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 20 Apr 2024 23:59:59 +0800
Subject: [PATCH 37/64] chore: remove comments from compressed HTML

---
 _includes/mode-toggle.html   | 14 ++++++++------
 _includes/search-loader.html |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index a347750..ab20234 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -33,7 +33,7 @@
 
       let self = this;
 
-      /* always follow the system prefers */
+      {%- comment -%} always follow the system prefers {%- endcomment -%}
       this.sysDarkPrefers.addEventListener('change', () => {
         if (self.hasMode) {
           if (self.isDarkMode) {
@@ -51,7 +51,7 @@
 
         self.notify();
       });
-    } /* constructor() */
+    } {%- comment -%} constructor() {%- endcomment -%}
 
     get sysDarkPrefers() {
       return window.matchMedia('(prefers-color-scheme: dark)');
@@ -77,7 +77,7 @@
       return sessionStorage.getItem(ModeToggle.MODE_KEY);
     }
 
-    /* get the current mode on screen */
+    {%- comment -%} get the current mode on screen {%- endcomment -%}
     get modeStatus() {
       if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
         return ModeToggle.DARK_MODE;
@@ -101,7 +101,9 @@
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
-    /* Notify another plugins that the theme mode has changed */
+    {%- comment -%}
+      Notify another plugins that the theme mode has changed
+    {%- endcomment -%}
     notify() {
       window.postMessage(
         {
@@ -136,8 +138,8 @@
       }
 
       this.notify();
-    } /* flipMode() */
-  } /* ModeToggle */
+    }
+  }
 
   const modeToggle = new ModeToggle();
 </script>
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
index be3ca8a..2582580 100644
--- a/_includes/search-loader.html
+++ b/_includes/search-loader.html
@@ -19,7 +19,7 @@
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
 <script>
-  /* Note: dependent library will be loaded in `js-selector.html` */
+  {%- comment -%} Note: dependent library will be loaded in `js-selector.html` {%- endcomment -%}
   SimpleJekyllSearch({
     searchInput: document.getElementById('search-input'),
     resultsContainer: document.getElementById('search-results'),

From 015d5670a1513e9941f3289075f53b24d9ad2b48 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:00:50 +0800
Subject: [PATCH 38/64] refactor: reduce custom CSS

---
 _includes/mermaid.html                        |  2 +-
 _includes/search-results.html                 |  2 +-
 .../modules/components/search-display.js      |  4 ++--
 _sass/addon/commons.scss                      | 20 -------------------
 4 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index a6eac8b..72dcacb 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -45,7 +45,7 @@
     [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
-      backup.classList.add('unloaded');
+      backup.classList.add('d-none');
       /* create mermaid node */
       let mermaid = document.createElement('pre');
       mermaid.classList.add('mermaid');
diff --git a/_includes/search-results.html b/_includes/search-results.html
index c224c5f..00a3182 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -1,6 +1,6 @@
 <!-- The Search results -->
 
-<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
+<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
   <div class="col-11 content">
     <div id="search-hints">
       {% include_cached trending-tags.html %}
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
index 98a97ab..21d634e 100644
--- a/_javascript/modules/components/search-display.js
+++ b/_javascript/modules/components/search-display.js
@@ -14,8 +14,8 @@ const input = document.getElementById('search-input');
 const hints = document.getElementById('search-hints');
 
 // CSS class names
-const LOADED = 'loaded';
-const UNLOADED = 'unloaded';
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
 const FOCUS = 'input-focus';
 const FLEX = 'd-flex';
 
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index e02a79f..d08dc35 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -596,26 +596,6 @@ main {
 
 /* --- Effects classes --- */
 
-.loaded {
-  display: block !important;
-
-  @at-root .d-flex#{&} {
-    display: flex !important;
-  }
-}
-
-.unloaded {
-  display: none !important;
-}
-
-.visible {
-  visibility: visible !important;
-}
-
-.hidden {
-  visibility: hidden !important;
-}
-
 .flex-grow-1 {
   flex-grow: 1 !important;
 }

From cd37f63a0144e0499ea991d3309da064ad5eccea Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:15:14 +0800
Subject: [PATCH 39/64] fix: mode toggle not outlined when receiving keyboard
 focus (#1690)

The Tab key focus
---
 _includes/sidebar.html   | 2 +-
 _sass/addon/commons.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 577cc13..4f0bb8c 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -44,7 +44,7 @@
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
+      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index d08dc35..e6cf7c2 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -823,7 +823,10 @@ $btn-mb: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+
+      &:not(:focus-visible) {
+        box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+      }
 
       &:hover {
         background-color: var(--sidebar-hover-bg);
@@ -845,9 +848,6 @@ $btn-mb: 0.5rem;
     }
 
     #mode-toggle {
-      padding: 0;
-      border: 0;
-
       @extend %button;
       @extend %sidebar-links;
       @extend %sidebar-link-hover;

From 2cfa54847a4bb8053e80e98a73ebe564e17c6741 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:22:01 +0800
Subject: [PATCH 40/64] ci: drop Ruby 3.0 and introduce Ruby 3.3 (#1691)

See: https://www.ruby-lang.org/en/downloads/branches/
---
 .github/workflows/cd.yml                   | 2 +-
 .github/workflows/ci.yml                   | 2 +-
 .github/workflows/starter/pages-deploy.yml | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index bd9d294..160750d 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -19,7 +19,7 @@ jobs:
 
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2
+          ruby-version: 3.3
           bundler-cache: true
 
       - uses: actions/setup-node@v4
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e1d4670..9ea6b4f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        ruby: ["3.0", "3.1", "3.2"]
+        ruby: ["3.1", "3.2", "3.3"]
 
     steps:
       - name: Checkout
diff --git a/.github/workflows/starter/pages-deploy.yml b/.github/workflows/starter/pages-deploy.yml
index c33b2a6..3d65f75 100644
--- a/.github/workflows/starter/pages-deploy.yml
+++ b/.github/workflows/starter/pages-deploy.yml
@@ -42,7 +42,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.2
+          ruby-version: 3.3
           bundler-cache: true
 
       - name: Build site

From d4a6d640bd6d4ab185faf96c0255369a9903ee1d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 00:39:12 +0800
Subject: [PATCH 41/64] perf: simplify mode toggle script (#1692)

Reduce conditional logic to speed up theme mode initialization and switching.
---
 _includes/mode-toggle.html | 63 ++++++++++----------------------------
 1 file changed, 17 insertions(+), 46 deletions(-)

diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index ab20234..113ec37 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -19,45 +19,32 @@
     }
 
     constructor() {
-      if (this.hasMode) {
-        if (this.isDarkMode) {
-          if (!this.isSysDarkPrefer) {
-            this.setDark();
-          }
-        } else {
-          if (this.isSysDarkPrefer) {
-            this.setLight();
-          }
-        }
-      }
-
       let self = this;
 
       {%- comment -%} always follow the system prefers {%- endcomment -%}
       this.sysDarkPrefers.addEventListener('change', () => {
         if (self.hasMode) {
-          if (self.isDarkMode) {
-            if (!self.isSysDarkPrefer) {
-              self.setDark();
-            }
-          } else {
-            if (self.isSysDarkPrefer) {
-              self.setLight();
-            }
-          }
-
           self.clearMode();
         }
-
         self.notify();
       });
-    } {%- comment -%} constructor() {%- endcomment -%}
+
+      if (!this.hasMode) {
+        return;
+      }
+
+      if (this.isDarkMode) {
+        this.setDark();
+      } else {
+        this.setLight();
+      }
+    }
 
     get sysDarkPrefers() {
       return window.matchMedia('(prefers-color-scheme: dark)');
     }
 
-    get isSysDarkPrefer() {
+    get isPreferDark() {
       return this.sysDarkPrefers.matches;
     }
 
@@ -65,10 +52,6 @@
       return this.mode === ModeToggle.DARK_MODE;
     }
 
-    get isLightMode() {
-      return this.mode === ModeToggle.LIGHT_MODE;
-    }
-
     get hasMode() {
       return this.mode != null;
     }
@@ -79,10 +62,10 @@
 
     {%- comment -%} get the current mode on screen {%- endcomment -%}
     get modeStatus() {
-      if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
-        return ModeToggle.DARK_MODE;
+      if (this.hasMode) {
+        return this.mode;
       } else {
-        return ModeToggle.LIGHT_MODE;
+        return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE;
       }
     }
 
@@ -116,21 +99,9 @@
 
     flipMode() {
       if (this.hasMode) {
-        if (this.isSysDarkPrefer) {
-          if (this.isLightMode) {
-            this.clearMode();
-          } else {
-            this.setLight();
-          }
-        } else {
-          if (this.isDarkMode) {
-            this.clearMode();
-          } else {
-            this.setDark();
-          }
-        }
+        this.clearMode();
       } else {
-        if (this.isSysDarkPrefer) {
+        if (this.isPreferDark) {
           this.setLight();
         } else {
           this.setDark();

From 05e3689d17bc52128079e542034a1a0302c42869 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 01:14:21 +0800
Subject: [PATCH 42/64] build(deps-dev): bump the npm group with 6 updates

Updates `@babel/core` to 7.24.4
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.4/packages/babel-core)

Updates `@babel/preset-env` to 7.24.4
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.4/packages/babel-preset-env)

Updates `@commitlint/cli` to 19.2.2
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.2.2/@commitlint/cli)

Updates `@commitlint/config-conventional` to 19.2.2
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.2.2/@commitlint/config-conventional)

Updates `rollup` to 4.15.0
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.13.2...v4.15.0)

Updates `stylelint-config-standard-scss` to 13.1.0
- [Release notes](https://github.com/stylelint-scss/stylelint-config-standard-scss/releases)
- [Changelog](https://github.com/stylelint-scss/stylelint-config-standard-scss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint-scss/stylelint-config-standard-scss/compare/v13.0.0...v13.1.0)
---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 79b8161..3fa3931 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,11 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.3",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/preset-env": "^7.24.3",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@babel/preset-env": "^7.24.4",
+    "@commitlint/cli": "^19.2.2",
+    "@commitlint/config-conventional": "^19.2.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/changelog": "^6.0.3",
@@ -34,11 +34,11 @@
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "husky": "^9.0.11",
     "rimraf": "^5.0.5",
-    "rollup": "^4.13.2",
+    "rollup": "^4.15.0",
     "rollup-plugin-license": "^3.3.1",
     "semantic-release": "^23.0.8",
     "stylelint": "^16.3.1",
-    "stylelint-config-standard-scss": "^13.0.0"
+    "stylelint-config-standard-scss": "^13.1.0"
   },
   "prettier": {
     "trailingComma": "none"

From e09831ba3e7a7edf408d0b5a57999ae1bdab1170 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 21 Apr 2024 01:17:35 +0800
Subject: [PATCH 43/64] ci: specify the node version (#1694)

---
 .github/workflows/ci.yml         | 2 ++
 .github/workflows/style-lint.yml | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9ea6b4f..078e4f1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -34,6 +34,8 @@ jobs:
 
       - name: Setup Node
         uses: actions/setup-node@v4
+        with:
+          node-version: latest
 
       - name: Build Assets
         run: npm i && npm run build
diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml
index e095978..89eeaef 100644
--- a/.github/workflows/style-lint.yml
+++ b/.github/workflows/style-lint.yml
@@ -17,5 +17,7 @@ jobs:
 
       - name: Setup Node
         uses: actions/setup-node@v4
+        with:
+          node-version: latest
       - run: npm i
       - run: npm test

From 72d93b132f47cd25d46fadefc059ef0d7a281a6b Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 28 Apr 2024 02:51:16 +0800
Subject: [PATCH 44/64] build: improve init tool

---
 tools/init | 42 ++++++++++++++++--------------------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/tools/init b/tools/init
index dd15c69..be8ac01 100755
--- a/tools/init
+++ b/tools/init
@@ -9,6 +9,8 @@ CLI=("git" "npm")
 
 ACTIONS_WORKFLOW=pages-deploy.yml
 
+RELEASE_HASH=$(git log --grep="chore(release):" -1 --pretty="%H")
+
 # temporary file suffixes that make `sed -i` compatible with BSD and Linux
 TEMP_SUFFIX="to-delete"
 
@@ -28,7 +30,7 @@ help() {
 _sedi() {
   regex=$1
   file=$2
-  sed -i.$TEMP_SUFFIX "$regex" "$file"
+  sed -i.$TEMP_SUFFIX -E "$regex" "$file"
   rm -f "$file".$TEMP_SUFFIX
 }
 
@@ -50,22 +52,7 @@ _check_status() {
 }
 
 _check_init() {
-  local _has_inited=false
-
-  if [[ ! -d .github ]]; then # using option `--no-gh`
-    _has_inited=true
-  else
-    if [[ -f .github/workflows/$ACTIONS_WORKFLOW ]]; then
-      # on BSD, the `wc` could contains blank
-      local _count
-      _count=$(find .github/workflows/ -type f -name "*.yml" | wc -l)
-      if [[ ${_count//[[:blank:]]/} == 1 ]]; then
-        _has_inited=true
-      fi
-    fi
-  fi
-
-  if $_has_inited; then
+  if [[ $(git rev-parse HEAD^1) == "$RELEASE_HASH" ]]; then
     echo "Already initialized."
     exit 0
   fi
@@ -77,22 +64,25 @@ check_env() {
   _check_init
 }
 
-checkout_latest_release() {
-  hash=$(git log --grep="chore(release):" -1 --pretty="%H")
-  git reset --hard "$hash"
+reset_latest() {
+  git reset --hard "$RELEASE_HASH"
+  git clean -fd
+  git submodule update --init --recursive
 }
 
 init_files() {
   if $_no_gh; then
     rm -rf .github
   else
-    ## Change the files of `.github`
-    mv .github/workflows/starter/$ACTIONS_WORKFLOW .
+    ## Change the files of `.github/`
+    temp="$(mktemp -d)"
+    find .github/workflows -type f -name "*$ACTIONS_WORKFLOW*" -exec mv {} "$temp/$ACTIONS_WORKFLOW" \;
     rm -rf .github && mkdir -p .github/workflows
-    mv ./$ACTIONS_WORKFLOW .github/workflows/${ACTIONS_WORKFLOW}
+    mv "$temp/$ACTIONS_WORKFLOW" .github/workflows/"$ACTIONS_WORKFLOW"
+    rm -rf "$temp"
 
     ## Cleanup image settings in site config
-    _sedi "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
+    _sedi "s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
   fi
 
   # remove the other files
@@ -108,12 +98,12 @@ init_files() {
 commit() {
   git add -A
   git commit -m "chore: initialize the environment" -q
-  echo -e "\n[INFO] Initialization successful!\n"
+  echo -e "\n> Initialization successful!\n"
 }
 
 main() {
   check_env
-  checkout_latest_release
+  reset_latest
   init_files
   commit
 }

From 796c38603762c394685224f0b922c9ae31d7152c Mon Sep 17 00:00:00 2001
From: Huanyu Shi <huanyushi2001@gmail.com>
Date: Sun, 28 Apr 2024 03:03:13 +0800
Subject: [PATCH 45/64] refactor: add date factor to the recommended posts
 (#1699)

---
 _includes/related-posts.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index ae39da4..37a295b 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -21,6 +21,7 @@
   {% assign match_posts = match_posts | push: site.tags[tag] | uniq %}
 {% endfor %}
 
+{% assign match_posts = match_posts | reverse %}
 {% assign last_index = match_posts.size | minus: 1 %}
 {% assign score_list = '' | split: '' %}
 

From 778ebdf25077093f80ed6661fff298ba36b19797 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 29 Apr 2024 03:25:26 +0800
Subject: [PATCH 46/64] chore: delete JS comments from HTML

---
 _includes/comments/disqus.html     |  6 +++---
 _includes/comments/giscus.html     |  2 +-
 _includes/comments/utterances.html |  6 +++---
 _includes/mermaid.html             | 10 ++++++----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
index bef843a..2b889a4 100644
--- a/_includes/comments/disqus.html
+++ b/_includes/comments/disqus.html
@@ -10,7 +10,7 @@
     this.page.identifier = '{{ page.url }}';
   };
 
-  /* Lazy loading */
+  {%- comment -%} Lazy loading {%- endcomment -%}
   var disqus_observer = new IntersectionObserver(
     function (entries) {
       if (entries[0].isIntersecting) {
@@ -30,10 +30,10 @@
 
   disqus_observer.observe(document.getElementById('disqus_thread'));
 
-  /* Auto switch theme */
+  {%- comment -%} Auto switch theme {%- endcomment -%}
   function reloadDisqus() {
     if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-      /* Disqus hasn't been loaded */
+      {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
       }
diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
index f3b8a54..c8d48e6 100644
--- a/_includes/comments/giscus.html
+++ b/_includes/comments/giscus.html
@@ -47,7 +47,7 @@
         event.data &&
         event.data.direction === ModeToggle.ID
       ) {
-        /* global theme mode changed */
+        {%- comment -%} global theme mode changed {%- endcomment -%}
         const mode = event.data.message;
         const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
 
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
index 84818be..5dd78ed 100644
--- a/_includes/comments/utterances.html
+++ b/_includes/comments/utterances.html
@@ -25,12 +25,12 @@
     addEventListener('message', (event) => {
       let theme;
 
-      /* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
+      {%- comment -%} credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> {%- endcomment -%}
       if (event.origin === origin) {
-        /* page initial */
+        {%- comment -%} page initial {%- endcomment -%}
         theme = initTheme;
       } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        /* global theme mode changed */
+        {%- comment -%} global theme mode changed {%- endcomment -%}
         const mode = event.data.message;
         theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
       } else {
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index 72dcacb..a3a83ed 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -11,7 +11,9 @@
       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> */
+      {%- comment -%}
+        Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
+      {%- endcomment -%}
       const mermaidList = document.getElementsByClassName('mermaid');
 
       [...mermaidList].forEach((elem) => {
@@ -37,16 +39,16 @@
     }
 
     let mermaidConf = {
-      theme: initTheme /* <default | dark | forest | neutral> */
+      theme: initTheme {%- comment -%}  <default | dark | forest | neutral> {%- endcomment -%}
     };
 
-    /* Create mermaid tag */
+    {%- 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');
-      /* create mermaid node */
+      {%- comment -%} create mermaid node {%- endcomment -%}
       let mermaid = document.createElement('pre');
       mermaid.classList.add('mermaid');
       const text = document.createTextNode(svgCode);

From e0950fc973d029dc65d0bc1bd68f3d11242527c8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 29 Apr 2024 03:36:16 +0800
Subject: [PATCH 47/64] fix: make TOC title and entries visible at the same
 time (#1711)

When internet connection speeds are poor, there is a chance that the title of the TOC will appear earlier than its entries, causing a visual cutoff.
---
 _includes/toc.html                    | 4 ++--
 _javascript/modules/components/toc.js | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/_includes/toc.html b/_includes/toc.html
index 604d2c1..15eb934 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <section id="toc-wrapper" class="d-none ps-0 pe-4">
+    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
index b397813..56ce26f 100644
--- a/_javascript/modules/components/toc.js
+++ b/_javascript/modules/components/toc.js
@@ -9,5 +9,7 @@ export function toc() {
       orderedList: false,
       scrollSmooth: false
     });
+
+    document.getElementById('toc-wrapper').classList.remove('d-none');
   }
 }

From b77767f76e4901b4c43922be858f79356917edbd Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 29 Apr 2024 03:43:33 +0800
Subject: [PATCH 48/64] refactor: improve js module loading order

---
 _includes/js-selector.html | 6 +++++-
 _javascript/commons.js     | 2 +-
 _javascript/home.js        | 6 +++---
 _javascript/misc.js        | 2 +-
 _javascript/page.js        | 6 +++---
 _javascript/post.js        | 6 +++---
 _layouts/default.html      | 5 -----
 7 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 78ef541..3e1eb47 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -65,7 +65,7 @@
 {% endcase %}
 
 {% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
-<script defer src="{{ script | relative_url }}"></script>
+<script src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
@@ -88,6 +88,10 @@
   {% endif %}
 {% endif %}
 
+{% if page.mermaid %}
+  {% include mermaid.html %}
+{% endif %}
+
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
diff --git a/_javascript/commons.js b/_javascript/commons.js
index 05a9765..6a17fb9 100644
--- a/_javascript/commons.js
+++ b/_javascript/commons.js
@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 
-basic();
 initSidebar();
 initTopbar();
+basic();
diff --git a/_javascript/home.js b/_javascript/home.js
index 02948c9..ef22cb9 100644
--- a/_javascript/home.js
+++ b/_javascript/home.js
@@ -1,8 +1,8 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import { initLocaleDatetime, loadImg } from './modules/plugins';
 
-basic();
+loadImg();
+initLocaleDatetime();
 initSidebar();
 initTopbar();
-initLocaleDatetime();
-loadImg();
+basic();
diff --git a/_javascript/misc.js b/_javascript/misc.js
index c7a19d6..52b4043 100644
--- a/_javascript/misc.js
+++ b/_javascript/misc.js
@@ -1,7 +1,7 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import { initLocaleDatetime } from './modules/plugins';
 
-basic();
 initSidebar();
 initTopbar();
 initLocaleDatetime();
+basic();
diff --git a/_javascript/page.js b/_javascript/page.js
index f13bd2f..76e8ce9 100644
--- a/_javascript/page.js
+++ b/_javascript/page.js
@@ -1,9 +1,9 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import { loadImg, imgPopup, initClipboard } from './modules/plugins';
 
-basic();
-initSidebar();
-initTopbar();
 loadImg();
 imgPopup();
+initSidebar();
+initTopbar();
 initClipboard();
+basic();
diff --git a/_javascript/post.js b/_javascript/post.js
index 86ea32b..9340f05 100644
--- a/_javascript/post.js
+++ b/_javascript/post.js
@@ -7,11 +7,11 @@ import {
   toc
 } from './modules/plugins';
 
-initSidebar();
-initTopbar();
 loadImg();
+toc();
 imgPopup();
+initSidebar();
 initLocaleDatetime();
 initClipboard();
-toc();
+initTopbar();
 basic();
diff --git a/_layouts/default.html b/_layouts/default.html
index 6e865b9..ea438fe 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -75,13 +75,8 @@ layout: compress
     {% endif %}
 
     <!-- JavaScripts -->
-
     {% include js-selector.html lang=lang %}
 
-    {% if page.mermaid %}
-      {% include mermaid.html %}
-    {% endif %}
-
     {% include_cached search-loader.html lang=lang %}
   </body>
 </html>

From 76d58fe0ffdc4bd1df35b60815e97560c3564700 Mon Sep 17 00:00:00 2001
From: Azamat Mambetov <zikbest11@yandex.ru>
Date: Mon, 29 Apr 2024 19:27:41 +0400
Subject: [PATCH 49/64] fix(pwa): skip range requests in service worker (#1672)

---
 assets/js/pwa/sw.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/js/pwa/sw.js b/assets/js/pwa/sw.js
index adc707e..dbf30f4 100644
--- a/assets/js/pwa/sw.js
+++ b/assets/js/pwa/sw.js
@@ -75,6 +75,10 @@ self.addEventListener('message', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
+  if (event.request.headers.has('range')) {
+    return;
+  }
+
   event.respondWith(
     caches.match(event.request).then((response) => {
       if (response) {

From 8608147fb5037804695d93496c62f96b9c41e9cd Mon Sep 17 00:00:00 2001
From: Huanyu Shi <huanyushi2001@gmail.com>
Date: Wed, 1 May 2024 23:12:46 +0800
Subject: [PATCH 50/64] fix: prevent footnote back arrow from becoming an emoji
 (#1716)

---
 _config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_config.yml b/_config.yml
index 6062ac6..b742e07 100644
--- a/_config.yml
+++ b/_config.yml
@@ -151,6 +151,7 @@ baseurl: ""
 # ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
+  footnote_backlink: "&#8617;&#xfe0e;"
   syntax_highlighter: rouge
   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
     css_class: highlight

From 05ebfb705e424b75e5feac6894701e8f8b164aa9 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 2 May 2024 03:16:35 +0800
Subject: [PATCH 51/64] chore: update discussion template

---
 .github/DISCUSSION_TEMPLATE/general.yml | 9 ---------
 .github/DISCUSSION_TEMPLATE/ideas.yml   | 7 +++++++
 2 files changed, 7 insertions(+), 9 deletions(-)
 create mode 100644 .github/DISCUSSION_TEMPLATE/ideas.yml

diff --git a/.github/DISCUSSION_TEMPLATE/general.yml b/.github/DISCUSSION_TEMPLATE/general.yml
index 4e879f9..18d0f85 100644
--- a/.github/DISCUSSION_TEMPLATE/general.yml
+++ b/.github/DISCUSSION_TEMPLATE/general.yml
@@ -9,15 +9,6 @@ body:
             [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
           required: true
 
-  - type: dropdown
-    attributes:
-      label: What is the topic?
-      options:
-        - Sharing tips and tricks
-        - Just chatting
-    validations:
-      required: true
-
   - type: textarea
     attributes:
       label: Description
diff --git a/.github/DISCUSSION_TEMPLATE/ideas.yml b/.github/DISCUSSION_TEMPLATE/ideas.yml
new file mode 100644
index 0000000..e4c987d
--- /dev/null
+++ b/.github/DISCUSSION_TEMPLATE/ideas.yml
@@ -0,0 +1,7 @@
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true

From f1c6d2a817425973ed4121f942bcbd460a619f86 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 2 May 2024 03:18:35 +0800
Subject: [PATCH 52/64] build: enhance the run script

---
 tools/run | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/tools/run b/tools/run
index 8072e41..04f23f5 100755
--- a/tools/run
+++ b/tools/run
@@ -2,4 +2,49 @@
 #
 # Run jekyll serve and then launch the site
 
-bundle exec jekyll s -H 0.0.0.0 -l
+prod=false
+command="bundle exec jekyll s -l"
+host="127.0.0.1"
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/run [options]"
+  echo
+  echo "Options:"
+  echo "     -H, --host [HOST]    Host to bind to."
+  echo "     -p, --production     Run Jekyll in 'production' mode."
+  echo "     -h, --help           Print this help information."
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -H | --host)
+    host="$2"
+    shift 2
+    ;;
+  -p | --production)
+    prod=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    echo -e "> Unknown option: '$opt'\n"
+    help
+    exit 1
+    ;;
+  esac
+done
+
+command="$command -H $host"
+
+if $prod; then
+  command="JEKYLL_ENV=production $command"
+fi
+
+echo -e "\n> $command\n"
+eval "$command"

From dcb0add47bf1adf92215514f1ccfa4661d5215be Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 2 May 2024 05:11:45 +0800
Subject: [PATCH 53/64] refactor!: optimize the resource hints (#1717)

Improved the data structure for defining resource hints to the browser.
---
 _data/origin/cors.yml    | 24 +++++++++++++-----------
 _includes/head.html      | 36 +++++++++++++++---------------------
 assets/js/data/swconf.js | 14 --------------
 assets/js/pwa/sw.js      | 18 ------------------
 4 files changed, 28 insertions(+), 64 deletions(-)

diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index a10d31c..ff249e6 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -1,18 +1,20 @@
-# CDNs
-
-cdns:
-  # Google Fonts
+# Resource Hints
+resource_hints:
   - url: https://fonts.googleapis.com
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
   - url: https://fonts.gstatic.com
-    args: crossorigin
-  - url: https://fonts.googleapis.com
-  # jsDelivr CDN
+    links:
+      - rel: preconnect
+        opts: [crossorigin]
+      - rel: dns-prefetch
   - url: https://cdn.jsdelivr.net
-  # polyfill.io for math (cdnjs.cloudflare.com/polyfill)
-  - url: https://cdnjs.cloudflare.com
-
-# fonts
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
 
+# Web Fonts
 webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
 
 # Libraries
diff --git a/_includes/head.html b/_includes/head.html
index f3434cf..0e4725c 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -59,34 +59,28 @@
 
   {% include_cached favicons.html %}
 
-  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
-
-  {% else %}
-    {% 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 }}>
+  <!-- Resource Hints -->
+  {% unless site.assets.self_host.enabled %}
+    {% for hint in site.data.origin.cors.resource_hints %}
+      {% for link in hint.links %}
+        <link rel="{{ link.rel }}" href="{{ hint.url }}" {{ link.opts | join: ' ' }}>
+      {% endfor %}
     {% endfor %}
-
-    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
-  {% endif %}
-
-  <!-- GA -->
-  {% if jekyll.environment == 'production' and site.analytics.google.id != empty and site.analytics.google.id %}
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
-
-    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
-    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-  {% endif %}
+  {% endunless %}
 
   <!-- Bootstrap -->
   <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
 
-  <!-- Font Awesome -->
+  <!-- Theme style -->
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+
+  <!-- Web Font -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
+
+  <!-- Font Awesome Icons -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+  <!-- 3rd-party Dependencies -->
 
   {% if site.toc and page.toc %}
     <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
diff --git a/assets/js/data/swconf.js b/assets/js/data/swconf.js
index c02638f..5c1ed29 100644
--- a/assets/js/data/swconf.js
+++ b/assets/js/data/swconf.js
@@ -22,20 +22,6 @@ const swconf = {
       {% endfor %}
     ],
 
-    {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
-    allowHosts: [
-      {% if site.cdn and site.cdn contains '//' %}
-        '{{ site.cdn | split: '//' | last | split: '/' | first }}',
-      {% endif %}
-
-      {%- unless site.assets.self_host.enabled -%}
-       {% for cdn in site.data.origin["cors"].cdns %}
-          '{{ cdn.url | split: "//" | last }}'
-          {%- unless forloop.last -%},{%- endunless -%}
-        {% endfor %}
-      {% endunless %}
-    ],
-
     {%- comment -%} The request url with below path will not be cached. {%- endcomment -%}
     denyPaths: [
       {% for path in site.pwa.cache.deny_paths %}
diff --git a/assets/js/pwa/sw.js b/assets/js/pwa/sw.js
index dbf30f4..e9609b1 100644
--- a/assets/js/pwa/sw.js
+++ b/assets/js/pwa/sw.js
@@ -9,21 +9,7 @@ const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
 importScripts(swconfUrl);
 const purge = swconf.purge;
 
-function verifyHost(url) {
-  for (const host of swconf.allowHosts) {
-    const regex = RegExp(`^http(s)?://${host}/`);
-    if (regex.test(url)) {
-      return true;
-    }
-  }
-  return false;
-}
-
 function verifyUrl(url) {
-  if (!verifyHost(url)) {
-    return false;
-  }
-
   const requestPath = new URL(url).pathname;
 
   for (const path of swconf.denyPaths) {
@@ -34,10 +20,6 @@ function verifyUrl(url) {
   return true;
 }
 
-if (!purge) {
-  swconf.allowHosts.push(location.host);
-}
-
 self.addEventListener('install', (event) => {
   if (purge) {
     return;

From 12c340e98b6ad75c3e6eb91c2ff80b9a478f457b Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 4 May 2024 00:41:00 +0800
Subject: [PATCH 54/64] ci: update dependabot settings

---
 .github/dependabot.yml | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index bec1046..393fa98 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -2,10 +2,6 @@ version: 2
 updates:
   - package-ecosystem: "bundler"
     directory: "/"
-    versioning-strategy: increase
-    groups:
-      bundler:
-        dependency-type: "production"
     schedule:
       interval: "weekly"
   - package-ecosystem: "npm"
@@ -13,7 +9,10 @@ updates:
     versioning-strategy: increase
     groups:
       npm:
-        dependency-type: "development"
+        update-types:
+          - "major"
+          - "minor"
+          - "patch"
     schedule:
       interval: "weekly"
   - package-ecosystem: "github-actions"

From c17fba44f53767c9dfaa8d92cfc6e275e5977f8a Mon Sep 17 00:00:00 2001
From: Hieu D <48117687+dqhntt@users.noreply.github.com>
Date: Fri, 3 May 2024 17:46:17 -0700
Subject: [PATCH 55/64] feat: add cloudflare web analytics (#1723)

---
 _config.yml                         | 2 ++
 _includes/analytics/cloudflare.html | 7 +++++++
 2 files changed, 9 insertions(+)
 create mode 100644 _includes/analytics/cloudflare.html

diff --git a/_config.yml b/_config.yml
index b742e07..0de0965 100644
--- a/_config.yml
+++ b/_config.yml
@@ -68,6 +68,8 @@ analytics:
   matomo:
     id: # fill in your Matomo ID
     domain: # fill in your Matomo domain
+  cloudflare:
+    id: # fill in your Cloudflare Web Analytics token
 
 # Pageviews settings
 pageviews:
diff --git a/_includes/analytics/cloudflare.html b/_includes/analytics/cloudflare.html
new file mode 100644
index 0000000..1eeb1a9
--- /dev/null
+++ b/_includes/analytics/cloudflare.html
@@ -0,0 +1,7 @@
+<!-- Cloudflare Web Analytics -->
+<script
+  defer
+  src="https://static.cloudflareinsights.com/beacon.min.js"
+  data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
+></script>
+<!-- End Cloudflare Web Analytics -->

From ddb48eda52827aae16aff720212d7b6d2d8647f9 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 10:29:14 +0800
Subject: [PATCH 56/64] perf: lean bootstrap javascript (#1734)

---
 _data/origin/basic.yml                        |  1 -
 _data/origin/cors.yml                         |  1 -
 _includes/js-selector.html                    |  4 +-
 .../modules/components/category-collapse.js   |  3 ++
 _javascript/modules/components/clipboard.js   | 30 ++++++++----
 .../modules/components/tooltip-loader.js      |  7 ++-
 _javascript/pwa/_frontmatter                  |  3 ++
 {assets/js => _javascript}/pwa/app.js         | 19 +++-----
 {assets/js => _javascript}/pwa/sw.js          | 11 ++---
 package.json                                  | 19 +++++---
 rollup.config.js                              | 46 +++++++++++++++----
 11 files changed, 89 insertions(+), 55 deletions(-)
 create mode 100644 _javascript/pwa/_frontmatter
 rename {assets/js => _javascript}/pwa/app.js (73%)
 rename {assets/js => _javascript}/pwa/sw.js (83%)

diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml
index 7382251..9f3415a 100644
--- a/_data/origin/basic.yml
+++ b/_data/origin/basic.yml
@@ -6,7 +6,6 @@ webfonts: /assets/lib/fonts/main.css
 
 bootstrap:
   css: /assets/lib/bootstrap/bootstrap.min.css
-  js: /assets/lib/bootstrap/bootstrap.bundle.min.js
 
 toc:
   css: /assets/lib/tocbot/tocbot.min.css
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index ff249e6..220d131 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -21,7 +21,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 bootstrap:
   css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
 
 toc:
   css: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.css
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index 3e1eb47..b229b70 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -2,9 +2,7 @@
 
 <!-- commons -->
 
-{%- capture urls -%}
-  {{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
-{%- endcapture -%}
+{% assign urls = site.data.origin[type].search.js %}
 
 <!-- layout specified -->
 
diff --git a/_javascript/modules/components/category-collapse.js b/_javascript/modules/components/category-collapse.js
index b530626..0c53cb4 100644
--- a/_javascript/modules/components/category-collapse.js
+++ b/_javascript/modules/components/category-collapse.js
@@ -1,6 +1,9 @@
 /**
  * Tab 'Categories' expand/close effect.
  */
+
+import 'bootstrap/js/src/collapse.js';
+
 const childPrefix = 'l_';
 const parentPrefix = 'h_';
 const children = document.getElementsByClassName('collapse');
diff --git a/_javascript/modules/components/clipboard.js b/_javascript/modules/components/clipboard.js
index 8d4b23f..9566e9d 100644
--- a/_javascript/modules/components/clipboard.js
+++ b/_javascript/modules/components/clipboard.js
@@ -2,10 +2,11 @@
  * Clipboard functions
  *
  * Dependencies:
- *   - popper.js (https://github.com/popperjs/popper-core)
- *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ *    clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 const clipboardSelector = '.code-header>button';
 
 const ICON_DEFAULT = 'far fa-clipboard';
@@ -38,11 +39,11 @@ function unlock(node) {
 function showTooltip(btn) {
   const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
   btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
-  bootstrap.Tooltip.getInstance(btn).show();
+  Tooltip.getInstance(btn).show();
 }
 
 function hideTooltip(btn) {
-  bootstrap.Tooltip.getInstance(btn).hide();
+  Tooltip.getInstance(btn).hide();
   btn.removeAttribute(ATTR_TITLE_ORIGIN);
 }
 
@@ -56,7 +57,7 @@ function resumeIcon(btn) {
   icon.setAttribute('class', ICON_DEFAULT);
 }
 
-export function initClipboard() {
+function setCodeClipboard() {
   const clipboardList = document.querySelectorAll(clipboardSelector);
 
   if (clipboardList.length === 0) {
@@ -73,7 +74,7 @@ export function initClipboard() {
 
   [...clipboardList].map(
     (elem) =>
-      new bootstrap.Tooltip(elem, {
+      new Tooltip(elem, {
         placement: 'left'
       })
   );
@@ -97,11 +98,15 @@ export function initClipboard() {
       unlock(trigger);
     }, TIMEOUT);
   });
+}
 
-  /* --- Post link sharing --- */
-
+function setLinkClipboard() {
   const btnCopyLink = document.getElementById('copy-link');
 
+  if (btnCopyLink === null) {
+    return;
+  }
+
   btnCopyLink.addEventListener('click', (e) => {
     const target = e.target;
 
@@ -116,7 +121,7 @@ export function initClipboard() {
 
       // Switch tooltip title
       target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
-      bootstrap.Tooltip.getInstance(target).show();
+      Tooltip.getInstance(target).show();
 
       lock(target);
 
@@ -128,6 +133,11 @@ export function initClipboard() {
   });
 
   btnCopyLink.addEventListener('mouseleave', (e) => {
-    bootstrap.Tooltip.getInstance(e.target).hide();
+    Tooltip.getInstance(e.target).hide();
   });
 }
+
+export function initClipboard() {
+  setCodeClipboard();
+  setLinkClipboard();
+}
diff --git a/_javascript/modules/components/tooltip-loader.js b/_javascript/modules/components/tooltip-loader.js
index a906600..c36c879 100644
--- a/_javascript/modules/components/tooltip-loader.js
+++ b/_javascript/modules/components/tooltip-loader.js
@@ -1,12 +1,11 @@
-/**
- * Initial Bootstrap Tooltip.
- */
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 export function loadTooptip() {
   const tooltipTriggerList = document.querySelectorAll(
     '[data-bs-toggle="tooltip"]'
   );
 
   [...tooltipTriggerList].map(
-    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+    (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
   );
 }
diff --git a/_javascript/pwa/_frontmatter b/_javascript/pwa/_frontmatter
new file mode 100644
index 0000000..97ecf0a
--- /dev/null
+++ b/_javascript/pwa/_frontmatter
@@ -0,0 +1,3 @@
+---
+permalink: /:basename
+---
diff --git a/assets/js/pwa/app.js b/_javascript/pwa/app.js
similarity index 73%
rename from assets/js/pwa/app.js
rename to _javascript/pwa/app.js
index 173ea29..c71036a 100644
--- a/assets/js/pwa/app.js
+++ b/_javascript/pwa/app.js
@@ -1,19 +1,15 @@
----
-layout: compress
-permalink: /assets/js/dist/:basename.min.js
----
+import { pwa, baseurl } from '../../_config.yml';
+import Toast from 'bootstrap/js/src/toast';
 
 if ('serviceWorker' in navigator) {
-  const isEnabled = '{{ site.pwa.enabled }}' === 'true';
-
-  if (isEnabled) {
-    const swUrl = '{{ '/sw.min.js' | relative_url }}';
+  if (pwa.enabled) {
+    const swUrl = `${baseurl}/sw.min.js`;
     const notification = document.getElementById('notification');
     const btnRefresh = notification.querySelector('.toast-body>button');
-    const popupWindow = bootstrap.Toast.getOrCreateInstance(notification);
+    const popupWindow = Toast.getOrCreateInstance(notification);
 
     navigator.serviceWorker.register(swUrl).then((registration) => {
-      {% comment %}In case the user ignores the notification{% endcomment %}
+      // In case the user ignores the notification
       if (registration.waiting) {
         popupWindow.show();
       }
@@ -32,14 +28,13 @@ if ('serviceWorker' in navigator) {
         if (registration.waiting) {
           registration.waiting.postMessage('SKIP_WAITING');
         }
-
         popupWindow.hide();
       });
     });
 
     let refreshing = false;
 
-    {% comment %}Detect controller change and refresh all the opened tabs{% endcomment %}
+    // Detect controller change and refresh all the opened tabs
     navigator.serviceWorker.addEventListener('controllerchange', () => {
       if (!refreshing) {
         window.location.reload();
diff --git a/assets/js/pwa/sw.js b/_javascript/pwa/sw.js
similarity index 83%
rename from assets/js/pwa/sw.js
rename to _javascript/pwa/sw.js
index e9609b1..bc67bd8 100644
--- a/assets/js/pwa/sw.js
+++ b/_javascript/pwa/sw.js
@@ -1,12 +1,7 @@
----
-layout: compress
-permalink: /:basename.min.js
-# PWA service worker
----
+import { baseurl } from '../../_config.yml';
 
-const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
+importScripts(`${baseurl}/assets/js/data/swconf.js`);
 
-importScripts(swconfUrl);
 const purge = swconf.purge;
 
 function verifyUrl(url) {
@@ -74,7 +69,7 @@ self.addEventListener('fetch', (event) => {
           return response;
         }
 
-        {% comment %}See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>{% endcomment %}
+        // See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
         let responseToCache = response.clone();
 
         caches.open(swconf.cacheName).then((cache) => {
diff --git a/package.json b/package.json
index 3fa3931..ef094a1 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,16 @@
   },
   "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
   "scripts": {
-    "prebuild": "npx rimraf assets/js/dist",
-    "build": "NODE_ENV=production npx rollup -c --bundleConfigAsCjs",
-    "prewatch": "npx rimraf assets/js/dist",
-    "watch": "npx rollup -c --bundleConfigAsCjs -w",
-    "test": "npx stylelint _sass/**/*.scss",
-    "fixlint": "npm run test -- --fix"
+    "build": "npm run build:js",
+    "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
+    "watch:js": "rollup -c --bundleConfigAsCjs -w",
+    "lint:style": "stylelint _sass/**/*.scss",
+    "lint:fix:style": "npm run lint:style -- --fix",
+    "test": "npm run lint:scss"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -27,13 +31,14 @@
     "@commitlint/cli": "^19.2.2",
     "@commitlint/config-conventional": "^19.2.2",
     "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-yaml": "^4.1.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "husky": "^9.0.11",
-    "rimraf": "^5.0.5",
     "rollup": "^4.15.0",
     "rollup-plugin-license": "^3.3.1",
     "semantic-release": "^23.0.8",
diff --git a/rollup.config.js b/rollup.config.js
index 6226080..823401e 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,23 +1,42 @@
 import babel from '@rollup/plugin-babel';
 import terser from '@rollup/plugin-terser';
 import license from 'rollup-plugin-license';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import fs from 'fs';
 import path from 'path';
+import yaml from '@rollup/plugin-yaml';
 
 const SRC_DEFAULT = '_javascript';
 const DIST_DEFAULT = 'assets/js/dist';
-const isProd = process.env.NODE_ENV === 'production';
+const SRC_PWA = `${SRC_DEFAULT}/pwa`;
+
+const isProd = process.env.BUILD === 'production';
+
+if (fs.existsSync(DIST_DEFAULT)) {
+  fs.rm(DIST_DEFAULT, { recursive: true, force: true }, (err) => {
+    if (err) {
+      throw err;
+    }
+  });
+}
+
+function build(filename, opts = {}) {
+  const src = opts.src || SRC_DEFAULT;
+  const dist = opts.dist || DIST_DEFAULT;
+  const bannerUrl =
+    opts.bannerUrl || path.join(__dirname, SRC_DEFAULT, '_copyright');
+  const commentStyle = opts.commentStyle || 'ignored';
 
-function build(filename) {
   return {
-    input: [`${SRC_DEFAULT}/${filename}.js`],
+    input: [`${src}/${filename}.js`],
     output: {
-      file: `${DIST_DEFAULT}/${filename}.min.js`,
+      file: `${dist}/${filename}.min.js`,
       format: 'iife',
       name: 'Chirpy',
       sourcemap: !isProd
     },
     watch: {
-      include: `${SRC_DEFAULT}/**`
+      include: `${src}/**`
     },
     plugins: [
       babel({
@@ -25,13 +44,16 @@ function build(filename) {
         presets: ['@babel/env'],
         plugins: ['@babel/plugin-transform-class-properties']
       }),
+      nodeResolve(),
+      yaml(),
+      isProd && commentStyle === 'none' && terser(),
       license({
         banner: {
-          commentStyle: 'ignored',
-          content: { file: path.join(__dirname, SRC_DEFAULT, '_copyright') }
+          commentStyle,
+          content: { file: bannerUrl }
         }
       }),
-      isProd && terser()
+      isProd && commentStyle !== 'none' && terser()
     ]
   };
 }
@@ -42,5 +64,11 @@ export default [
   build('categories'),
   build('page'),
   build('post'),
-  build('misc')
+  build('misc'),
+  build('app', { src: SRC_PWA }),
+  build('sw', {
+    src: SRC_PWA,
+    bannerUrl: path.join(__dirname, SRC_PWA, '_frontmatter'),
+    commentStyle: 'none'
+  })
 ];

From 363a3d936bbd688fa4f28527e85ef7dd3fe3a79b Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 11:07:48 +0800
Subject: [PATCH 57/64] perf: tree shaking Bootstrap CSS (#1736)

---
 .gitignore                           |  4 ++++
 _config.yml                          |  2 +-
 _data/origin/basic.yml               |  3 ---
 _data/origin/cors.yml                |  3 ---
 _includes/head.html                  |  4 +++-
 _posts/2019-08-09-getting-started.md |  8 +++----
 _sass/main.bundle.scss               |  2 ++
 assets/css/jekyll-theme-chirpy.scss  |  6 +++++-
 assets/lib                           |  2 +-
 package.json                         |  9 +++++---
 purgecss.config.js                   | 23 +++++++++++++++++++++
 tools/init                           |  6 +++---
 tools/release                        | 31 +++++++++++++++-------------
 13 files changed, 69 insertions(+), 34 deletions(-)
 create mode 100644 _sass/main.bundle.scss
 create mode 100644 purgecss.config.js

diff --git a/.gitignore b/.gitignore
index 3f4427c..d6bf509 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,10 @@ package-lock.json
 
 # IDE configurations
 .idea
+.vscode
+!.vscode/settings.json
+!.vscode/extensions.json
 
 # Misc
+_sass/dist
 assets/js/dist
diff --git a/_config.yml b/_config.yml
index 0de0965..613b043 100644
--- a/_config.yml
+++ b/_config.yml
@@ -214,7 +214,7 @@ exclude:
   - tools
   - README.md
   - LICENSE
-  - rollup.config.js
+  - "*.config.js"
   - package*.json
 
 jekyll-archives:
diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml
index 9f3415a..9027e6e 100644
--- a/_data/origin/basic.yml
+++ b/_data/origin/basic.yml
@@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css
 
 # Libraries
 
-bootstrap:
-  css: /assets/lib/bootstrap/bootstrap.min.css
-
 toc:
   css: /assets/lib/tocbot/tocbot.min.css
   js: /assets/lib/tocbot/tocbot.min.js
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
index 220d131..abedb6c 100644
--- a/_data/origin/cors.yml
+++ b/_data/origin/cors.yml
@@ -19,9 +19,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 # Libraries
 
-bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
-
 toc:
   css: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.css
   js: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.js
diff --git a/_includes/head.html b/_includes/head.html
index 0e4725c..fd260c0 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -69,7 +69,9 @@
   {% endunless %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
+  {% unless jekyll.environment == 'production' %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  {% endunless %}
 
   <!-- Theme style -->
   <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index 6653c62..1cea5be 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -21,8 +21,8 @@ Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installat
 
 There are two ways to create a new repository for this theme:
 
-- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
-- [**GitHub Fork**](#option-2-github-fork) - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
+- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) — Easy to upgrade, isolates irrelevant project files so you can focus on writing.
+- [**GitHub Fork**](#option-2-github-fork) — Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
 
 #### Option 1. Using the Chirpy Starter
 
@@ -32,7 +32,7 @@ Sign in to GitHub and browse to [**Chirpy Starter**][starter], click the button
 
 Sign in to GitHub to [fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), and then rename it to `USERNAME.github.io` (`USERNAME` means your username).
 
-Next, clone your site to local machine. In order to build JavaScript files later, we need to install [Node.js][nodejs], and then run the tool:
+Next, clone the repository to your local machine, make sure it has [Node.js][nodejs] installed, then go to the root directory of the repo and run the following command:
 
 ```console
 $ bash tools/init
@@ -45,7 +45,7 @@ The above command will:
 
 1. Check out the code to the [latest tag][latest-tag] (to ensure the stability of your site: as the code for the default branch is under development).
 2. Remove non-essential sample files and take care of GitHub-related files.
-3. Build JavaScript files and export to `assets/js/dist/`{: .filepath }, then make them tracked by Git.
+3. Build CSS/JS assets files and then make them tracked by Git.
 4. Automatically create a new commit to save the changes above.
 
 ### Installing Dependencies
diff --git a/_sass/main.bundle.scss b/_sass/main.bundle.scss
new file mode 100644
index 0000000..52e893f
--- /dev/null
+++ b/_sass/main.bundle.scss
@@ -0,0 +1,2 @@
+@import 'dist/bootstrap';
+@import 'main';
diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
index 1280b9e..d20545b 100644
--- a/assets/css/jekyll-theme-chirpy.scss
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -1,6 +1,10 @@
 ---
 ---
 
-@import 'main';
+@import 'main
+{%- if jekyll.environment == 'production' -%}
+  .bundle
+{%- endif -%}
+';
 
 /* append your custom style below */
diff --git a/assets/lib b/assets/lib
index 29d7021..e8ef8fb 160000
--- a/assets/lib
+++ b/assets/lib
@@ -1 +1 @@
-Subproject commit 29d7021f45317d02df9a3297d3c52a30bd4ae795
+Subproject commit e8ef8fb673e88ae4404a4bc0d0f43d90bb774e60
diff --git a/package.json b/package.json
index ef094a1..a52b377 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,12 @@
   },
   "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
   "scripts": {
-    "build": "npm run build:js",
+    "build": "concurrently npm:build:*",
+    "build:css": "purgecss -c purgecss.config.js",
     "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
     "watch:js": "rollup -c --bundleConfigAsCjs -w",
-    "lint:style": "stylelint _sass/**/*.scss",
-    "lint:fix:style": "npm run lint:style -- --fix",
+    "lint:scss": "stylelint _sass/**/*.scss",
+    "lint:fix:scss": "npm run lint:style -- --fix",
     "test": "npm run lint:scss"
   },
   "dependencies": {
@@ -37,8 +38,10 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "concurrently": "^8.2.2",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "husky": "^9.0.11",
+    "purgecss": "^6.0.0",
     "rollup": "^4.15.0",
     "rollup-plugin-license": "^3.3.1",
     "semantic-release": "^23.0.8",
diff --git a/purgecss.config.js b/purgecss.config.js
new file mode 100644
index 0000000..de370de
--- /dev/null
+++ b/purgecss.config.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const DIST_PATH = '_sass/dist';
+
+fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  fs.mkdirSync(DIST_PATH);
+});
+
+module.exports = {
+  content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
+  css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
+  keyframes: true,
+  variables: true,
+  output: `${DIST_PATH}/bootstrap.css`,
+  // The `safelist` should be changed appropriately for future development
+  safelist: {
+    standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
+    greedy: [/^col-/, /tooltip/]
+  }
+};
diff --git a/tools/init b/tools/init
index be8ac01..ed478d7 100755
--- a/tools/init
+++ b/tools/init
@@ -82,7 +82,7 @@ init_files() {
     rm -rf "$temp"
 
     ## Cleanup image settings in site config
-    _sedi "s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
+    _sedi "s/(^timezone:).*/\1/;s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
   fi
 
   # remove the other files
@@ -91,8 +91,8 @@ init_files() {
   # build assets
   npm i && npm run build
 
-  # track the js output
-  _sedi "/^assets.*\/dist/d" .gitignore
+  # track the CSS/JS output
+  _sedi "/.*\/dist$/d" .gitignore
 }
 
 commit() {
diff --git a/tools/release b/tools/release
index 90b1823..351321a 100755
--- a/tools/release
+++ b/tools/release
@@ -15,6 +15,7 @@ NODE_SPEC="package.json"
 CHANGELOG="docs/CHANGELOG.md"
 CONFIG="_config.yml"
 
+CSS_DIST="_sass/dist"
 JS_DIST="assets/js/dist"
 
 FILES=(
@@ -79,17 +80,12 @@ _check_src() {
   done
 }
 
-_check_node_packages() {
-  if [[ ! -d node_modules || "$(du node_modules | awk '{print $1}')" == "0" ]]; then
-    npm i
-  fi
-}
-
-check() {
+init() {
   _check_cli
   _check_git
   _check_src
-  _check_node_packages
+  echo -e "> npm install\n"
+  npm i
 }
 
 ## Bump new version to gem-spec file
@@ -115,24 +111,31 @@ prepare() {
 build_gem() {
   if $opt_pkg; then
     BACKUP_PATH="$(mktemp -d)"
-    cp "$JS_DIST"/* "$BACKUP_PATH"
+    mkdir -p "$BACKUP_PATH"/css "$BACKUP_PATH"/js
+    [[ -d $CSS_DIST ]] && cp "$CSS_DIST"/* "$BACKUP_PATH"/css
+    [[ -d $JS_DIST ]] && cp "$JS_DIST"/* "$BACKUP_PATH"/js
   fi
 
   # Remove unnecessary theme settings
-  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" $CONFIG
+  sed -i -E "s/(^timezone:).*/\1/;s/(^cdn:).*/\1/;s/(^avatar:).*/\1/" $CONFIG
   rm -f ./*.gem
 
   npm run build
-  git add "$JS_DIST" -f # add JS distribution files to gem
+  # add CSS/JS distribution files to gem package
+  git add "$CSS_DIST" "$JS_DIST" -f
+
+  echo -e "\n> gem build $GEM_SPEC\n"
   gem build "$GEM_SPEC"
 
-  # resume the settings
+  echo -e "\n> Resume file changes ...\n"
   git reset
   git checkout .
 
   if $opt_pkg; then
     # restore the dist files for future development
-    mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
+    mkdir -p "$CSS_DIST" "$JS_DIST"
+    cp "$BACKUP_PATH"/css/* "$CSS_DIST"
+    cp "$BACKUP_PATH"/js/* "$JS_DIST"
     rm -rf "$BACKUP_PATH"
   fi
 }
@@ -157,7 +160,7 @@ merge() {
 }
 
 main() {
-  check
+  init
 
   if $opt_pre; then
     prepare

From 75891e714fdf08d3409b0aedd24e9d7d2c80fc29 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 13:51:25 +0800
Subject: [PATCH 58/64] build(deps-dev): bump the npm group across 1 directory
 with 6 updates

Updates `@babel/core` to 7.24.5
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.5/packages/babel-core)

Updates `@babel/preset-env` to 7.24.5
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.5/packages/babel-preset-env)

Updates `@commitlint/cli` to 19.3.0
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.3.0/@commitlint/cli)

Updates `rollup` to 4.17.2
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.15.0...v4.17.2)

Updates `semantic-release` to 23.1.1
- [Release notes](https://github.com/semantic-release/semantic-release/releases)
- [Commits](https://github.com/semantic-release/semantic-release/compare/v23.0.8...v23.1.1)

Updates `stylelint` to 16.5.0
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/16.3.1...16.5.0)
---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a52b377..fb9a524 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,10 @@
     "bootstrap": "^5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/preset-env": "^7.24.4",
-    "@commitlint/cli": "^19.2.2",
+    "@babel/preset-env": "^7.24.5",
+    "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -42,10 +42,10 @@
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "husky": "^9.0.11",
     "purgecss": "^6.0.0",
-    "rollup": "^4.15.0",
+    "rollup": "^4.17.2",
     "rollup-plugin-license": "^3.3.1",
-    "semantic-release": "^23.0.8",
-    "stylelint": "^16.3.1",
+    "semantic-release": "^23.1.1",
+    "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "prettier": {

From fdbd7f02e3a739fe1f87103f9afac5fe1eedc96c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 11:42:03 +0800
Subject: [PATCH 59/64] build(deps): update assets submodule

---
 assets/lib | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/lib b/assets/lib
index e8ef8fb..b9c58cf 160000
--- a/assets/lib
+++ b/assets/lib
@@ -1 +1 @@
-Subproject commit e8ef8fb673e88ae4404a4bc0d0f43d90bb774e60
+Subproject commit b9c58cf485a7dcbc833e698d67dd1850bdc93eb3

From f87fdd0ea0b52291744fae14850bbfe931282a95 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 14:08:39 +0800
Subject: [PATCH 60/64] build(deps): upgrade `html-proofer` to v5.x

---
 .github/workflows/starter/pages-deploy.yml |  2 +-
 Gemfile                                    | 16 +---------------
 _posts/2019-08-08-write-a-new-post.md      |  2 +-
 tools/test                                 |  2 +-
 4 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/starter/pages-deploy.yml b/.github/workflows/starter/pages-deploy.yml
index 3d65f75..cc28f99 100644
--- a/.github/workflows/starter/pages-deploy.yml
+++ b/.github/workflows/starter/pages-deploy.yml
@@ -53,7 +53,7 @@ jobs:
       - name: Test site
         run: |
           bundle exec htmlproofer _site \
-            \-\-disable-external=true \
+            \-\-disable-external \
             \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
diff --git a/Gemfile b/Gemfile
index 043b28e..672e9e4 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,19 +5,5 @@ source "https://rubygems.org"
 gemspec
 
 group :test do
-  gem "html-proofer", "~> 4.4"
+  gem "html-proofer", "~> 5.0"
 end
-
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
-platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", ">= 1", "< 3"
-  gem "tzinfo-data"
-end
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 0492b02..bda7705 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -337,7 +337,7 @@ image:
 ---
 ```
 
-> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
+> You can observe LQIP in the preview image of post \"[Text and Typography](../text-and-typography/)\".
 
 For normal images:
 
diff --git a/tools/test b/tools/test
index 9fa02ad..fe47d44 100755
--- a/tools/test
+++ b/tools/test
@@ -62,7 +62,7 @@ main() {
 
   # test
   bundle exec htmlproofer "$SITE_DIR" \
-    --disable-external=true \
+    --disable-external \
     --ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 }
 

From b2245492e6ea63936df043dadee09d72e48d0311 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 14:09:15 +0800
Subject: [PATCH 61/64] build(deps): upgrade `jekyll-compress-html` to v3.2.0

---
 _layouts/compress.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_layouts/compress.html b/_layouts/compress.html
index bb34487..2779e92 100644
--- a/_layouts/compress.html
+++ b/_layouts/compress.html
@@ -1,10 +1,10 @@
 ---
 # Jekyll layout that compresses HTML
-# v3.1.0
+# v3.2.0
 # http://jch.penibelst.de/
 # © 2014–2015 Anatol Broder
 # MIT License
 ---
 
 {% capture _LINE_FEED %}
-{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" or page.compress_html == false %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

From febc01db527078c265431df6a41d644308ff903e Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 14:10:23 +0800
Subject: [PATCH 62/64] docs: update supported versions of Security Policy

---
 docs/SECURITY.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/SECURITY.md b/docs/SECURITY.md
index 5a07d26..8d357fe 100644
--- a/docs/SECURITY.md
+++ b/docs/SECURITY.md
@@ -2,10 +2,10 @@
 
 ## Supported Versions
 
-| Version   | Supported |
-|:----------|:---------:|
-| `6.x`     |     ✓     |
-| < `6.0.0` |     ✗     |
+| Version    | Supported |
+| :--------- | :-------: |
+| >= `7.0.0` |     ✓     |
+| <= `6.0.0` |     ✗     |
 
 ## Reporting a Vulnerability
 

From 37827d81e5809d50d602525a0b5095d5e7c93bdd Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 14:24:15 +0800
Subject: [PATCH 63/64] chore: correct npm script name

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb9a524..0444667 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
     "watch:js": "rollup -c --bundleConfigAsCjs -w",
     "lint:scss": "stylelint _sass/**/*.scss",
-    "lint:fix:scss": "npm run lint:style -- --fix",
+    "lint:fix:scss": "npm run lint:scss -- --fix",
     "test": "npm run lint:scss"
   },
   "dependencies": {

From 9ffd997c3bed893e1d2c6cc4a4f5561acc5954fc Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 May 2024 14:58:23 +0800
Subject: [PATCH 64/64] ci(release): skip git status check in prep phase

---
 tools/release | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/tools/release b/tools/release
index 351321a..c2ea59e 100755
--- a/tools/release
+++ b/tools/release
@@ -56,11 +56,13 @@ _check_cli() {
 }
 
 _check_git() {
-  # ensure that changes have been committed
-  if [[ -n $(git status . -s) ]]; then
-    echo "> Abort: Commit the staged files first, and then run this tool again."
-    exit 1
-  fi
+  $opt_pre || (
+    # ensure that changes have been committed
+    if [[ -n $(git status . -s) ]]; then
+      echo "> Abort: Commit the staged files first, and then run this tool again."
+      exit 1
+    fi
+  )
 
   $opt_pkg || (
     if [[ "$(git branch --show-current)" != "$RELEASE_BRANCH" ]]; then