Merge branch 'hotfix/5.5.2' into production

mobile screens with width <= 576px

.commitlintrc.json

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "body-max-line-length": [
+      0,
+      "always"
+    ]
+  }
+}

.editorconfig

@@ -2,10 +2,15 @@ root = true
 
 [*]
 charset = utf-8
-# 2 space indentation
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
 # Unix-style newlines with a newline ending every file
 end_of_line = lf
 insert_final_newline = true
+
+[*.js]
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false

.github/CODE_OF_CONDUCT.md

@@ -70,4 +70,4 @@ available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.h
 For answers to common questions about this code of conduct, see
 <https://www.contributor-covenant.org/faq>
 
-[homepage]: https://www.contributor-covenant.org
+[homepage]: https://www.contributor-covenant.org

.github/CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # How to Contribute
 
-We want to thank you for sparing time to improve this project! Here are some guidelines for contributing：
+We'd like to thank you for sparing time to improve this project! Here are some guidelines for contributing：
 
 To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [_Feature Request_](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project.
 
@@ -9,34 +9,57 @@ To ensure that the blog design is not confused, this project does not accept sug
 Generally, contribute to the project by:
 
 1. Fork this project on GitHub and clone it locally.
-2. Create a new branch from the default branch and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
+2. Create a new branch from the default branch and give it a descriptive name (format: `feature/<add-new-feat>` / `fix/<fix-a-bug>`).
-3. After completing the development, submit a new _Pull Request_.
+3. After completing the development, submit a new _Pull Request_. Note that the commit message must follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), otherwise it will fail the PR check.
 
 ## Modifying JavaScript
 
-If your contribution involves JS modification, please read the following sections.
+If your contribution involves JavaScript modification, please read the following sections.
 
 ### Inline Scripts
 
-If you need to add comments to the inline JS (the JS code between the tags `<script>` and `</script>`), please use `/**/` instead of two slashes `//`. Because the HTML will be compressed by [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) during deployment, but it cannot handle the `//` properly. And this will disrupt the structure of the compressed HTML.
+If you need to add comments to the inline JavaScript (the code between the HTML tags `<script>` and `</script>`), please use `/* */` instead of two slashes `//`. Because the HTML will be compressed by [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) during deployment, but it cannot handle the `//` properly, which will disrupt the structure of the compressed HTML.
 
 ### External Scripts
 
-If you need to add or modify JavaScripts in the directory `_javascript`, you need to install [Gulp.js](https://gulpjs.com/docs/en/getting-started/quick-start).
+If you need to add/change/delete the JavaScript in the directory `_javascript/`, setting up [`Node.js`](https://nodejs.org/) and [`npx`](https://www.npmjs.com/package/npx) is a requirement. And then install the development dependencies:
-
-During development, real-time debugging can be performed through the following commands:
 
 ```console
-$ bash tools/run.sh
+$ npm i
 ```
 
-Open another terminal tab and run:
+During JavaScript development, real-time debugging can be performed through the following commands:
+
+Firstly, start a Jekyll server:
 
 ```console
-$ gulp dev # Type 'Ctrl + C' to stop
+$ bash tools/run
 ```
 
-After debugging, run the command `gulp` (without any argument) will automatically output the compressed files to the directory `assests/js/dist/`.
+And then open a new terminal tab and run:
+
+```console
+# Type 'Ctrl + C' to stop
+$ npx gulp dev
+```
+
+After debugging, run the command `npx gulp` (without any argument) will automatically output the compressed files to the directory `assets/js/dist/`.
+
+## Verify the commit messages
+
+If you want to make sure your commits pass the CI check, you can refer to the following steps.
+
+Install `commitlint` & `husky`:
+
+```console
+$ npm i -g @commitlint/{cli,config-conventional} husky
+```
+
+And then enable `husky`:
+
+```console
+$ husky install
+```
 
 ---
 

.github/FUNDING.yml

@@ -1,2 +1,2 @@
 ko_fi: coteschung
-custom: https://cotes.gitee.io/alipay-wechat-donation
+custom: https://sponsor.cotes.page

.github/ISSUE_TEMPLATE/bug_report.md

@@ -35,14 +35,15 @@ Steps to reproduce the behavior:
 
 <!-- If applicable, add screenshots to help explain your problem. -->
 
-### Software
+### Environment
 
-<!-- Please complete the following information -->
+| Command                           | Version |
-- Ruby version: <!-- by running: `ruby -v` -->
+|-----------------------------------|---------|
-- Gem version: <!-- by running: `gem -v`-->
+| `ruby -v`                         |         |
-- Bundler version: <!-- by running: `bundle -v`-->
+| `gem -v`                          |         |
-- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
+| `bundle -v`                       |         |
-- Theme version: <!-- by running: `gem list | grep jekyll-theme-chirpy` -->
+| `bundle exec jekyll -v`           |         |
+| `bundle info jekyll-theme-chirpy` |         |
 
 ### Desktop
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 ## Description
 
-<!-- 
+<!--
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 
 e.g. Fixes #(issue)
@@ -8,7 +8,7 @@ e.g. Fixes #(issue)
 
 ## Type of change
 
-<!-- 
+<!--
 Please select the desired item checkbox and change it to "[x]", then delete options that are not relevant.
 -->
 - [ ] Bug fix (non-breaking change which fixes an issue)
@@ -18,11 +18,11 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 
 ## How has this been tested
 
-<!-- 
+<!--
 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/deploy.sh --dry-run` (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

@@ -1,15 +1,12 @@
-name: 'Continuous Integration'
+name: 'CI'
 on:
   push:
     branches-ignore:
-      - 'release/**'
+      - 'production'
       - 'docs'
-    tags-ignore:
-      - '**'
     paths-ignore:
       - '.github/**'
       - '!.github/workflows/ci.yml'
-      - '.travis.yml'
       - '.gitignore'
       - 'README.md'
       - 'LICENSE'
@@ -18,23 +15,24 @@ on:
       - '**'
 
 jobs:
-  ci:
+  build:
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
+
     strategy:
       matrix:
-        os: [ubuntu-latest, macos-latest]
+        ruby: [2.7, 3]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0  # for posts's lastmod
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 2.7
+          ruby-version: ${{ matrix.ruby }}
           bundler-cache: true
 
       - name: Test Site
-        run: bash tools/deploy.sh --dry-run
+        run: bash tools/test

.github/workflows/commitlint.yml

@@ -0,0 +1,11 @@
+name: Lint Commit Messages
+on: pull_request
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: wagoid/commitlint-github-action@v4

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

@@ -1,29 +1,71 @@
-name: 'Automatic build'
+name: "Build and Deploy"
 on:
   push:
     branches:
       - main
+      - master
     paths-ignore:
       - .gitignore
       - README.md
       - LICENSE
 
-jobs:
+  # Allows you to run this workflow manually from the Actions tab
-  continuous-delivery:
+  workflow_dispatch:
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
-          fetch-depth: 0  # for posts's lastmod
+          fetch-depth: 0
+          # submodules: true
+          # If using the 'assets' git submodule from Chirpy Starter, uncomment above
+          # (See: https://github.com/cotes2020/chirpy-starter/tree/main/assets)
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v1
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 2.7
+          ruby-version: 3   # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
           bundler-cache: true
 
-      - name: Deploy
+      - name: Build site
-        run: bash tools/deploy.sh
+        run: bundle exec jekyll b -d "_site${{ steps.pages.outputs.base_path }}"
+        env:
+          JEKYLL_ENV: "production"
+
+      - name: Test site
+        run: |
+          bundle exec htmlproofer _site --disable-external --check-html --allow_hash_href
+
+      - name: Upload site artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "_site${{ steps.pages.outputs.base_path }}"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/style-lint.yml

@@ -0,0 +1,25 @@
+name: 'Style Lint'
+
+on:
+  push:
+    branches-ignore:
+      - 'production'
+      - 'docs'
+    paths:
+      - '_sass/**/*.scss'
+  pull_request:
+    paths:
+      - '_sass/**/*.scss'
+
+jobs:
+  stylelint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+      - run: npm i
+      - run: npm test

.gitignore

@@ -3,7 +3,10 @@
 !.git*
 !.editorconfig
 !.nojekyll
-!.travis.yml
+!.husky
+!.commitlintrc.json
+!.versionrc.json
+!.stylelintrc.json
 
 # bundler cache
 _site

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint -x $(npm root -g)/@commitlint/config-conventional --edit

.nojekyll

@@ -1 +0,0 @@
-

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "no-descending-specificity": null,
+    "shorthand-property-no-redundant-values": null,
+    "at-rule-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "selector-not-notation": "simple",
+    "color-hex-length": "long",
+    "declaration-block-single-line-max-declarations": 3
+  }
+}

.travis.yml

@@ -1,48 +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
-      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 =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
-  - name: Starter
-    if: branch =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
-  - 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

.versionrc.json

@@ -0,0 +1,20 @@
+{
+  "skip": {
+    "commit": true,
+    "tag": true
+  },
+  "types": [
+    {
+      "type": "feat",
+      "section": "Features"
+    },
+    {
+      "type": "fix",
+      "section": "Bug Fixes"
+    },
+    {
+      "type": "perf",
+      "section": "Improvements"
+    }
+  ]
+}

CHANGELOG.md

@@ -0,0 +1,164 @@
+# 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.
+
+## [5.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.1...v5.5.2) (2023-01-30)
+
+
+### Bug Fixes
+
+* position of prompt icon is incorrect in paragraph on mobile ([5df953f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5df953f6c877e2aa3f1f4981c97a0b8007abe6d4))
+
+## [5.5.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.0...v5.5.1) (2023-01-29)
+
+
+### Bug Fixes
+
+* the icon position of the prompts in the list is incorrect ([0c9558d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c9558de8a01e9ab795778f351a8bbf4d6b21763))
+
+## [5.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.4.0...v5.5.0) (2023-01-29)
+
+
+### Features
+
+* **i18n:** add Arabic translation ([#857](https://github.com/cotes2020/jekyll-theme-chirpy/issues/857)) ([765af53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/765af53b77e5c63804784d5728f5970ae274c2c7))
+* **i18n:** add Czech language ([#833](https://github.com/cotes2020/jekyll-theme-chirpy/issues/833)) ([98d48f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/98d48f5da412276d4a0c99cd01a87b19349bc6bc))
+* **i18n:** add Finnish translations ([#843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/843)) ([d6d0318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d6d03183eaf94b44e037cc48b6e1c47cee183f6e))
+* **i18n:** add Italian translation ([#850](https://github.com/cotes2020/jekyll-theme-chirpy/issues/850)) ([9a011e1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9a011e14d66195d8b2fb9ec62f3e60a3e56cd032))
+
+
+### Bug Fixes
+
+*  copy command line incomplete(`.gp` part) ([41ed331](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41ed33145639415148aec8e85edc7a6fd0de0ca3))
+* correct encoding of spaces in share URLs ([#835](https://github.com/cotes2020/jekyll-theme-chirpy/issues/835)) ([f2d2858](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f2d285844e6e2979f2b0eec1d20073d3c05b6c0c))
+* post's image would cover the PWA update alert ([bd374dd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bd374dd383c50f89c8f018ecb4e25772eeb8f6d8))
+* prompt with nested blockquotes renders incorrectly ([#846](https://github.com/cotes2020/jekyll-theme-chirpy/issues/846)) ([babb4a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/babb4a0c5a58ceb2e4093bc465670accdd526c18))
+
+## [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
+
+* 404 page missing title in tablet/desktop view ([5511b28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5511b2883fd5a395fddfb642588d00c122f18da7))
+* prompt content overflows horizontally ([#705](https://github.com/cotes2020/jekyll-theme-chirpy/issues/705)) ([fb13e32](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fb13e3219b5eca0d2e4f86a1ecabfab75240369f))
+* **tools:** multiple configuration files will fail the test ([80cb0b3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/80cb0b371754e96772a7907877a8ce196398ba3d))
+
+
+### Improvements
+
+* **layout:** improve the min-height of main content ([#674](https://github.com/cotes2020/jekyll-theme-chirpy/issues/674)) ([49bb93c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/49bb93cc0c89ad9cfaad5edcf9cb28c3d5134575))
+* modify checkbox icon with `Liquid` ([1fd665b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1fd665bf4990c26ae23635c511c5abc9640184d1))
+* optimize the extra padding in lists ([#703](https://github.com/cotes2020/jekyll-theme-chirpy/issues/703)) ([39da11e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/39da11e3f3685f49321757576d2b87a48bf25db5)), closes [#702](https://github.com/cotes2020/jekyll-theme-chirpy/issues/702)
+* **posts:** improve core block bottom padding ([d2fb98b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2fb98b3e57f2f6c3fc3816551cd0721731adf40))
+* truncate post content for search results ([647eea8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/647eea8dbd716f9d3cb8330c3139fa753903f51d))
+* **typography:** optimize the line height of post content ([eac3f9b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/eac3f9b434ca77e3dc64eea9cedea7b93e7b306b))
+
+### Others
+
+* **giscus:** add `reactions-enabled` option ([#712](https://github.com/cotes2020/jekyll-theme-chirpy/issues/712)) ([70662a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/70662a0365e6b9378602dc0a57462ddad5aebcf5))
+* **locale:** restore options for changing date format ([#716](https://github.com/cotes2020/jekyll-theme-chirpy/issues/716)) ([f904e8c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f904e8cd48c343cc31e25859d9d50bfe2c056f41))
+* remove site config option `prefer_datetime_locale` ([6852ceb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6852ceb280927ff4e753a3e1131f2b396d9807d0))
+
+## [5.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.1...v5.3.0) (2022-09-23)
+
+
+### Features
+
+* add multiple authors to a post ([#677](https://github.com/cotes2020/jekyll-theme-chirpy/issues/677)) ([f1d9e99](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f1d9e99bc02d3cd0a6b0cd1beac545f0cc7a24f8)), closes [#675](https://github.com/cotes2020/jekyll-theme-chirpy/issues/675)
+* **i18n:** add Bulgarian support  ([#612](https://github.com/cotes2020/jekyll-theme-chirpy/issues/612)) ([2fed338](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2fed338ce6d078bf528c9717201fbc475f88cd22))
+* **i18n:** add German locale file ([#663](https://github.com/cotes2020/jekyll-theme-chirpy/issues/663)) ([940b281](https://github.com/cotes2020/jekyll-theme-chirpy/commit/940b2810e95065e30600ae8d5e4612e7183da60e))
+* **i18n:** add Hungarian locale file ([#597](https://github.com/cotes2020/jekyll-theme-chirpy/issues/597), [#598](https://github.com/cotes2020/jekyll-theme-chirpy/issues/598)) ([b032977](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0329775fc24d0323e5cc04cda46ece8b4531802))
+* **i18n:** add Turkish language ([#631](https://github.com/cotes2020/jekyll-theme-chirpy/issues/631)) ([ad137fa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ad137fa2945b1870b9c1dd5e9212a5f4af7c3580))
+
+
+### Bug Fixes
+
+* add missing color to linkedin icon for share list ([#683](https://github.com/cotes2020/jekyll-theme-chirpy/issues/683)) ([0dcd39d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0dcd39d491c9c49e4acf7f75f83fe6e1d1839e37))
+* code contains spaces in headings ([#644](https://github.com/cotes2020/jekyll-theme-chirpy/issues/644)) ([3fa1bf3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3fa1bf305451f645a7f3aa93863b076463c8f165))
+* correct spelling of `panel` ([#686](https://github.com/cotes2020/jekyll-theme-chirpy/issues/686)) ([b288587](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b288587c1c3d113a1c52c2d25fb46cddda348961))
+* correct the i18n for tab titles ([0c5b697](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c5b697fd3b283b6a5c926742b61ed49d8688c18))
+* the `code` doesn't wrap inside the prompt ([#626](https://github.com/cotes2020/jekyll-theme-chirpy/issues/626)) ([378b65a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/378b65a0617787813519dde74d6f741f255eff3d))
+
+## [5.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.0...v5.2.1) (2022-06-17)
+
+
+### Bug Fixes
+
+* exclude CHANGELOG from output ([971fe03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/971fe03ec329ae49e7d60fe3af6101cfbd1acd6c))
+* **PWA:** sometimes update notification is not triggered ([96af729](https://github.com/cotes2020/jekyll-theme-chirpy/commit/96af7291ea5b2c5ed6372e7b6f7725e67c69f1ba))
+
+## [5.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.1.0...v5.2.0) (2022-06-09)
+
+
+### Features
+
+* add es-ES support to locales ([#533](https://github.com/cotes2020/jekyll-theme-chirpy/issues/533)) ([efe75ad](https://github.com/cotes2020/jekyll-theme-chirpy/commit/efe75adf2784956afb7a0b67f6634b146d9cb03b))
+* add fr-FR support to locales ([#582](https://github.com/cotes2020/jekyll-theme-chirpy/issues/582)) ([94e8144](https://github.com/cotes2020/jekyll-theme-chirpy/commit/94e81447afa457b1a6b7e8f487c47502803556d7))
+* add Vietnamese locale ([#517](https://github.com/cotes2020/jekyll-theme-chirpy/issues/517)) ([171463d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/171463d76da9b7bc25dd327b8f0a868ea79e388b))
+* add pt-BR support to locales ([c2c503f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c2c503f63336884282b6bda4ec0703d6ae76771b))
+* add option to turn off PWA ([#527](https://github.com/cotes2020/jekyll-theme-chirpy/issues/527)) ([106c981](https://github.com/cotes2020/jekyll-theme-chirpy/commit/106c981bac71e7434204a77e1f0c9c61d6eb1509))
+* **PWA:** add Service Worker update notification ([d127183](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d127183b9774f6321e409acdb66bf8a85d8814be))
+* support showing description of preview image ([2bd6efa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bd6efa95a174ac44e30a3af1e57e6f40d6e0e3a))
+
+
+### Bug Fixes
+
+* alt is not a valid attribute for 'a' tag ([58928db](https://github.com/cotes2020/jekyll-theme-chirpy/commit/58928dbc9068db4e4cda4371eeae1865920dce6a))
+* assets URL is missing `baseurl` in self-hosted mode ([#591](https://github.com/cotes2020/jekyll-theme-chirpy/issues/591)) ([54124d5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/54124d5134995fce52e4c2fc0a5d4d1743d6264d))
+* correct the `twitter:creator` of Twitter summary card ([96a16c8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/96a16c868ede51e7dfa412de63ffa1e5a49add7f))
+* correctly URL encode share links ([4c1c8d8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4c1c8d8b0eacecbbaa2d522bbdd6430f350ff760)), closes [#496](https://github.com/cotes2020/jekyll-theme-chirpy/issues/496)
+* follow paginate_path config for pagination ([6900d9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6900d9f2bc9380cbda4babf611c6eeff345291af))
+* force checkout of `gh-pages` branch ([#544](https://github.com/cotes2020/jekyll-theme-chirpy/issues/544)) ([5402523](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5402523ae52a3740bcc15df0b226b2612644945d))
+* horizontal scroll for long equations ([#545](https://github.com/cotes2020/jekyll-theme-chirpy/issues/545)) ([30787fc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/30787fc4cf151e955bb7afc26dfd859f1a06fce6))
+* p is not allowed in span ([4f590e2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4f590e2bba0639751771211bc0d357828ae70404))
+* remove whitespace from avatar URL ([#537](https://github.com/cotes2020/jekyll-theme-chirpy/issues/537)) ([0542b51](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0542b5149c8287dca60e37f46ee36f31b43455e4))
+* resume the preview image SEO tag ([#529](https://github.com/cotes2020/jekyll-theme-chirpy/issues/529)) ([b8d1bcd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b8d1bcd3dea0abd1afef7ef154a4501fbb18938d))
+* script code should be in head or body, not in between ([2103191](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2103191b2faf714a8e4418c7c347a1f942b51af8))
+* spurious header closing tags ([59e9557](https://github.com/cotes2020/jekyll-theme-chirpy/commit/59e955745f02f9b57c65af70b0979cd4a98bf53f))
+* table bypass refactoring when it contains IAL ([#519](https://github.com/cotes2020/jekyll-theme-chirpy/issues/519)) ([5d85ccb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5d85ccb9943aac88dbbefebe1c2234cdcbae5c53))
+* **theme mode:** `SCSS` syntax error ([#588](https://github.com/cotes2020/jekyll-theme-chirpy/issues/588)) ([76a1b6a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/76a1b6a068c369138422dcd18ba08ec8cc3749a6))
+* use `jsonify` to generate valid json ([#521](https://github.com/cotes2020/jekyll-theme-chirpy/issues/521)) ([dd9d5a7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/dd9d5a7207b746342d07176d8969dc4f2c380bf2))
+* when the `site.img_cdn` is set to the local path, the preview-image path loses the `baseurl` ([9cefe58](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9cefe58993d9ea3a3a28424e7ffd8e0911567c5c))
+
+
+### Improvements
+
+* avoid post pageviews from shifting while loading ([135a16f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/135a16f13ee783d9308669ff9a824847a73c951c))
+* avoid the layout shift for post datetime ([6d35f5f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6d35f5f8da044cfad071628bb53776de03efaae4))
+* **categories:** support singular and plural forms of locale ([#595](https://github.com/cotes2020/jekyll-theme-chirpy/issues/595)) ([35cadf9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/35cadf969dd0161ee62503e242c545f006f7072b))
+* improve the responsive design for ultrawide screens ([#540](https://github.com/cotes2020/jekyll-theme-chirpy/issues/540)) ([5d6e8c5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5d6e8c5ef6aa71b4d2600c5305f6e8ba540557f7))

Gemfile

@@ -10,13 +10,19 @@ end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
 # and associated library.
-install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
+platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", "~> 1.2"
+  gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"
 end
 
 # Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 
-# Jekyll <= 4.2.0 compatibility with Ruby 3.0
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-gem "webrick", "~> 1.7"
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+
+# Lock jekyll-sass-converter to 2.x on Linux-musl
+if RUBY_PLATFORM =~ /linux-musl/
+  gem "jekyll-sass-converter", "~> 2.0"
+end

README.md

@@ -5,37 +5,38 @@
   A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
 
   [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
-  [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml)
   [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)](https://www.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade)
   [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
   [**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.
@@ -73,7 +74,7 @@ After a while, navigate to the site at <http://localhost:4000>.
 
 ## Documentation
 
-For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/) / [wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Note that the tutorial is based on the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags), and the features of the default branch are usually ahead of the documentation.
+For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/) / [wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Note that the tutorial is based on the [latest release](https://github.com/cotes2020/jekyll-theme-chirpy/releases/latest), and the features of the default branch are usually ahead of the documentation.
 
 ## Contributing
 
@@ -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://cotes.gitee.io/alipay-wechat-donation/
+[cn-donation]: https://sponsor.cotes.page/

_config.yml

@@ -12,8 +12,6 @@ baseurl: ''
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# Additional parameters for datetime localization, optional. › https://github.com/iamkun/dayjs/tree/dev/src/locale
-prefer_datetime_locale:
 
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
 timezone: Asia/Shanghai
@@ -41,7 +39,7 @@ social:
   # Change to your full name.
   # It will be displayed as the default author of the posts and the copyright owner in the Footer
   name: your_full_name
-  email: example@doamin.com             # change to your email address
+  email: example@domain.com             # change to your email address
   links:
     # The first element serves as the copyright owner's link
     - https://twitter.com/username      # change to your twitter homepage
@@ -80,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'
@@ -99,13 +97,14 @@ comments:
     issue_term:   # < url | pathname | title | ...>
   # Giscus options › https://giscus.app
   giscus:
-    repo:             # <gh-username>/<repo>
+    repo:              # <gh-username>/<repo>
     repo_id:
     category:
     category_id:
-    mapping:          # optional, default to 'pathname'
+    mapping:           # optional, default to 'pathname'
-    input_position:   # optional, default to 'bottom'
+    input_position:    # optional, default to 'bottom'
-    lang:             # optional, default to the value of `site.lang`
+    lang:              # optional, default to the value of `site.lang`
+    reactions_enabled: # optional, default to the value of `1`
 
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:
@@ -115,6 +114,9 @@ assets:
     # only works if `assets.self_host.enabled` is 'true'
     env:          # [development|production]
 
+pwa:
+  enabled: true   # the option for PWA feature
+
 paginate: 10
 
 # ------------ The following options are not recommended to be modified ------------------
@@ -182,6 +184,7 @@ exclude:
   - '*.gemspec'
   - tools
   - README.md
+  - CHANGELOG.md
   - LICENSE
   - gulpfile.js
   - node_modules

_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
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
+  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@8/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
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.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
+  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/dist/jquery.magnific-popup.min.js
+  js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
 
-lozad:
+lazysizes:
-  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+  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,13 +16,13 @@ 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
 
 mermaid:
-  js: /assets/lib/mermaid-8.13.10/mermaid.min.js
+  js: /assets/lib/mermaid-9.1.7/mermaid.min.js
 
 dayjs:
   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:
+lazysizes:
-  js: /assets/lib/lozad-1.16.0/lozad.min.js
+  js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js
 
 clipboard:
   js: /assets/lib/clipboard-2.0.9/clipboard.min.js

_data/authors.yml

@@ -0,0 +1,17 @@
+## Template › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/advanced-usage.md#setting-author-url
+# -------------------------------------
+# {author_id}:
+#   name: {full name}
+#   twitter: {twitter_of_author}
+#   url: {homepage_of_author}
+# -------------------------------------
+
+cotes:
+  name: Cotes Chung
+  twitter: cotes2020
+  url: https://github.com/cotes2020/
+
+sille_bille:
+  name: Dinesh Prasanth Moluguwan Krishnamoorthy
+  twitter: dinesh_MKD
+  url: https://github.com/SilleBille/

_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/ar.yml

@@ -0,0 +1,93 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: منشور
+  category: فئة
+  tag: وسم
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: الرئيسية
+  categories: الفئات
+  tags: الوسوم
+  archives: الأرشيف
+  about: حول
+
+# the text displayed in the search bar & search results
+search:
+  hint: بحث
+  cancel: إلغاء
+  no_results: نأسف! لا يوجد نتائج.
+
+panel:
+  lastmod: المحدثة مؤخرا
+  trending_tags: الوسوم الشائعة
+  toc: محتويات
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: هذا المنشور تحت ترخيص :LICENSE_NAME بواسطة المؤلف.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: بعض الحقوق محفوظة.
+  verbose: >-
+    ما لم يذكر خلاف ذلك ، يتم ترخيص منشورات المدونة على هذا الموقع
+    بموجب ترخيص Creative Commons Attribution 4.0 International (CC BY 4.0) من قبل المؤلف.
+
+meta: باستخدام :PLATFORM السمة :THEME.
+
+not_found:
+  statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
+
+notification:
+  update_found: يتوفر اصدار جديد للمحتوى.
+  update: تحديث
+
+# ----- Posts related labels -----
+
+post:
+  written_by: بواسطة
+  posted: نشّر
+  updated: حدّث
+  words: كلمات
+  pageview_measure: مشاهدات
+  read_time:
+    unit: دقيقة
+    prompt: قراءة
+  relate_posts: إقرأ المزيد
+  share: شارك
+  button:
+    next: الأجدد
+    previous: الأقدم
+    copy_code:
+      succeed: تم النسخ!
+    share_link:
+      title: أنسخ الرابط
+      succeed: تم نسخ الرابط بنجاح!
+  # pinned prompt of posts list on homepage
+  pin_prompt: مثبت
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure:
+    singular: فئة
+    plural: فئات
+  post_measure:
+    singular: منشور
+    plural: منشورات

_data/locales/bg-BG.yml

@@ -0,0 +1,83 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Публикация
+  category: Категория
+  tag: Таг
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Начало
+  categories: Категории
+  tags: Тагове
+  archives: Архив
+  about: За мен
+
+# the text displayed in the search bar & search results
+search:
+  hint: търси
+  cancel: Отмени
+  no_results: Упс! Не са намерени резултати.
+
+panel:
+  lastmod: Наскоро обновени
+  trending_tags: Популярни тагове
+  toc: Съдържание
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Тази публикация е лицензирана под :LICENSE_NAME от автора.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Някои права запазени.
+  verbose: >-
+    Освен ако не е посочено друго, публикациите в блога на този сайт са лицензирани
+    под лиценза Creative Commons Attribution 4.0 (CC BY 4.0) от автора.
+
+meta: Създадено чрез :PLATFORM и :THEME тема.
+
+not_found:
+  statment: Съжалявам, но на този URL адрес няма налично съдържание.
+
+notification:
+  update_found: Налична е нова версия на съдържанието.
+  update: Обнови
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Автор
+  posted: Публикувана
+  updated: Обновена
+  words: думи
+  pageview_measure: преглеждания
+  read_time:
+    unit: мин
+    prompt: четиво
+  relate_posts: Още за четене
+  share: Споделете
+  button:
+    next: По-нови
+    previous: По-стари
+    copy_code:
+      succeed: Копирано!
+    share_link:
+      title: Копирай линк
+      succeed: Линкът е копиран успешно!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Прикрепенa
+
+# categories page
+categories:
+  category_measure:
+    singular: категория
+    plural: категории
+  post_measure:
+    singular: публикация
+    plural: публикации

_data/locales/cs-CZ.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Příspěvek
+  category: Kategorie
+  tag: Štítek
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Domů
+  categories: Kategorie
+  tags: Štítky
+  archives: Archivy
+  about: O mně
+
+# the text displayed in the search bar & search results
+search:
+  hint: hledat
+  cancel: Zrušit
+  no_results: Ups! Žádný výsledek nenalezen.
+
+panel:
+  lastmod: Nedávno aktualizováno
+  trending_tags: Trendy štítky
+  toc: Obsah
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tento příspěvek je licencován pod :LICENSE_NAME autorem.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Některá práva vyhrazena.
+  verbose: >-
+    Pokud není uvedeno jinak, jsou příspěvky na tomto webu licencovány
+    pod licencí Creative Commons Attribution 4.0 International (CC BY 4.0) Licence autora.
+
+meta: Použití :PLATFORM s motivem :THEME.
+
+not_found:
+  statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
+
+notification:
+  update_found: Je k dispozici nová verze obsahu.
+  update: Aktualizace
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Od
+  posted: Zveřejněno
+  updated: Aktualizováno
+  words: slova
+  pageview_measure: zhlednutí
+  read_time:
+    unit: minut
+    prompt: čtení
+  relate_posts: Další čtení
+  share: Sdílet
+  button:
+    next: Novější
+    previous: Starší
+    copy_code:
+      succeed: Zkopírováno!
+    share_link:
+      title: Kopírovat odkaz
+      succeed: Zkopírováno!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Připnuto
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure: kategorie
+  post_measure:
+    singular: příspěvěk
+    plural: příspěvky

_data/locales/de-DE.yml

@@ -0,0 +1,82 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Eintrag
+  category: Kategorie
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Startseite
+  categories: Kategorien
+  tags: Tags
+  archives: Archiv
+  about: Über
+
+# the text displayed in the search bar & search results
+search:
+  hint: Suche
+  cancel: Abbrechen
+  no_results: Ups! Keine Einträge gefunden.
+
+panel:
+  lastmod: Kürzlich aktualisiert
+  trending_tags: Beliebte Tags
+  toc: Inhalt
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Dieser Eintrag ist vom Autor unter :LICENSE_NAME lizensiert.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Einige Rechte vorbehalten.
+  verbose: >-
+    Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0).
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
+
+notification:
+  update_found: Eine neue Version ist verfügbar.
+  update: Neue Version
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Von
+  posted: Veröffentlicht
+  updated: Aktualisiert
+  words: Wörter
+  pageview_measure: Aufrufe
+  read_time:
+    unit: Minuten
+    prompt: lesen
+  relate_posts: Weiterlesen
+  share: Teilen
+  button:
+    next: Nächster Eintrag
+    previous: Eintrag vorher
+    copy_code:
+      succeed: Kopiert!
+    share_link:
+      title: Link kopieren
+      succeed: Link erfolgreich kopiert!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Angepinnt
+
+# categories page
+categories:
+  category_measure:
+    singular: Kategorie
+    plural: Kategorien
+  post_measure:
+    singular: Eintrag
+    plural: Einträge

_data/locales/en.yml

@@ -20,7 +20,7 @@ tabs:
 search:
   hint: search
   cancel: Cancel
-  no_results: Oops! No result founds.
+  no_results: Oops! No results found.
 
 panel:
   lastmod: Recently Updated
@@ -40,13 +40,14 @@ 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.
-  hint_template: :HEAD_BAK to try finding it again, or search for it on the :ARCHIVES_PAGE.
+
-  head_back: Head back Home
+notification:
-  archives_page: Archives page
+  update_found: A new version of content is available.
+  update: Update
 
 # ----- Posts related labels -----
 
@@ -72,7 +73,21 @@ post:
   # pinned prompt of posts list on homepage
   pin_prompt: Pinned
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
 # categories page
 categories:
-  category_measure: categories
+  category_measure:
-  post_measure: posts
+    singular: category
+    plural: categories
+  post_measure:
+    singular: post
+    plural: posts

_data/locales/es-ES.yml

@@ -0,0 +1,79 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Entrada
+  category: Categoría
+  tag: Etiqueta
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Inicio
+  categories: Categorías
+  tags: Etiquetas
+  archives: Archivo
+  about: Acerca de
+
+# the text displayed in the search bar & search results
+search:
+  hint: Buscar
+  cancel: Cancelar
+  no_results: ¡Oops! No se encuentran resultados.
+
+panel:
+  lastmod: Actualizado recientemente
+  trending_tags: Etiquetas populares
+  toc: Contenido
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Esta entrada está licenciada bajo :LICENSE_NAME por el autor.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Algunos derechos reservados.
+  verbose: >-
+    Salvo que se indique explícitamente, las entradas de este blog están licenciadas
+    bajo la Creative Commons Attribution 4.0 International (CC BY 4.0) License por el autor.
+
+meta: Hecho con :PLATFORM usando el tema :THEME.
+
+not_found:
+  statment: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
+
+notification:
+  update_found: Hay una nueva versión de contenido disponible.
+  update: Actualizar
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Por
+  posted: Publicado
+  updated: Actualizado
+  words: palabras
+  pageview_measure: visitas
+  read_time:
+    unit: min
+    prompt: ' de lectura'
+  relate_posts: Lecturas adicionales
+  share: Compartir
+  button:
+    next: Nuevo
+    previous: Anterior
+    copy_code:
+      succeed: ¡Copiado!
+    share_link:
+      title: Copiar enlace
+      succeed: ¡Enlace copiado!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Fijado
+
+# categories page
+categories:
+  category_measure: categorias
+  post_measure: entradas

_data/locales/fi-FI.yml

@@ -0,0 +1,92 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Julkaisu
+  category: Kateogoria
+  tag: Tagi
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Koti
+  categories: Kateogoriat
+  tags: Tagit
+  archives: Arkistot
+  about: Minusta
+
+# the text displayed in the search bar & search results
+search:
+  hint: etsi
+  cancel: Peruuta
+  no_results: Hups! Ei tuloksia.
+
+panel:
+  lastmod: Viimeksi päivitetty
+  trending_tags: Trendaavat tagit
+  toc: Sisältö
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tämä julkaisu on lisenssoitu :LICENSE_NAME julkaisijan toimesta.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Jotkut oikeudet pidätetään.
+  verbose: >-
+    Paitsi jos erikseen mainitaan on kaikki sisältö Creative Commons Attribution 4.0 International (CC BY 4.0) Lisensoitu kirjoittajan toimesta.
+
+meta: Käytetään :PLATFORM iä Teema :THEME.
+
+not_found:
+  statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
+
+notification:
+  update_found: Uusi versio sisällöstä on saatavilla.
+  update: Päivitä
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Kirjoittaja
+  posted: Julkaistu
+  updated: Päivitetty
+  words: sanaa
+  pageview_measure: katselukertoja
+  read_time:
+    unit: minuuttia
+    prompt: lukea
+  relate_posts: Jatka lukemista
+  share: Jaa
+  button:
+    next: Uudempi
+    previous: Vanhempi
+    copy_code:
+      succeed: Kopiotu!
+    share_link:
+      title: Kopioi linkki
+      succeed: Linkki kopioitu onnistuneesti!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Kiinnitetty
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure:
+    singular: kategoria
+    plural: kategoriat
+  post_measure:
+    singular: julkaisu
+    plural: julkaisut

_data/locales/fr-FR.yml

@@ -0,0 +1,79 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Catégorie
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Accueil
+  categories: Catégories
+  tags: Tags
+  archives: Archives
+  about: A propos de
+
+# the text displayed in the search bar & search results
+search:
+  hint: recherche
+  cancel: Annuler
+  no_results: Oups ! Aucun résultat trouvé.
+
+panel:
+  lastmod: Récemment mis à jour
+  trending_tags: Tags tendance
+  toc: Contenu
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Cet article est sous licence :LICENSE_NAME par l'auteur.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Certains droits réservés.
+  verbose: >-
+    Sauf mention contraire, les articles de ce site sont publiés sous licence
+    sous la licence Creative Commons Attribution 4.0 International (CC BY 4.0) par l'auteur.
+
+meta: Propulsé par :PLATFORM avec le thème :THEME
+
+not_found:
+  statment: Désolé, nous avons égaré cette URL ou elle pointe vers quelque chose qui n'existe pas.
+
+notification:
+  update_found: Une nouvelle version du contenu est disponible.
+  update: Mise à jour
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Par
+  posted: Posté
+  updated: Mis à jour
+  words: mots
+  pageview_measure: vues
+  read_time:
+    unit: min
+    prompt: lire
+  relate_posts: Autres lectures
+  share: Partager
+  button:
+    next: Plus récent
+    previous: Plus ancien
+    copy_code:
+      succeed: Copié !
+    share_link:
+      title: Copier le lien
+      succeed: Lien copié avec succès !
+  # pinned prompt of posts list on homepage
+  pin_prompt: Épinglé
+
+# categories page
+categories:
+  category_measure: catégories
+  post_measure: posts

_data/locales/hu-HU.yml

@@ -0,0 +1,81 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Bejegyzés
+  category: Kategória
+  tag: Címke
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Kezdőlap
+  categories: Kategóriák
+  tags: Címkék
+  archives: Archívum
+  about: Rólam
+
+# the text displayed in the search bar & search results
+search:
+  hint: keresés
+  cancel: Mégse
+  no_results: Oops! Nincs találat a keresésre.
+
+panel:
+  lastmod: Legutóbb frissítve
+  trending_tags: Népszerű Címkék
+  toc: Tartalom
+  links: Blog linkek
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: A bejegyzés :LICENSE_NAME licenccel rendelkezik.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Néhány jog fenntartva.
+  verbose: >-
+   Az oldalon található tartalmak
+   Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
+   hacsak másképp nincs jelezve.
+
+meta: Készítve :PLATFORM motorral :THEME témával.
+
+not_found:
+  statment: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
+
+notification:
+  update_found: Elérhető a tartalom új verziója.
+  update: Frissítés
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Szerző
+  posted: Létrehozva
+  updated: Frissítve
+  words: szó
+  pageview_measure: látogató
+  read_time:
+    unit: perc
+    prompt: elolvasni
+  relate_posts: További olvasnivaló
+  share: Megosztás
+  button:
+    next: Újabb
+    previous: Régebbi
+    copy_code:
+      succeed: Másolva!
+    share_link:
+      title: Link másolása
+      succeed: Link sikeresen másolva!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Kitűzve
+
+# categories page
+categories:
+  category_measure: kategória
+  post_measure: bejegyzés

_data/locales/id-ID.yml

@@ -44,9 +44,10 @@ meta: Didukung oleh :PLATFORM dengan tema :THEME.
 
 not_found:
   statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
-  hint_template: :HEAD_BAK untuk mencoba mencari kembali, atau cari di :ARCHIVES_PAGE.
+
-  head_back: Kembali ke Beranda
+notification:
-  archives_page: Halaman Arsip
+  update_found: Versi konten baru tersedia.
+  update: Perbarui
 
 # ----- Posts related labels -----
 

_data/locales/it-IT.yml

@@ -0,0 +1,93 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categoria
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Pagina principale
+  categories: Categorie
+  tags: Tags
+  archives: Archivio
+  about: Informazioni
+
+# the text displayed in the search bar & search results
+search:
+  hint: ricerca
+  cancel: Cancella
+  no_results: Oops! La ricerca non ha fornito risultati.
+
+panel:
+  lastmod: Aggiornati recentemente
+  trending_tags: Tags più cliccati
+  toc: Contenuti
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Questo post è sotto licenza :LICENSE_NAME a nome dell'autore.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alcuni diritti riservati.
+  verbose: >-
+    Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto
+    i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0).
+
+
+meta: Servizio offerto da :PLATFORM con tema :THEME.                                       
+not_found:
+  statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
+
+notification:
+  update_found: Nuova versione del contenuto disponibile.
+  update: Aggiornamento
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Da
+  posted: Postato
+  updated: Aggiornato
+  words: parole
+  pageview_measure: visioni
+  read_time:
+    unit: min
+    prompt: lettura
+  relate_posts: Continua a leggere
+  share: Condividi
+  button:
+    next: Più recenti
+    previous: Meno recenti
+    copy_code:
+      succeed: Copiato!
+    share_link:
+      title: Copia link
+      succeed: Link copiato con successo!
+  # pinned prompt of posts list on homepage
+  pin_prompt: In alto
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure:
+    singular: categoria
+    plural: categorie
+  post_measure:
+    singular: post
+    plural: posts

_data/locales/ko-KR.yml

@@ -44,9 +44,10 @@ meta: Powered by :PLATFORM with :THEME theme.
 
 not_found:
   statment: 해당 URL은 존재하지 않습니다.
-  hint_template: :HEAD_BAK을 눌러 다시 찾거나 :ARCHIVES_PAGE에서 검색해 주세요.
+
-  head_back: 홈으로 돌아가기
+notification:
-  archives_page: 아카이브 페이지
+  update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
+  update: 업데이트
 
 # ----- Posts related labels -----
 
@@ -72,6 +73,13 @@ post:
   # pinned prompt of posts list on homepage
   pin_prompt: 핀
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%Y/%m/%d'
+    dayjs: 'YYYY/MM/DD'
+
 # categories page
 categories:
   category_measure: 카테고리

_data/locales/my-MM.yml

@@ -44,9 +44,10 @@ meta: Powered by :PLATFORM with :THEME theme.
 
 not_found:
   statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
-  hint_template: ၎င်းကို ထပ်မံရှာဖွေရန် :HEAD_BAK , သို့မဟုတ် :ARCHIVES_PAGE တွင်ရှာပါ။
+
-  head_back: အဓိကစာမျက်နှာသို့ပြန်သွားပါ။
+notification:
-  archives_page: မှတ်တမ်း​တိုက် စာမျက်နှာ။
+  update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
+  update: အပ်ဒိတ်
 
 # ----- Posts related labels -----
 

_data/locales/pt-BR.yml

@@ -0,0 +1,79 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categoria
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Home
+  categories: Categorias
+  tags: Tags
+  archives: Arquivos
+  about: Sobre
+
+# the text displayed in the search bar & search results
+search:
+  hint: Buscar
+  cancel: Cancelar
+  no_results: Oops! Nenhum resultado encontrado.
+
+panel:
+  lastmod: Atualizados recentemente
+  trending_tags: Trending Tags
+  toc: Conteúdo
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Esta postagem está licenciada sob :LICENSE_NAME pelo autor.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alguns direitos reservados.
+  verbose: >-
+    Exceto onde indicado de outra forma, as postagens do blog neste site são licenciadas sob a
+    Creative Commons Attribution 4.0 International (CC BY 4.0) License pelo autor.
+
+meta: Feito com :PLATFORM usando o tema :THEME.
+
+not_found:
+  statment: Desculpe, a página não foi encontrada.
+
+notification:
+  update_found: Uma nova versão do conteúdo está disponível.
+  update: atualização
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Por
+  posted: Postado em
+  updated: Atualizado
+  words: palavras
+  pageview_measure: visualizações
+  read_time:
+    unit: min
+    prompt: " de leitura"
+  relate_posts: Leia também
+  share: Compartilhar
+  button:
+    next: Próximo
+    previous: Anterior
+    copy_code:
+      succeed: Copiado!
+    share_link:
+      title: Copie o link
+      succeed: Link copiado com sucesso!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Fixado
+
+# categories page
+categories:
+  category_measure: categorias
+  post_measure: posts

_data/locales/ru-RU.yml

@@ -44,9 +44,10 @@ meta: Powered by :PLATFORM with :THEME theme.
 
 not_found:
   statment: Извините, эта ссылка указывает на ресурс который не существует.
-  hint_template: :HEAD_BAK чтобы снова осуществить поиск, или поищите :ARCHIVES_PAGE.
+
-  head_back: Вернитесь на домашнюю страницу
+notification:
-  archives_page: архиве
+  update_found: Доступна новая версия контента.
+  update: Обновлять
 
 # ----- Posts related labels -----
 

_data/locales/tr-TR.yml

@@ -0,0 +1,79 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Gönderi
+  category: Kategori
+  tag: Etiket
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Ana Sayfa
+  categories: Kategoriler
+  tags: Etiketler
+  archives: Arşiv
+  about: Hakkında
+
+# the text displayed in the search bar & search results
+search:
+  hint: Ara...
+  cancel: İptal
+  no_results: Hop! Öyle bir şey bulamadım.
+
+panel:
+  lastmod: Yeni Güncellendi
+  trending_tags: Yükselen Etiketler
+  toc: İçindekiler
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Bu gönderi :LICENSE_NAME lisansı altındadır.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/deed.tr
+
+  # Displayed in the footer
+  brief: Bazı hakları saklıdır.
+  verbose: >-
+    Aksi belirtilmediği sürece, bu sitedeki gönderiler Creative Commons Atıf 4.0 Uluslararası (CC BY 4.0) Lisansı altındadır.
+    Kısaca sayfa linkini de vererek paylaşabilir veya düzenleyip paylaşabilirsin.
+
+meta: :PLATFORM ve :THEME teması.
+
+not_found:
+  statment: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
+
+notification:
+  update_found: İçeriğin yeni bir sürümü mevcut.
+  update: Güncelle
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Yazan
+  posted: Gönderilme Tarihi
+  updated: Güncellenme Tarihi
+  words: sözcük
+  pageview_measure: görüntülenme
+  read_time:
+    unit: dakikada
+    prompt: okunabilir
+  relate_posts: Benzer Gönderiler
+  share: Paylaş
+  button:
+    next: İleri
+    previous: Geri
+    copy_code:
+      succeed: Kopyalandı.
+    share_link:
+      title: Linki kopyala
+      succeed: Link kopyalandı.
+  # pinned prompt of posts list on homepage
+  pin_prompt: Sabitlendi
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: gönderi

_data/locales/uk-UA.yml

@@ -44,9 +44,10 @@ meta: Powered by :PLATFORM with :THEME theme.
 
 not_found:
   statment: Вибачте, це посилання вказує на ресурс, що не існує.
-  hint_template: :HEAD_BAK аби здійснити пошук, або пошукайте в :ARCHIVES_PAGE.
+
-  head_back: Поверніться на домашню сторінку
+notification:
-  archives_page: архіві
+  update_found: Доступна нова версія вмісту.
+  update: Оновлення
 
 # ----- Posts related labels -----
 

_data/locales/vi-VN.yml

@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Bài viết
+  category: Danh mục
+  tag: Thẻ
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Trang chủ
+  categories: Các danh mục
+  tags: Các thẻ
+  archives: Lưu trữ
+  about: Giới thiệu
+
+# the text displayed in the search bar & search results
+search:
+  hint: tìm kiếm
+  cancel: Hủy
+  no_results: Không có kết quả tìm kiếm.
+
+panel:
+  lastmod: Mới cập nhật
+  trending_tags: Các thẻ thịnh hành
+  toc: Mục lục
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Bài viết này được cấp phép bởi tác giả theo giấy phép :LICENSE_NAME.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Một số quyền được bảo lưu.
+  verbose: >-
+    Trừ khi có ghi chú khác, các bài viết đăng trên trang này được cấp phép bởi tác giả theo giấy phép Creative Commons Attribution 4.0 International (CC BY 4.0).
+meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME.
+
+not_found:
+  statment: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
+
+notification:
+  update_found: Đã có phiên bản mới của nội dung.
+  update: Cập nhật
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Viết bởi
+  posted: Đăng lúc
+  updated: Cập nhật lúc
+  words: từ
+  pageview_measure: lượt xem
+  read_time:
+    unit: phút
+    prompt: đọc
+  relate_posts: Bài viết liên quan
+  share: Chia sẻ
+  button:
+    next: Mới hơn
+    previous: Cũ hơn
+    copy_code:
+      succeed: Đã sao chép!
+    share_link:
+      title: Sao chép đường dẫn
+      succeed: Đã sao chép đường dẫn thành công!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Bài ghim
+
+# categories page
+categories:
+  category_measure: danh mục
+  post_measure: bài viết

_data/locales/zh-CN.yml

@@ -43,9 +43,10 @@ meta: 本站由 :PLATFORM 生成，采用 :THEME 主题。
 
 not_found:
   statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
-  hint_template: :HEAD_BAK尝试再次查找它，或在:ARCHIVES_PAGE上搜索它。
+
-  head_back: 返回主页
+notification:
-  archives_page: 归档页面
+  update_found: 发现新版本的内容。
+  update: 更新
 
 # ----- Posts related labels -----
 
@@ -66,11 +67,18 @@ post:
     copy_code:
       succeed: 已复制！
     share_link:
-      title:  分享链接
+      title: 分享链接
       succeed: 链接已复制！
   # pinned prompt of posts list on homepage
   pin_prompt: 顶置
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%Y/%m/%d'
+    dayjs: 'YYYY/MM/DD'
+
 # categories page
 categories:
   category_measure: 个分类

_includes/comments/disqus.html

@@ -15,7 +15,6 @@
   };
 
   /* Lazy loading */
-
   var disqus_observer = new IntersectionObserver(function (entries) {
     if(entries[0].isIntersecting) {
         (function () {
@@ -32,23 +31,24 @@
   disqus_observer.observe(document.querySelector('#disqus_thread'));
 
   /* Auto switch theme */
-
   function reloadDisqus() {
-    /* Disqus hasn't been loaded */
+    if (event.source === window && event.data &&
-    if (typeof DISQUS === "undefined") {
+      event.data.direction === ModeToggle.ID) {
-      return;
+      /* Disqus hasn't been loaded */
-    }
+      if (typeof DISQUS === "undefined") {
+        return;
+      }
 
-    if (document.readyState == 'complete') {
+      if (document.readyState == 'complete') {
-      DISQUS.reset({ reload: true, config: disqus_config });
+        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.addEventListener("message", reloadDisqus);
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
   }
 
 </script>

_includes/comments/giscus.html

@@ -20,7 +20,7 @@
       "data-category": "{{ site.comments.giscus.category }}",
       "data-category-id": "{{ site.comments.giscus.category_id }}",
       "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
-      "data-reactions-enabled": "1",
+      "data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
       "data-emit-metadata": "0",
       "data-theme": initTheme,
       "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",

_includes/datetime.html

@@ -0,0 +1,15 @@
+<!--
+  Date format snippet
+  See: ${JS_ROOT}/utils/locale-dateime.js
+-->
+
+{% assign wrap_elem = include.wrap | default: 'em' %}
+{% assign df_strftime = site.data.locales[site.lang].df.post.strftime | default: '%d/%m/%Y' %}
+{% assign df_dayjs = site.data.locales[site.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
+
+<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}"
+    data-ts="{{ include.date | date: '%s' }}"
+    data-df="{{ df_dayjs }}"
+    {% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}>
+  {{ include.date | date: df_strftime }}
+</{{ wrap_elem }}>

_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

@@ -1,37 +1,36 @@
-<!--
+<!-- The Footer -->
-  The Footer
--->
 
-<footer class="d-flex w-100 justify-content-center">
+<footer>
-  <div class="d-flex justify-content-between align-items-center text-muted">
+  <div class="container pl-lg-4 pr-lg-4">
-    <div class="footer-left">
+    <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
-      <p class="mb-0">
+      <div class="footer-left">
-        © {{ 'now' | date: "%Y" }}
+        <p class="mb-0">
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+          © {{ 'now' | date: "%Y" }}
-        {% if site.data.locales[lang].copyright.brief %}
+          <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        <span data-toggle="tooltip" data-placement="top"
+          {% if site.data.locales[site.lang].copyright.brief %}
-          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
+          <span data-toggle="tooltip" data-placement="top"
-        {% endif %}
+            title="{{ site.data.locales[site.lang].copyright.verbose }}">{{ site.data.locales[site.lang].copyright.brief }}</span>
-      </p>
+          {% endif %}
-    </div>
+        </p>
+      </div>
 
-    <div class="footer-right">
+      <div class="footer-right">
-      <p class="mb-0">
+        <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[lang].meta
+          {{ 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
+            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
-        }}
+          }}
-
+        </p>
-      </p>
+      </div>
     </div>
-
+  </div>
-  </div> <!-- div.d-flex -->
 </footer>

_includes/head.html

@@ -6,11 +6,6 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-  <!-- Allow having a localized datetime different from the appearance language -->
-  {% if site.prefer_datetime_locale %}
-    <meta name="prefer-datetime-locale" content="{{ site.prefer_datetime_locale }}">
-  {% endif %}
-
   {% if page.layout == 'home' or page.layout == 'post' %}
 
     {% if site.google_analytics.pv.proxy_endpoint %}
@@ -23,7 +18,34 @@
 
   {% endif %}
 
-  {% seo title=false %}
+  {% capture seo_tags %}
+    {% seo title=false %}
+  {% endcapture %}
+
+  {% 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 %}
+
+      {% if site.img_cdn contains '//' %}
+        <!-- it's a cross-origin URL -->
+        {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
+      {% else %}
+        <!-- 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 %}
+
+    {% endunless %}
+
+  {% endif %}
+
+  {{ seo_tags }}
 
   <title>
   {%- unless page.layout == "home" -%}
@@ -45,7 +67,7 @@
       <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
     {% endfor %}
 
-    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts }}">
+    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
 
   {% endif %}
 
@@ -67,24 +89,27 @@
   {% endif %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css }}">
+  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css | relative_url}}">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css }}">
+  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css | relative_url }}">
 
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
   {% if site.toc and page.toc %}
-    <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css }}">
+    <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css | relative_url }}">
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
     <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css }}">
+    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->
 
-  <script src="{{ site.data.assets[origin].jquery.js }}"></script>
+  <script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
 
+  {% unless site.theme_mode %}
+    {% include mode-toggle.html %}
+  {% endunless %}
 </head>

_includes/js-selector.html

@@ -7,7 +7,7 @@
 {% if page.layout == 'post' %}
   {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
-    <script async src="{{ site.data.assets[origin].countup.js }}"></script>
+    <script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
     <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
 {% endif %}
@@ -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'
@@ -29,11 +28,7 @@
     or page.layout == 'category'
     or page.layout == 'tag' %}
 
-  {% if site.prefer_datetime_locale %}
+  {% assign locale = site.lang | split: '-' | first %}
-    {% assign locale = site.prefer_datetime_locale | downcase %}
-  {% else %}
-    {% assign locale = site.lang | split: '-' | first %}
-  {% endif %}
 
   {% assign _urls = site.data.assets[origin].dayjs.js.common
       | append: ',' | append: site.data.assets[origin].dayjs.js.locale
@@ -79,18 +74,22 @@
     }
   };
   </script>
-  <script src="{{ site.data.assets[origin].polyfill.js }}"></script>
+  <script src="{{ site.data.assets[origin].polyfill.js | relative_url }}"></script>
-  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js }}">
+  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}">
   </script>
 {% endif %}
 
 <!-- commons -->
 
-<script src="{{ site.data.assets[origin].bootstrap.js }}"></script>
+<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
 
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
-  <script defer src="{{ '/app.js' | relative_url }}"></script>
+  {% if site.pwa.enabled %}
+    <script defer src="{{ '/app.js' | relative_url }}"></script>
+  {% else %}
+    <script defer src="{{ '/unregister.js' | relative_url }}"></script>
+  {% endif %}
 
   <!-- GA -->
   {% if site.google_analytics.id != empty and site.google_analytics.id %}

_includes/lang.html

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

_includes/mermaid.html

@@ -2,13 +2,14 @@
   mermaid-js loader
 -->
 
-<script src="{{ site.data.assets[origin].mermaid.js }}"></script>
+<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) {
+        event.data.direction === ModeToggle.ID) {
 
         const mode = event.data.message;
 
@@ -16,11 +17,11 @@
           return;
         }
 
-        let expectedTheme = (mode === ModeToggle.DARK_MODE? "dark" : "default");
+        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
-        let config = { theme: expectedTheme };
+        let config = {theme: expectedTheme};
 
         /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function() {
+        $(".mermaid").each(function () {
           let svgCode = $(this).prev().children().html();
           $(this).removeAttr("data-processed");
           $(this).html(svgCode);
@@ -35,7 +36,7 @@
 
     if ($("html[data-mode=dark]").length > 0
       || ($("html[data-mode]").length == 0
-        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
       initTheme = "dark";
     }
 
@@ -43,15 +44,16 @@
       theme: initTheme  /* <default|dark|forest|neutral> */
     };
 
-    /* Markdown converts to HTML */
+    /* Create mermaid tag */
-    $("pre").has("code.language-mermaid").each(function() {
+    $("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-nav.html

@@ -5,26 +5,26 @@
 <div class="post-navigation d-flex justify-content-between">
   {% if page.previous.url %}
   <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[lang].post.button.previous }}">
+    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled"
+  <div class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[lang].post.button.previous }}">
+    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
     <p>-</p>
-  </span>
+  </div>
   {% endif %}
 
   {% if page.next.url %}
   <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
-    prompt="{{ site.data.locales[lang].post.button.next }}">
+    prompt="{{ site.data.locales[site.lang].post.button.next }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled"
+  <div class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[lang].post.button.next }}">
+    prompt="{{ site.data.locales[site.lang].post.button.next }}">
     <p>-</p>
-  </span>
+  </div>
   {% endif %}
 
 </div>

_includes/post-paginator.html

@@ -2,7 +2,7 @@
   The paginator for post list on HomgPage.
 -->
 
-<ul class="pagination align-items-center mt-4 mb-0 pl-lg-2">
+<ul class="pagination align-items-center mt-4 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}
@@ -47,7 +47,7 @@
     {% if show %}
       <!-- show number -->
       <li class="page-item {% if i == paginator.page %} active{% endif %}">
-        <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+        <a class="page-link btn-box-shadow" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}">{{ i }}</a>
       </li>
     {% else %}
       <!-- hide number -->

_includes/post-sharing.html

@@ -3,13 +3,14 @@
 -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.locales[lang].post.share }}</span>
+  <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 url = page.url | absolute_url %}
+    {% assign title = title | uri_escape %}
+    {% assign url = page.url | absolute_url | url_encode %}
 
     {% for share in site.data.share.platforms %}
-      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url | escape %}
+      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
         <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
           title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
           <i class="fa-fw {{ share.icon }}"></i>
@@ -18,8 +19,8 @@
 
     <i id="copy-link" class="fa-fw fas fa-link small"
         data-toggle="tooltip" data-placement="top"
-        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        title="{{ site.data.locales[site.lang].post.button.share_link.title }}"
-        data-title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
+        data-title-succeed="{{ site.data.locales[site.lang].post.button.share_link.succeed }}">
     </i>
 
   </span>

_includes/read-time.html

@@ -16,13 +16,13 @@
 {% endunless %}
 
 {% capture read_prompt %}
-  {{- site.data.locales[lang].post.read_time.prompt -}}
+  {{- site.data.locales[site.lang].post.read_time.prompt -}}
 {% endcapture %}
 
 <!-- return element -->
 <span class="readtime" data-toggle="tooltip" data-placement="bottom"
-  title="{{ words }} {{ site.data.locales[lang].post.words }}">
+  title="{{ words }} {{ site.data.locales[site.lang].post.words }}">
-  <em>{{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}</em>
+  <em>{{- read_time -}}{{" "}}{{- site.data.locales[site.lang].post.read_time.unit -}}</em>
   {%- if include.prompt -%}
     {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
     {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}

_includes/refactor-content.html

@@ -9,10 +9,11 @@
   we suround the markdown table with `<div class="table-wrapper">` and `</div>`
 -->
 
-{% if _content contains '<table>' %}
+{% if _content contains '<table' %}
   {% assign _content = _content
-    | replace: '<table>', '<div class="table-wrapper"><table>'
+    | replace: '<table', '<div class="table-wrapper"><table'
     | replace: '</table>', '</table></div>'
+    | replace: '<code><div class="table-wrapper">', '<code>'
     | replace: '</table></div></code>', '</table></code>'
   %}
 {% endif %}
@@ -30,11 +31,15 @@
   %}
 {% endif %}
 
-<!-- Add attribute 'hide-bullet' to the checkbox list -->
+<!-- Change the icon of checkbox -->
-
+{% if _content contains '<input type="checkbox"' %}
-{% if _content contains '<li class="task-list-item"><' %}
   {% assign _content = _content
-    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+    | replace:
+        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
+        '<i class="fas fa-check-circle fa-fw checked"></i>'
+    | replace:
+        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
+        '<i class="far fa-circle fa-fw"></i>'
   %}
 {% endif %}
 
@@ -46,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: ' /' %}
+    {% unless _left contains 'src=' %}
-    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+      {% continue %}
-    {% assign _attrs = _left | split: ' ' %}
+    {% 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: '=' %}
+      {% unless _attr contains '=' %}
-      {% if _pair.size < 2 %}
         {% 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' %}
@@ -79,64 +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 %}
+    <!-- take out classes -->
-      {% unless _src contains '://' %}
+    {% if _class %}
-
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
-        <!-- Add CDN URL -->
+      {% assign _left = _left | remove: _old_class %}
-        {% if site.img_cdn %}
-          {% assign _src_prefix = site.img_cdn %}
-        {% else %}
-          {% assign _src_prefix = site.baseurl %}
-        {% endif %}
-
-        <!-- Add image path -->
-        {% if page.img_path %}
-          {% assign _path = page.img_path %}
-          {% assign last_char = _path | slice: -1 %}
-
-          {% unless last_char == '/' %}
-            {% assign _path = _path | append: '/' %}
-          {% endunless %}
-
-          {% assign _src_prefix = _src_prefix | append: _path %}
-        {% 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> -->
-
-      {% assign _left = _left | replace: 'src=', 'data-src=' %}
-
     {% endif %}
 
-    <!-- Add SVG placehoder to prevent layout reflow -->
+    {% assign _final_src = nil %}
 
-    {% if _width and _height %}
+    {% unless _src contains '//' %}
-      {%- capture _svg -%}
+      {% assign _final_src = _path_prefix | append: _src %}
-        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
+      {% capture _src_from %}"{{ _src }}"{% endcapture %}
-      {%- endcapture -%}
+      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
+      {% assign _left = _left | replace: _src_from, _src_to %}
+    {% endunless %}
 
-      {% assign _left =  _svg | append: ' ' | append: _left %}
+    {% 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 %}
+
+    <!-- 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 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 %}
 
-  {% assign _content = _img_content %}
+  {% if _img_content %}
+    {% assign _content = _img_content %}
+  {% endif %}
 
 {% endif %}
 
@@ -172,7 +225,7 @@
           | append: '<div class="code-header">'
           | append: _label
           | append: '<button aria-label="copy" data-title-succeed="'
-          | append: site.data.locales[lang].post.button.copy_code.succeed
+          | append: site.data.locales[site.lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'
       %}
@@ -209,10 +262,10 @@
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
-      {% assign left = left | replace: '">', '"><span class="mr-2">' | append: '</span>' %}
+      {% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
 
       {% assign _new_content = _new_content | append: mark_start
-          | append: left | append: anchor | append: mark_end | append: right
+          | append: left | append: anchor | append: right
       %}
 
     {% endfor %}
@@ -224,54 +277,6 @@
 
 {% assign _content = _heading_content %}
 
-<!-- Wrap prompt element of blockquote with the <div> tag -->
-
-{% assign blockquote_start = '<blockquote class=' %}
-{% assign blockquote_end = '</blockquote>' %}
-{% assign cls_prefix = 'prompt-' %}
-
-{% if _content contains blockquote_start %}
-
-  {% assign _prompt_content = nil %}
-  {% assign _prompt_snippets = _content | split: blockquote_start %}
-
-  {% for _snippet in _prompt_snippets %}
-
-    {% if forloop.first %}
-      {% assign _prompt_content =  _snippet %}
-      {% continue %}
-    {% endif %}
-
-    {% assign left = _snippet | split: blockquote_end | first %}
-    {% assign right = _snippet | slice: left.size, _snippet.size %}
-
-    {% assign cls_str = left | split: '>' | first %}
-    {% assign cls_array = cls_str | remove: '"' | split: ' ' %}
-    {% assign is_prompt = false %}
-
-    {% for cls in cls_array %}
-      {% if cls contains cls_prefix %}
-        {% assign is_prompt = true %}
-        {% break %}
-      {% endif %}
-    {% endfor %}
-
-    {% unless is_prompt %}
-      {% assign _prompt_content = _prompt_content | append: blockquote_start | append: _snippet %}
-      {% continue %}
-    {% endunless %}
-
-    {% assign left = left | slice: cls_str.size, left.size %}
-    {% assign left = cls_str | append: '><div' | append: left | append: '</div>' %}
-
-    {% assign _prompt_content = _prompt_content | append: blockquote_start | append: left | append: right %}
-
-  {% endfor %}
-
-  {% assign _content = _prompt_content %}
-
-{% endif %}
-
 <!-- return -->
 
 {{ _content }}

_includes/related-posts.html

@@ -60,7 +60,6 @@
 {% assign less = TOTAL_SIZE | minus: index_list.size %}
 
 {% if less > 0 %}
-
   {% for i in (0..last_index) %}
     {% assign post = site.posts[i] %}
     {% if post.url != page.url  %}
@@ -74,14 +73,12 @@
       {% endunless %}
     {% endif %}
   {% endfor %}
-
 {% endif %}
 
-
 {% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
+  <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mt-1 mb-4 ml-1"
+    <h3 class="pt-2 mb-4 ml-1"
-      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
+      data-toc-skip>{{ site.data.locales[site.lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}
@@ -89,7 +86,7 @@
       <div class="card">
         <a href="{{ post.url | relative_url }}">
           <div class="card-body">
-            {% include timeago.html date=post.date class="small" %}
+            {% include datetime.html date=post.date class="small" %}
             <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">
               <p>

_includes/search-loader.html

@@ -14,9 +14,9 @@
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[site.lang].search.no_results }}</p>{% endcapture %}
 
-<script src="{{ site.data.assets[origin].search.js }}"></script>
+<script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
 
 <script>
 SimpleJekyllSearch({

_includes/sidebar.html

@@ -5,7 +5,7 @@
 <div id="sidebar" class="d-flex flex-column align-items-end">
   <div class="profile-wrapper text-center">
     <div id="avatar">
-      <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
+      <a href="{{ '/' | relative_url }}" class="mx-auto">
         {% if site.avatar != empty and site.avatar %}
           {% capture avatar_url %}
             {% if site.avatar contains '://' %}
@@ -16,12 +16,12 @@
               {{ site.avatar | relative_url }}
             {% endif %}
           {% endcapture %}
-          <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
+          <img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
         {% endif %}
       </a>
     </div>
 
-    <div class="site-title mt-3">
+    <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
     <div class="site-subtitle font-italic">{{ site.tagline }}</div>
@@ -34,7 +34,7 @@
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
+        <span>{{ site.data.locales[site.lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
@@ -44,7 +44,7 @@
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+        <span>{{ site.data.locales[site.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
     {% endfor %}
@@ -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 %}

_includes/timeago.html

@@ -1,15 +0,0 @@
-<!--
-  Date format snippet
-  See: ${JS_ROOT}/utils/timeago.js
--->
-
-<em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
-    data-ts="{{ include.date | date: '%s' }}"
-    {% if include.tooltip %}
-      data-toggle="tooltip" data-placement="bottom" data-tooltip-df="llll"
-    {% endif %}
-    {% if include.capitalize %}
-      data-capitalize="true"
-    {% endif %}>
-  {{ include.date | date: '%Y-%m-%d' }}
-</em>

_includes/toc.html

@@ -7,10 +7,10 @@
 
 {% if enable_toc %}
 <!-- BS-toc.js will be loaded at medium priority -->
-<script src="{{ site.data.assets[origin].bootstrap-toc.js }}"></script>
+<script src="{{ site.data.assets[origin].bootstrap-toc.js | relative_url }}"></script>
 
 <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
+  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
   <nav id="toc" data-toggle="toc"></nav>
 </div>
 {% endif %}

_includes/topbar.html

@@ -2,15 +2,15 @@
   The Top Bar
 -->
 
-<div id="topbar-wrapper" class="row justify-content-center">
+<div id="topbar-wrapper">
-  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
+  <div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
     <span id="breadcrumb">
 
     {% assign paths = page.url | split: '/' %}
 
     {% if paths.size == 0 or page.layout == 'home' %}
       <!-- index page -->
-      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
+      <span>{{ site.data.locales[site.lang].tabs.home | capitalize }}</span>
 
     {% else %}
 
@@ -19,14 +19,14 @@
         {% if forloop.first %}
           <span>
             <a href="{{ '/' | relative_url }}">
-              {{ site.data.locales[lang].tabs.home | capitalize }}
+              {{ site.data.locales[site.lang].tabs.home | capitalize }}
             </a>
           </span>
 
         {% elsif forloop.last %}
 
           {% if page.collection == 'tabs' %}
-            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
+            <span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
           {% else %}
             <span>{{ page.title }}</span>
           {% endif %}
@@ -34,7 +34,7 @@
         {% elsif page.layout == 'category' or page.layout == 'tag' %}
           <span>
             <a href="{{ item | relative_url }}">
-              {{ site.data.locales[lang].tabs[item] | default: page.title }}
+              {{ site.data.locales[site.lang].tabs[item] | default: page.title }}
             </a>
           </span>
         {% endif %}
@@ -49,12 +49,12 @@
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.data.locales[lang].title | default: site.title -}}
+        {{- site.data.locales[site.lang].title | default: site.title -}}
       {% elsif page.collection == 'tabs' or page.layout == 'page' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
+        {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
+        {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
@@ -62,9 +62,9 @@
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
-        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | capitalize }}...">
     </span>
-    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
+    <span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel }}</span>
   </div>
 
 </div>

_includes/trending-tags.html

@@ -37,7 +37,7 @@
 
 {% if trending_tags.size > 0 %}
   <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[lang].panel.trending_tags -}}</div>
+    <div class="panel-heading">{{- site.data.locales[site.lang].panel.trending_tags -}}</div>
     <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
     {% for tag_name in trending_tags %}

_includes/update-list.html

@@ -26,7 +26,7 @@
 {% if update_list.size > 0 %}
 
   <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[lang].panel.lastmod -}}</div>
+    <div class="panel-heading">{{- site.data.locales[site.lang].panel.lastmod -}}</div>
     <ul class="post-content pl-0 pb-1 ml-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: "::" | last | plus: 0 %}

_javascript/commons/back-to-top.js

@@ -1,20 +1,20 @@
-/*
+/**
-Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
+ * Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
-*/
+ */
 $(function() {
-  $(window).scroll(() => {
+    $(window).scroll(() => {
-    if ($(this).scrollTop() > 50 &&
+        if ($(this).scrollTop() > 50 &&
-      $("#sidebar-trigger").css("display") === "none") {
+            $("#sidebar-trigger").css("display") === "none") {
-      $("#back-to-top").fadeIn();
+            $("#back-to-top").fadeIn();
-    } else {
+        } else {
-      $("#back-to-top").fadeOut();
+            $("#back-to-top").fadeOut();
-    }
+        }
-  });
+    });
 
-  $("#back-to-top").click(() => {
+    $("#back-to-top").click(() => {
-    $("body,html").animate({
+        $("body,html").animate({
-      scrollTop: 0
+            scrollTop: 0
-    }, 800);
+        }, 800);
-    return false;
+        return false;
-  });
+    });
 });

_javascript/commons/locale-helper.js

@@ -1,19 +0,0 @@
-/**
- * A tool for locale datetime
- */
-
-const LocaleHelper = (function () {
-  const $preferLocale = $('meta[name="prefer-datetime-locale"]');
-  const locale = $preferLocale.length > 0 ?
-      $preferLocale.attr('content').toLowerCase() : $('html').attr('lang').substr(0, 2);
-  const attrTimestamp = 'data-ts';
-  const attrDateFormat = 'data-df';
-
-  return {
-    locale: () => locale,
-    attrTimestamp: () => attrTimestamp,
-    attrDateFormat: () => attrDateFormat,
-    getTimestamp: ($elem) => Number($elem.attr(attrTimestamp)),  // unix timestamp
-    getDateFormat: ($elem) => $elem.attr(attrDateFormat)
-  };
-}());

_javascript/commons/mode-toggle.js

@@ -1,13 +1,13 @@
-/*
+/**
  * Listener for theme mode toggle
  */
-$(function() {
+$(function () {
-  $(".mode-toggle").click((e) => {
+    $(".mode-toggle").click((e) => {
-    const $target = $(e.target);
+        const $target = $(e.target);
-    let $btn = ($target.prop("tagName") === "button".toUpperCase() ?
+        let $btn = ($target.prop("tagName") === "button".toUpperCase() ?
-      $target : $target.parent());
+            $target : $target.parent());
 
-    $btn.blur(); // remove the clicking outline
+        $btn.blur(); // remove the clicking outline
-    flipMode();
+        flipMode();
-  });
+    });
 });

_javascript/commons/scroll-helper.js

@@ -2,35 +2,37 @@
  * A tool for smooth scrolling and topbar switcher
  */
 const ScrollHelper = (function () {
-  const $body = $("body");
+    const $body = $("body");
-  const ATTR_TOPBAR_VISIBLE = "data-topbar-visible";
+    const ATTR_TOPBAR_VISIBLE = "data-topbar-visible";
-  const topbarHeight = $("#topbar-wrapper").outerHeight();
+    const topbarHeight = $("#topbar-wrapper").outerHeight();
 
-  let scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
+    let scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
-  let topbarLocked = false;
+    let topbarLocked = false;
-  let orientationLocked = false;
+    let orientationLocked = false;
 
-  return {
+    return {
-    hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
+        hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
-    showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
+        showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
 
-    // scroll up
+        // scroll up
 
-    addScrollUpTask: () => {
+        addScrollUpTask: () => {
-      scrollUpCount += 1;
+            scrollUpCount += 1;
-      if (!topbarLocked) { topbarLocked = true; }
+            if (!topbarLocked) {
-    },
+                topbarLocked = true;
-    popScrollUpTask: () => scrollUpCount -= 1,
+            }
-    hasScrollUpTask: () => scrollUpCount > 0,
+        },
-    topbarLocked: () => topbarLocked === true,
+        popScrollUpTask: () => scrollUpCount -= 1,
-    unlockTopbar: () => topbarLocked = false,
+        hasScrollUpTask: () => scrollUpCount > 0,
-    getTopbarHeight: () => topbarHeight,
+        topbarLocked: () => topbarLocked === true,
+        unlockTopbar: () => topbarLocked = false,
+        getTopbarHeight: () => topbarHeight,
 
-    // orientation change
+        // orientation change
 
-    orientationLocked: () => orientationLocked === true,
+        orientationLocked: () => orientationLocked === true,
-    lockOrientation: () => orientationLocked = true,
+        lockOrientation: () => orientationLocked = true,
-    unLockOrientation: () => orientationLocked = false
+        unLockOrientation: () => orientationLocked = false
-  };
+    };
 
 }());

_javascript/commons/search-display.js

@@ -1,129 +1,129 @@
-/*
+/**
-* This script make #search-result-wrapper switch to unloaded or shown automatically.
+ * This script make #search-result-wrapper switch to unloaded or shown automatically.
-*/
+ */
 
-$(function() {
+$(function () {
-  const btnSbTrigger = $("#sidebar-trigger");
+    const btnSbTrigger = $("#sidebar-trigger");
-  const btnSearchTrigger = $("#search-trigger");
+    const btnSearchTrigger = $("#search-trigger");
-  const btnCancel = $("#search-cancel");
+    const btnCancel = $("#search-cancel");
-  const main = $("#main");
+    const main = $("#main");
-  const topbarTitle = $("#topbar-title");
+    const topbarTitle = $("#topbar-title");
-  const searchWrapper = $("#search-wrapper");
+    const searchWrapper = $("#search-wrapper");
-  const resultWrapper = $("#search-result-wrapper");
+    const resultWrapper = $("#search-result-wrapper");
-  const results = $("#search-results");
+    const results = $("#search-results");
-  const input = $("#search-input");
+    const input = $("#search-input");
-  const hints = $("#search-hints");
+    const hints = $("#search-hints");
 
-  const scrollBlocker = (function () {
+    const scrollBlocker = (function () {
-    let offset = 0;
+        let offset = 0;
-    return {
+        return {
-      block() {
+            block() {
-        offset = window.scrollY;
+                offset = window.scrollY;
-        $("html,body").scrollTop(0);
+                $("html,body").scrollTop(0);
-      },
+            },
-      release() {
+            release() {
-        $("html,body").scrollTop(offset);
+                $("html,body").scrollTop(offset);
-      },
+            },
-      getOffset() {
+            getOffset() {
-        return offset;
+                return offset;
-      }
+            }
-    };
+        };
-  }());
+    }());
 
-  /*--- Actions in mobile screens (Sidebar hidden) ---*/
+    /*--- Actions in mobile screens (Sidebar hidden) ---*/
 
-  const mobileSearchBar = (function () {
+    const mobileSearchBar = (function () {
-    return {
+        return {
-      on() {
+            on() {
-        btnSbTrigger.addClass("unloaded");
+                btnSbTrigger.addClass("unloaded");
-        topbarTitle.addClass("unloaded");
+                topbarTitle.addClass("unloaded");
-        btnSearchTrigger.addClass("unloaded");
+                btnSearchTrigger.addClass("unloaded");
-        searchWrapper.addClass("d-flex");
+                searchWrapper.addClass("d-flex");
-        btnCancel.addClass("loaded");
+                btnCancel.addClass("loaded");
-      },
+            },
-      off() {
+            off() {
-        btnCancel.removeClass("loaded");
+                btnCancel.removeClass("loaded");
-        searchWrapper.removeClass("d-flex");
+                searchWrapper.removeClass("d-flex");
-        btnSbTrigger.removeClass("unloaded");
+                btnSbTrigger.removeClass("unloaded");
-        topbarTitle.removeClass("unloaded");
+                topbarTitle.removeClass("unloaded");
-        btnSearchTrigger.removeClass("unloaded");
+                btnSearchTrigger.removeClass("unloaded");
-      }
+            }
-    };
+        };
-  }());
+    }());
 
-  const resultSwitch = (function () {
+    const resultSwitch = (function () {
-    let visible = false;
+        let visible = false;
 
-    return {
+        return {
-      on() {
+            on() {
-        if (!visible) {
+                if (!visible) {
-          // the block method must be called before $(#main) unloaded.
+                    // the block method must be called before $(#main) unloaded.
-          scrollBlocker.block();
+                    scrollBlocker.block();
-          resultWrapper.removeClass("unloaded");
+                    resultWrapper.removeClass("unloaded");
-          main.addClass("unloaded");
+                    main.addClass("unloaded");
-          visible = true;
+                    visible = true;
-        }
+                }
-      },
+            },
-      off() {
+            off() {
-        if (visible) {
+                if (visible) {
-          results.empty();
+                    results.empty();
-          if (hints.hasClass("unloaded")) {
+                    if (hints.hasClass("unloaded")) {
-            hints.removeClass("unloaded");
+                        hints.removeClass("unloaded");
-          }
+                    }
-          resultWrapper.addClass("unloaded");
+                    resultWrapper.addClass("unloaded");
-          main.removeClass("unloaded");
+                    main.removeClass("unloaded");
 
-          // now the release method must be called after $(#main) display
+                    // now the release method must be called after $(#main) display
-          scrollBlocker.release();
+                    scrollBlocker.release();
 
-          input.val("");
+                    input.val("");
-          visible = false;
+                    visible = false;
-        }
+                }
-      },
+            },
-      isVisible() {
+            isVisible() {
-        return visible;
+                return visible;
-      }
+            }
-    };
+        };
 
-  }());
+    }());
 
-  function isMobileView() {
+    function isMobileView() {
-    return btnCancel.hasClass("loaded");
+        return btnCancel.hasClass("loaded");
-  }
-
-  btnSearchTrigger.click(function() {
-    mobileSearchBar.on();
-    resultSwitch.on();
-    input.focus();
-  });
-
-  btnCancel.click(function() {
-    mobileSearchBar.off();
-    resultSwitch.off();
-  });
-
-  input.focus(function() {
-    searchWrapper.addClass("input-focus");
-  });
-
-  input.focusout(function() {
-    searchWrapper.removeClass("input-focus");
-  });
-
-  input.on("input", () => {
-    if (input.val() === "") {
-      if (isMobileView()) {
-        hints.removeClass("unloaded");
-      } else {
-        resultSwitch.off();
-      }
-
-    } else {
-      resultSwitch.on();
-      if (isMobileView()) {
-        hints.addClass("unloaded");
-      }
     }
-  });
+
+    btnSearchTrigger.click(function () {
+        mobileSearchBar.on();
+        resultSwitch.on();
+        input.focus();
+    });
+
+    btnCancel.click(function () {
+        mobileSearchBar.off();
+        resultSwitch.off();
+    });
+
+    input.focus(function () {
+        searchWrapper.addClass("input-focus");
+    });
+
+    input.focusout(function () {
+        searchWrapper.removeClass("input-focus");
+    });
+
+    input.on("input", () => {
+        if (input.val() === "") {
+            if (isMobileView()) {
+                hints.removeClass("unloaded");
+            } else {
+                resultSwitch.off();
+            }
+
+        } else {
+            resultSwitch.on();
+            if (isMobileView()) {
+                hints.addClass("unloaded");
+            }
+        }
+    });
 
 });

_javascript/commons/sidebar.js

@@ -2,29 +2,27 @@
  * Expand or close the sidebar in mobile screens.
  */
 
-$(function() {
+$(function () {
+    const sidebarUtil = (function () {
+        const ATTR_DISPLAY = "sidebar-display";
+        let isExpanded = false;
+        const body = $("body");
 
-  const sidebarUtil = (function () {
+        return {
-    const ATTR_DISPLAY = "sidebar-display";
+            toggle() {
-    let isExpanded = false;
+                if (isExpanded === false) {
-    const body = $("body");
+                    body.attr(ATTR_DISPLAY, "");
+                } else {
+                    body.removeAttr(ATTR_DISPLAY);
+                }
 
-    return {
+                isExpanded = !isExpanded;
-      toggle() {
+            }
-        if (isExpanded === false) {
+        };
-          body.attr(ATTR_DISPLAY, "");
-        } else {
-          body.removeAttr(ATTR_DISPLAY);
-        }
 
-        isExpanded = !isExpanded;
+    }());
-      }
-    };
 
-  }());
+    $("#sidebar-trigger").click(sidebarUtil.toggle);
-
-  $("#sidebar-trigger").click(sidebarUtil.toggle);
-
-  $("#mask").click(sidebarUtil.toggle);
 
+    $("#mask").click(sidebarUtil.toggle);
 });

_javascript/commons/tooltip-loader.js

@@ -1,6 +1,6 @@
 /**
  * Initial Bootstrap Tooltip.
-*/
+ */
 $(function () {
-  $("[data-toggle=\"tooltip\"]").tooltip();
+    $("[data-toggle=\"tooltip\"]").tooltip();
 });

_javascript/commons/topbar-switcher.js

@@ -1,90 +1,89 @@
-/*
+/**
  * Hide Header on scroll down
  */
 
-$(function() {
+$(function () {
-  const $searchInput = $("#search-input");
+    const $searchInput = $("#search-input");
-  const delta = ScrollHelper.getTopbarHeight();
+    const delta = ScrollHelper.getTopbarHeight();
 
-  let didScroll;
+    let didScroll;
-  let lastScrollTop = 0;
+    let lastScrollTop = 0;
 
-  function hasScrolled() {
+    function hasScrolled() {
-    let st = $(this).scrollTop();
+        let st = $(this).scrollTop();
 
-    /* Make sure they scroll more than delta */
+        /* Make sure they scroll more than delta */
-    if (Math.abs(lastScrollTop - st) <= delta) {
+        if (Math.abs(lastScrollTop - st) <= delta) {
-      return;
+            return;
-    }
-
-    if (st > lastScrollTop ) { // Scroll Down
-      ScrollHelper.hideTopbar();
-
-      if ($searchInput.is(":focus")) {
-        $searchInput.blur(); /* remove focus */
-      }
-
-    } else  { // Scroll up
-      // has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
-      if (st + $(window).height() < $(document).height()) {
-
-        if (ScrollHelper.hasScrollUpTask()) {
-          return;
         }
 
-        if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
+        if (st > lastScrollTop) { // Scroll Down
-          ScrollHelper.unlockTopbar();
+            ScrollHelper.hideTopbar();
-        } else {
+
-          if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
+            if ($searchInput.is(":focus")) {
-            ScrollHelper.unLockOrientation();
+                $searchInput.blur(); /* remove focus */
-          } else {
+            }
-            ScrollHelper.showTopbar();
+
-          }
+        } else { // Scroll up
+            // has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
+            if (st + $(window).height() < $(document).height()) {
+
+                if (ScrollHelper.hasScrollUpTask()) {
+                    return;
+                }
+
+                if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
+                    ScrollHelper.unlockTopbar();
+                } else {
+                    if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
+                        ScrollHelper.unLockOrientation();
+                    } else {
+                        ScrollHelper.showTopbar();
+                    }
+                }
+            }
         }
-      }
+
+        lastScrollTop = st;
+
+    } // hasScrolled()
+
+    function handleLandscape() {
+        if ($(window).scrollTop() === 0) {
+            return;
+        }
+        ScrollHelper.lockOrientation();
+        ScrollHelper.hideTopbar();
     }
 
-    lastScrollTop = st;
+    if (screen.orientation) {
+        screen.orientation.onchange = () => {
+            const type = screen.orientation.type;
+            if (type === "landscape-primary" || type === "landscape-secondary") {
+                handleLandscape();
+            }
+        };
 
-  } // hasScrolled()
+    } else {
-
+        // for the browsers that not support `window.screen.orientation` API
-  function handleLandscape() {
+        $(window).on("orientationchange", () => {
-    if ($(window).scrollTop() === 0) {
+            if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
-      return;
+                handleLandscape();
+            }
+        });
     }
-    ScrollHelper.lockOrientation();
-    ScrollHelper.hideTopbar();
-  }
 
-  if (screen.orientation) {
+    $(window).scroll(() => {
-    screen.orientation.onchange = () => {
+        if (didScroll) {
-      const type = screen.orientation.type;
+            return;
-      if (type ===  "landscape-primary" || type === "landscape-secondary") {
+        }
-        handleLandscape();
+        didScroll = true;
-      }
-    };
-
-  } else {
-    // for the browsers that not support `window.screen.orientation` API
-    $(window).on("orientationchange",() => {
-      if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
-        handleLandscape();
-      }
     });
-  }
-
-  $(window).scroll(() => {
-    if (didScroll) {
-      return;
-    }
-    didScroll = true;
-  });
-
-  setInterval(() => {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
 
+    setInterval(() => {
+        if (didScroll) {
+            hasScrolled();
+            didScroll = false;
+        }
+    }, 250);
 });

_javascript/commons/topbar-title.js

@@ -1,67 +1,67 @@
-/*
+/**
  * Top bar title auto change while scrolling up/down in mobile screens.
-*/
+ */
 
-$(function() {
+$(function () {
-  const titleSelector = "div.post>h1:first-of-type";
+    const titleSelector = "div.post>h1:first-of-type";
-  const $pageTitle = $(titleSelector);
+    const $pageTitle = $(titleSelector);
-  const $topbarTitle = $("#topbar-title");
+    const $topbarTitle = $("#topbar-title");
 
-  if ($pageTitle.length === 0 /* on Home page */
+    if ($pageTitle.length === 0 /* on Home page */
-      || $pageTitle.hasClass("dynamic-title")
+        || $pageTitle.hasClass("dynamic-title")
-      || $topbarTitle.is(":hidden")) {/* not in mobile views */
+        || $topbarTitle.is(":hidden")) {/* not in mobile views */
-    return;
+        return;
-  }
-
-  const defaultTitleText = $topbarTitle.text().trim();
-  let pageTitleText = $pageTitle.text().trim();
-  let hasScrolled = false;
-  let lastScrollTop = 0;
-
-  if ($("#page-category").length || $("#page-tag").length) {
-    /* The title in Category or Tag page will be "<title> <count_of_posts>" */
-    if (/\s/.test(pageTitleText)) {
-      pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
-    }
-  }
-
-  // When the page is scrolled down and then refreshed, the topbar title needs to be initialized
-  if ($pageTitle.offset().top < $(window).scrollTop()) {
-    $topbarTitle.text(pageTitleText);
-  }
-
-  let options = {
-    rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
-    threshold: [0, 1]
-  };
-
-  let observer = new IntersectionObserver((entries) => {
-    if (!hasScrolled) {
-      hasScrolled = true;
-      return;
     }
 
-    let curScrollTop = $(window).scrollTop();
+    const defaultTitleText = $topbarTitle.text().trim();
-    let isScrollDown = lastScrollTop < curScrollTop;
+    let pageTitleText = $pageTitle.text().trim();
-    lastScrollTop = curScrollTop;
+    let hasScrolled = false;
-    let heading = entries[0];
+    let lastScrollTop = 0;
 
-    if (isScrollDown) {
+    if ($("#page-category").length || $("#page-tag").length) {
-      if (heading.intersectionRatio === 0) {
+        /* The title in Category or Tag page will be "<title> <count_of_posts>" */
+        if (/\s/.test(pageTitleText)) {
+            pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
+        }
+    }
+
+    // When the page is scrolled down and then refreshed, the topbar title needs to be initialized
+    if ($pageTitle.offset().top < $(window).scrollTop()) {
         $topbarTitle.text(pageTitleText);
-      }
-    } else {
-      if (heading.intersectionRatio === 1) {
-        $topbarTitle.text(defaultTitleText);
-      }
     }
-  }, options);
 
-  observer.observe(document.querySelector(titleSelector));
+    let options = {
+        rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
+        threshold: [0, 1]
+    };
 
-  /* Click title will scroll to top */
+    let observer = new IntersectionObserver((entries) => {
-  $topbarTitle.click(function() {
+        if (!hasScrolled) {
-    $("body,html").animate({scrollTop: 0}, 800);
+            hasScrolled = true;
-  });
+            return;
+        }
+
+        let curScrollTop = $(window).scrollTop();
+        let isScrollDown = lastScrollTop < curScrollTop;
+        lastScrollTop = curScrollTop;
+        let heading = entries[0];
+
+        if (isScrollDown) {
+            if (heading.intersectionRatio === 0) {
+                $topbarTitle.text(pageTitleText);
+            }
+        } else {
+            if (heading.intersectionRatio === 1) {
+                $topbarTitle.text(defaultTitleText);
+            }
+        }
+    }, options);
+
+    observer.observe(document.querySelector(titleSelector));
+
+    /* Click title will scroll to top */
+    $topbarTitle.click(function () {
+        $("body,html").animate({scrollTop: 0}, 800);
+    });
 
 });

_javascript/copyright

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

_javascript/utils/category-collapse.js

@@ -1,30 +1,30 @@
-/*
+/**
  * Tab 'Categories' expand/close effect.
  */
 
-$(function() {
+$(function () {
-  const childPrefix = "l_";
+    const childPrefix = "l_";
-  const parentPrefix = "h_";
+    const parentPrefix = "h_";
-  const collapse = $(".collapse");
+    const collapse = $(".collapse");
 
-  /* close up top-category */
+    /* close up top-category */
-  collapse.on("hide.bs.collapse", function () { /* Bootstrap collapse events. */
+    collapse.on("hide.bs.collapse", function () { /* Bootstrap collapse events. */
-    const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
+        const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
-    if (parentId) {
+        if (parentId) {
-      $(`#${parentId} .far.fa-folder-open`).attr("class", "far fa-folder fa-fw");
+            $(`#${parentId} .far.fa-folder-open`).attr("class", "far fa-folder fa-fw");
-      $(`#${parentId} i.fas`).addClass("rotate");
+            $(`#${parentId} i.fas`).addClass("rotate");
-      $(`#${parentId}`).removeClass("hide-border-bottom");
+            $(`#${parentId}`).removeClass("hide-border-bottom");
-    }
+        }
-  });
+    });
 
-  /* expand the top category */
+    /* expand the top category */
-  collapse.on("show.bs.collapse", function() {
+    collapse.on("show.bs.collapse", function () {
-    const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
+        const parentId = parentPrefix + $(this).attr("id").substring(childPrefix.length);
-    if (parentId) {
+        if (parentId) {
-      $(`#${parentId} .far.fa-folder`).attr("class", "far fa-folder-open fa-fw");
+            $(`#${parentId} .far.fa-folder`).attr("class", "far fa-folder-open fa-fw");
-      $(`#${parentId} i.fas`).removeClass("rotate");
+            $(`#${parentId} i.fas`).removeClass("rotate");
-      $(`#${parentId}`).addClass("hide-border-bottom");
+            $(`#${parentId}`).addClass("hide-border-bottom");
-    }
+        }
-  });
+    });
 
 });

_javascript/utils/checkbox.js

@@ -1,12 +0,0 @@
-/*
- * Create a more beautiful checkbox
- */
-
-$(function() {
-  /* hide browser default checkbox */
-  $("input[type=checkbox]").addClass("unloaded");
-  /* create checked checkbox */
-  $("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
-  /* create normal checkbox */
-  $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
-});

_javascript/utils/clipboard.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Clipboard functions
  *
  * Dependencies:
@@ -6,128 +6,128 @@
  *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
-$(function() {
+$(function () {
-  const btnSelector = '.code-header>button';
+    const btnSelector = '.code-header>button';
-  const ICON_SUCCESS = 'fas fa-check';
+    const ICON_SUCCESS = 'fas fa-check';
-  const ATTR_TIMEOUT = 'timeout';
+    const ATTR_TIMEOUT = 'timeout';
-  const ATTR_TITLE_SUCCEED = 'data-title-succeed';
+    const ATTR_TITLE_SUCCEED = 'data-title-succeed';
-  const ATTR_TITLE_ORIGIN = 'data-original-title';
+    const ATTR_TITLE_ORIGIN = 'data-original-title';
-  const TIMEOUT = 2000; // in milliseconds
+    const TIMEOUT = 2000; // in milliseconds
 
-  function isLocked(node) {
+    function isLocked(node) {
-    if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
+        if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
-      let timeout = $(node).attr(ATTR_TIMEOUT);
+            let timeout = $(node).attr(ATTR_TIMEOUT);
-      if (Number(timeout) > Date.now()) {
+            if (Number(timeout) > Date.now()) {
-        return true;
+                return true;
-      }
+            }
-    }
+        }
-    return false;
+        return false;
-  }
-
-  function lock(node) {
-    $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
-  }
-
-  function unlock(node) {
-    $(node).removeAttr(ATTR_TIMEOUT);
-  }
-
-  /* --- Copy code block --- */
-
-  // Initial the clipboard.js object
-  const clipboard = new ClipboardJS(btnSelector, {
-    target(trigger) {
-      let codeBlock = trigger.parentNode.nextElementSibling;
-      return codeBlock.querySelector('code .rouge-code');
-    }
-  });
-
-  $(btnSelector).tooltip({
-    trigger: 'hover',
-    placement: 'left'
-  });
-
-  function getIcon(btn) {
-    let iconNode = $(btn).children();
-    return iconNode.attr('class');
-  }
-
-  const ICON_DEFAULT = getIcon(btnSelector);
-
-  function showTooltip(btn) {
-    const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
-    $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
-  }
-
-  function hideTooltip(btn) {
-    $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN);
-  }
-
-  function setSuccessIcon(btn) {
-    let btnNode = $(btn);
-    let iconNode = btnNode.children();
-    iconNode.attr('class', ICON_SUCCESS);
-  }
-
-  function resumeIcon(btn) {
-    let btnNode = $(btn);
-    let iconNode = btnNode.children();
-    iconNode.attr('class', ICON_DEFAULT);
-  }
-
-  clipboard.on('success', (e) => {
-    e.clearSelection();
-
-    const trigger = e.trigger;
-    if (isLocked(trigger)) {
-      return;
     }
 
-    setSuccessIcon(trigger);
+    function lock(node) {
-    showTooltip(trigger);
+        $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
-    lock(trigger);
-
-    setTimeout(() => {
-      hideTooltip(trigger);
-      resumeIcon(trigger);
-      unlock(trigger);
-    }, TIMEOUT);
-
-  });
-
-  /* --- Post link sharing --- */
-
-  $('#copy-link').click((e) => {
-
-    let target = $(e.target);
-
-    if (isLocked(target)) {
-      return;
     }
 
-    // Copy URL to clipboard
+    function unlock(node) {
+        $(node).removeAttr(ATTR_TIMEOUT);
+    }
 
-    const url = window.location.href;
+    /* --- Copy code block --- */
-    const $temp = $("<input>");
 
-    $("body").append($temp);
+    // Initial the clipboard.js object
-    $temp.val(url).select();
+    const clipboard = new ClipboardJS(btnSelector, {
-    document.execCommand("copy");
+        target(trigger) {
-    $temp.remove();
+            let codeBlock = trigger.parentNode.nextElementSibling;
+            return codeBlock.querySelector('code .rouge-code');
+        }
+    });
 
-    // Switch tooltip title
+    $(btnSelector).tooltip({
+        trigger: 'hover',
+        placement: 'left'
+    });
 
-    const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
+    function getIcon(btn) {
-    const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
+        let iconNode = $(btn).children();
+        return iconNode.attr('class');
+    }
 
-    target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+    const ICON_DEFAULT = getIcon(btnSelector);
-    lock(target);
 
-    setTimeout(() => {
+    function showTooltip(btn) {
-      target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
+        const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
-      unlock(target);
+        $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
-    }, TIMEOUT);
+    }
 
-  });
+    function hideTooltip(btn) {
+        $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN);
+    }
+
+    function setSuccessIcon(btn) {
+        let btnNode = $(btn);
+        let iconNode = btnNode.children();
+        iconNode.attr('class', ICON_SUCCESS);
+    }
+
+    function resumeIcon(btn) {
+        let btnNode = $(btn);
+        let iconNode = btnNode.children();
+        iconNode.attr('class', ICON_DEFAULT);
+    }
+
+    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);
+
+    });
+
+    /* --- Post link sharing --- */
+
+    $('#copy-link').click((e) => {
+
+        let target = $(e.target);
+
+        if (isLocked(target)) {
+            return;
+        }
+
+        // Copy URL to clipboard
+
+        const url = window.location.href;
+        const $temp = $("<input>");
+
+        $("body").append($temp);
+        $temp.val(url).select();
+        document.execCommand("copy");
+        $temp.remove();
+
+        // Switch tooltip title
+
+        const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
+        const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
+
+        target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+        lock(target);
+
+        setTimeout(() => {
+            target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
+            unlock(target);
+        }, TIMEOUT);
+
+    });
 
 });

_javascript/utils/img-extra.js

@@ -1,47 +1,28 @@
 /**
-  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
+ * Set up image stuff
-  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+ */
-*/
 
-$(function() {
+(function() {
-
+    if ($('#core-wrapper img[data-src]') <= 0) {
-  const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
+        return;
-
-  if ($(`${IMG_SCOPE} img`).length <= 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>`);
     }
-  );
 
-  $('.popup').magnificPopup({
+    /* See: <https://github.com/dimsemenov/Magnific-Popup> */
-    type: 'image',
+    $('.popup').magnificPopup({
-    closeOnContentClick: true,
+        type: 'image',
-    showCloseBtn: false,
+        closeOnContentClick: true,
-    zoom: {
+        showCloseBtn: false,
-      enabled: true,
+        zoom: {
-      duration: 300,
+            enabled: true,
-      easing: 'ease-in-out'
+            duration: 300,
-    }
+            easing: 'ease-in-out'
-  });
+        }
+    });
 
-  /* markup the image links */
+    /* Stop shimmer when image loaded */
+    document.addEventListener('lazyloaded', function(e) {
+        const $img = $(e.target);
+        $img.parent().removeClass('shimmer');
+    });
 
-  $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
+})();
-
-});

_javascript/utils/locale-datetime.js

@@ -4,17 +4,40 @@
  * Requirement: <https://github.com/iamkun/dayjs>
  */
 
-$(function() {
+/* A tool for locale datetime */
-  dayjs.locale(LocaleHelper.locale());
+const LocaleHelper = (function () {
-  dayjs.extend(window.dayjs_plugin_localizedFormat);
+    const locale = $('html').attr('lang').substr(0, 2);
+    const attrTimestamp = 'data-ts';
+    const attrDateFormat = 'data-df';
 
-  $(`[${LocaleHelper.attrTimestamp()}]`).each(function () {
+    return {
-    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
+        locale: () => locale,
-    const df = LocaleHelper.getDateFormat($(this));
+        attrTimestamp: () => attrTimestamp,
-    const text = date.format(df);
+        attrDateFormat: () => attrDateFormat,
+        getTimestamp: ($elem) => Number($elem.attr(attrTimestamp)), // unix timestamp
+        getDateFormat: ($elem) => $elem.attr(attrDateFormat)
+    };
 
-    $(this).text(text);
+}());
-    $(this).removeAttr(LocaleHelper.attrTimestamp());
+
-    $(this).removeAttr(LocaleHelper.attrDateFormat());
+$(function () {
-  });
+    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());
+
+        // setup tooltips
+        const tooltip = $(this).attr('data-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-original-title', tooltipText);
+    });
 });

_javascript/utils/pageviews.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Count page views form GA or local cache file.
  *
  * Dependencies:
@@ -7,244 +7,244 @@
  */
 
 const getInitStatus = (function () {
-  let hasInit = false;
+    let hasInit = false;
-  return () => {
+    return () => {
-    let ret = hasInit;
+        let ret = hasInit;
-    if (!hasInit) {
+        if (!hasInit) {
-      hasInit = true;
+            hasInit = true;
-    }
+        }
-    return ret;
+        return ret;
-  };
+    };
 }());
 
 const PvOpts = (function () {
-  function getContent(selector) {
+    function getContent(selector) {
-    return $(selector).attr("content");
+        return $(selector).attr("content");
-  }
-
-  function hasContent(selector) {
-    let content = getContent(selector);
-    return (typeof content !== "undefined" && content !== false);
-  }
-
-  return {
-    getProxyMeta() {
-      return getContent("meta[name=pv-proxy-endpoint]");
-    },
-    getLocalMeta() {
-      return getContent("meta[name=pv-cache-path]");
-    },
-    hasProxyMeta() {
-      return hasContent("meta[name=pv-proxy-endpoint]");
-    },
-    hasLocalMeta() {
-      return hasContent("meta[name=pv-cache-path]");
     }
-  };
+
+    function hasContent(selector) {
+        let content = getContent(selector);
+        return (typeof content !== "undefined" && content !== false);
+    }
+
+    return {
+        getProxyMeta() {
+            return getContent("meta[name=pv-proxy-endpoint]");
+        },
+        getLocalMeta() {
+            return getContent("meta[name=pv-cache-path]");
+        },
+        hasProxyMeta() {
+            return hasContent("meta[name=pv-proxy-endpoint]");
+        },
+        hasLocalMeta() {
+            return hasContent("meta[name=pv-cache-path]");
+        }
+    };
 
 }());
 
 const PvStorage = (function () {
-  const Keys = {
+    const Keys = {
-    KEY_PV: "pv",
+        KEY_PV: "pv",
-    KEY_PV_SRC: "pv_src",
+        KEY_PV_SRC: "pv_src",
-    KEY_CREATION: "pv_created_date"
+        KEY_CREATION: "pv_created_date"
-  };
+    };
 
-  const Source = {
+    const Source = {
-    LOCAL: "same-origin",
+        LOCAL: "same-origin",
-    PROXY: "cors"
+        PROXY: "cors"
-  };
+    };
 
-  function get(key) {
+    function get(key) {
-    return localStorage.getItem(key);
+        return localStorage.getItem(key);
-  }
-
-  function set(key, val) {
-    localStorage.setItem(key, val);
-  }
-
-  function saveCache(pv, src) {
-    set(Keys.KEY_PV, pv);
-    set(Keys.KEY_PV_SRC, src);
-    set(Keys.KEY_CREATION, new Date().toJSON());
-  }
-
-  return {
-    keysCount() {
-      return Object.keys(Keys).length;
-    },
-    hasCache() {
-      return (localStorage.getItem(Keys.KEY_PV) !== null);
-    },
-    getCache() {
-      return JSON.parse(localStorage.getItem(Keys.KEY_PV));
-    },
-    saveLocalCache(pv) {
-      saveCache(pv, Source.LOCAL);
-    },
-    saveProxyCache(pv) {
-      saveCache(pv, Source.PROXY);
-    },
-    isExpired() {
-      let date = new Date(get(Keys.KEY_CREATION));
-      date.setHours(date.getHours() + 1);   // per hour
-      return Date.now() >= date.getTime();
-    },
-    isFromLocal() {
-      return get(Keys.KEY_PV_SRC) === Source.LOCAL;
-    },
-    isFromProxy() {
-      return get(Keys.KEY_PV_SRC) === Source.PROXY;
-    },
-    newerThan(pv) {
-      return PvStorage.getCache().totalsForAllResults["ga:pageviews"] > pv.totalsForAllResults["ga:pageviews"];
-    },
-    inspectKeys() {
-      if (localStorage.length !== PvStorage.keysCount()) {
-        localStorage.clear();
-        return;
-      }
-
-      for(let i = 0; i < localStorage.length; i++){
-        const key = localStorage.key(i);
-        switch (key) {
-          case Keys.KEY_PV:
-          case Keys.KEY_PV_SRC:
-          case Keys.KEY_CREATION:
-            break;
-          default:
-            localStorage.clear();
-            return;
-        }
-      }
     }
-  };
+
+    function set(key, val) {
+        localStorage.setItem(key, val);
+    }
+
+    function saveCache(pv, src) {
+        set(Keys.KEY_PV, pv);
+        set(Keys.KEY_PV_SRC, src);
+        set(Keys.KEY_CREATION, new Date().toJSON());
+    }
+
+    return {
+        keysCount() {
+            return Object.keys(Keys).length;
+        },
+        hasCache() {
+            return (localStorage.getItem(Keys.KEY_PV) !== null);
+        },
+        getCache() {
+            return JSON.parse(localStorage.getItem(Keys.KEY_PV));
+        },
+        saveLocalCache(pv) {
+            saveCache(pv, Source.LOCAL);
+        },
+        saveProxyCache(pv) {
+            saveCache(pv, Source.PROXY);
+        },
+        isExpired() {
+            let date = new Date(get(Keys.KEY_CREATION));
+            date.setHours(date.getHours() + 1);   // per hour
+            return Date.now() >= date.getTime();
+        },
+        isFromLocal() {
+            return get(Keys.KEY_PV_SRC) === Source.LOCAL;
+        },
+        isFromProxy() {
+            return get(Keys.KEY_PV_SRC) === Source.PROXY;
+        },
+        newerThan(pv) {
+            return PvStorage.getCache().totalsForAllResults["ga:pageviews"] > pv.totalsForAllResults["ga:pageviews"];
+        },
+        inspectKeys() {
+            if (localStorage.length !== PvStorage.keysCount()) {
+                localStorage.clear();
+                return;
+            }
+
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                switch (key) {
+                    case Keys.KEY_PV:
+                    case Keys.KEY_PV_SRC:
+                    case Keys.KEY_CREATION:
+                        break;
+                    default:
+                        localStorage.clear();
+                        return;
+                }
+            }
+        }
+    };
 }()); /* PvStorage */
 
 function countUp(min, max, destId) {
-  if (min < max) {
+    if (min < max) {
-    let numAnim = new CountUp(destId, min, max);
+        let numAnim = new CountUp(destId, min, max);
-    if (!numAnim.error) {
+        if (!numAnim.error) {
-      numAnim.start();
+            numAnim.start();
-    } else {
+        } else {
-      console.error(numAnim.error);
+            console.error(numAnim.error);
+        }
     }
-  }
 }
 
 function countPV(path, rows) {
-  let count = 0;
+    let count = 0;
 
-  if (typeof rows !== "undefined" ) {
+    if (typeof rows !== "undefined") {
-    for (let i = 0; i < rows.length; ++i) {
+        for (let i = 0; i < rows.length; ++i) {
-      const gaPath = rows[parseInt(i, 10)][0];
+            const gaPath = rows[parseInt(i, 10)][0];
-      if (gaPath === path) { /* path format see: site.permalink */
+            if (gaPath === path) { /* path format see: site.permalink */
-        count += parseInt(rows[parseInt(i, 10)][1], 10);
+                count += parseInt(rows[parseInt(i, 10)][1], 10);
-        break;
+                break;
-      }
+            }
+        }
     }
-  }
 
-  return count;
+    return count;
 }
 
 function tacklePV(rows, path, elem, hasInit) {
-  let count = countPV(path, rows);
+    let count = countPV(path, rows);
-  count = (count === 0 ? 1 : count);
+    count = (count === 0 ? 1 : count);
 
-  if (!hasInit) {
+    if (!hasInit) {
-    elem.text(new Intl.NumberFormat().format(count));
+        elem.text(new Intl.NumberFormat().format(count));
-  } else {
+    } else {
-    const initCount = parseInt(elem.text().replace(/,/g, ""), 10);
+        const initCount = parseInt(elem.text().replace(/,/g, ""), 10);
-    if (count > initCount) {
+        if (count > initCount) {
-      countUp(initCount, count, elem.attr("id"));
+            countUp(initCount, count, elem.attr("id"));
+        }
     }
-  }
 }
 
 function displayPageviews(data) {
-  if (typeof data === "undefined") {
+    if (typeof data === "undefined") {
-    return;
+        return;
-  }
+    }
 
-  let hasInit = getInitStatus();
+    let hasInit = getInitStatus();
-  const rows = data.rows; /* could be undefined */
+    const rows = data.rows; /* could be undefined */
 
-  if ($("#post-list").length > 0) { /* the Home page */
+    if ($("#post-list").length > 0) { /* the Home page */
-    $(".post-preview").each(function() {
+        $(".post-preview").each(function () {
-      const path = $(this).find("a").attr("href");
+            const path = $(this).find("a").attr("href");
-      tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
+            tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
-    });
+        });
 
-  } else if ($(".post").length > 0) { /* the post */
+    } else if ($(".post").length > 0) { /* the post */
-    const path = window.location.pathname;
+        const path = window.location.pathname;
-    tacklePV(rows, path, $("#pv"), hasInit);
+        tacklePV(rows, path, $("#pv"), hasInit);
-  }
+    }
 }
 
 function fetchProxyPageviews() {
-  if (PvOpts.hasProxyMeta()) {
+    if (PvOpts.hasProxyMeta()) {
-    $.ajax({
+        $.ajax({
-      type: "GET",
+            type: "GET",
-      url: PvOpts.getProxyMeta(),
+            url: PvOpts.getProxyMeta(),
-      dataType: "jsonp",
+            dataType: "jsonp",
-      jsonpCallback: "displayPageviews",
+            jsonpCallback: "displayPageviews",
-      success: (data) => {
+            success: (data) => {
-        PvStorage.saveProxyCache(JSON.stringify(data));
+                PvStorage.saveProxyCache(JSON.stringify(data));
-      },
+            },
-      error: (jqXHR, textStatus, errorThrown) => {
+            error: (jqXHR, textStatus, errorThrown) => {
-        console.log("Failed to load pageviews from proxy server: " + errorThrown);
+                console.log("Failed to load pageviews from proxy server: " + errorThrown);
-      }
+            }
-    });
+        });
-  }
+    }
 }
 
 function fetchLocalPageviews(hasCache = false) {
-  return fetch(PvOpts.getLocalMeta())
+    return fetch(PvOpts.getLocalMeta())
-    .then(response => response.json())
+        .then(response => response.json())
-    .then(data => {
+        .then(data => {
-      if (hasCache) {
+            if (hasCache) {
-        // The cache from the proxy will sometimes be more recent than the local one
+                // The cache from the proxy will sometimes be more recent than the local one
-        if (PvStorage.isFromProxy() && PvStorage.newerThan(data)) {
+                if (PvStorage.isFromProxy() && PvStorage.newerThan(data)) {
-          return;
+                    return;
-        }
+                }
-      }
+            }
-      displayPageviews(data);
+            displayPageviews(data);
-      PvStorage.saveLocalCache(JSON.stringify(data));
+            PvStorage.saveLocalCache(JSON.stringify(data));
-    });
+        });
 }
 
-$(function() {
+$(function () {
-  if ($(".pageviews").length <= 0) {
+    if ($(".pageviews").length <= 0) {
-    return;
+        return;
-  }
-
-  PvStorage.inspectKeys();
-
-  if (PvStorage.hasCache()) {
-    displayPageviews(PvStorage.getCache());
-
-    if (PvStorage.isExpired()) {
-      if (PvOpts.hasLocalMeta()) {
-        fetchLocalPageviews(true).then(fetchProxyPageviews);
-      } else {
-        fetchProxyPageviews();
-      }
-
-    } else {
-      if (PvStorage.isFromLocal()) {
-        fetchProxyPageviews();
-      }
     }
 
-  } else { // no cached
+    PvStorage.inspectKeys();
 
-    if (PvOpts.hasLocalMeta()) {
+    if (PvStorage.hasCache()) {
-      fetchLocalPageviews().then(fetchProxyPageviews);
+        displayPageviews(PvStorage.getCache());
-    } else {
+
-      fetchProxyPageviews();
+        if (PvStorage.isExpired()) {
+            if (PvOpts.hasLocalMeta()) {
+                fetchLocalPageviews(true).then(fetchProxyPageviews);
+            } else {
+                fetchProxyPageviews();
+            }
+
+        } else {
+            if (PvStorage.isFromLocal()) {
+                fetchProxyPageviews();
+            }
+        }
+
+    } else { // no cached
+
+        if (PvOpts.hasLocalMeta()) {
+            fetchLocalPageviews().then(fetchProxyPageviews);
+        } else {
+            fetchProxyPageviews();
+        }
     }
-  }
 
 });

_javascript/utils/smooth-scroll.js

@@ -1,96 +1,96 @@
-/*
+/**
-  Safari doesn't support CSS `scroll-behavior: smooth`,
+ Safari doesn't support CSS `scroll-behavior: smooth`,
-  so here is a compatible solution for all browser to smooth scrolling
+ so here is a compatible solution for all browser to smooth scrolling
 
-  See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
+ See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
 
-  Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
+ Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
-*/
+ */
 
-$(function() {
+$(function () {
-  const $topbarTitle = $("#topbar-title");
+    const $topbarTitle = $("#topbar-title");
-  const REM = 16; // in pixels
+    const REM = 16; // in pixels
-  const ATTR_SCROLL_FOCUS = "scroll-focus";
+    const ATTR_SCROLL_FOCUS = "scroll-focus";
 
-  $("a[href*='#']")
+    $("a[href*='#']")
-    .not("[href='#']")
+        .not("[href='#']")
-    .not("[href='#0']")
+        .not("[href='#0']")
-    .click(function(event) {
+        .click(function (event) {
-      if (this.pathname.replace(/^\//, "") !==
+            if (this.pathname.replace(/^\//, "") !==
-            location.pathname.replace(/^\//, "")) {
+                location.pathname.replace(/^\//, "")) {
-        return;
+                return;
-      }
+            }
 
-      if (location.hostname !== this.hostname) {
+            if (location.hostname !== this.hostname) {
-        return;
+                return;
-      }
+            }
 
-      const hash = decodeURI(this.hash);
+            const hash = decodeURI(this.hash);
-      let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
+            let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
-      let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
+            let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
-      let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
+            let selector = hash.includes(":") ? hash.replace(/:/g, "\\:") : hash;
-      let $target = $(selector);
+            let $target = $(selector);
 
-      let isMobileViews = $topbarTitle.is(":visible");
+            let isMobileViews = $topbarTitle.is(":visible");
-      let isPortrait = $(window).width() < $(window).height();
+            let isPortrait = $(window).width() < $(window).height();
 
-      if (typeof $target === "undefined") {
+            if (typeof $target === "undefined") {
-        return;
+                return;
-      }
+            }
 
-      event.preventDefault();
+            event.preventDefault();
 
-      if (history.pushState) { /* add hash to URL */
+            if (history.pushState) { /* add hash to URL */
-        history.pushState(null, null, hash);
+                history.pushState(null, null, hash);
-      }
+            }
 
-      let curOffset = $(window).scrollTop();
+            let curOffset = $(window).scrollTop();
-      let destOffset = $target.offset().top -= REM / 2;
+            let destOffset = $target.offset().top -= REM / 2;
 
-      if (destOffset < curOffset) { // scroll up
+            if (destOffset < curOffset) { // scroll up
-        ScrollHelper.hideTopbar();
+                ScrollHelper.hideTopbar();
-        ScrollHelper.addScrollUpTask();
+                ScrollHelper.addScrollUpTask();
 
-        if (isMobileViews && isPortrait) {
+                if (isMobileViews && isPortrait) {
-          destOffset -= ScrollHelper.getTopbarHeight();
+                    destOffset -= ScrollHelper.getTopbarHeight();
-        }
+                }
 
-      } else { // scroll down
+            } else { // scroll down
-        if (isMobileViews && isPortrait) {
+                if (isMobileViews && isPortrait) {
-          destOffset -= ScrollHelper.getTopbarHeight();
+                    destOffset -= ScrollHelper.getTopbarHeight();
-        }
+                }
-      }
+            }
 
-      $("html").animate({
+            $("html").animate({
-        scrollTop: destOffset
+                scrollTop: destOffset
-      }, 500, () => {
+            }, 500, () => {
-        $target.focus();
+                $target.focus();
 
-        /* clean up old scroll mark */
+                /* clean up old scroll mark */
-        if ($(`[${ATTR_SCROLL_FOCUS}=true]`).length) {
+                if ($(`[${ATTR_SCROLL_FOCUS}=true]`).length) {
-          $(`[${ATTR_SCROLL_FOCUS}=true]`).attr(ATTR_SCROLL_FOCUS, false);
+                    $(`[${ATTR_SCROLL_FOCUS}=true]`).attr(ATTR_SCROLL_FOCUS, false);
-        }
+                }
 
-        /* Clean :target links */
+                /* Clean :target links */
-        if ($(":target").length) { /* element that visited by the URL with hash */
+                if ($(":target").length) { /* element that visited by the URL with hash */
-          $(":target").attr(ATTR_SCROLL_FOCUS, false);
+                    $(":target").attr(ATTR_SCROLL_FOCUS, false);
-        }
+                }
 
-        /* set scroll mark to footnotes */
+                /* set scroll mark to footnotes */
-        if (toFootnote || toFootnoteRef) {
+                if (toFootnote || toFootnoteRef) {
-          $target.attr(ATTR_SCROLL_FOCUS, true);
+                    $target.attr(ATTR_SCROLL_FOCUS, true);
-        }
+                }
 
-        if ($target.is(":focus")) { /* Checking if the target was focused */
+                if ($target.is(":focus")) { /* Checking if the target was focused */
-          return false;
+                    return false;
-        } else {
+                } else {
-          $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
+                    $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
-          $target.focus(); /* Set focus again */
+                    $target.focus(); /* Set focus again */
-        }
+                }
 
-        if (ScrollHelper.hasScrollUpTask()) {
+                if (ScrollHelper.hasScrollUpTask()) {
-          ScrollHelper.popScrollUpTask();
+                    ScrollHelper.popScrollUpTask();
-        }
+                }
-      });
+            });
-    }); /* click() */
+        }); /* click() */
 });

_javascript/utils/timeago.js

@@ -1,87 +0,0 @@
-/**
- * Calculate the Timeago
- *
- * Requirement: <https://github.com/iamkun/dayjs>
- */
-
-$(function() {
-  const attrTimestamp = LocaleHelper.attrTimestamp();
-  const attrCapitalize = 'data-capitalize';
-  const $timeago = $(".timeago");
-
-  let timeagoTasks = $timeago.length;
-  let intervalId = void 0;
-
-  dayjs.locale(LocaleHelper.locale());
-  dayjs.extend(window.dayjs_plugin_relativeTime);
-  dayjs.extend(window.dayjs_plugin_localizedFormat);
-
-  function relativetime($elem) {
-    const now = dayjs();
-    const past = dayjs.unix(LocaleHelper.getTimestamp($elem));
-
-    let diffMonth = now.diff(past, 'month', true);
-    if (diffMonth > 10) { // year ago range: 11 months to 17months
-      $elem.removeAttr(attrTimestamp);
-      return past.format('ll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    }
-
-    let diffMinute = now.diff(past, 'minute', true);
-    if (diffMinute > 44) { // an hour ago range: 45 to 89 minutes
-      $elem.removeAttr(attrTimestamp);
-    }
-
-    return past.fromNow();
-  }
-
-  function updateTimeago() {
-    $timeago.each(function() {
-      if (typeof $(this).attr(attrTimestamp) === 'undefined') {
-        timeagoTasks -= 1;
-        return;
-      }
-
-      let relativeTime = relativetime($(this));
-      const capitalize = $(this).attr(attrCapitalize);
-      if (typeof capitalize !== 'undefined' && capitalize === 'true') {
-        relativeTime = relativeTime.replace(/^\w/, (c) => c.toUpperCase());
-      }
-
-      if ($(this).text() !== relativeTime) {
-        $(this).text(relativeTime);
-      }
-    });
-
-    if (timeagoTasks === 0 && typeof intervalId !== "undefined") {
-      clearInterval(intervalId); /* stop interval */
-    }
-
-    return timeagoTasks;
-  }
-
-  function setupTooltips() {
-    $timeago.each(function() {
-      const tooltip = $(this).attr('data-toggle');
-      if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
-        return;
-      }
-
-      const df = $(this).attr('data-tooltip-df');
-      const ts = LocaleHelper.getTimestamp($(this));
-      const dateStr = dayjs.unix(ts).format(df);
-      $(this).attr('data-original-title', dateStr);
-      $(this).removeAttr('data-tooltip-df');
-    });
-  }
-
-  if (timeagoTasks === 0) {
-    return;
-  }
-
-  setupTooltips();
-
-  if (updateTimeago()) { /* run immediately */
-    intervalId = setInterval(updateTimeago, 60 * 1000); /* run every minute */
-  }
-
-});

_layouts/archives.html

@@ -3,35 +3,32 @@ layout: page
 # The Archives of posts.
 ---
 
-<div id="archives" class="pl-xl-2">
+{% assign df_strftime_m = site.data.locales[site.lang].df.archives.strftime | default: '/ %m' %}
+{% assign df_dayjs_m = site.data.locales[site.lang].df.archives.dayjs | default: '/ MM' %}
+
+<div id="archives" class="pl-xl-3">
 
 {% for post in site.posts %}
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+
-  {% if forloop.first %}
+  {% if cur_year != last_year %}
-    {% assign last_day = "" %}
+    {% unless forloop.first %}</ul>{% endunless %}
-    {% assign last_month = "" %}
+    <div class="year lead">{{ cur_year }}</div>
-  <span class="lead">{{this_year}}</span>
+    <ul class="list-unstyled">
-  <ul class="list-unstyled">
+    {% assign last_year = cur_year %}
-  {% endif %}
-    <li>
-      <div>
-        {% assign ts = post.date | date: '%s' %}
-        <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-        <span class="date month small text-muted" data-ts="{{ ts }}" data-df="MMM">
-          {{ post.date | date: '%m' }}
-        </span>
-        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      </div>
-    </li>
-  {% if forloop.last %}
-  </ul>
-  {% elsif this_year != pre_year %}
-  </ul>
-  <span class="lead">{{pre_year}}</span>
-  <ul class="list-unstyled">
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
   {% endif %}
+
+  <li>
+  {% assign ts = post.date | date: '%s' %}
+    <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
+    <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+      {{ post.date | date: df_strftime_m }}
+    </span>
+    <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+  </li>
+
+  {% if forloop.last %}</ul>{% endif %}
+
 {% endfor %}
+
 </div>

_layouts/categories.html

@@ -3,8 +3,6 @@ layout: page
 # All the Categories of posts
 ---
 
-{% include lang.html %}
-
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
@@ -47,10 +45,24 @@ layout: page
         <span class="text-muted small font-weight-light">
           {% if sub_categories_size > 0 %}
             {{ sub_categories_size }}
-            {{ site.data.locales[lang].categories.category_measure }},
+            {% if sub_categories_size > 1 %}
+              {{ site.data.locales[site.lang].categories.category_measure.plural
+                | default: site.data.locales[site.lang].categories.category_measure }}
+            {% else %}
+              {{ site.data.locales[site.lang].categories.category_measure.singular
+                | default: site.data.locales[site.lang].categories.category_measure }}
+            {% endif %},
+          {% endif %}
+
+          {{ top_posts_size }}
+
+          {% if top_posts_size > 1 %}
+            {{ site.data.locales[site.lang].categories.post_measure.plural
+              | default: site.data.locales[site.lang].categories.post_measure }}
+          {% else %}
+            {{ site.data.locales[site.lang].categories.post_measure.singular
+              | default: site.data.locales[site.lang].categories.post_measure }}
           {% endif %}
-            {{ top_posts_size }}
-            {{ site.data.locales[lang].categories.post_measure }}
         </span>
       </span>
 
@@ -83,7 +95,14 @@ layout: page
           {% assign posts_size = site.categories[sub_category] | size %}
           <span class="text-muted small font-weight-light">
             {{ posts_size }}
-            {{ site.data.locales[lang].categories.post_measure }}
+
+            {% if posts_size > 1 %}
+              {{ site.data.locales[site.lang].categories.post_measure.plural
+                | default: site.data.locales[site.lang].categories.post_measure }}
+            {% else %}
+              {{ site.data.locales[site.lang].categories.post_measure.singular
+                | default: site.data.locales[site.lang].categories.post_measure }}
+            {% endif %}
           </span>
         </li>
         {% endfor %}

_layouts/category.html

@@ -15,9 +15,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
+      {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
-        {{ post.date | date: '%Y-%m-%d' }}
-      </span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -5,8 +5,6 @@ layout: compress
 
 <!DOCTYPE html>
 
-{% include lang.html %}
-
 {% include assets-origin.html %}
 
 {% capture prefer_mode %}
@@ -15,33 +13,28 @@ layout: compress
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang }}"{{ prefer_mode }}>
+<!-- `site.alt_lang` can specify a language different from the UI -->
+<html lang="{{ site.alt_lang | default: site.lang }}"{{ prefer_mode }}>
 
   {% include head.html %}
 
-  {% unless site.theme_mode %}
-    {% include mode-toggle.html %}
-  {% endunless %}
-
   <body data-spy="scroll" data-target="#toc" data-topbar-visible="true">
 
     {% include sidebar.html %}
 
     {% include topbar.html %}
 
-    <div id="main-wrapper">
+    <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main">
+      <div id="main" class="container pl-xl-4 pr-xl-4">
-
         {{ content }}
-
-        {% include footer.html %}
-
       </div>
 
       {% include search-results.html %}
 
     </div> <!-- #main-wrapper -->
 
+    {% include footer.html %}
+
     {% if page.mermaid %}
       {% include mermaid.html %}
     {% endif %}
@@ -52,6 +45,23 @@ layout: compress
       <i class="fas fa-angle-up"></i>
     </a>
 
+    {% if site.pwa.enabled %}
+      <div id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
+        data-animation="true" data-autohide="false">
+        <div class="toast-header">
+          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body text-center pt-0">
+          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[site.lang].notification.update_found }}</p>
+          <button type="button" class="btn btn-primary" aria-label="Update">
+            {{ site.data.locales[site.lang].notification.update }}
+          </button>
+        </div>
+      </div>
+    {% endif %}
+
     {% include search-loader.html %}
 
     {% include js-selector.html %}

_layouts/home.html

@@ -3,8 +3,6 @@ layout: page
 # The Home page layout
 ---
 
-{% include lang.html %}
-
 {% assign pinned = site.posts | where: "pin", "true" %}
 {% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
 
@@ -23,7 +21,6 @@ layout: page
   {% assign pinned_num = 0 %}
 {% endif %}
 
-
 <!-- Get default posts -->
 
 {% assign default_beg = offset | minus: pinned.size %}
@@ -58,15 +55,11 @@ layout: page
     </div>
 
     <div class="post-meta text-muted d-flex">
-
       <div class="mr-auto">
+
         <!-- posted date -->
         <i class="far fa-calendar fa-fw"></i>
-        {% include timeago.html date=post.date tooltip=true capitalize=true %}
+        {% include datetime.html date=post.date %}
-
-        <!-- time to read -->
-        <i class="far fa-clock fa-fw"></i>
-        {% include read-time.html content=post.content %}
 
         <!-- categories -->
         {% if post.categories.size > 0 %}
@@ -78,12 +71,13 @@ layout: page
           {% endfor %}
           </span>
         {% endif %}
+
       </div>
 
       {% if post.pin %}
       <div class="pin">
         <i class="fas fa-thumbtack fa-fw"></i>
-        <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+        <span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
       </div>
       {% endif %}
 

_layouts/page.html

@@ -2,15 +2,13 @@
 layout: default
 ---
 
-{% include lang.html %}
-
 {% include assets-origin.html %}
 
 <div class="row">
 
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
 
     {% capture _content %}
       {% if layout.refactor or page.layout == 'page' %}
@@ -20,8 +18,9 @@ layout: default
       {% endif %}
     {% endcapture %}
 
-    {% if page.layout == 'page' or page.collection == 'tabs'%}
+    {% if page.layout == 'page' or page.collection == 'tabs' %}
-      {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+      {% assign tab_key = page.title | downcase %}
+      {% assign title = site.data.locales[site.lang].tabs[tab_key] | default: page.title %}
       <h1 class="dynamic-title">
         {{ title }}
       </h1>
@@ -35,7 +34,7 @@ layout: default
     </div>
   </div> <!-- #core-wrapper -->
 
-  <!-- pannel -->
+  <!-- panel -->
   <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
 
     <div class="access">
@@ -43,7 +42,7 @@ layout: default
       {% include trending-tags.html %}
     </div>
 
-    {% for _include in layout.pannel_includes %}
+    {% for _include in layout.panel_includes %}
       {% assign _include_path = _include | append: '.html' %}
       {% include {{ _include_path }} %}
     {% endfor %}
@@ -54,13 +53,11 @@ layout: default
 <!-- tail -->
 {% if layout.tail_includes %}
 <div class="row">
-  <div class="col-12 col-lg-11 col-xl-8">
+  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4 mt-5">
-    <div id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% for _include in layout.tail_includes %}
-      {% for _include in layout.tail_includes %}
+      {% assign _include_path = _include | append: '.html' %}
-        {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
-        {% include {{ _include_path }} %}
+    {% endfor %}
-      {% endfor %}
-    </div>
   </div>
-</div> <!-- .row -->
+</div>
 {% endif %}

_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 refactor: true
-pannel_includes:
+panel_includes:
   - toc
 tail_includes:
   - related-posts
@@ -9,81 +9,78 @@ tail_includes:
   - comments
 ---
 
-{% include lang.html %}
-
-{% if page.image.src %}
-  {% capture bg %}
-    {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
-  {% endcapture %}
-  <img src="{{ page.image.src }}" 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 %}>
-{% endif %}
-
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted">
+    <!-- published date -->
+    <span>
+      {{ site.data.locales[site.lang].post.posted }}
+      {% include datetime.html date=page.date tooltip=true %}
+    </span>
 
-  <!-- author -->
+    <!-- lastmod date -->
-  <div>
+    {% if page.last_modified_at %}
-    {% capture author_name %}{{ page.author.name | default: site.social.name }}{% endcapture %}
+    <span>
-    {% assign author_link = nil %}
+      {{ site.data.locales[site.lang].post.updated }}
-
+      {% include datetime.html date=page.last_modified_at tooltip=true %}
-    {% if page.author.link %}
+    </span>
-      {% assign author_link = page.author.link %}
-    {% elsif author_name == site.social.name %}
-      {% assign author_link = site.social.links[0] %}
     {% endif %}
 
-    {{ site.data.locales[lang].post.written_by }}
+  {% if page.image %}
-    <em>
+    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-      {% if author_link %}
+    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-        <a href="{{ author_link }}">{{ author_name }}</a>
+    {% 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 }} {{ 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 -%}
+    </div>
+  {% endif %}
+
+  <div class="d-flex justify-content-between">
+    <!-- author(s) -->
+    <span>
+      {% if page.author %}
+        {% assign authors = page.author %}
+      {% elsif page.authors %}
+        {% assign authors = page.authors %}
+      {% endif %}
+
+      {{ site.data.locales[site.lang].post.written_by }}
+
+      <em>
+      {% if authors %}
+        {% for author in authors %}
+          <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+          {% unless forloop.last %}</em>, <em>{% endunless %}
+        {% endfor %}
       {% else %}
-        {{ author_name }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
       {% endif %}
-    </em>
+      </em>
-  </div>
+    </span>
 
-  <div class="d-flex">
     <div>
-      <!-- published date -->
-      <span>
-        {{ site.data.locales[lang].post.posted }}
-        {% include timeago.html date=page.date tooltip=true %}
-      </span>
-
-      <!-- lastmod date -->
-      {% if page.last_modified_at %}
-      <span>
-        {{ site.data.locales[lang].post.updated }}
-        {% include timeago.html date=page.last_modified_at tooltip=true %}
-      </span>
-      {% endif %}
-
-      <!-- read time -->
-      {% include read-time.html content=content prompt=true %}
-
       <!-- page views -->
       {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
       <span>
         <em id="pv" class="pageviews">
           <i class="fas fa-spinner fa-spin fa-fw"></i>
         </em>
-        {{ site.data.locales[lang].post.pageview_measure }}
+        {{ site.data.locales[site.lang].post.pageview_measure }}
       </span>
       {% endif %}
+
+      <!-- read time -->
+      {% include read-time.html content=content prompt=true %}
     </div>
 
   </div> <!-- .d-flex -->
@@ -124,15 +121,15 @@ tail_includes:
     d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
     <div class="license-wrapper">
 
-      {% if site.data.locales[lang].copyright.license.template %}
+      {% if site.data.locales[site.lang].copyright.license.template %}
 
         {% capture _replacement %}
-        <a href="{{ site.data.locales[lang].copyright.license.link }}">
+        <a href="{{ site.data.locales[site.lang].copyright.license.link }}">
-          {{ site.data.locales[lang].copyright.license.name }}
+          {{ site.data.locales[site.lang].copyright.license.name }}
         </a>
         {% endcapture %}
 
-        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+        {{ site.data.locales[site.lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
 
       {% endif %}
     </div>

_layouts/tag.html

@@ -14,9 +14,7 @@ layout: page
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
+      {% include datetime.html date=post.date wrap='span' class='text-muted small' %}
-        {{ post.date | date: '%Y-%m-%d' }}
-      </span>
     </li>
     {% endfor %}
   </ul>

_layouts/tags.html

@@ -14,7 +14,9 @@ layout: page
 
   {% for t in sorted_tags %}
     <div>
-      <a class="tag" href="{{ site.baseurl }}/tags/{{ t | slugify | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
+      <a class="tag" href="{{ t | slugify | url_encode | prepend: '/tags/' | append: '/' | relative_url }}">
+        {{ t }}<span class="text-muted">{{ site.tags[t].size }}</span>
+      </a>
     </div>
   {% endfor %}
 

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

@@ -1,22 +1,19 @@
 ---
 title: Text and Typography
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
 mermaid: true
 image:
-  src: /commons/devices-mockup.png
+  path: /commons/devices-mockup.png
-  width: 800
+  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
-  height: 500
+  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
@@ -27,21 +24,10 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 <h4>H4 - heading</h4>
 ---
-<br>
 
 ## Paragraph
 
-I wandered lonely as a cloud
+Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.
-
-That floats on high o'er vales and hills,
-
-When all at once I saw a crowd,
-
-A host, of golden daffodils;
-
-Beside the lake, beneath the trees,
-
-Fluttering and dancing in the breeze.
 
 ## Lists
 
@@ -54,17 +40,15 @@ Fluttering and dancing in the breeze.
 ### Unordered list
 
 - Chapter
-  - Section
+  + Section
-    - Paragraph
+    * Paragraph
 
-### Task list
+### ToDo list
 
-- [ ] TODO
+- [ ] Job
-- [x] Completed
+  + [x] Step 1
-- [ ] Defeat COVID-19
+  + [x] Step 2
-  - [x] Vaccine production
+  + [ ] Step 3
-  - [ ] Economic recovery
-  - [ ] People smile again
 
 ### Description list
 
@@ -108,62 +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" style="max-width: 90%" }
-_shadow effect (visible in light mode)_
-
-<br>
-
-- Left aligned
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
-
-<br>
-
-- Float to left
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left}
-  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
-
-<br>
-
-- Float to right
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right}
-  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
-
-<br>
-
-## 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`.
@@ -172,7 +100,7 @@ This is an example of `Inline Code`.
 
 Here is the `/path/to/the/file.extend`{: .filepath}.
 
-## Code block
+## Code blocks
 
 ### Common
 
@@ -180,22 +108,12 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 This is a common code snippet, without syntax highlight and line number.
 ```
 
-### Specific Languages
+### Specific Language
-
-#### Console
-
-```console
-$ env |grep SHELL
-SHELL=/usr/local/bin/bash
-PYENV_SHELL=bash
-```
-
-#### Shell
 
 ```bash
 if [ $? -ne 0 ]; then
-    echo "The command was not successful.";
+  echo "The command was not successful.";
-    #do the needful / exit
+  #do the needful / exit
 fi;
 ```
 
@@ -208,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

@@ -1,15 +1,13 @@
 ---
 title: Writing a New Post
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 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
 
@@ -50,14 +48,33 @@ tags: [bee]
 
 The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
 
+Adding author information in `_data/authors.yml` (If your website doesn't have this file, don't hesitate to create one).
+
+```yaml
+<author_id>:
+  name: <full name>
+  twitter: <twitter_of_author>
+  url: <homepage_of_author>
+```
+{: file="_data/authors.yml" }
+
+
+And then use `author` to specify a single entry or `authors` to specify multiple entries:
+
 ```yaml
 ---
-author:
+author: <author_id>                     # for single entry
-  name: Full Name
+# or
-  link: https://example.com
+authors: [<author1_id>, <author2_id>]   # for multiple entries
 ---
 ```
 
+
+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 }
+
 ## 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/):
@@ -160,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 }
@@ -192,7 +218,7 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```html
 <img src="https://cdn.com/path/to/flower.png" alt="The flower">
 ```
-{: .nolineno}
+{: .nolineno }
 
 ### Image Path
 
@@ -203,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:
 
@@ -221,21 +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 `src`, `width`, `height`, and `alt` for the image:
+If you want to add an image at the top of the post, 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:
-  src: /path/to/image/file
+  path: /path/to/image
-  width: 1000   # in pixels
-  height: 400   # in pixels
   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.
+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.
 
-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 `src` only needs the image file name.
+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
 
@@ -334,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

@@ -1,8 +1,6 @@
 ---
 title: Getting Started
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
@@ -33,7 +31,7 @@ Create a new repository from the [**Chirpy Starter**][use-starter] and name it `
 And then execute:
 
 ```console
-$ bash tools/init.sh
+$ bash tools/init
 ```
 
 > If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
@@ -41,15 +39,11 @@ $ bash tools/init.sh
 
 The above command will:
 
-1. Removes some files or directories from your repository:
+1. Remove the files in `_posts`{: .filepath} from your repository.
-    - `.travis.yml`{: .filepath}
-    - files under `_posts`{: .filepath}
 
 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. Create a new commit to save the changes automatically.
-
-4. Creates a new commit to save the changes automatically.
 
 ### Installing Dependencies
 
@@ -70,11 +64,11 @@ Update the variables of `_config.yml`{: .filepath} as needed. Some of them are t
 - `timezone`
 - `lang`
 
-### Customing Stylesheet
+### Customizing Stylesheet
 
-If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
 
-Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, create a new file `_sass/variables-hook.scss`{: .filepath} and assign new values to the target variable in it.
+Starting with version `4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main sass file `_sass/jekyll-theme-chirpy.scss`{: .filepath} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.
 
 ### Customing Static Assets
 
@@ -107,31 +101,21 @@ Before the deployment begins, check out the file `_config.yml`{: .filepath} and
 
 Now you can choose ONE of the following methods to deploy your Jekyll site.
 
-### Deploy by Using Github Actions
+### Deploy by Using GitHub Actions
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
+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.
 
-Quickly check the files needed for GitHub Actions build:
+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:
 
-- 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.
+```console
+$ bundle lock --add-platform x86_64-linux
+```
 
-- Ensure your Jekyll site has file `tools/deploy.sh`{: .filepath}. Otherwise, copy it from here to your Jekyll site.
+Now publish your Jekyll site:
 
-- Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file:
+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.
 
-  ```console
+2. Push any commit to remote to trigger the GitHub Actions workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site should be deployed automatically.
-  $ bundle lock --add-platform x86_64-linux
-  ```
-
-After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
-
-Now publish your Jekyll site by:
-
-1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
-
-2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
-
-    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="1580" height="250" }
 
 3. Visit your website at the address indicated by GitHub.
 
@@ -183,6 +167,5 @@ The merge is likely to conflict with your local modifications. Please be patient
 [starter]: https://github.com/cotes2020/chirpy-starter
 [use-starter]: https://github.com/cotes2020/chirpy-starter/generate
 [workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
-[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
+[pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
-[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
 [latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags

_posts/2019-08-11-customize-the-favicon.md

@@ -1,8 +1,6 @@
 ---
 title: Customize the Favicon
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]

_posts/2021-01-03-enable-google-pv.md

@@ -1,13 +1,13 @@
 ---
 title: Enable Google Page Views
-author:
+author: sille_bille
-  name: Dinesh Prasanth Moluguwan Krishnamoorthy
-  link: https://github.com/SilleBille
 date: 2021-01-03 18:32:00 -0500
 categories: [Blogging, Tutorial]
 tags: [google analytics, pageviews]
 ---
 
+> The content of this post applies only to [_Universal Analytics property_](https://support.google.com/analytics/answer/10220206) (UA), not [_Google Analytics 4_](https://support.google.com/analytics/answer/10089681) (GA 4). In addition, since [UA is about to be deprecated on Jul 1, 2023](https://support.google.com/analytics/answer/11583528), the Page Views feature of [_Chirpy_][chirpy-homepage] will also be deprecated at that time.
+{: .prompt-danger }
 
 This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv.*` empty unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.