Merge branch 'master' into production

- Jekyll 4.3.0 introduced `webrick` for Ruby 3.x
- Jekyll's dependency `nokogiri` does not yet support Ruby 3.2. See: https://github.com/sparklemotion/nokogiri/issues/2740/

.github/CONTRIBUTING.md

@@ -33,7 +33,7 @@ During JavaScript development, real-time debugging can be performed through the
 Firstly, start a Jekyll server:
 
 ```console
-$ bash tools/run.sh
+$ bash tools/run
 ```
 
 And then open a new terminal tab and run:

.github/PULL_REQUEST_TEMPLATE.md

@@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->
 
-- [ ] I have run `bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser
 
 ### Test Configuration

.github/workflows/cd.yml

@@ -0,0 +1,14 @@
+name: CD
+on:
+  push:
+    branches: [production, docs]
+
+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 }}"}}'

.github/workflows/ci.yml

@@ -2,14 +2,11 @@ name: 'CI'
 on:
   push:
     branches-ignore:
-      - 'release/**'
+      - 'production'
       - 'docs'
-    tags-ignore:
-      - '**'
     paths-ignore:
       - '.github/**'
       - '!.github/workflows/ci.yml'
-      - '.travis.yml'
       - '.gitignore'
       - 'README.md'
       - 'LICENSE'
@@ -23,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        ruby: [2.5, 2.6, 2.7, 3]
+        ruby: ['2.7', '3.0', '3.1']
 
     steps:
       - name: Checkout
@@ -38,4 +35,4 @@ jobs:
           bundler-cache: true
 
       - name: Test Site
-        run: bash tools/test.sh
+        run: bash tools/test

.github/workflows/pages-deploy.yml.hook

@@ -42,7 +42,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3 # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
+          ruby-version: '3.1' # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
           bundler-cache: true
 
       - name: Build site

.github/workflows/style-lint.yml

@@ -2,11 +2,14 @@ name: 'Style Lint'
 
 on:
   push:
+    branches-ignore:
+      - 'production'
+      - 'docs'
     paths:
-      - '_sass/**.scss'
+      - '_sass/**/*.scss'
   pull_request:
     paths:
-      - '_sass/**.scss'
+      - '_sass/**/*.scss'
 
 jobs:
   stylelint:

.gitignore

@@ -3,7 +3,6 @@
 !.git*
 !.editorconfig
 !.nojekyll
-!.travis.yml
 !.husky
 !.commitlintrc.json
 !.versionrc.json

.stylelintrc.json

@@ -11,12 +11,6 @@
     "alpha-value-notation": "number",
     "selector-not-notation": "simple",
     "color-hex-length": "long",
-    "declaration-block-single-line-max-declarations": 3,
-    "font-family-no-missing-generic-family-keyword": [
-      true,
-      {
-        "ignoreFontFamilies": ["Font Awesome 5 Free"]
-      }
-    ]
+    "declaration-block-single-line-max-declarations": 3
   }
 }

.travis.yml

@@ -1,51 +0,0 @@
-os: linux
-dist: bionic
-language: ruby
-rvm: 2.7.0
-
-addons:
-  apt:
-    packages:
-      - libcurl4-openssl-dev  # to avoid SSL error (for htmlproofer)
-
-# Overriding to drop the `--development` flag which requires the Gemfile.lock at build
-install: bundle install --jobs=3 --retry=3 --path=vendor/bundle
-
-before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
-
-jobs:
-  include:
-    - stage: Upgrade
-      cache: bundler
-      git:
-        depth: false  # for posts' lastmod
-      script: eval "$BUILD_CMD"
-
-    - stage: Starter
-      language: minimal
-      install: true   # skip install step
-      script: eval "$FLUSH_STARTER"
-
-    - stage: Docs
-      cache: bundler
-      git:
-        depth: false  # for posts' lastmod
-      script: eval "$DOCS_CMD"
-
-stages:
-  - name: Upgrade
-    if: branch = production
-  - name: Starter
-    if: branch = production
-  - name: Docs
-    if: branch = docs
-
-notifications:
-  email:
-    recipients:
-      - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
-    on_success: never
-
-env:
-  global:
-    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

CHANGELOG.md

@@ -2,7 +2,42 @@
 
 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.
 
-### [5.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.0...v5.3.1) (2022-10-25)
+## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
+
+
+### Features
+
+* add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
+* add embed video support ([ed6dc53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ed6dc539eff7003a3765bcd8c31ae5e91a863d65))
+* add shimmer background when image loads ([ab16fdc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ab16fdc7fc26811130b98a1773beb62bff6182e8))
+* set preview image ratio to 1.91 : 1 ([4b6ccbc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4b6ccbcbccce27b9fcb035812efefe4eb69301cf))
+* support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
+* support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
+
+
+### Bug Fixes
+
+* `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
+* `og:image` will be incorrect if the image uses a cross-domain URL ([8de1abd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8de1abda6be3633982392178731431b0ddb1b52b))
+* refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
+* spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
+
+
+### Improvements
+
+* **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
+
+## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)
+
+
+### Bug Fixes
+
+* `mermaid` occasionally fails to initialize ([#536](https://github.com/cotes2020/jekyll-theme-chirpy/issues/536)) ([48f14e3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae))
+* **comment:** disqus doesn't follow theme mode switching ([b0d5956](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0d5956f5a0ed894984d6b1754efeba04d8bc966))
+* restore full-text search ([#741](https://github.com/cotes2020/jekyll-theme-chirpy/issues/741)) ([6774e0e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6774e0e1fb37cf467b14be481347412713763f05))
+* the image URL in the SEO-related tags is incomplete ([#754](https://github.com/cotes2020/jekyll-theme-chirpy/issues/754)) ([f6e9a3f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f6e9a3fccf7ab34db71f8aefaf86fdcc05861076))
+
+## [5.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.0...v5.3.1) (2022-10-25)
 
 
 ### Bug Fixes

Gemfile

@@ -17,6 +17,3 @@ end
 
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
-
-# Jekyll <= 4.2.0 compatibility with Ruby 3.0
-gem "webrick", "~> 1.7"

README.md

@@ -12,30 +12,31 @@
 
   [**Live Demo →**](https://cotes2020.github.io/chirpy-demo)
 
-  [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/chirpy-images/main/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
+  [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
 
 </div>
 
 ## Features
 
-- Localized Layout
 - Dark/Light Theme Mode
+- Localized UI language
 - Pinned Posts
 - Hierarchical Categories
-- Last Modified Date for Posts
+- Trending Tags
 - Table of Contents
-- Auto-generated Related Posts
+- Last Modified Date of Posts
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagram & Flowchart
+- Dark/Light Mode Images
+- Embed Videos
 - Disqus/Utterances/Giscus Comments
 - Search
 - Atom Feeds
 - Google Analytics
-- GA Pageviews Reporting
+- Page Views Reporting
 - SEO & Performance Optimization
 
-
 ## Quick Start
 
 Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.
@@ -102,4 +103,4 @@ This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chi
 <!-- ReadMe links -->
 
 [jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
-[cn-donation]: https://cotes2020.github.io/sponsor/
+[cn-donation]: https://sponsor.cotes.page/

_config.yml

@@ -78,7 +78,7 @@ theme_mode:   # [light|dark]
 # will be added to all image (site avatar & posts' images) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: 'https://raw.githubusercontent.com/cotes2020/chirpy-images/main'
+img_cdn: 'https://chirpy-img.netlify.app'
 
 # the avatar on sidebar, support local or CORS resources
 avatar: '/commons/avatar.jpg'

_data/assets/cross_origin.yml

@@ -16,47 +16,47 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
 
 bootstrap-toc:
   css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
   js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js
 
 countup:
   js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
 
 magnific-popup:
-  css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css
-  js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js
+  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
 
-lozad:
-  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+lazysizes:
+  js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
 
 clipboard:
-  js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
+  js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
 
 polyfill:
   js: https://polyfill.io/v3/polyfill.min.js?features=es6
 
 mathjax:
-  js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
+  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js

_data/assets/self_host.yml

@@ -16,7 +16,7 @@ bootstrap-toc:
   js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
 
 fontawesome:
-  css: /assets/lib/fontawesome-free-5.15.4/css/all.min.css
+  css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css
 
 search:
   js: /assets/lib/simple-jekyll-search-1.10.0/simple-jekyll-search.min.js
@@ -38,8 +38,8 @@ magnific-popup:
   css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
   js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
 
-lozad:
-  js: /assets/lib/lozad-1.16.0/lozad.min.js
+lazysizes:
+  js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js
 
 clipboard:
   js: /assets/lib/clipboard-2.0.9/clipboard.min.js

_data/contact.yml

@@ -19,7 +19,7 @@
 # -
 #   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
-#   url:  ''                  # Fill with your mastodon account page
+#   url:  ''                  # Fill with your Mastodon account page, rel="me" will be applied for verification
 # -
 #   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>

_data/locales/bg-BG.yml

@@ -5,7 +5,7 @@
 layout:
   post: Публикация
   category: Категория
-  tag: Тагове
+  tag: Таг
 
 # The tabs of sidebar
 tabs:
@@ -43,7 +43,7 @@ copyright:
 meta: Създадено чрез :PLATFORM и :THEME тема.
 
 not_found:
-  statment: Съжалявам, но този на този URL адрес няма налично съдържание.
+  statment: Съжалявам, но на този URL адрес няма налично съдържание.
 
 notification:
   update_found: Налична е нова версия на съдържанието.
@@ -71,7 +71,7 @@ post:
       title: Копирай линк
       succeed: Линкът е копиран успешно!
   # pinned prompt of posts list on homepage
-  pin_prompt: Прикрепен
+  pin_prompt: Прикрепенa
 
 # categories page
 categories:

_data/locales/en.yml

@@ -40,7 +40,7 @@ copyright:
     Except where otherwise noted, the blog posts on this site are licensed
     under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Using the :PLATFORM theme :THEME.
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.

_includes/comments/disqus.html

@@ -15,7 +15,6 @@
   };
 
   /* Lazy loading */
-
   var disqus_observer = new IntersectionObserver(function (entries) {
     if(entries[0].isIntersecting) {
         (function () {
@@ -32,8 +31,9 @@
   disqus_observer.observe(document.querySelector('#disqus_thread'));
 
   /* Auto switch theme */
-
   function reloadDisqus() {
+    if (event.source === window && event.data &&
+      event.data.direction === ModeToggle.ID) {
       /* Disqus hasn't been loaded */
       if (typeof DISQUS === "undefined") {
         return;
@@ -43,12 +43,12 @@
         DISQUS.reset({ reload: true, config: disqus_config });
       }
     }
+  }
 
   const modeToggle = document.querySelector(".mode-toggle");
 
   if (typeof modeToggle !== "undefined") {
-    /*  modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme'  */
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
+    window.addEventListener("message", reloadDisqus);
   }
 
 </script>

_includes/embed/twitch.html

@@ -0,0 +1,4 @@
+<iframe class="embed-video twitch lazyload"
+  src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
+  frameborder="0" allowfullscreen="true"
+  scrolling="no"></iframe>

_includes/embed/youtube.html

@@ -0,0 +1,6 @@
+<iframe class="embed-video youtube lazyload"
+  src="https://www.youtube.com/embed/{{ include.id }}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen></iframe>

_includes/footer.html

@@ -17,16 +17,16 @@
       <div class="footer-right">
         <p class="mb-0">
 
-          {% capture _platform %}
+          {%- capture _platform -%}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-          {% endcapture %}
+          {%- endcapture -%}
 
-          {% capture _theme %}
+          {%- capture _theme -%}
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-          {% endcapture %}
+          {%- endcapture -%}
 
           {{ site.data.locales[site.lang].meta
-            | default: 'Powered by :PLATFORM with :THEME theme.'
+            | default: 'Using the :PLATFORM theme :THEME.'
             | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
           }}
         </p>

_includes/head.html

@@ -22,23 +22,27 @@
     {% seo title=false %}
   {% endcapture %}
 
-  {% if site.img_cdn and seo_tags contains 'og:image' %}
-    {% assign properties = 'og:image,twitter:image' | split: ',' %}
+  {% if page.image %}
+    {% assign img = page.image.path | default: page.image %}
+
+    {% unless img contains '://' %}
+      {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
+      {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
 
-    {% for prop in properties %}
       {% if site.img_cdn contains '//' %}
-        <!-- `site.img_cdn` is a cross-origin URL -->
-        {% capture target %}<meta property="{{ prop }}" content="{{ site.url }}{% endcapture %}
-        {% capture replacement %}<meta property="{{ prop }}" content="{{ site.img_cdn }}{% endcapture %}
+        <!-- it's a cross-origin URL -->
+        {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
       {% else %}
-        <!-- `site.img_cdn` is a local file path -->
-        {% capture target %}<meta property="{{ prop }}" content="{{ site.url }}{{ site.baseurl }}{% endcapture %}
-        {% assign replacement = target | append: site.img_cdn %}
+        <!-- it's a local file path -->
+        {%- capture replacement -%}
+          "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
+        {%- endcapture -%}
       {% endif %}
 
       {% assign seo_tags = seo_tags | replace: target, replacement %}
 
-    {% endfor %}
+    {% endunless %}
+
   {% endif %}
 
   {{ seo_tags }}

_includes/js-selector.html

@@ -15,12 +15,11 @@
 {% if page.layout == 'post' or page.layout == 'page' %}
   <!-- image lazy-loading & popup & clipboard -->
   {% assign _urls = site.data.assets[origin].magnific-popup.js
-      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].lazysizes.js
       | append: ',' | append: site.data.assets[origin].clipboard.js
   %}
 
   {% include jsdelivr-combine.html urls=_urls %}
-
 {% endif %}
 
 {% if page.layout == 'home'

_includes/mermaid.html

@@ -5,7 +5,8 @@
 <script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
 
 <script>
-  $(function() {
+  (function () {
+
     function updateMermaid(event) {
       if (event.source === window && event.data &&
         event.data.direction === ModeToggle.ID) {
@@ -43,15 +44,16 @@
       theme: initTheme  /* <default|dark|forest|neutral> */
     };
 
-    /* Markdown converts to HTML */
+    /* Create mermaid tag */
     $("pre").has("code.language-mermaid").each(function () {
       let svgCode = $(this).children().html();
       $(this).addClass("unloaded");
-      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
     });
 
     mermaid.initialize(mermaidConf);
 
     window.addEventListener("message", updateMermaid);
-  });
+  })();
+
 </script>

_includes/post-sharing.html

@@ -6,7 +6,6 @@
   <span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
-    {% assign title = title | url_encode %}
     {% assign url = page.url | absolute_url | url_encode %}
 
     {% for share in site.data.share.platforms %}

_includes/refactor-content.html

@@ -51,31 +51,52 @@
   {% assign _img_content = nil %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
+  <!-- CDN URL -->
+  {% if site.img_cdn %}
+    {% if site.img_cdn contains '//' %}
+      {% assign _path_prefix = site.img_cdn %}
+    {% else %}
+      {% assign _path_prefix = site.img_cdn | relative_url %}
+    {% endif %}
+  {% else %}
+    {% assign _path_prefix = site.baseurl %}
+  {% endif %}
+
+  <!-- Add image path -->
+  {% if page.img_path %}
+    {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
+    {% assign _path_prefix = _path_prefix | append: _path %}
+  {% endif %}
+
   {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
       {% assign _img_content = _img_snippet %}
       {% continue %}
     {% endif %}
 
-    {% assign _width = nil %}
-    {% assign _height = nil %}
-    {% assign _src = nil %}
-
     {% assign _left = _img_snippet | split: '>' | first %}
     {% assign _right = _img_snippet | remove: _left %}
 
-    {% assign _left = _left | remove: ' /' %}
-    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
-    {% assign _attrs = _left | split: ' ' %}
+    {% unless _left contains 'src=' %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: '" ' %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _lqip = nil %}
+    {% assign _class = nil %}
 
     {% for _attr in _attrs %}
-      {% assign _pair = _attr | split: '=' %}
-      {% if _pair.size < 2 %}
+      {% unless _attr contains '=' %}
         {% continue %}
-      {% endif %}
+      {% endunless %}
 
+      {% assign _pair = _attr | remove: '"' | split: '=' %}
       {% capture _key %}{{ _pair | first }}{% endcapture %}
-      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
+      {% capture _value %}{{ _pair | last }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
@@ -84,68 +105,91 @@
           {% assign _height = _value %}
         {% when 'src' %}
           {% assign _src = _value %}
+        {% when 'lqip' %}
+          {% assign _lqip = _value %}
+        {% when 'class' %}
+          {% assign _class = _value %}
       {% endcase %}
 
-      {% if _width and _height and _src %}
-        {% break %}
-      {% endif %}
     {% endfor %}
 
-    {% if _src %}
-      {% unless _src contains '://' %}
-
-        <!-- Add CDN URL -->
-        {% if site.img_cdn %}
-          {% if site.img_cdn contains '//' %}
-            {% assign _src_prefix = site.img_cdn %}
-          {% else %}
-            {% assign _src_prefix = site.img_cdn | relative_url %}
-          {% endif %}
-        {% else %}
-          {% assign _src_prefix = site.baseurl %}
+    <!-- take out classes -->
+    {% if _class %}
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
+      {% assign _left = _left | remove: _old_class %}
     {% endif %}
 
-        <!-- Add image path -->
-        {% if page.img_path %}
-          {% assign _path = page.img_path %}
-          {% assign last_char = _path | slice: -1 %}
+    {% assign _final_src = nil %}
 
-          {% unless last_char == '/' %}
-            {% assign _path = _path | append: '/' %}
+    {% unless _src contains '//' %}
+      {% assign _final_src = _path_prefix | append: _src %}
+      {% capture _src_from %}"{{ _src }}"{% endcapture %}
+      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
+      {% assign _left = _left | replace: _src_from, _src_to %}
     {% endunless %}
 
-          {% assign _src_prefix = _src_prefix | append: _path %}
+    {% if _lqip %}
+      {% unless _lqip contains ':' %}
+        {% assign _final_lqip = _path_prefix | append: _lqip %}
+        {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
+        {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
+        {% assign _left = _left | replace: _lqip_from, _lqip_to %}
+      {% endunless %}
     {% endif %}
 
-        {% assign _final_src = _src_prefix | append: _src %}
-        {% assign _left = _left | replace: _src, _final_src %}
-
-      {% endunless %}
-
-      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-
+    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
     {% assign _left = _left | replace: 'src=', 'data-src=' %}
-
+    {% if _left contains 'class=' %}
+      {% assign _left = _left | replace: 'class="', 'class="lazyload '%}
+    {% else %}
+      {% assign _left = _left | append: ' class="lazyload"' %}
     {% endif %}
 
-    <!-- Add SVG placehoder to prevent layout reflow -->
-
+    <!-- add image placeholder -->
+    {% if _lqip %}
+      {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
+    {% else %}
       {% if _width and _height %}
+        <!-- add SVG placehoder -->
         {%- capture _svg -%}
           src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width  }} {{ _height }}'%3E%3C/svg%3E"
         {%- endcapture -%}
-
         {% assign _left =  _svg | append: ' ' | append: _left %}
+        {% assign _class = _class | append: ' shimmer' %}
+      {% endif %}
     {% endif %}
 
     <!-- Bypass the HTML-proofer test -->
     {% assign _left = _left | append: ' data-proofer-ignore' %}
 
+    <!-- make sure the `<img>` is wrapped by `<a>` -->
+    {% assign _parent = _right | slice: 1, 4 %}
+
+    {% if _parent == '</a>' %}
+      <!-- add class to exist <a> tag -->
+      {% assign _size = _img_content | size | minus: 1 %}
+      {% capture _class %}
+        class="img-link{% unless _lqip %} shimmer{% endunless %}"
+      {% endcapture %}
+      {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+
+    {% else %}
+      <!-- create the image wrapper -->
+      {%- capture _wrapper_start -%}
+        <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
+      {%- endcapture -%}
+      {% assign _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></a' %}
+    {% endif %}
+
+    <!-- combine -->
     {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
+  {% if _img_content %}
     {% assign _content = _img_content %}
+  {% endif %}
 
 {% endif %}
 

_includes/sidebar.html

@@ -81,7 +81,17 @@
 
       {% if url %}
       <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+        {% assign link_types = nil %}
+        {% unless entry.noblank %}
+          {% assign link_types = link_types | append: " noopener" %}
+          target="_blank"
+        {% endunless %}
+
+        {% if entry.type == 'mastodon' %}
+          {% assign link_types = link_types | append: " me" %}
+        {% endif %}
+
+        {% if link_types %}rel="{{ link_types | lstrip }}"{% endif %}>
         <i class="{{ entry.icon }}"></i>
       </a>
       {% endif %}

_javascript/copyright

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_javascript/utils/img-extra.js

@@ -1,33 +1,13 @@
 /**
- Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
- and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+ * Set up image stuff
  */
 
-$(function () {
-    const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
-
-    if ($(`${IMG_SCOPE} img`).length <= 0) {
+(function() {
+    if ($('#core-wrapper img[data-src]') <= 0) {
         return;
     }
 
-    /* lazy loading */
-
-    const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
-    const observer = lozad(imgList);
-    observer.observe();
-
-    /* popup */
-
-    $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each(
-        function () {
-            let nextTag = $(this).next();
-            const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
-            const src = $(this).attr('data-src'); // created by lozad.js
-
-            $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
-        }
-    );
-
+    /* See: <https://github.com/dimsemenov/Magnific-Popup> */
     $('.popup').magnificPopup({
         type: 'image',
         closeOnContentClick: true,
@@ -39,8 +19,10 @@ $(function () {
         }
     });
 
-    /* markup the image links */
-
-    $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
-
+    /* Stop shimmer when image loaded */
+    document.addEventListener('lazyloaded', function(e) {
+        const $img = $(e.target);
+        $img.parent().removeClass('shimmer');
     });
+
+})();

_layouts/post.html

@@ -26,31 +26,22 @@ tail_includes:
     </span>
     {% endif %}
 
-  {% if page.image.path %}
-    {% capture bg %}
-      {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+  {% if page.image %}
+    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+    {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
+
+    {% capture lqip %}
+      {% if page.image.lqip %}
+        lqip="{{ page.image.lqip }}"
+      {% endif %}
     {% endcapture %}
 
     <div class="mt-3 mb-3">
-      <img src="{{ page.image.path }}" class="preview-img {{ bg | strip }}"
-        alt="{{ page.image.alt | default: "Preview Image" }}"
-
-      {% if page.image.width %}
-        width="{{ page.image.width }}"
-      {% elsif page.image.w %}
-        width="{{ page.image.w }}"
-      {% endif %}
-
-      {% if page.image.height %}
-        height="{{ page.image.height }}"
-      {% elsif page.image.h %}
-        height="{{ page.image.h }}"
-      {% endif %}>
-
-      {% if page.image.alt %}
+      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
+      {%- if page.image.alt -%}
         <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {% endif %}
-
+      {%- endif -%}
     </div>
   {% endif %}
 

_posts/2019-08-08-text-and-typography.md

@@ -8,14 +8,12 @@ math: true
 mermaid: true
 image:
   path: /commons/devices-mockup.png
-  width: 800
-  height: 500
+  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
   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.
 
-
 ## Titles
 ---
 # H1 - heading
@@ -26,7 +24,6 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 <h4>H4 - heading</h4>
 ---
-<br>
 
 ## Paragraph
 
@@ -95,56 +92,6 @@ Moon
 
 Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
 
-## Images
-
-- Default (with caption)
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
-_Full screen width and center alignment_
-
-<br>
-
-- Shadow
-
-![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" .w-75 }
-_shadow effect (visible in light mode)_
-
-<br>
-
-- Left aligned
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
-
-- Float to left
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
-  Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
-
-- Float to right
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
-  Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
-
-## Mermaid SVG
-
-```mermaid
- gantt
-  title  Adding GANTT diagram functionality to mermaid
-  apple :a, 2017-07-20, 1w
-  banana :crit, b, 2017-07-23, 1d
-  cherry :active, c, after b a, 1d
-```
-
-## Mathematics
-
-The mathematics powered by [**MathJax**](https://www.mathjax.org/):
-
-$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
-
-When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
-
-$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
-
 ## Inline code
 
 This is an example of `Inline Code`.
@@ -153,7 +100,7 @@ This is an example of `Inline Code`.
 
 Here is the `/path/to/the/file.extend`{: .filepath}.
 
-## Code block
+## Code blocks
 
 ### Common
 
@@ -161,17 +108,7 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 This is a common code snippet, without syntax highlight and line number.
 ```
 
-### Specific Languages
-
-#### Console
-
-```console
-$ env |grep SHELL
-SHELL=/usr/local/bin/bash
-PYENV_SHELL=bash
-```
-
-#### Shell
+### Specific Language
 
 ```bash
 if [ $? -ne 0 ]; then
@@ -189,6 +126,58 @@ fi;
 ```
 {: file='_sass/jekyll-theme-chirpy.scss'}
 
+## Mathematics
+
+The mathematics powered by [**MathJax**](https://www.mathjax.org/):
+
+$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## Images
+
+### Default (with caption)
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
+_Full screen width and center alignment_
+
+### Left aligned
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+
+### Float to left
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Float to right
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Dark/Light mode & Shadow
+
+The image below will toggle dark/light mode based on theme preference, notice it has shadows.
+
+![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
+![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+
+## Video
+
+{% include embed/youtube.html id='Balreaj8Yqs' %}
+
 ## Reverse Footnote
 
 [^footnote]: The footnote source

_posts/2019-08-08-write-a-new-post.md

@@ -7,7 +7,7 @@ tags: [writing]
 render_with_liquid: false
 ---
 
-This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
+This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.
 
 ## Naming and Path
 
@@ -177,9 +177,18 @@ By default, the image is centered, but you can specify the position by using one
   ```
   {: .nolineno}
 
+### Dark/Light mode
+
+You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
+
+```markdown
+![Light mode only](/path/to/light-mode.png){: .light }
+![Dark mode only](/path/to/dark-mode.png){: .dark }
+```
+
 ### Shadow
 
-The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
+The screenshots of the program window can be considered to show the shadow effect:
 
 ```markdown
 ![Desktop View](/assets/img/sample/mockup.png){: .shadow }
@@ -220,7 +229,6 @@ When a post contains many images, it will be a time-consuming task to repeatedly
 img_path: /img/path/
 ---
 ```
-{: .nolineno }
 
 And then, the image source of Markdown can write the file name directly:
 
@@ -238,23 +246,48 @@ The output will be:
 
 ### Preview Image
 
-If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image:
+If you want to add an image at the top of the article, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
+
+Knowing these prerequisites, you can start setting the image's attribute:
 
 ```yaml
 ---
 image:
-  path: /path/to/image/file
-  width: 1000   # in pixels
-  height: 400   # in pixels
+  path: /path/to/image
   alt: image alternative text
 ---
 ```
 
-Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
-
 Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, 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.
 
-Starting from _Chirpy v5.2.0_, the property for the preview image is changed to `image.path`. If upgrading the theme from a prior version, you will have to update posts' metadata to use new image property.
+For simple use, you can also just use `image` to define the path.
+
+```yml
+---
+image: /path/to/image
+---
+```
+
+### LQIP
+
+For preview images:
+
+```yaml
+---
+image:
+  lqip: /path/to/lqip-file # or base64 URI
+---
+```
+
+> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
+
+
+For normal images:
+
+```markdown
+![Image description](/path/to/image){: lqip="/path/to/lqip-file" }
+```
+{: .nolineno }
 
 ## Pinned Posts
 
@@ -353,6 +386,24 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 
 Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
+## Videos
+
+You can embed a video with the following syntax:
+
+```liquid
+{% include embed/{Platform}.html id='{ID}' %}
+```
+Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
+
+The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
+
+| Video URL                                                                                          | Platform  | ID            |
+|----------------------------------------------------------------------------------------------------|-----------|:--------------|
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`  | `1634779211`  |
+
+
+
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).

_posts/2019-08-09-getting-started.md

@@ -39,15 +39,13 @@ $ bash tools/init.sh
 
 The above command will:
 
-1. Removes some files or directories from your repository:
-    - `.travis.yml`{: .filepath}
-    - files under `_posts`{: .filepath}
+1. Remove the files in `_posts`{: .filepath} from your repository.
 
 2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}.
 
-3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}.
+3. Remove item `Gemfile.lock` from `.gitignore`{: .filepath}.
 
-4. Creates a new commit to save the changes automatically.
+4. Create a new commit to save the changes automatically.
 
 ### Installing Dependencies
 
@@ -109,6 +107,12 @@ Now you can choose ONE of the following methods to deploy your Jekyll site.
 
 Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`{: .filepath}. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. And then rename your repository to `<GH_USERNAME>.github.io` on GitHub.
 
+Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repository and your local machine is not Linux, go the the root directory of your site and update the platform list:
+
+```console
+$ bundle lock --add-platform x86_64-linux
+```
+
 Now publish your Jekyll site:
 
 1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.

_sass/addon/commons.scss

@@ -83,6 +83,47 @@ a {
 img {
   max-width: 100%;
   height: auto;
+
+  &[data-src] {
+    &.lazyloaded {
+      z-index: 1;
+      -webkit-animation: fade-in 0.4s ease-in;
+      animation: fade-in 0.4s ease-in;
+    }
+
+    &[data-lqip="true"] {
+      &.lazyload,
+      &.lazyloading {
+        -webkit-filter: blur(20px);
+        filter: blur(20px);
+      }
+    }
+
+    &:not([data-lqip="true"]) {
+      &.lazyload,
+      &.lazyloading {
+        background: var(--img-bg);
+      }
+    }
+
+    &.shadow {
+      -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
+    }
+
+    @extend %img-caption;
+  }
+
+  @-webkit-keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 }
 
 blockquote {
@@ -93,15 +134,19 @@ blockquote {
   &[class^="prompt-"] {
     display: flex;
     border-left: 0;
-    border-radius: 6px;
     padding: 1rem;
     color: var(--prompt-text-color);
 
+    @extend %rounded;
+
     &::before {
-      font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;
       margin-right: 0.75rem;
+      position: relative;
+      top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
     }
 
     > div {
@@ -113,7 +158,7 @@ blockquote {
     }
   }
 
-  @include prompt("tip", "\f0eb", 400);
+  @include prompt("tip", "\f0eb", "regular");
   @include prompt("info", "\f06a");
   @include prompt("warning", "\f06a");
   @include prompt("danger", "\f071");
@@ -180,43 +225,6 @@ i { /* fontawesome icons */
   }
 }
 
-@-webkit-keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-img[data-src] {
-  margin: 0.5rem 0;
-
-  &[data-loaded="true"] {
-    -webkit-animation: fade-in linear 0.5s;
-    animation: fade-in linear 0.5s;
-  }
-
-  &.left {
-    float: left;
-    margin: 0.75rem 1rem 1rem 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0.75rem 0 1rem 1rem;
-  }
-
-  &.shadow {
-    -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
-  }
-
-  @extend %img-caption;
-}
-
 /* --- Panels --- */
 
 .access {
@@ -397,27 +405,15 @@ img[data-src] {
     margin-bottom: 1.5rem;
   }
 
-  a {
-    &.img-link {
-      @extend %no-cursor;
-    }
-
-    /* created by `_includes/img-extra.html` */
-    &.popup {
-      cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
+  p {
+    > img[data-src],
+    > a.popup {
+      &:not(.normal):not(.left):not(.right) {
         @include align-center;
       }
     }
-
-    &:hover {
-      code {
-        @extend %link-hover;
   }
 }
-  } /* a */
-}
 
 .pageviews .fa-spinner {
   font-size: 80%;
@@ -448,6 +444,14 @@ img[data-src] {
   overflow-wrap: break-word;
 
   a {
+    &.popup {
+      @extend %no-cursor;
+      @extend %img-caption;
+      @include mt-mb(0.5rem);
+
+      cursor: zoom-in;
+    }
+
     &:not(.img-link) {
       @extend %link-underline;
 
@@ -455,14 +459,12 @@ img[data-src] {
         @extend %link-hover;
       }
     }
-
-    &.img-link {
-      @extend %img-caption;
-    }
   }
 
-  > ol,
-  > ul {
+  ol,
+  ul {
+    &:not([class]),
+    &.task-list {
       -webkit-padding-start: 1.75rem;
       padding-inline-start: 1.75rem;
 
@@ -473,11 +475,12 @@ img[data-src] {
 
       ol,
       ul {
-      -webkit-padding-start: 1rem;
-      padding-inline-start: 1rem;
+        -webkit-padding-start: 1.25rem;
+        padding-inline-start: 1.25rem;
         margin: 0.5rem 0;
       }
     }
+  }
 
   ul.task-list {
     -webkit-padding-start: 1.25rem;
@@ -541,6 +544,58 @@ img[data-src] {
   }
 }
 
+.rounded-10 {
+  border-radius: 10px !important;
+}
+
+.img-link {
+  color: transparent;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.shimmer {
+  overflow: hidden;
+  position: relative;
+  background: var(--img-bg);
+
+  &::before {
+    content: "";
+    position: absolute;
+    background: var(--shimmer-bg);
+    height: 100%;
+    width: 100%;
+    -webkit-animation: shimmer 1s infinite;
+    animation: shimmer 1s infinite;
+  }
+
+  @-webkit-keyframes shimmer {
+    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+  }
+
+  @keyframes shimmer {
+    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+  }
+}
+
+.embed-video {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+
+  @extend %rounded;
+
+  &.youtube {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.twitch {
+    aspect-ratio: 310 / 189;
+  }
+}
+
 /* --- buttons --- */
 .btn-lang {
   border: 1px solid !important;
@@ -610,6 +665,16 @@ img[data-src] {
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+.left {
+  float: left;
+  margin: 0.75rem 1rem 1rem 0 !important;
+}
+
+.right {
+  float: right;
+  margin: 0.75rem 0 1rem 1rem !important;
+}
+
 /* --- Overriding --- */
 
 /* magnific-popup */
@@ -751,7 +816,7 @@ $sidebar-display: "sidebar-display";
       &:last-child {
         a {
           position: relative;
-          left: $cursor-width / 2;
+          left: calc($cursor-width / 2);
           width: 100%;
         }
 
@@ -777,7 +842,7 @@ $sidebar-display: "sidebar-display";
 
     @for $i from 1 through $tab-count {
       $offset: $tab-count - $i;
-      $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
+      $top: -$offset * $tab-height + calc(($tab-height - $tab-cursor-height) / 2);
 
       @if $i < $tab-count {
         > li.active:nth-child(#{$i}),
@@ -1190,6 +1255,7 @@ $sidebar-display: "sidebar-display";
 
     div.d-flex {
       padding: 1.5rem 0;
+      line-height: 1.65;
       flex-wrap: wrap;
       justify-content: space-around !important;
     }

_sass/addon/module.scss

@@ -90,6 +90,10 @@
   font-style: normal;
 }
 
+%rounded {
+  border-radius: 6px;
+}
+
 %img-caption {
   + em {
     display: block;
@@ -114,6 +118,11 @@
   text-decoration: none;
 }
 
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;
@@ -141,14 +150,14 @@
   transform: translateX(-50%);
 }
 
-@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+@mixin prompt($type, $fa-content, $fa-style: "solid") {
   &.prompt-#{$type} {
     background-color: var(--prompt-#{$type}-bg);
 
     &::before {
-      content: $fw-icon;
+      content: $fa-content;
       color: var(--prompt-#{$type}-icon-color);
-      font-weight: $icon-weight;
+      font: var(--fa-font-#{$fa-style});
     }
   }
 }

_sass/addon/syntax.scss

@@ -29,18 +29,12 @@ html {
   }
 }
 
-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */
 
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
-%code-snippet-radius {
-  border-radius: $code-radius;
-}
-
 %code-snippet-padding {
   padding-left: 1rem;
   padding-right: 1.5rem;
@@ -48,7 +42,7 @@ $code-radius: 6px;
 
 .highlighter-rouge {
   @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
+  @extend %rounded;
 
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
@@ -56,7 +50,7 @@ $code-radius: 6px;
 }
 
 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
   @extend %code-snippet-bg;
 
   @at-root figure#{&} {
@@ -173,8 +167,6 @@ div {
 
   $code-header-height: 2.25rem;
 
-  border-top-left-radius: $code-radius;
-  border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -226,9 +218,9 @@ div {
   /* clipboard */
   button {
     @extend %cursor-pointer;
+    @extend %rounded;
 
     border: 1px solid transparent;
-    border-radius: $code-radius;
     height: $code-header-height;
     width: $code-header-height;
     padding: 0;

_sass/colors/dark-typography.scss

@@ -26,6 +26,14 @@
   --label-color: rgb(108, 117, 125);
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
+  --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
+  --shimmer-bg:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(58, 55, 55, 0.4) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@@ -65,7 +73,6 @@
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-bg);
-  --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
@@ -96,9 +103,15 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   .post img[data-src] {
+    &.lazyloaded {
       -webkit-filter: brightness(95%);
       filter: brightness(95%);
     }
+  }
+
+  .light {
+    display: none;
+  }
 
   hr {
     border-color: var(--main-border-color);

_sass/colors/light-typography.scss

@@ -24,6 +24,14 @@
   --btn-box-shadow: #eaeaea;
   --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
+  --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
+  --shimmer-bg:
+    linear-gradient(
+      90deg,
+      rgba(250, 250, 250, 0) 0%,
+      rgba(232, 230, 230, 1) 50%,
+      rgba(250, 250, 250, 0) 100%
+    );
 
   /* Sidebar */
   --sidebar-bg: #eeeeee;
@@ -64,7 +72,6 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
-  --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
@@ -82,6 +89,10 @@
     --link-underline-color: rgb(219, 216, 216);
   }
 
+  .dark {
+    display: none;
+  }
+
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);
   --categories-icon-hover-color: darkslategray;

_sass/jekyll-theme-chirpy.scss

@@ -1,7 +1,7 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_sass/layout/post.scss

@@ -26,12 +26,30 @@
   color: var(--text-color);
 }
 
-img.preview-img {
+%preview-margin {
   margin: 0;
-  border-radius: 6px;
+}
 
-  &.bg[data-loaded="true"] {
-    background: var(--preview-img-bg);
+.preview-img {
+  @include align-center;
+  @extend %preview-margin;
+  @extend %rounded;
+
+  max-width: 100%;
+
+  &:not(.no-bg) {
+    img.lazyloaded {
+      background: var(--img-bg);
+    }
+  }
+
+  img {
+    aspect-ratio: 40 / 21;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %preview-margin;
+    @extend %rounded;
   }
 }
 

assets/feed.xml

@@ -15,7 +15,7 @@ permalink: /feed.xml
     <uri>{{ "/" | absolute_url }}</uri>
   </author>
   <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
-  <link rel="alternate" type="text/html" hreflang="{{ site.lang }}"
+  <link rel="alternate" type="text/html" hreflang="{{ site.alt_lang | default: site.lang }}"
     href="{{ '/' | absolute_url }}"/>
   <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
   <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>

assets/js/data/search.json

@@ -12,7 +12,9 @@ swcache: true
     "tags": {{ post.tags | join: ', ' | jsonify }},
     "date": "{{ post.date }}",
     {% include no-linenos.html content=post.content %}
-    "snippet": {{ content | strip_html | strip_newlines | truncate: 200 | jsonify }}
+    {% assign _content = content | strip_html | strip_newlines %}
+    "snippet": {{ _content | truncate: 200 | jsonify }},
+    "content": {{ _content | jsonify }}
   }{% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]

assets/js/dist/categories.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/commons.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/home.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/misc.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/pvreport.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

jekyll-theme-chirpy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "5.3.1"
+  spec.version       = "5.4.0"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 
@@ -23,9 +23,9 @@ Gem::Specification.new do |spec|
     "plugin_type"       => "theme"
   }
 
-  spec.required_ruby_version = ">= 2.5"
+  spec.required_ruby_version = [">= 2.5", "< 3.2"]
 
-  spec.add_runtime_dependency "jekyll", "~> 4.1"
+  spec.add_runtime_dependency "jekyll", "~> 4.3"
   spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
   spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
   spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "description": "A minimal, responsive, and powerful Jekyll theme for presenting professional writing.",
   "repository": {
     "type": "git",

tools/init

@@ -20,7 +20,7 @@ help() {
 
 check_status() {
   if [[ -n $(git status . -s) ]]; then
-    echo "Error: Commit unstaged files first, and then run this tool againt."
+    echo "Error: Commit unstaged files first, and then run this tool again."
     exit -1
   fi
 }
@@ -46,30 +46,24 @@ check_init() {
   fi
 }
 
+checkout_latest_tag() {
+  tag=$(git describe --tags $(git rev-list --tags --max-count=1))
+  git reset --hard "$tag"
+}
+
 init_files() {
   if $_no_gh; then
     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}
 
-    ## Ensure the gh-actions trigger branch
-
-    _workflow=".github/workflows/${ACTIONS_WORKFLOW}"
-    _default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
-    _lineno="$(sed -n "/branches:/=" "$_workflow")"
-
-    sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow"
-    rm -f "$_workflow.$TEMP_SUFFIX"
-
     ## Cleanup image settings in site config
     sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
     rm -f _config.yml.$TEMP_SUFFIX
-
   fi
 
   # trace the gem lockfile on user-end
@@ -77,12 +71,11 @@ init_files() {
   rm -f ".gitignore.$TEMP_SUFFIX"
 
   # remove the other fies
-  rm -f .travis.yml
   rm -rf _posts/*
 
   # save changes
   git add -A
-  git commit -m "[Automation] Initialize the environment." -q
+  git commit -m "chore: initialize the environment" -q
 
   echo "[INFO] Initialization successful!"
 }
@@ -112,4 +105,6 @@ while (($#)); do
   esac
 done
 
+checkout_latest_tag
+
 init_files

tools/release

@@ -104,6 +104,10 @@ check() {
 
 _bump_file() {
   for i in "${!FILES[@]}"; do
+    if [[ ${FILES[$i]} == $NODE_CONFIG ]]; then
+      continue
+    fi
+
     sed -i "s/v[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/v$1/" "${FILES[$i]}"
   done
 
@@ -183,7 +187,10 @@ main() {
     fi
   fi
 
-  _version="$(grep '"version":' package.json | sed 's/.*: "//;s/".*//')"
+  # Change heading of Patch version to level 2 (a bug from `standard-version`)
+  sed -i "s/^### \[/## \[/g" CHANGELOG.md
+
+  _version="$(grep '"version":' "$NODE_CONFIG" | sed 's/.*: "//;s/".*//')"
 
   echo -e "Bump version number to $_version\n"
   bump "$_version"