Bump version to 2.7.2

- Add smooth scrolling to the footnotes
- Add hash to URL

.editorconfig

@@ -0,0 +1,11 @@
+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

.gitattributes

@@ -0,0 +1,16 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto
+
+# Force bash scripts to always use LF line endings so that if a repo is accessed
+# in Unix via a file share from Windows, the scripts will work.
+*.sh text eol=lf
+
+# Force batch scripts to always use CRLF line endings so that if a repo is accessed
+# in Windows via a file share from Linux, the scripts will work.
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.ico binary

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,11 +1,9 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-labels: bug
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. If you are new to Jekyll or Github Pages, you may be misreporting bugs. When you are not sure if this is a bug, choose to the `Question` type instead. -->
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
-
 
 ## Checklist
 <!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
@@ -19,11 +17,12 @@ labels: bug
 ### To Reproduce
 
 Steps to reproduce the behavior:
-
+<!--
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
+-->
 
 ### Expected behavior
 <!-- A clear and concise description of what you expected to happen. -->
@@ -33,21 +32,23 @@ Steps to reproduce the behavior:
 
 ### Software
 <!-- Please complete the following information -->
-- Ruby version: [by running: `ruby -v`]
+- Ruby version: <!-- by running: `ruby -v` -->
-- Gem version: [by running: `gem -v`]
+- Gem version: <!-- by running: `gem -v`-->
-- Bundler version: [by running: `bundle -v`]
+- Bundler version: <!-- by running: `bundle -v`-->
-- Jekyll version: [by running: `bundle list | grep " jekyll "`]
+- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
 
 ### Desktop
-<!-- Please complete the following information -->
+<!-- If necessary, uncomment and fill in the following list:
 - OS: [e.g. macOS 10.15.6]
-- Browser: [e.g. Chrome 85.0.4183.83 (Official Build) (64-bit)]
+- Browser: [e.g. Chrome 85.0.4183.83 (64-bit)]
+-->
 
 ### Smartphone
-<!-- please complete the following information -->
+<!-- If necessary, uncomment and fill in the following list:
 - Device: [e.g. iPhone 6]
 - OS: [e.g. iOS 13.6.1]
 - Browser: [e.g. Chrome 22]
+-->
 
 ### Additional context
 <!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,7 @@ about: Suggest an idea for this project
 labels: enhancement
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
 <!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->

.github/ISSUE_TEMPLATE/question.md

@@ -4,7 +4,7 @@ about: Ask what ever you want
 labels: question
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
 
@@ -15,6 +15,5 @@ labels: question
 - [ ] I searched the Internet for related problems, but still couldn't solve it.
 - [ ] My question is based on the latest code of `master` branch.
 
-
 ## Description
-<!-- Please describe your question. -->
+<!-- Please describe your question in detial. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->
 
-- [ ] I have run `bash ./tools/build.sh && bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/test.sh --build` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser
 
 ### Test Configuration
@@ -41,4 +41,4 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
 - [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] Any dependent changes have been merged and published in downstream modules
+- [ ] Any dependent changes have been merged and published in downstream modules

.github/stale.yml

@@ -0,0 +1,17 @@
+# Clean up the stale issues
+
+daysUntilStale: 30
+daysUntilClose: 1
+
+exemptLabels:
+  - in progress
+  - pending
+
+staleLabel: stale
+
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+
+closeComment: false

.github/workflows/ci.yml

@@ -24,56 +24,38 @@ jobs:
       matrix:
         os: [ubuntu-latest, macos-latest]
 
+    env:
+      GEMS_PATH: ~/vendor/bundle
+
     steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '2.6.x'
-
-      - name: Install tools (for Ubuntu)
-        if: matrix.os == 'ubuntu-latest'
-        run: |
-          sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CC86BB64
-          sudo add-apt-repository ppa:rmescandon/yq
-          sudo apt update
-          sudo apt install yq -y
-
-      - name: Install tools (for macOS)
-        if: matrix.os == 'macos-latest'
-        run: |
-          brew install coreutils
-          brew install yq
-
       - name: Checkout
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7
 
       - name: Bundle Caching
-        id: bundle-cache
+        uses: actions/cache@v2
-        uses: actions/cache@v1
         with:
-          path: vendor/bundle
+          path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - name: Bundle config
-        run: |
-          bundle config path vendor/bundle
-
       - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
         run: |
-          bundle install
+          bundle config path ${{ env.GEMS_PATH }}
-
+          bundle install --jobs 4 --retry 3
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
-        run: |
-          bundle install --local
 
       - name: Build Site
+        env:
+          JEKYLL_ENV: production
         run: |
-          bash tools/build.sh
+          bundle exec jekyll b
 
       - name: Test Site
         run: |

.github/workflows/issue-pr-interceptor.yml

@@ -0,0 +1,20 @@
+name: "Intercept bad issue/PRs"
+
+on:
+  issues:
+    types: [opened, reopened]
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  autoclose:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Auto close issues/pr that did not follow template
+      uses: roots/issue-closer@v1.1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-pattern: "\\[x\\] I have read"
+        issue-close-message: ":wave: Hi @${issue.user.login},\n\nThis issue is being automatically closed because it does not follow the issue template."
+        pr-pattern: "\\[x\\] Bug|\\[x\\] New feat|\\[x\\] Break|\\[x\\] Doc"
+        pr-close-message: ":wave: Hi @${pull_request.user.login},\n\nThis PR is being automatically closed because it does not follow the PR template."

.github/workflows/issues-cleaner.yml

@@ -1,24 +0,0 @@
-name: "Close stale issues"
-on:
-  schedule:
-  - cron: "0 0 * * *"
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-    - env:
-        DAYS_TO_STALE: ${{ 5 }}
-        DAYS_TO_CLOSE: ${{ 2 }}
-      uses: actions/stale@v3
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        stale-issue-message: 'This issue is stale because it has been open ${{ env.DAYS_TO_STALE }} days with no activity. Remove stale label or comment or this will be closed in ${{ env.DAYS_TO_CLOSE }} days'
-        stale-issue-label: 'stale'
-        exempt-issue-labels: 'pending, in progress'
-        stale-pr-message: 'This PR is stale because it has been open ${{ env.DAYS_TO_STALE }} days with no activity. Remove stale label or comment or this will be closed in ${{ env.DAYS_TO_CLOSE }} days'
-        stale-pr-label: 'stale'
-        exempt-pr-labels: 'pending, in progress'
-        days-before-stale: ${{ env.DAYS_TO_STALE }}
-        days-before-close: ${{ env.DAYS_TO_CLOSE }}
-        # debug-only: true

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

@@ -14,68 +14,55 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      GEMS_PATH: /tmp/bundle
+      GEMS_PATH: ~/vendor/bundle
 
     steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: 2.6.x
-
-      - name: Install tools
-        run: |
-          sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CC86BB64
-          sudo add-apt-repository ppa:rmescandon/yq
-          sudo apt update
-          sudo apt install yq -y
-
       - name: Checkout
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7
 
       - name: Bundle Caching
-        id: bundle-cache
+        uses: actions/cache@v2
-        uses: actions/cache@v1
         with:
           path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - name: Bundle config
+      - name: Bundle Install
         run: |
           bundle config path ${{ env.GEMS_PATH }}
-
+          bundle install --jobs 4 --retry 3
-      - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
-        run: |
-          bundle install
-
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
-        run: |
-          bundle install --local
 
       - name: Check baseurl
         run: |
-          baseurl="$(grep '^baseurl:' _config.yml | yq r - baseurl)"
+          baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
           if [[ -n $baseurl ]]; then
-            echo "SPEC_TEST=_site_no_baseurl" >> $GITHUB_ENV
+            echo "BASE_URL=$baseurl" >> $GITHUB_ENV
           fi
 
       - name: Build Site
+        env:
+          JEKYLL_ENV: production
         run: |
-          bash tools/build.sh
+          bundle exec jekyll b -d "_site$BASE_URL"
-
-          if [[ -n $SPEC_TEST ]]; then
-            # Bypass the defects of htmlproofer
-            bash tools/build.sh -b "" -d "$SPEC_TEST"
-          fi          
 
       - name: Test Site
         run: |
-          bash tools/test.sh "$SPEC_TEST"
+          bash tools/test.sh
 
       - name: Deploy
         run: |
+          if [[ -n $BASE_URL ]]; then
+            mv _site$BASE_URL _site-rename
+            rm -rf _site
+            mv _site-rename _site
+          fi
+
           bash tools/deploy.sh

.gitignore

@@ -1,17 +1,7 @@
 # hidden files
 .*
+!.github
 
-# python compiled files
+# jekyll cache
-*.pyc
-
-# jekyll debug
 _site
-
-# Jeykll Gemfile.lock
-Gemfile.lock
-
-# yui-compressor
-*.jar
-
-# bundle cache
 vendor

.travis.yml

@@ -2,28 +2,18 @@ os: linux
 dist: bionic
 
 language: ruby
-rvm: 2.6.5
+rvm: 2.7.0
 
-before_install:
+cache: bundler
-  - bundle config path 'vendor/bundle'
-
-install:
-  - bundle install --quiet
 
 addons:
   apt:
-    sources:
-      - sourceline: "ppa:rmescandon/yq"
     packages:
       - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
-      - yq
 
 script:
-  - >-
+  - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
-    git clone https://${GH_PAT}@github.com/${GH_USER}/${BUILDER_REPO}.git
+  - eval "$BUILD_CMD"
-    ${HOME}/${BUILDER_REPO} --depth=1 -q
-  - cp -r ${HOME}/${BUILDER_REPO}/framework/* .
-  - bash _cibuild.sh
 
 branches:
   only: production
@@ -31,10 +21,6 @@ branches:
 git:
   depth: false # for posts lastmod
 
-cache:
-  directories:
-    - $TRAVIS_BUILD_DIR/vendor/bundle
-
 notifications:
   email:
     recipients:

Gemfile

@@ -1,14 +1,26 @@
 source "https://rubygems.org"
 
-gem "jekyll", ">=3.8.6"
+gem "jekyll", ">= 4.1.0", "< 5.0"
 
-# Official Plugins
+# plugins
 group :jekyll_plugins do
   gem "jekyll-paginate"
   gem "jekyll-redirect-from"
-  gem "jekyll-seo-tag", "~> 2.6.1"
+  gem "jekyll-seo-tag"
+  gem "jekyll-archives"
+  gem "jekyll-sitemap"
 end
 
 group :test do
   gem "html-proofer"
 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
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?

Gemfile.lock

@@ -0,0 +1,111 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.7)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    ffi (1.14.2)
+    forwardable-extended (2.6.0)
+    html-proofer (3.18.3)
+      addressable (~> 2.3)
+      mercenary (~> 0.3)
+      nokogumbo (~> 2.0)
+      parallel (~> 1.3)
+      rainbow (~> 3.0)
+      typhoeus (~> 1.3)
+      yell (~> 2.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-archives (2.2.1)
+      jekyll (>= 3.6, < 5.0)
+    jekyll-paginate (1.1.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-seo-tag (2.7.1)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.3.3)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_portile2 (2.4.0)
+    nokogiri (1.10.10)
+      mini_portile2 (~> 2.4.0)
+    nokogumbo (2.0.4)
+      nokogiri (~> 1.8, >= 1.8.4)
+    parallel (1.20.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rainbow (3.0.0)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.4)
+    rouge (3.26.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.9)
+      thread_safe (~> 0.1)
+    tzinfo-data (1.2020.6)
+      tzinfo (>= 1.0.0)
+    unicode-display_width (1.7.0)
+    wdm (0.1.1)
+    yell (2.2.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  html-proofer
+  jekyll (>= 4.1.0, < 5.0)
+  jekyll-archives
+  jekyll-paginate
+  jekyll-redirect-from
+  jekyll-seo-tag
+  jekyll-sitemap
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.1)
+
+BUNDLED WITH
+   2.1.4

README.md

@@ -1,13 +1,13 @@
 # Chirpy
 
-🌏 English • [简体中文](docs/README_zh-CN.md)
+Language: English | [简体中文](docs/README.zh-CN.md)
 
 [![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)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
 [![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)
 
-A minimal, sidebar, responsive web design Jekyll theme, focusing on text presentation, aim to help you easily record and share your knowledge. [Live Demo »](https://chirpy.cotes.info)
+A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation. Designed to help you record and share your knowledge easily. [Live Demo »](https://chirpy.cotes.info)
 
 [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
@@ -18,7 +18,7 @@ A minimal, sidebar, responsive web design Jekyll theme, focusing on text present
 - [Usage](#usage)
 - [Contributing](#contributing)
 - [Credits](#credits)
-- [Support](#support)
+- [Supporting](#supporting)
 - [License](#license)
 
 ## Features
@@ -31,6 +31,7 @@ A minimal, sidebar, responsive web design Jekyll theme, focusing on text present
 - Automatically recommend related posts
 - Syntax highlighting
 - Mathematical expressions
+- Mermaid diagram & flowchart
 - Search
 - Atom Feeds
 - Disqus Comments
@@ -48,7 +49,7 @@ $ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --singl
 
 ### Setting up the local envrionment
 
-If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
 
 Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
 
@@ -58,32 +59,16 @@ $ bundle install
 
 `bundle` will automatically install all the dependencies specified by `Gemfile`.
 
-In order to generate some extra files (_categories_, _tags_ and _last modified list_), we need to use some tool scripts. And they require dependency package [yq](https://github.com/mikefarah/yq#install) to be installed. What's more, if your machine is running Debian or macOS, you also need to install [GNU coreutils](https://www.gnu.org/software/coreutils/).
-
-- on Debian:
-
-  ```console
-  $ sudo apt-get install coreutils
-  ```
-
-- on macOS:
-
-  ```console
-  $ brew install coreutils
-  ```
-
 ### Setting up Docker environment (optional)
 
 If you're a loyal fan of [**Docker**](https://www.docker.com/) or just too lazy to install the packages mentioned in [_Setting up the local envrionment_](#setting-up-the-local-envrionment), please make sure you have **Docker Engine** installed and running, and then get Docker image `jekyll/jekyll` from Docker Hub by the following command:
 
 ```console
-$ docker pull jekyll/jekyll:latest
+$ docker pull jekyll/jekyll
 ```
 
 ## Usage
 
-Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
-
 ### Initialization
 
 Go to the root directory of the project and start initialization:
@@ -102,7 +87,7 @@ What it does is:
     - files under `_posts`
     - folder `docs`
 
-2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. 
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`.
 
 3. Automatically create a commit to save the changes.
 
@@ -120,26 +105,22 @@ Generally, go to `_config.yml` and configure the variables as needed. Some of th
 You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 Then open a browser and visit to <http://localhost:4000>.
 
-Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
-
 ### Run on Docker
 
 Run the site on Docker with the following command:
 
 ```terminal
-$ docker run --rm -it \
+$ docker run -it --rm \
     --volume="$PWD:/srv/jekyll" \
     -p 4000:4000 jekyll/jekyll \
-    bash tools/run.sh --docker
+    jekyll serve
 ```
 
-Please note that on Docker containers, you'll lose the real-time refresh feature.
-
 ### Deployment
 
 Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
@@ -148,11 +129,11 @@ Assuming you have already gone through the [initialization](#initialization), yo
 
 #### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts 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 Pages service.
+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 Pages service.
 
 1. Push any commit to `origin/master` 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 and choose the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
+2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
     ![gh-pages-sources](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
 
 3. Visit your website at the address indicated by GitHub.
@@ -164,18 +145,17 @@ On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Acti
 Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-> **Note**: The output path can be specified with the option `-d`.
-
 Or, build the site with Docker by:
 
 ```terminal
-$ docker run --rm -it \
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
     --volume="$PWD:/srv/jekyll" \
     jekyll/jekyll \
-    bash tools/build.sh --docker
+    jekyll build
 ```
 
 Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
@@ -194,7 +174,7 @@ This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Boot
 
 :tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
-## Support
+## Supporting
 
 If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart: Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
 

_config.yml

@@ -6,8 +6,7 @@
 
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
-#--------------------------
+# --------------------------
-
 title: Chirpy                          # the main title
 
 tagline: A text-focused Jekyll theme.  # it will display as the sub-title
@@ -17,8 +16,8 @@ description: >-                        # used by seo meta and the atom feed
   bootstrap Jekyll theme with responsive web design
   and focuses on text presentation.
 
-# Replace with the website url, e.g. 'https://username.github.io'
+# fill in the base hostname & protocol for your site, e.g., 'https://username.github.io'
-url: 'protocol://domain'
+url: ''
 
 author: your_full_name                  # change to your full name
 
@@ -42,8 +41,7 @@ social:
     # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-
+# --------------------------
-#--------------------------
 
 
 # Only if your site type is GitHub Project sites and doesn't have a custom domain,
@@ -69,31 +67,29 @@ disqus:
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
 
-# Prefer color scheme setting, available values:
+# Prefer color scheme setting.
 #
-#     dual   - Follow the system prefer color by default, and a toggle will display
+# Note: Keep empty will follow the system prefer color by default,
-#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+# and there will be a toggle to switch the theme between dark and light
+# on the bottom left of the sidebar.
+#
+# Available options:
 #
 #     light  - Use the light color scheme
 #
 #     dark   - Use the dark color scheme
 #
-theme_mode: dual
+theme_mode:   # <light|dark>
 
-# boolean type, global switch for ToC in posts.
+# boolean type, the global switch for ToC in posts.
 toc: true
 
 paginate: 10
 
-markdown: kramdown
-
-highlighter: rouge
-
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
+  syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
-    css_class: 'highlight'
+    css_class: highlight
     # default_lang: console
     span:
       line_numbers: false
@@ -105,16 +101,21 @@ kramdown:
 # or you think you're smart enough to change other relevant URLs within this template.
 permalink: /posts/:title/
 
+collections:
+  tabs:
+    output: true
+    sort_by: order
+
+
 defaults:
   -
     scope:
-      path: ""          # An empty string here means all files in the project
+      path: ''          # An empty string here means all files in the project
       type: posts
     values:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      location: Post
       breadcrumb:
         -
           label: Posts
@@ -124,12 +125,17 @@ defaults:
       path: _drafts
     values:
       comments: false
+  -
+    scope:
+      path: index.html
+    values:
+      breadcrumb:
+        -
+          label: Posts
   -
     scope:
       path: tags
     values:
-      tab_active: Tags
-      location: Tag
       breadcrumb:
         -
           label: Home
@@ -141,8 +147,6 @@ defaults:
     scope:
       path: categories
     values:
-      tab_active: Categories
-      location: Category
       breadcrumb:
         -
           label: Home
@@ -152,7 +156,8 @@ defaults:
           url: /tabs/categories/
   -
     scope:
-      path: tabs
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
       dynamic_title: true    # Hide title in mobile screens.
@@ -161,7 +166,6 @@ defaults:
           label: Home
           url: /
 
-
 sass:
   sass_dir: /assets/css
   style: compressed
@@ -173,10 +177,10 @@ compress_html:
   profile: false
   blanklines: false
   ignore:
-    envs: []
+    envs: [development]
 
 exclude:
-  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
+  - vendor
   - Gemfile.lock
   - Gemfile
   - tools
@@ -184,17 +188,11 @@ exclude:
   - README.md
   - LICENSE
 
-sitemap_exclude:  # Sitemap will exclude the following items.
+jekyll-archives:
-  fuzzy:
+  enabled: [categories, tags]
-    - /assets/
+  layouts:
-  accurate:
+    category: category
-    - /norobots/
+    tag: tag
-    - /tabs/
+  permalinks:
-    - /categories/
+    tag: /tags/:name/
-    - /tags/
+    category: /categories/:name/
-    - /posts/
-    - 404.html
-    - feed.xml
-    - sitemap.xml
-    - robots.txt
-    - redirects.json

_data/contact.yml

@@ -21,11 +21,14 @@
 
 # Uncomment and complete the url below to enable more contact options
 # -
+#   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your mastodon account page
 # -
+#   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your Linkedin homepage
 # -
+#   type: stack-overflow
 #   icon: 'fab fa-stack-overflow'
 #   url:  ''                  # Fill with your stackoverflow homepage

_data/label.yml

@@ -4,16 +4,17 @@
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 
-
 panel:
-  lastmod: "Recent Update"
+  lastmod: Recent Update
-  trending_tags: "Trending Tags"
+  trending_tags: Trending Tags
-  toc: "Contents"
+  toc: Contents
 
 post:
-  relate_posts: "Further Reading"
+  relate_posts: Further Reading
   button:
     next: Newer
     previous: Older
 
-search_hint: "Search"   # text show on search bar
+search_hint: Search   # text show on search bar
+
+pin_prompt: Pinned   # pinned prompt

_data/meta.yml

@@ -0,0 +1,3 @@
+name: Chirpy
+version: 2.7.2
+homepage: https://github.com/cotes2020/jekyll-theme-chirpy/

_data/read_time.yml

@@ -0,0 +1,7 @@
+# words per minute
+wpm: 180
+
+# minimum value
+min_time: 1
+
+prompt: min

_data/tabs.yml

@@ -1,30 +0,0 @@
-#  The tab data.
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-
--
-  name: Home
-  icon: "fas fa-home"
--
-  name: Categories
-  icon: "fas fa-stream"
-  path: tabs
-  url: categories
--
-  name: "Tags"
-  icon: "fas fa-tags"
-  path: tabs
-  url: tags
--
-  name: "Archives"
-  path: tabs
-  url: archives
-  icon: "fas fa-archive"
--
-  name: "About"
-  icon: "fas fa-info"
-  path: tabs
-  url: about

_includes/css-selector.html

@@ -6,49 +6,21 @@
   MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
-  <link rel="preload" href="{{ '/assets/css/home.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
 
-{% elsif page.layout == 'page' %}
+{% if page.layout == 'category' or page.layout == 'tag' %}
+  {% assign style = 'category-tag' %}
+{% else %}
+  {% assign style =  page.layout %}
+{% endif %}
 
-  {% if page.type == 'categories' %}
+{% assign src = style | prepend: '/assets/css/' | append: '.css' | relative_url %}
 
-    <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
+<link rel="preload" href="{{ src }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
+<link rel="stylesheet" href="{{ src }}">
-
-  {% elsif page.type == 'tags' %}
-
-    <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
-
-  {% elsif page.type == 'archives' %}
-
-    <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
-
-  {% else %}
-
-    <link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
-
-  {% endif %}
-
-{% elsif page.layout == 'category' or page.layout == 'tag' %}
-
-  <link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
-
-{% elsif page.layout == 'post' %}
-
-  <link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
 
+{% if page.layout == 'post' %}
   {% if site.toc and page.toc %}
-
     <link rel="preload" as="style" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}" />
-
   {% endif %}
-
 {% endif %}

_includes/footer.html

@@ -22,9 +22,9 @@
     <div class="footer-right">
       <p class="mb-0">
         Powered by
-        <a href="https://jekyllrb.com" target="_blank">Jekyll</a>
+        <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
         with
-        <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>
+        <a href="{{ site.data.meta.homepage }}" target="_blank" rel="noopener">{{ site.data.meta.name }}</a>
         theme.
       </p>
     </div>

_includes/google-analytics.html

@@ -6,11 +6,13 @@
   MIT License
 -->
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
 <script>
-  window.dataLayer = window.dataLayer || [];
+  document.addEventListener("DOMContentLoaded", function(event) {
-  function gtag(){dataLayer.push(arguments);}
+    window.dataLayer = window.dataLayer || [];
-  
+    function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
+
-  gtag('config', '{{ site.google_analytics.id }}');
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics.id }}');
+  });
 </script>

_includes/head.html

@@ -9,6 +9,9 @@
 <head>
   <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">
+  <meta name="theme" content="{{ site.data.meta.name }} v{{ site.data.meta.version }}">
+
+  {% seo title=false %}
 
   <title>
   {%- unless page.layout == "home" -%}
@@ -17,8 +20,6 @@
     {{ site.title }}
   </title>
 
-  {% seo title=false %}
-
   {% include favicons.html %}
 
   <!-- Google Fonts -->
@@ -44,10 +45,6 @@
   <link rel="dns-prefetch" href="cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-  <link rel="preload" as="style"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
-    integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin>
-
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
@@ -62,14 +59,11 @@
 
   <!-- JavaScripts -->
 
-  <link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
 
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
+  <script defer
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
-
-  <script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" async></script>
 
   {% include js-selector.html %}
 
-</head>
+</head>

_includes/js-selector.html

@@ -6,40 +6,29 @@
   MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
+{% if page.layout == 'home' or page.layout == 'post' or page.layout == 'categories' %}
-
+  {% assign js = page.layout %}
-  <script src="{{ '/assets/js/home.min.js' | relative_url }}" async></script>
-
-{% elsif page.layout == 'post' %}
-
-  <script src="{{ '/assets/js/post.min.js' | relative_url }}" async></script>
-
-  {% if page.math %}
-    <!-- MathJax -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
-  {% endif %}
-
-{% elsif page.layout == 'page' %}
-
-  {% if page.type == 'categories' %}
-    <script src="{{ '/assets/js/categories.min.js' | relative_url }}" async></script>
-  {% else %}
-    <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
-  {% endif %}
-
 {% else %}
-
+  {% assign js = "page" %}
-  <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
-
 {% endif %}
 
+{% assign js_src = js | prepend: '/assets/js/' | append: '.min.js' | relative_url %}
+
+<script async src="{{ js_src }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+{% endif %}
 
 {% if jekyll.environment == 'production' %}
-
-  {% include google-analytics.html %}
-
   <!-- PWA -->
-  <script src="{{ '/app.js' | relative_url }}" defer></script>
+  <script defer src="{{ '/app.js' | relative_url }}"></script>
+
+  <!-- GA -->
+  {% if site.google_analytics.id %}
+    {% include google-analytics.html %}
+  {% endif %}
 
 {% endif %}

_includes/mermaid.html

@@ -0,0 +1,28 @@
+<!--
+  mermaid-js loader
+-->
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+  $(function() {
+    let initTheme = "default";
+
+    if ($("html[mode=dark]").length > 0
+      || ($("html[mode]").length == 0
+        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+      initTheme = "dark";
+    }
+
+    let mermaidConf = {
+      theme: initTheme  /* <default|dark|forest|neutral> */
+    };
+
+    /* Markdown converts to HTML */
+    $("pre").has("code.language-mermaid").each(function() {
+      let svgCode = $(this).children().html();
+      $(this).addClass("unloaded");
+      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    });
+
+    mermaid.initialize(mermaidConf);
+  });
+</script>

_includes/mode-toggle.html

@@ -7,8 +7,7 @@
   MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
+<i class="mode-toggle fas fa-adjust"></i>
-<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
 
 <script type="text/javascript">
 
@@ -18,8 +17,8 @@
     static get LIGHT_MODE() { return "light"; }
 
     constructor() {
-      if (this.mode != null) {
+      if (this.hasMode) {
-        if (this.mode == ModeToggle.DARK_MODE) {
+        if (this.isDarkMode) {
           if (!this.isSysDarkPrefer) {
             this.setDark();
           }
@@ -34,8 +33,8 @@
 
       /* always follow the system prefers */
       this.sysDarkPrefers.addListener(function() {
-        if (self.mode != null) {
+        if (self.hasMode) {
-          if (self.mode == ModeToggle.DARK_MODE) {
+          if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
               self.setDark();
             }
@@ -48,6 +47,8 @@
 
           self.clearMode();
         }
+
+        self.updateMermaid();
       });
 
     } /* constructor() */
@@ -74,16 +75,43 @@
 
     get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
 
-    get isLightkMode() { return this.mode == ModeToggle.LIGHT_MODE; }
+    get isLightMode() { return this.mode == ModeToggle.LIGHT_MODE; }
 
     get hasMode() { return this.mode != null; }
 
     get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
 
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer) ) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
+
+    updateMermaid() {
+      if (typeof mermaid !== "undefined") {
+        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
+        let config = { theme: expectedTheme };
+
+        /* re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+        $(".mermaid").each(function() {
+          let svgCode = $(this).prev().children().html();
+          $(this).removeAttr("data-processed");
+          $(this).html(svgCode);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     flipMode() {
       if (this.hasMode) {
         if (this.isSysDarkPrefer) {
-          if (this.isLightkMode) {
+          if (this.isLightMode) {
             this.clearMode();
           } else {
             this.setLight();
@@ -105,6 +133,8 @@
         }
       }
 
+      this.updateMermaid();
+
     } /* flipMode() */
 
   } /* ModeToggle */
@@ -112,7 +142,9 @@
   let toggle = new ModeToggle();
 
   $(".mode-toggle").click(function() {
+
     toggle.flipMode();
+
   });
 
-</script>
+</script>

_includes/panel.html

@@ -10,61 +10,50 @@
 
   <div class="access">
 
-  {% if site.data.updates %}
+  {% include update-list.html %}
 
-    {% include update-list.html %}
+  {% if update_list.size > 0 %}
-
-    {% if update_list.size > 0 %}
 
     <div id="access-lastmod" class="post">
-      <h3 data-toc-skip>
+      <span>{{- site.data.label.panel.lastmod -}}</span>
-        {{- site.data.label.panel.lastmod -}}
-      </h3>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
-        {% assign post_url = item | split: "::" | last | url_encode | prepend: "/posts/" | append: "/" %}
+        {% assign index = item | split: "::" | last | plus: 0 %}
-        {% assign post = site.posts | where: "url", post_url | first %}
+        {% assign post = site.posts[index] %}
-
+        {% assign url = post.url | relative_url %}
-        {% if post %}
+        <li><a href="{{ url }}">{{ post.title }}</a></li>
-          {% assign url = post.url | relative_url %}
-          <li><a href="{{ url }}">{{ post.title }}</a></li>
-        {% endif %}
-
       {% endfor %}
 
       </ul>
-    </div><!-- #access-lastmod -->
+    </div> <!-- #access-lastmod -->
 
-    {% endif %}
+  {% endif %}
-
-  {% endif %} <!-- site.data.updates -->
 
   {% include trending-tags.html %}
 
   {% if trending_tags.size > 0 %}
     <div id="access-tags">
-      <h3 data-toc-skip>
+      <span>{{- site.data.label.panel.trending_tags -}}</span>
-        {{- site.data.label.panel.trending_tags -}}
-      </h3>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
-      {% for tag in trending_tags %}
+      {% for tag_name in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
+
       </div>
     </div>
   {% endif %}
   </div> <!-- .access -->
 
-  {% if page.layout == 'post' and site.toc and page.toc %}
+  {% if include.toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2 mb-2">
+      <span class="pl-3 pt-2 mb-2">
       {{- site.data.label.panel.toc -}}
-    </h3>
+      </span>
-    <nav id="toc" data-toggle="toc"></nav>
+      <nav id="toc" data-toggle="toc"></nav>
-  </div>
+    </div>
   {% endif %}
 
 </div> <!-- #panel-wrapper -->

_includes/post-paginator.html

@@ -10,17 +10,15 @@
 <ul class="pagination mt-4 mb-0 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
-  <li class="page-item">
+    {% assign prev_url = paginator.previous_page_path | relative_url %}
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
+  {% else %}
+    {% assign prev_url = "#" %}
+  {% endif %}
+  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
       <i class="fas fa-angle-left"></i>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
-  </li>
-  {% endif %}
-  <!-- endof left arrow -->
 
   <!-- page numbers -->
   {% assign left_ellipsis = false %}
@@ -51,38 +49,37 @@
     {% endif %}
 
     {% if show %}
-        <!-- show number -->
+      <!-- show number -->
-        <li class="page-item {% if i == paginator.page %} active{% endif %}">
+      <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="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      </li>
+    {% else %}
+      <!-- hide number -->
+      {% if i < pre and left_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
         </li>
-      {% else %}
+        {% assign left_ellipsis = true %}
-        <!-- hide number -->
+      {% elsif i > next and right_ellipsis == false %}
-        {% if i < pre and left_ellipsis == false %}
+        <li class="page-item disabled">
-          <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
-            <span class="page-link btn-box-shadow">...</span>
+        </li>
-          </li>
+        {% assign right_ellipsis = true %}
-          {% assign left_ellipsis = true %}
-        {% elsif i > next and right_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign right_ellipsis = true %}
-        {% endif %}
       {% endif %}
+    {% endif %}
 
   {% endfor %}
 
   <!-- right arrow -->
-  {% if paginator.next_page %}
+  {% if paginator.next_page_path %}
-  <li class="page-item">
+    {% assign next_url = paginator.next_page_path | relative_url %}
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
+  {% else %}
+    {% assign next_url = "#" %}
+  {% endif %}
+  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
       <i class="fas fa-angle-right"></i>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
-  </li>
-  {% endif %}
 
-</ul> <!-- .pagination -->
+</ul> <!-- .pagination -->

_includes/post-sharing.html

@@ -16,7 +16,7 @@
     {% for share in site.data.share.platforms %}
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
         <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
-          title="{{ share.type }}" target="_blank">
+          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
           <i class="fa-fw {{ share.icon }}"></i>
         </a>
     {% endfor %}
@@ -25,4 +25,4 @@
         data-toggle="tooltip" data-placement="top" title="Copy link"></i>
 
   </span>
-</div>
+</div>

_includes/read-time.html

@@ -0,0 +1,15 @@
+<!--
+  Calculate the post's reading time, and display the word count in tooltip
+ -->
+{% assign words = include.content | strip_html | number_of_words: "auto" %}
+
+{% assign read_time = words | divided_by: site.data.read_time.wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = site.data.read_time.min_time %}
+{% endunless %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom" title="{{ words }} words">
+  {{- read_time -}}{{" "}}{{- site.data.read_time.prompt -}}
+</span>

_includes/refactor-content.html

@@ -5,23 +5,35 @@
 {% assign _content = include.content %}
 
 <!--
-  Suroundding the markdown table with '<div class="table-wrapper">. and '</div>'
+  In order to allow a wide table to scroll horizontally,
+  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
 -->
 {% if _content contains '<table>' %}
-  {% assign _content = _content | replace: '<table>', '<div class="table-wrapper"><table>' %}
+  {% assign _content = _content
-  {% assign _content = _content | replace: '</table>', '</table></div>' %}
+    | replace: '<table>', '<div class="table-wrapper"><table>'
-  {% assign _content = _content | replace: '</table></div></code>', '</table></code>' %}
+    | replace: '</table>', '</table></div>'
+    | replace: '</table></div></code>', '</table></code>'
+  %}
 {% endif %}
 
-
 <!--
   Fixed kramdown code highlight rendering:
   https://github.com/penibelst/jekyll-compress-html/issues/101
   https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
 -->
 {% if _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code' %}
+  {% assign _content = _content
-  {% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
+    | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
+    | replace: '</code></pre></div>', '</code></div>'
+  %}
 {% endif %}
 
+<!-- Add attribute 'hide-bullet' to the checkbox list -->
+{% if _content contains '<li class="task-list-item"><' %}
+  {% assign _content = _content
+    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+  %}
+{% endif %}
+
+<!-- return -->
 {{ _content }}

_includes/search-results.html

@@ -13,11 +13,11 @@
       {% include trending-tags.html %}
 
       {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        {% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %}
         <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
       {% endfor %}
 
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>
-</div>
+</div>

_includes/sidebar.html

@@ -6,10 +6,11 @@
   MIT License
 -->
 
-<div id="nav-wrapper">
+<div id="sidebar" class="d-flex flex-column align-items-end">
-  <div id="profile-wrapper" class="d-flex flex-column">
+
-    <div id="avatar" class="d-flex justify-content-center">
+  <div class="profile-wrapper text-center">
-      <a href="{{ site.baseurl }}/" alt="avatar">
+    <div id="avatar">
+      <a href="{{ site.baseurl }}/" alt="avatar" class="mx-auto">
         {% assign avatar_url = site.avatar %}
         {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
         {% if start == '/' %}
@@ -19,72 +20,72 @@
       </a>
     </div>
 
-    <div class="profile-text mt-3">
+    <div class="site-title mt-3">
-      <div class="site-title">
+      <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
-        <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
-      </div>
-      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
     </div>
-  </div>
 
-  <ul class="nav flex-column">
+    <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
-  {% assign page_urls = page.url | split: "/" %}
 
-  {% for item in site.data.tabs %}
+  </div><!-- .profile-wrapper -->
-    {% assign ref = site.baseurl | append: "/" %}
 
-    {% if item.path %}
+  <ul class="w-100">
-      {% assign ref = ref | append: item.path | append: "/" %}
+    <!-- home -->
-      {% if item.url %}
+    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-        {% assign ref = ref | append: item.url | append: "/" %}
+      <a href="{{ '/' | relative_url }}" class="nav-link">
-      {% endif %}
+        <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-    {% endif %}
+        <span>{{ "HOME" }}</span>
-
+      </a>
-    <li class="nav-item d-flex justify-content-center
+    </li>
-      {% if item.url == page_urls.last
+    <!-- the real tabs -->
-        or item.name == page.tab_active
+    {% for tab in site.tabs %}
-        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
+    <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+      <a href="{{ tab.url | relative_url }}" class="nav-link">
-        <i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
+        <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ item.name | upcase }}</span>
+        <span>{{ tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
-  {% endfor %}
+    {% endfor %}
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrapper -->
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
 
-<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
+    {% for entry in site.data.contact %}
+      {% capture url %}
+        {%- if entry.type == 'github' -%}
+          https://github.com/{{ site.github.username }}
+        {%- elsif entry.type == 'twitter' -%}
+          https://twitter.com/{{ site.twitter.username }}
+        {%- elsif entry.type == 'email' -%}
+          {% assign email = site.social.email | split: '@' %}
+          javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
+        {%- elsif entry.type == 'rss' -%}
+          {{ "/feed.xml" | relative_url }}
+        {%- else -%}
+          {{ entry.url }}
+        {%- endif -%}
+      {% endcapture %}
 
-  {% if site.theme_mode == "dual" %}
+      {% if url %}
-  <span id="mode-toggle-wrapper">
+      <a href="{{ url }}" aria-label="{{ entry.type }}"
-    {% include mode-toggle.html %}
+        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
-  </span>
+        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
-  <span class="icon-border"></span>
+        <i class="{{ entry.icon }}"></i>
-  {% endif %}
+      </a>
+      {% endif %}
 
-  {% for entry in site.data.contact %}
+    {% endfor %}
-    {% capture url %}
-      {%- if entry.type == 'github' -%}
-        https://github.com/{{ site.github.username }}
-      {%- elsif entry.type == 'twitter' -%}
-        https://twitter.com/{{ site.twitter.username }}
-      {%- elsif entry.type == 'email' -%}
-        {% assign email = site.social.email | split: '@' %}
-        javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
-      {%- elsif entry.type == 'rss' -%}
-        {{ "/feed.xml" | relative_url }}
-      {%- else -%}
-        {{ entry.url }}
-      {%- endif -%}
-    {% endcapture %}
 
-    {% if url != '' %}
+    {% unless site.theme_mode %}
-    <a href="{{ url }}" {% unless entry.noblank %}target="_blank"{% endunless %}>
+      {% if site.data.contact.size > 0 %}
-      <i class="{{ entry.icon }}"></i>
+        <span class="icon-border order-2"></span>
-    </a>
+      {% endif %}
-    {% endif %}
-  {% endfor %}
 
-</div>
+      <span id="mode-toggle-wrapper" class="order-1">
+        {% include mode-toggle.html %}
+      </span>
+    {% endunless %}
+
+  </div> <!-- .sidebar-bottom -->
+
+</div><!-- #sidebar -->

_includes/topbar.html

@@ -29,22 +29,23 @@
     <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
 
     <div id="topbar-title">
-    {% if page.location %}
+      {% if page.layout == 'home' %}
-      {{- page.location -}}
+        {{- site.title -}}
-    {% elsif page.layout == "home" %}
+      {% elsif page.dynamic_title %}
-      {{- site.title -}}
+        {{- page.title -}}
-    {% else %}
+      {% else %}
-      {{- page.title -}}
+        {{- page.layout | capitalize -}}
-    {% endif %}
+      {% endif %}
     </div>
 
     <i id="search-trigger" class="fas fa-search fa-fw"></i>
     <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" placeholder="{{ site.data.label.search_hint }}...">
+      <input class="form-control" id="search-input" type="search"
+        aria-label="search" placeholder="{{ site.data.label.search_hint }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <span id="search-cancel" >Cancel</span>
   </div>
 
-</div>
+</div>

_includes/trending-tags.html

@@ -8,24 +8,33 @@
 
 {% assign MAX = 10 %}
 
-{% capture tags_array %}
+{% assign size_list = "" | split: "" %}
-  {% for tag in site.tags %}
+{% assign tag_list = "" | split: "" %}
-    {{ tag[1] | size }}::{{ tag[0] | replace: ' ', '-' }}
-  {% endfor %}
-{% endcapture %}
 
-{% assign all_tags = tags_array | split: " " | sort | reverse %}
+{% for tag in site.tags %}
-{% assign count = 0 %}
+  {% assign size = tag | last | size %}
+  {% assign size_list = size_list | push: size %}
+
+  {% assign tag_str = tag | first | append: "::" | append: size %}
+  {% assign tag_list =  tag_list | push: tag_str %}
+{% endfor %}
+
+{% assign size_list = size_list | sort | reverse %}
+
+{% assign tag_list = tag_list | sort_natural %}
 
 {% assign trending_tags = "" | split: "" %}
 
-{% for iter in all_tags %}
+{% for size in size_list limit: MAX %}
-  {% assign count = count | plus: 1 %}
+  {% for tag_str in tag_list %}
-  {% assign tag = iter | split: "::" | last  %}
+    {% assign tag = tag_str | split: "::" %}
-
+    {% assign tag_name = tag | first %}
-  {% assign trending_tags = trending_tags | push: tag %}
+    {% assign tag_size = tag | last | plus: 0 %}
-
+    {% if tag_size == size %}
-  {% if count >= MAX %}
+      {% unless trending_tags contains tag_name %}
-    {% break %}
+        {% assign trending_tags = trending_tags | push: tag_name %}
-  {% endif %}
+        {% break %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
 {% endfor %}

_includes/update-list.html

@@ -10,11 +10,13 @@
 
 {% assign all_list = "" | split: "" %}
 
-{% for entry in site.data.updates %}
+{% for post in site.posts %}
-  {% capture elem %}
+  {% if post.last_modified_at %}
-    {{- entry.lastmod -}}::{{- entry.filename -}}
+    {% capture elem %}
-  {% endcapture %}
+      {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
-  {% assign all_list = all_list | push: elem %}
+    {% endcapture %}
+    {% assign all_list = all_list | push: elem %}
+  {% endif %}
 {% endfor %}
 
 {% assign all_list = all_list | sort | reverse %}

_layouts/archives.html

@@ -1,6 +1,6 @@
 ---
-title: Archives
+layout: page
-type: archives
+
 # The Archives of posts.
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
@@ -8,6 +8,7 @@ type: archives
 # MIT License
 ---
 
+
 <div id="archives" class="pl-xl-2">
 {% for post in site.posts %}
   {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
@@ -37,4 +38,4 @@ type: archives
     {% assign last_month = "" %}
   {% endif %}
 {% endfor %}
-</div>
+</div>

_layouts/categories.html

@@ -1,6 +1,6 @@
 ---
-title: Categories
+layout: page
-type: categories
+
 # All the Categories of posts
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
@@ -8,6 +8,7 @@ type: categories
 # MIT License
 ---
 
+
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
@@ -45,7 +46,7 @@ type: categories
       {% else %}
         <i class="far fa-folder fa-fw"></i>
       {% endif %}
-        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
+        <a href="{{ site.baseurl }}/categories/{{ category_name | slugify | url_encode }}/"
           class="ml-1 mr-2">
           {{ category_name }}
         </a>
@@ -64,8 +65,9 @@ type: categories
 
       <!-- arrow -->
       {% if sub_categories_size > 0%}
-      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" aria-expanded="true"
+      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
-          class="category-trigger hide-border-bottom">
+        aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
+        class="category-trigger hide-border-bottom">
         <i class="fas fa-fw fa-angle-down"></i>
       </a>
       {% else %}
@@ -83,7 +85,7 @@ type: categories
         {% for sub_category in sub_categories %}
         <li class="list-group-item">
           <i class="far fa-folder fa-fw"></i>
-          <a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/"
+          <a href="{{ site.baseurl }}/categories/{{ sub_category | slugify | url_encode }}/"
             class="ml-1 mr-2">{{ sub_category }}</a>
           {% assign posts_size = site.categories[sub_category] | size %}
           <span class="text-muted small font-weight-light">{{ posts_size }}

_layouts/category.html

@@ -10,11 +10,11 @@ layout: page
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ site.categories[page.category] | size }}</span>
+    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
 
   <ul class="post-content pl-0">
-    {% for post in site.categories[page.category] %}
+    {% for post in page.posts %}
     <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>
@@ -22,4 +22,4 @@ layout: page
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_layouts/default.html

@@ -9,27 +9,19 @@ layout: compress
 
 <!DOCTYPE html>
 
-{% if site.lang %}
-  {% assign lang = site.lang | split: "_" | first %}
-{% else %}
-  {% assign lang = 'en' %}
-{% endif %}
-
 {% capture prefer_mode %}
-  {% if site.theme_mode != "dual" %}
+  {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ lang }}" {{ prefer_mode }} >
+<html lang="{{ site.lang | split: "_" | first | default: "en" }}" {{ prefer_mode }}>
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
 
-    <div id="sidebar" class="d-flex flex-column">
+    {% include sidebar.html %}
-      {% include sidebar.html %}
-    </div>
 
     {% include topbar.html %}
 
@@ -46,9 +38,13 @@ layout: compress
 
     </div> <!-- #main-wrapper -->
 
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
     <div id="mask"></div>
 
-    <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
+    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
       <i class="fas fa-angle-up"></i>
     </a>
 

_layouts/home.html

@@ -49,13 +49,10 @@ layout: page
 {% for post in posts %}
 
   <div class="post-preview">
-    <div class="d-flex justify-content-between pr-xl-2">
+    <h1>
-      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      {% if post.pin == true %}
+    </h1>
-        <i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
+
-        title="Pinned"></i>
-      {% endif %}
-    </div>
     <div class="post-content">
       <p>
         {% include no-linenos.html content=post.content %}
@@ -63,19 +60,35 @@ layout: page
       </p>
     </div>
 
-    <div class="post-meta text-muted">
+    <div class="post-meta text-muted d-flex justify-content-between">
-      <!-- posted date -->
-      <i class="far fa-clock fa-fw"></i>
-      {% include timeago.html date=post.date tooltip=true %}
 
-      <!-- page views -->
+      <div>
-      {% if site.google_analytics.pv.enabled %}
+        <!-- posted date -->
-      <i class="far fa-eye fa-fw"></i>
+        <i class="far fa-calendar fa-fw"></i>
-      <span id="pv_{{-post.title-}}" class="pageviews">
+        {% include timeago.html date=post.date tooltip=true %}
-        <i class="fas fa-spinner fa-spin fa-fw"></i>
+
-      </span>
+        <!-- time to read -->
+        <i class="far fa-clock fa-fw"></i>
+        {% include read-time.html content=post.content %}
+
+        <!-- page views -->
+        {% if site.google_analytics.pv.enabled %}
+        <i class="far fa-eye fa-fw"></i>
+        <span id="pv_{{-post.title-}}" class="pageviews">
+          <i class="fas fa-spinner fa-spin fa-fw"></i>
+        </span>
+        {% endif %}
+      </div>
+
+      {% if post.pin %}
+      <div class="pin">
+        <i class="fas fa-thumbtack fa-fw"></i>
+        <span>{{ site.data.label.pin_prompt }}</span>
+      </div>
       {% endif %}
-    </div>
+
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
 
 {% endfor %}

_layouts/post.html

@@ -18,56 +18,41 @@ layout: default
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published date and author -->
         <div>
-          Posted
           {% include timeago.html date=page.date tooltip=true %}
           by
           <span class="author">
-          {% if page.author %}
+            {{ page.author | default: site.author }}
-            {{ page.author }}
-          {% else %}
-            {{ site.author }}
-          {% endif %}
           </span>
         </div>
 
-        <!-- lastmod -->
+        <div>
-        {%- capture filename -%}
+          <!-- lastmod -->
-          {{ page.url | split: "/" | last }}
+          {% if page.last_modified_at %}
-        {%- endcapture -%}
+          <span>
-
+            Updated
-        {% for item in site.data.updates %}
+            {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-          {% assign encode_filename = item.filename | url_encode %}
+          </span>
-          {% if filename == encode_filename %}
-            {% assign lastmod = item.lastmod %}
-            {% break %}
           {% endif %}
-        {% endfor %}
 
-        {% if lastmod %}
+          <!-- read time -->
-        <div>
+          {% include read-time.html content=content %}
-          Updated
-          {% include timeago.html date=lastmod class="lastmod" tooltip=true %}
-        </div>
-        {% endif %}
 
-        <!-- page views -->
+          <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
+          {% if site.google_analytics.pv.enabled %}
-        <div>
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
-          views
+          {% endif %}
+
         </div>
-        {% endif %}
 
       </div> <!-- .post-meta -->
 
       <div class="post-content">
-
         {%- capture img_placehodler -%}
           data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
-        {% endcapture%}
+        {%- endcapture -%}
 
         {% if page.image %}
-          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
+          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="preview-img">
         {% endif %}
 
         <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
@@ -86,7 +71,7 @@ layout: default
         <div class="post-meta mb-3">
           <i class="far fa-folder-open fa-fw mr-1"></i>
           {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
+            <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
             {%- unless forloop.last -%}, {%- endunless -%}
           {% endfor %}
         </div>
@@ -97,7 +82,7 @@ layout: default
         <div class="post-tags">
           <i class="fa fa-tags fa-fw mr-1"></i>
           {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
+          <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
             class="post-tag no-text-decoration" >
             {{- tag -}}
           </a>
@@ -126,7 +111,15 @@ layout: default
 
   </div> <!-- #post-wrapper -->
 
-  {% include panel.html %}
+  {% assign enable_toc = false %}
+
+  {% if site.toc and page.toc %}
+    {% if content contains '<h2' or content contains '<h3' %}
+      {% assign enable_toc = true %}
+    {% endif %}
+  {% endif %}
+
+  {% include panel.html toc=enable_toc %}
 
 </div> <!-- .row -->
 

_layouts/tag.html

@@ -11,10 +11,10 @@ layout: page
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ site.tags[page.tag] | size }}</span>
+    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
-    {% for post in site.tags[page.tag] %}
+    {% for post in page.posts %}
     <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>
@@ -22,4 +22,4 @@ layout: page
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_layouts/tags.html

@@ -0,0 +1,26 @@
+---
+layout: page
+
+# All the Tags of posts.
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
+
+  {% assign tags = "" | split: "" %}
+  {% for t in site.tags %}
+    {% assign tags = tags | push: t[0] %}
+  {% endfor %}
+
+  {% assign sorted_tags = tags | sort_natural %}
+
+  {% 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>
+    </div>
+  {% endfor %}
+
+</div>

_plugins/posts-lastmod-hook.rb

@@ -0,0 +1,11 @@
+# Check for changed posts
+Jekyll::Hooks.register :posts, :post_init do |post|
+
+  commit_num = `git rev-list --count HEAD "#{ post.path }"`
+
+  if commit_num.to_i > 1
+    lastmod_date = `git log -1 --pretty="%ad" --date=iso "#{ post.path }"`
+    post.data['last_modified_at'] = lastmod_date
+  end
+
+end

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

@@ -5,6 +5,7 @@ date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
+mermaid: true
 image: /assets/img/sample/devices-mockup.png
 ---
 
@@ -12,18 +13,16 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 
 ## Titles
-
 ---
+# H1 - heading
 
-# H1
+<h2 data-toc-skip>H2 - heading</h2>
 
-<h2 data-toc-skip>H2</h2>
+<h3 data-toc-skip>H3 - heading</h3>
-
-<h3 data-toc-skip>H3</h3>
-
-<h4>H4</h4>
 
+<h4>H4 - heading</h4>
 ---
+<br>
 
 ## Paragraph
 
@@ -39,21 +38,38 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
-## List
+## Lists
 
 ### Ordered list
 
-1. first item
+1. Firstly
-2. second item
+2. Secondly
-3. third item
+3. Thirdly
 
 ### Unordered list
 
-- item 1
+- Chapter
-	- sub item 1
+	- Setcion
-	- sub item 2
+      - Paragraph
+
+### Task list
+
+- [ ] TODO
+- [x] Completed
+- Hold on
+- [ ] Defeat COVID-19
+  - [x] Vaccine production
+  - [ ] Economic recovery
+  - [ ] People smile again
+
+### Description list
+
+Sun
+: the star around which the earth orbits
+
+Moon
+: the natural satellite of the earth, visible by reflected light from the sun
 
-- item 2
 
 ## Block Quote
 
@@ -61,53 +77,68 @@ Fluttering and dancing in the breeze.
 
 ## Tables
 
-| Company                      | contact          | Country |
+| Company                      | Contact          | Country |
 |:-----------------------------|:-----------------|--------:|
 | Alfreds Futterkiste          | Maria Anders     | Germany |
 | Island Trading               | Helen Bennett    | UK      |
 | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
 
-## Link
+## Links
 
 <http://127.0.0.1:4000>
 
 
 ## Footnote
 
-Click the hook will locate the footnote[^footnote].
+Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
 
 
 ## Images
 
-By default, the image is centered and the image caption can be displayed at the bottom:
+- Default (with caption)
 
 ![Desktop View](/assets/img/sample/mockup.png)
 _Full screen width and center alignment_
 
-You can change the size of the picture:
+<br>
+
+- Specify width
 
 ![Desktop View](/assets/img/sample/mockup.png){: width="400"}
 _400px image width_
 
-In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
+<br>
 
-- Normal position
+- Left aligned
-  
-  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
 
-- Float to the left
+![Desktop View](/assets/img/sample/mockup.png){: width="350" .normal}
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+<br>
+
+- Float to left
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .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."
 
-- Float to the right
+<br>
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+- Float to right
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .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."
 
-## Inline code
+<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
+```
 
-This is an example of `Inline Code`.
 
 ## Mathematics
 
@@ -119,7 +150,13 @@ When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
-## Code Snippet
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+
+## Code block
 
 ### Common
 
@@ -132,14 +169,6 @@ This is a common code snippet, without syntax highlight and line number.
 #### Console
 
 ```console
-$ date
-Sun Nov  3 15:11:12 CST 2019
-```
-
-
-#### Terminal
-
-```terminal
 $ env |grep SHELL
 SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
@@ -173,38 +202,18 @@ fi;
 ```
 {% endraw %}
 
-#### HTML
+#### Java
 
-```html
+```java
-<div class="sidenav">
+private void writeObject(java.io.ObjectOutputStream s)
-  <a href="#contact">Contact</a>
+  throws java.io.IOException {
-  <button class="dropdown-btn">Dropdown
+  // Write out any hidden serialization magic
-    <i class="fa fa-caret-down"></i>
+  s.defaultWriteObject();
-  </button>
+  for (E e: map.keySet()) s.writeObject(e);
-  <div class="dropdown-container">
+}
-    <a href="#">Link 1</a>
-    <a href="#">Link 2</a>
-    <a href="#">Link 3</a>
-  </div>
-  <a href="#contact">Search</a>
-</div>
 ```
 
-**Horizontal Scrolling**
-
-```html
-<div class="panel-group">
-  <div class="panel panel-default">
-    <div class="panel-heading" id="{{ category_name }}">
-      <i class="far fa-folder"></i>
-      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
-      </a>
-    </div>
-  </div>
-</div>
-```
-
-
 ## Reverse Footnote
 
-[^footnote]: The footnote source.
+[^footnote]: The footnote source
+[^fn-nth-2]: The 2nd footnote source

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

@@ -8,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
 
 ## Front Matter
 
@@ -31,67 +31,13 @@ In order to accurately record the release date of a post, you should not only se
 
 ### Categories and Tags
 
-The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity.
+The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
-
-The list of posts belonging to the same *category*/*tag* is recorded on a separate page. At the same time, the number of these *category*/*tag* type pages is equal to the number of `categories` / `tags` elements for all posts, which means that the two number must be exactly the same.
-
-For instance, let's say there is a post with front matter:
 
 ```yaml
 categories: [Animal, Insect]
-tags: bee
+tags: [bee]
 ```
 
-Then we should have two *category* type pages placed in folder `categories` of root and one *tag* type page placed in folder `tags`  of root:
-
-```sh
-.
-├── categories
-│   ├── animal.html         # a category type page
-│   └── insect.html
-├── tags
-│   └── bee.html            # a tag type page
-...
-```
-    
-and the content of a *category* type page is
-
-```yaml
----
-layout: category
-title: CATEGORY_NAME        # e.g. Insect
-category: CATEGORY_NAME     # e.g. Insect
----
-```
-
-the content of a *tag* type page is
-
-```yaml
----
-layout: tag
-title: TAG_NAME             # e.g. bee
-tag: TAG_NAME               # e.g. bee
----
-```
-
-With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/*tag* type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them, i.e., when you click on the missing `category` or `tag` link from a post or somewhere, the browser will complain to you "404 Not Found". The good news is we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring tasks. Basically we will use it through `run.sh`, `build.sh` or `deploy.sh` that placed in `tools/` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#deployment" | relative_url }}).
-
-## Last modified date
-
-The last modified date of a post is obtained according to the post's latest git commit date, and the modified date of all posts are designed to be stored in the file `_data/updates.yml`. Then contents of that file may be as follows:
-
-```yaml
--
-  filename: getting-started             # the post filename without date and extension
-  lastmod: 2020-04-13 00:38:56 +0800    # the post last modified date
--
-  ... 
-```
-
-You can choose to create this file manually, But the better approach is to let it be automatically generated by a script tool, and `_scripts/sh/dump_lastmod.sh` was born for this! Similar to the other script (`create_pages.sh`) mentioned above, it is also be called from the other superior tools, so it doesn't have to be used separately.
-
-When some posts have been modified since their published date and also the file `_data/updates.yml` was created correctly, a list with the label **Recent Updates** will be displayed in the right panel of the desktop view, which records the five most recently modified posts.
-
 ## 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` and set the value of variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
@@ -102,7 +48,6 @@ toc: false
 ---
 ```
 
-
 ## Comments
 
 Similar to TOC, the [Disqus](https://disqus.com/) comments is loaded by default in each post, and the global switch is defined by variable `comments` in file `_config.yml` . If you want to close the comment for specific post, add the following to the **Front Matter** of the post:
@@ -113,7 +58,6 @@ comments: false
 ---
 ```
 
-
 ## Mathematics
 
 For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
@@ -124,7 +68,21 @@ math: true
 ---
 ```
 
-## Preview Image
+## Mermaid
+
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
+
+```yml
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown language: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
+
+## Images
+
+### Preview image
 
 If you want to add an image to the top of the post contents, specify the url for the image by:
 
@@ -134,6 +92,49 @@ image: /path/to/image-file
 ---
 ```
 
+### Image caption
+
+Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
+
+```markdown
+![img-description](/path/to/image)
+_Image Caption_
+```
+
+### Image size
+
+You can specify the width (and height) of a image with `width`:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+```
+
+### Image position
+
+By default, the image is centered, but you can specify the position by using one of class `normal` , `left` and `right`. For example:
+
+- **Normal position**
+
+  Image will be left aligned in below sample:
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="350" .normal}
+  ```
+
+- **Float to the left**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .left}
+  ```
+
+- **Float to the right**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .right}
+  ```
+
+> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+
 ## Pinned Posts
 
 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
@@ -146,7 +147,7 @@ pin: true
 
 ## Code Block
 
-Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
+Markdown symbols ```` ``` ```` can easily create a code block as following examples.
 
 ```
 This is a common code snippet, without syntax highlight and line number.
@@ -154,7 +155,7 @@ This is a common code snippet, without syntax highlight and line number.
 
 ## Specific Language
 
-Using <code class="highlighter-rouge">```language</code> you will get code snippets with line numbers and syntax highlight.
+Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
 
 > **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
 

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

@@ -18,7 +18,7 @@ $ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --singl
 
 ### Setting up the local envrionment
 
-If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`. 
 
 Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
 
@@ -28,32 +28,16 @@ $ bundle install
 
 `bundle` will automatically install all the dependencies specified by `Gemfile`.
 
-In order to generate some extra files (_categories_, _tags_ and _last modified list_), we need to use some tool scripts. And they require dependency package [yq](https://github.com/mikefarah/yq#install) to be installed. What's more, if your machine is running Debian or macOS, you also need to install [GNU coreutils](https://www.gnu.org/software/coreutils/).
-
-- on Debian:
-
-  ```console
-  $ sudo apt-get install coreutils
-  ```
-
-- on macOS:
-
-  ```console
-  $ brew install coreutils
-  ```
-
 ### Setting up Docker environment (optional)
 
 If you're a loyal fan of [**Docker**](https://www.docker.com/) or just too lazy to install the packages mentioned in [_Setting up the local envrionment_](#setting-up-the-local-envrionment), please make sure you have **Docker Engine** installed and running, and then get Docker image `jekyll/jekyll` from Docker Hub by the following command:
 
 ```console
-$ docker pull jekyll/jekyll:latest
+$ docker pull jekyll/jekyll
 ```
 
 ## Usage
 
-Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
-
 ### Initialization
 
 Go to the root directory of the project and start initialization:
@@ -90,13 +74,11 @@ Generally, go to `_config.yml` and configure the variables as needed. Some of th
 You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 Then open a browser and visit to <http://localhost:4000>.
 
-Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
-
 ### Run on Docker
 
 Run the site on Docker with the following command:
@@ -105,10 +87,9 @@ Run the site on Docker with the following command:
 $ docker run --rm -it \
     --volume="$PWD:/srv/jekyll" \
     -p 4000:4000 jekyll/jekyll \
-    bash tools/run.sh --docker
+    jekyll serve
 ```
 
-Please note that on Docker containers, you'll lose the real-time refresh feature.
 
 ### Deployment
 
@@ -118,11 +99,11 @@ Assuming you have already gone through the [initialization](#initialization), yo
 
 #### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts 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 Pages service.
+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 Pages service.
 
 1. Push any commit to `origin/master` 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 and choose the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
+2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
     ![gh-pages-sources](/assets/img/sample/gh-pages-sources.png){: width="650" class="normal"}
 
 3. Visit your website at the address indicated by GitHub.
@@ -134,18 +115,17 @@ On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Acti
 Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-> **Note**: The output path can be specified with the option `-d`.
-
 Or, build the site with Docker by:
 
 ```terminal
-$ docker run --rm -it \
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
     --volume="$PWD:/srv/jekyll" \
     jekyll/jekyll \
-    bash tools/build.sh --docker
+    jekyll build
 ```
 
 Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.

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

@@ -22,6 +22,18 @@ Download the generated package, unzip and delete the following two from the extr
 - browserconfig.xml
 - manifest.json
  
-Now, copy the rest image files (`.PNG` and `.ICO`) to cover the original one in folder `assets/img/favicons/`.
+Now, copy the remaining image files (`.PNG` and `.ICO`) from the extracted `.zip` file to cover the original files in the folder `assets/img/favicons/`.
 
-Lastly, don't forget to rebuild your site so that the icon becomes your custom edition.
+The following table helps you understand the changes to the icon file:
+
+> ✓ means keep, ✗ means delete.
+
+| File(s)             | From Favicon & App Icon Generator | From Chirpy |
+|---------------------|:---------------------------------:|:-----------:|
+| `*.PNG`             | ✓                                 | ✗           |
+| `*.ICO`             | ✓                                 | ✗           |
+| `browserconfig.xml` | ✗                                 | ✓           |
+| `manifest.json`     | ✗                                 | ✓           |
+
+
+The next time you build the site, the icon will be replaced with a customized edition.

_scripts/sh/create_pages.sh

@@ -1,159 +0,0 @@
-#!/usr/bin/env bash
-#
-# Create HTML pages for Categories and Tags in posts.
-#
-# Usage:
-#     Call from the '_posts' sibling directory.
-#
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-TYPE_CATEGORY=0
-TYPE_TAG=1
-
-category_count=0
-tag_count=0
-
-_read_yaml() {
-  local _endline="$(grep -n "\-\-\-" "$1" | cut -d: -f 1 | sed -n '2p')"
-  head -"$_endline" "$1"
-}
-
-read_categories() {
-  local _yaml="$(_read_yaml "$1")"
-  local _categories="$(echo "$_yaml" | yq r - "categories.*")"
-  local _category="$(echo "$_yaml" | yq r - "category")"
-
-  if [[ -n $_categories ]]; then
-    echo "$_categories"
-  elif [[ -n $_category ]]; then
-    echo "$_category"
-  fi
-}
-
-read_tags() {
-  local _yaml="$(_read_yaml "$1")"
-  local _tags="$(echo "$_yaml" | yq r - "tags.*")"
-  local _tag="$(echo "$_yaml" | yq r - "tag")"
-
-  if [[ -n $_tags ]]; then
-    echo "$_tags"
-  elif [[ -n $_tag ]]; then
-    echo "$_tag"
-  fi
-}
-
-init() {
-
-  if [[ -d categories ]]; then
-    rm -rf categories
-  fi
-
-  if [[ -d tags ]]; then
-    rm -rf tags
-  fi
-
-  if [[ ! -d _posts ]]; then
-    exit 0
-  fi
-
-  mkdir categories tags
-}
-
-create_category() {
-  if [[ -n $1 ]]; then
-    local _name=$1
-    local _filepath="categories/$(echo "$_name" | sed 's/ /-/g' | awk '{print tolower($0)}').html"
-
-    if [[ ! -f $_filepath ]]; then
-      echo "---" > "$_filepath"
-      echo "layout: category" >> "$_filepath"
-      echo "title: $_name" >> "$_filepath"
-      echo "category: $_name" >> "$_filepath"
-      echo "---" >> "$_filepath"
-
-      ((category_count = category_count + 1))
-    fi
-  fi
-}
-
-create_tag() {
-  if [[ -n $1 ]]; then
-    local _name=$1
-    local _filepath="tags/$(echo "$_name" | sed "s/ /-/g;s/'//g" | awk '{print tolower($0)}').html"
-
-    if [[ ! -f $_filepath ]]; then
-
-      echo "---" > "$_filepath"
-      echo "layout: tag" >> "$_filepath"
-      echo "title: $_name" >> "$_filepath"
-      echo "tag: $_name" >> "$_filepath"
-      echo "---" >> "$_filepath"
-
-      ((tag_count = tag_count + 1))
-    fi
-  fi
-}
-
-#########################################
-# Create HTML pages for Categories/Tags.
-# Arguments:
-#   $1 - an array string
-#   $2 - type specified option
-#########################################
-create_pages() {
-  if [[ -n $1 ]]; then
-    # split string to array
-    IFS_BAK=$IFS
-    IFS=$'\n'
-    local _string=$1
-
-    case $2 in
-
-      $TYPE_CATEGORY)
-        for i in $_string; do
-          create_category "$i"
-        done
-        ;;
-
-      $TYPE_TAG)
-        for i in $_string; do
-          create_tag "$i"
-        done
-        ;;
-
-      *) ;;
-
-    esac
-
-    IFS=$IFS_BAK
-  fi
-
-}
-
-main() {
-
-  init
-
-  for _file in $(find "_posts" -type f \( -iname \*.md -o -iname \*.markdown \)); do
-    local _categories=$(read_categories "$_file")
-    local _tags=$(read_tags "$_file")
-
-    create_pages "$_categories" $TYPE_CATEGORY
-    create_pages "$_tags" $TYPE_TAG
-  done
-
-  if [[ $category_count -gt 0 ]]; then
-    echo "[INFO] Succeed! $category_count category-pages created."
-  fi
-
-  if [[ $tag_count -gt 0 ]]; then
-    echo "[INFO] Succeed! $tag_count tag-pages created."
-  fi
-}
-
-main

_scripts/sh/dump_lastmod.sh

@@ -1,88 +0,0 @@
-#!/bin/bash
-#
-# Find out the posts that have been modified and record
-# its lastmod information to file '_data/updates.yml'
-#
-# Usage:
-#     Call from the '_posts' sibling directory.
-#
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-POST_DIR=_posts
-OUTPUT_DIR=_data
-OUTPUT_FILE=updates.yml
-
-_init() {
-
-  if [[ ! -d "$OUTPUT_DIR" ]]; then
-    mkdir "$OUTPUT_DIR"
-  fi
-
-  if [[ -f "$OUTPUT_DIR/$OUTPUT_FILE" ]]; then
-    rm -f "$OUTPUT_DIR/$OUTPUT_FILE"
-  fi
-
-  if [[ ! -d $POST_DIR ]]; then
-    exit 0
-  fi
-}
-
-_has_changed() {
-  local _log_count="$(git log --pretty=%ad "$1" | wc -l | sed 's/ *//')"
-  _log_count=$((_log_count + 0))
-
-  if [[ $_log_count > 1 ]]; then
-    return 0 # true
-  fi
-
-  return 1 # false
-}
-
-###################################
-# Storage the posts' lastmod.
-#
-# Args:
-#     - $1 the post's filename
-#     - $2 the post's filepath
-# Output:
-#     the file '_data/updates.yml'
-###################################
-_dump() {
-  local _lasmod="$(git log -1 --pretty=%ad --date=iso "$2")"
-
-  if [[ ! -f "$OUTPUT_DIR/$OUTPUT_FILE" ]]; then
-    touch "$OUTPUT_DIR/$OUTPUT_FILE"
-  fi
-
-  echo "-" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-  echo "  filename: '$1'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-  echo "  lastmod: '$_lasmod'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
-}
-
-main() {
-
-  _init
-
-  local _count=0
-
-  for _file in $(find ${POST_DIR} -type f \( -iname \*.md -o -iname \*.markdown \)); do
-    _filename="$(basename "$_file" | sed 's/-\-\+/-/;s/[[:digit:]]\([[:digit:]]*-\)//g;s/\..*//')" # remove date and extension
-
-    if _has_changed "$_file"; then
-      _dump "$_filename" "$_file"
-      ((_count = _count + 1))
-    fi
-
-  done
-
-  if [[ $_count > 0 ]]; then
-    echo "[INFO] Success to update lastmod for $_count post(s)."
-  fi
-}
-
-main

_scripts/sh/sync_monitor.sh

@@ -1,37 +0,0 @@
-#!/bin/bash
-
-# Files sync monitor
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT Licensed
-
-# $1 -> the origin file with absolute path.
-# $2 -> the origin sync directory
-# $3 -> the destination sync directory
-
-# Omit the system temp file
-if [[ ! -f $1 ]]; then
-  exit 0
-fi
-
-src_dir="$(dirname "$(realpath "$1")")"
-
-dir_prefix="$(realpath "$2")/"
-
-related_dir="${src_dir:${#dir_prefix}}"
-
-dest="$(realpath "$3")/${related_dir}"
-
-if [[ ! -d $dest ]]; then
-  mkdir -p "$dest"
-fi
-
-if [[ -f $1 ]]; then
-  cp "$1" "$dest"
-fi
-
-if [[ $related_dir == "_posts" ]]; then
-  bash "$3"/_scripts/sh/create_pages.sh
-  bash "$3"/_scripts/sh/dump_lastmod.sh
-fi

_tabs/about.md

@@ -1,5 +1,7 @@
 ---
 title: About
+icon: fas fa-info
+order: 4
 
 # The About page
 # v2.0
@@ -8,4 +10,5 @@ title: About
 # MIT License
 ---
 
-> **Note**: Add Markdown syntax content to file `tabs/about.md` and it will show up on this page.
+
+> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.

_tabs/archives.md

@@ -0,0 +1,7 @@
+---
+layout: archives
+title: Archives
+icon: fas fa-archive
+order: 3
+---
+

_tabs/categories.md

@@ -0,0 +1,6 @@
+---
+layout: categories
+title: Categories
+icon: fas fa-stream
+order: 1
+---

_tabs/tags.md

@@ -0,0 +1,6 @@
+---
+layout: tags
+title: Tags
+icon: fas fa-tags
+order: 2
+---

assets/css/_addon/fonts.scss

@@ -1,7 +0,0 @@
-/*
- * The field 'font-display' is added for Google-fonts.
- *
- * See: <https://fonts.google.com/>
- */
-
-@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

assets/css/_addon/module.scss

@@ -17,6 +17,7 @@
 %table-cell {
   padding: 0.4rem 1rem;
   font-size: 95%;
+  white-space: nowrap;
 }
 
 %link-hover {
@@ -64,7 +65,6 @@
   color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 0.25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -96,7 +96,17 @@
   color: $color;
   font-size: $font-size;
   font-weight: $font-weight;
-  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
+}
+
+@mixin panel-label {
+  @include label(inherit);
+  display: block;
+  line-height: 1.2;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  letter-spacing: -0.02em;
 }
 
 @mixin align-center {

assets/css/_addon/syntax.scss

@@ -36,11 +36,11 @@ html[mode=dark] {
 }
 
 %code-snippet-radius {
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 0.8rem 1rem;
+  padding: 1.5rem;
 }
 
 $code-font-size: 0.85rem;
@@ -56,6 +56,7 @@ div > pre {
   @extend %code-snippet-radius;
 
   color: var(--highlighter-rouge-color);
+  margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
@@ -69,8 +70,8 @@ div > pre {
 
   overflow: auto;
   .lineno {
-    margin: 0.8rem 0;
+    margin-left: 0.2rem;
-    padding: 0 0.5rem;
+    padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -111,7 +112,6 @@ code {
   &.highlighter-rouge {
     font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 0.15rem;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
@@ -131,8 +131,7 @@ code {
 }
 
 td.rouge-code {
-  padding-left: 1rem;
+  padding: 1.5rem 1.5rem 1.5rem 1rem;
-  padding-right: 1rem;
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -149,3 +148,20 @@ div {
     }
   }
 }
+
+div[class^='language-']::before {
+  content: attr(lang);
+  position: absolute;
+  right: 1.8rem;
+  margin-top: 3px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--highlight-lineno-color);
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  div[class^='language-']::before {
+    right: 3.1rem;
+  }
+}

assets/css/_addon/variables.scss

@@ -9,7 +9,7 @@
 
 /* --- ↓ width and height ---- */
 
-$tab-height: 3.3rem;
+$tab-height: 3.2rem;
 $tab-cursor-height: 1.6rem;
 
 $sidebar-width-small: 210px;

assets/css/_colors/dark-syntax.scss

@@ -8,22 +8,22 @@
 
 @mixin dark-syntax {
   /* -----  My styles ------ */
-  --highlight-bg-color: #272822;
+  --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #3c4042;
+  --highlight-lineno-border-color: #303435;
-  --inline-code-bg: var(--highlight-bg-color);
+  --inline-code-bg: #272822;
 
   .highlight {
     .gp { color: #818c96; }
   }
 
-  pre { color: #818c96; } /* override Bootstrap */
+  pre { color: #bfbfbf; } /* override Bootstrap */
   kbd { background-color: black; }
 
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
-  .highlight pre { background-color: #272822; }
+  .highlight pre { background-color: var(--highlight-bg-color); }
-  .highlight .hll { background-color: #272822; }
+  .highlight .hll { background-color: var(--highlight-bg-color); }
   .highlight .c { color: #75715e; } /* Comment */
   .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
   .highlight .k { color: #66d9ef; } /* Keyword */
@@ -35,7 +35,7 @@
   .highlight .cp { color: #75715e; } /* Comment.Preproc */
   .highlight .c1 { color: #75715e; } /* Comment.Single */
   .highlight .cs { color: #75715e; } /* Comment.Special */
-  .highlight .ge { font-style: italic; } /* Generic.Emph */
+  .highlight .ge { color: inherit; font-style: italic; } /* Generic.Emph */
   .highlight .gs { font-weight: bold; } /* Generic.Strong */
   .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
   .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */

assets/css/_colors/dark-typography.scss

@@ -32,6 +32,8 @@
   --btn-box-shadow: var(--main-wrapper-bg);
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
+  --checkbox-color: rgb(118 120 121);
+  --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
   --nav-cursor-color: rgb(183, 182, 182);
@@ -49,6 +51,8 @@
   --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-paginator-shadow: var(--main-wrapper-bg);
+  --pin-bg: rgb(34 35 37);
+  --pin-color: iherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);

assets/css/_colors/light-typography.scss

@@ -23,8 +23,10 @@
   --tb-border-color: #eaeaea;
   --button-bg: #fff;
   --btn-backtotop-color: #686868;
-  --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
+  --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
+  --checkbox-color: #c5c5c5;
+  --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(
@@ -50,12 +52,14 @@
   --btn-text-color: #f8f8f8;
   --btn-paginator-border-color: #f1f1f1;
   --btn-paginator-shadow: #4b92d2;
+  --pin-bg: #f5f5f5;
+  --pin-color: #999fa4;
 
   /* Posts */
   --btn-share-hover-color: var(--link-color);
   --card-border-color: #f1f1f1;
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
-  --label-color: #808080;
+  --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;

assets/css/archives.scss

@@ -19,10 +19,6 @@
   background-color: var(--timeline-color);
 }
 
-%date-font {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
 #archives {
   letter-spacing: 0.03rem;
   li {
@@ -33,7 +29,7 @@
       background-image: linear-gradient(
         to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
     }
-    >div {
+    > div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -42,7 +38,6 @@
 
   span.lead {
     font-size: 1.5rem;
-    @extend %date-font;
     position: relative;
     left: 8px;
 
@@ -54,8 +49,7 @@
       }
     }
 
-    &::after {
+    &::after { /* Year dot */
-      /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -80,8 +74,8 @@
     &.month {
       width: 1.4rem;
       text-align: center;
-      @extend %date-font;
+
-      ~a::before {
+      ~ a::before {
         /* A dot for Month and Day */
         content: "";
         display: inline-block;
@@ -111,12 +105,12 @@
   } // #archives .date
 
   ul {
-    >li {
+    > li {
-      >div>a {
+      > div > a {
         /* post title in Archvies */
         margin-left: 2.5rem;
         position: relative;
-        top: .1rem;
+        top: 0.1rem;
       }
       &::after {
         @extend %date-timeline;
@@ -129,10 +123,10 @@
         top: -1.61rem;
       }
     }
-    &:not(:last-child)>li:last-child::after {
+    &:not(:last-child) > li:last-child::after {
       height: 3.4rem;
     }
-    &:last-child>li:last-child::after {
+    &:last-child > li:last-child::after {
       display: none;
     }
   } // #archives ul

assets/css/categories.scss

@@ -22,7 +22,7 @@
     border-left: none;
     border-right: none;
     padding-left: 2rem;
-    >i {
+    > i {
       @extend %category-icon-color;
     }
     &:first-child {
@@ -32,7 +32,7 @@
 
   }
 
-  .card-header>span>i:first-child {
+  .card-header > span > i:first-child {
     @extend %category-icon-color;
   }
 
@@ -50,9 +50,9 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d!important;
-  >i.fas {
+  > i.fas {
     position: relative;
-    height: .7rem;
+    height: 0.7rem;
     width: 1rem;
     transition: 300ms ease all;
   }
@@ -68,4 +68,4 @@
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
-}
+}

assets/css/category-tag.scss

@@ -10,9 +10,9 @@
 {% include_relative _addon/main.scss %}
 
 #page-category, #page-tag {
-  ul>li {
+  ul > li {
     line-height: 1.5rem;
-    padding: .6rem 0;
+    padding: 0.6rem 0;
     &::before { // dot
       background: #999;
       width: 5px;
@@ -21,25 +21,25 @@
       display: block;
       content: "";
       position: relative;
-      top: .6rem;
+      top: 0.6rem;
-      margin-right: .5rem;
+      margin-right: 0.5rem;
     }
-    >a { /* post's title */
+    > a { /* post's title */
       font-size: 1.1rem;
       @extend %no-bottom-border;
     }
-    >span:last-child {
+    > span:last-child {
       white-space: nowrap;
     }
     /* post's date */
   }
 }
 
-#page-tag h1>i { // tag icon
+#page-tag h1 > i { // tag icon
   font-size: 1.2rem;
 }
 
-#page-category h1>i {
+#page-category h1 > i {
   font-size: 1.25rem;
 }
 
@@ -59,15 +59,15 @@ a:hover {
 
 @media all and (max-width: 576px) {
   #page-category, #page-tag {
-    ul>li {
+    ul > li {
       &::before {
         margin: 0 .5rem;
       }
-      >a {
+      > a {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
   }
-}
+}

assets/css/home.scss

@@ -10,7 +10,7 @@
 
 #post-list {
   margin-top: 1rem;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 
   .post-preview {
     padding-top: 1.5rem;
@@ -20,25 +20,22 @@
     h1 {
       font-size: 1.4rem;
       margin: 0;
-      ~i { // pinned icon
-        font-size: .86rem;
-      }
     }
 
     .post-meta {
       i {
-        font-size: .73rem;
+        font-size: 0.73rem;
-        &:not(:first-child) { // post-meta icons on the homepage
+      }
-          margin-left: 1.5rem;
+      span:not(:last-child) {
-        }
+        margin-right: 1.2rem;
       }
     }
 
     .post-content {
-      margin-top: .6rem;
+      margin-top: 0.6rem;
-      margin-bottom: .6rem;
+      margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
-      >p {
+      > p {
         /* Make preview shorter on the homepage */
         margin: 0;
         overflow: hidden;
@@ -49,6 +46,17 @@
       }
     }
 
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
   } // .post-preview
 
 } // #post-list
@@ -107,12 +115,6 @@
 
 } // .pagination
 
-@media all and (max-width: 576px) {
-  #post-list .post-meta>span i:not(:first-child) {
-    margin-left: 1rem;
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
@@ -125,10 +127,25 @@
 
   #post-list {
     margin-top: 1.5rem;
+    .post-preview .post-meta {
+      .pin {
+        background: var(--pin-bg);
+        border-radius: 5px;
+        line-height: 1.4rem;
+        height: 1.3rem;
+        margin-top: 3px;
+        padding-left: 1px;
+        padding-right: 6px;
+
+        > span {
+          display: inline;
+        }
+      }
+    }
   }
 
   .pagination {
-    font-size: .85rem;
+    font-size: 0.85rem;
     .page-item .page-link {
       width: 2.2rem;
       height: 2.2rem;
@@ -142,4 +159,4 @@
   #post-list {
     padding-right: 0;
   }
-}
+}

assets/css/post.scss

@@ -27,22 +27,29 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
+@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+  content: "\2022";
+  color: rgba(158, 158, 158, 0.8);
+  padding-left: $pl;
+  padding-right: $pr;
+}
+
+.post .post-meta {
+  > div:nth-child(2) {
+    > span:not(:first-child)::before {
+      @include dot;
+    }
+  }
+  #pv::after {
+    content: " views";
+  }
+  .readtime::after {
+    content: " read";
+  }
+}
+
 .post-content {
-  > ol, > ul, > dl {
+  .preview-img {
-    padding-left: 2rem;
-    li+li {
-      margin-top: 0.3rem;
-    }
-  }
-  li {
-    > ol, > ul, > dl { // sub list
-      padding-left: 2rem;
-    }
-    > p {
-      margin: 1rem 0 0.8rem;
-    }
-  }
-  .post-preview-img {
     margin-top: 0;
     margin-bottom: 2.5rem;
     @include align-center;
@@ -89,20 +96,20 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   p {
     font-size: 1.1rem;
     line-height: 1.5rem;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
     white-space: normal;
   }
 
   a, span {
     &::before {
       color: var(--text-muted-color);
-      font-size: .65rem;
+      font-size: 0.65rem;
       text-transform: uppercase;
     }
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      left: .5px;
+      left: 0.5px;
       &::before {
         content: $prompt-older
       }
@@ -110,7 +117,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     &:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      right: .5px;
+      right: 0.5px;
       &::before {
         content: $prompt-newer
       }
@@ -132,25 +139,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 #toc-wrapper {
-  margin-top: 7rem;
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
-  animation: fade-up .8s;
+  animation: fade-up 0.8s;
   &.topbar-down {
     top: 6rem;
   }
-  >h3 {
+  > span {
-    @include label(inherit, 600);
+    @include panel-label;
   }
 }
 
 #toc li>a {
   line-height: 1rem;
-  padding-top: .5rem;
+  padding-top: 0.5rem;
-  padding-bottom: .5rem;
+  padding-bottom: 0.5rem;
 }
 
 
@@ -161,19 +167,19 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     @include label(1.1rem, 600);
   }
   .card {
-    border: 1px solid var(--card-border-color);
+    border-color: var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    -webkit-transition: all .3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all .3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
-    transition: all .3s ease-in-out;
+    transition: all 0.3s ease-in-out;
     h3 {
       color: var(--text-color);
     }
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
       transform: translate3d(0, -3px, 0);
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
     }
   }
 
@@ -182,8 +188,8 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   }
 
   p {
-    font-size: .9rem;
+    font-size: 0.9rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -234,7 +240,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-size: 1.2rem;
     a {
       &:not(:last-child) {
-        margin-right: .25rem;
+        margin-right: 0.25rem;
       }
       &:hover {
         text-decoration: none;
@@ -244,7 +250,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       }
     }
     >i {
-      padding-top: .35rem;
+      padding-top: 0.35rem;
       &:hover {
         @extend %btn-share-hovor;
       }
@@ -292,7 +298,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-weight: 400;
   }
   span:last-child {
-    font-size: .85rem;
+    font-size: 0.85rem;
   }
 } // .license-wrapper
 
@@ -318,11 +324,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   .post {
     .post-meta {
       >div:not(:first-child)::before {
-        content: "\2022";
+        @include dot(0.5rem, 0.2rem);
-        color: rgba(158, 158, 158, 0.8);
-        font-weight: bold;
-        padding-left: .5rem;
-        padding-right: .3rem;
       }
       &.flex-column {
         -webkit-box-orient: horizontal!important;

assets/css/tags.scss

@@ -12,7 +12,7 @@
 .tag {
   border-radius: 0.7em;
   padding: 6px 8px 7px;
-  margin-right: .8rem;
+  margin-right: 0.8rem;
   line-height: 3rem;
   letter-spacing: 0;
   border: 1px solid var(--tag-border) !important;
@@ -22,4 +22,4 @@
     font-size: 0.7em;
     font-family: 'Oswald', sans-serif;
   }
-}
+}

assets/js/_commons.js

@@ -18,4 +18,6 @@
 
 {% include_relative _commons/copy-link.js %}
 
+{% include_relative _commons/checkbox.js %}
+
 {% include_relative _utils/tooltip-loader.js %}

assets/js/_commons/back-to-top.js

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

assets/js/_commons/checkbox.js

@@ -0,0 +1,12 @@
+/*
+ * 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>");
+});

assets/js/_utils/lang-badge.js

@@ -0,0 +1,20 @@
+/**
+ *  Add language indicator to code snippets
+ */
+
+$(function() {
+  const prefix = "language-";
+  const regex = new RegExp(`^${prefix}([a-z])+$`);
+
+  $(`div[class^=${prefix}`).each(function() {
+    let clzsses = $(this).attr("class").split(" ");
+
+    clzsses.forEach((clzss) => {
+      if (regex.test(clzss)) {
+        let lang = clzss.substring(prefix.length);
+        $(this).attr("lang", `${lang}`);
+      }
+    });
+
+  });
+});

assets/js/_utils/pageviews.js

@@ -145,7 +145,7 @@ function displayPageviews(data) {
 
   if ($("#post-list").length > 0) { /* the Home page */
     $(".post-preview").each(function() {
-      var path = $(this).children("div").children("h1").children("a").attr("href");
+      var path = $(this).find("a").attr("href");
       tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
     });
 

assets/js/_utils/smooth-scroll.js

@@ -0,0 +1,80 @@
+/*
+  Safari doesn't support CSS `scroll-behavior: smooth`,
+  so here is a compatible sollution for all browser to 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.
+*/
+
+$(function() {
+  $("a[href*='#']")
+    .not("[href='#']")
+    .not("[href='#0']")
+    .click(function(event) {
+
+      if (location.pathname.replace(/^\//, "") === this.pathname.replace(/^\//, "")
+        && location.hostname === this.hostname) {
+
+        const REM = 16; /* 16px */
+
+        const hash = decodeURI(this.hash);
+        let isFnRef = RegExp(/^#fnref:/).test(hash);
+        let isFn = RegExp(/^#fn:/).test(hash);
+        let selector = hash.includes(":") ? hash.replace(/\:/, "\\:") : hash;
+        const target = $(selector);
+
+        if (target.length) {
+          event.preventDefault();
+
+          if (history.pushState) { /* add hash to URL */
+            history.pushState(null, null, hash);
+          }
+
+          let curOffset = $(this).offset().top;
+          let destOffset = target.offset().top;
+          const scrollUp = (destOffset < curOffset);
+          const topbarHeight = $("#topbar-wrapper").outerHeight();
+
+          if (scrollUp && isFnRef) {
+            /* Avoid the top-bar covering `fnref` when scrolling up
+              because `fnref` has no `%anchor`(see: module.scss) style. */
+            destOffset -= (topbarHeight + REM / 2);
+          }
+
+          $("html,body").animate({
+            scrollTop: destOffset
+          }, 800, () => {
+
+            var $target = $(target);
+            $target.focus();
+
+            const SCROLL_MARK = "scroll-focus";
+
+            /* clean up old scroll mark */
+            if ($(`[${ SCROLL_MARK }=true]`).length) {
+              $(`[${ SCROLL_MARK }=true]`).attr(SCROLL_MARK, false);
+            }
+
+            /* Clean :target links */
+            if ($(":target").length) { /* element that visited by the URL with hash */
+              $(":target").attr(SCROLL_MARK, false);
+            }
+
+            /* set scroll mark to footnotes */
+            if (isFn || isFnRef) {
+              $target.attr(SCROLL_MARK, true);
+            }
+
+            if ($target.is(":focus")) { /* Checking if the target was focused */
+              return false;
+            } else {
+              $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
+              $target.focus(); /* Set focus again */
+            }
+          });
+        }
+      }
+
+    }); /* click() */
+});

assets/js/_utils/toc-filter.js

@@ -1,14 +0,0 @@
-/*
- * Hide the empty ToC in posts.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2019 Cotes Chung
- * MIT Licensed
- */
-
-$(function() {
-  if ($("#post-wrapper .post-content h1").length === 0
-      && $("#post-wrapper .post-content h2").length === 0) {
-    $("#toc-wrapper").addClass("unloaded");
-  }
-});

assets/js/data/cache-list.js

@@ -26,46 +26,13 @@ const include = [
   '{{ "/assets/js/home.min.js" | relative_url }}',
   '{{ "/assets/js/page.min.js" | relative_url }}',
   '{{ "/assets/js/post.min.js" | relative_url }}',
+  '{{ "/assets/js/categories.min.js" | relative_url }}',
 
   /*--- HTML ---*/
 
   /* Tabs */
-  {% for tab in site.data.tabs %}
+  {% for tab in site.tabs %}
-    {% capture item %}
+    '{{ tab.url }}',
-      {%- unless tab.name == 'Home' -%}
-        /tabs/{{ tab.name | downcase }}
-      {%- endunless -%}
-      {{- "/" -}}
-    {% endcapture %}
-    '{{ item | relative_url }}',
-  {% endfor %}
-
-  /* The posts of first Home page and recent update list */
-  {% assign post_list = "" | split: "" %}
-
-  {% for post in site.posts limit: site.paginate %}
-    {% capture post_url %}{{ post.url | relative_url }}{% endcapture %}
-    {% assign post_list = post_list | push: post_url %}
-  {% endfor %}
-
-  {% include update-list.html %}
-
-  {% for item in update_list %}
-    {% assign url = item | split: "::" | last | url_encode | prepend: "/posts/" | append: "/" | relative_url %}
-    {% assign post_list = post_list | push: url %}
-  {% endfor %}
-
-  {% assign post_list = post_list | uniq %}
-
-  {% for url in post_list %}
-    '{{ url }}',
-  {% endfor %}
-
-  /* Trending tags */
-  {% include trending-tags.html %}
-  {% for tag in trending_tags %}
-    {% capture tag_url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
-    '{{ tag_url | relative_url }}',
   {% endfor %}
 
   /*--- Icons ---*/

assets/js/page.min.js

@@ -9,3 +9,5 @@ layout: compress
 ---
 
 {% include_relative _commons.js %}
+
+{% include_relative _utils/smooth-scroll.js %}

assets/js/post.min.js

@@ -12,6 +12,9 @@ layout: compress
 
 {% include_relative lib/_bootstrap-toc.min.js %}
 
-{% include_relative _utils/toc-filter.js %}
-
 {% include_relative _utils/img-hyperlink.js %}
+
+{% include_relative _utils/lang-badge.js %}
+
+{% comment %} `smooth-scroll.js` must be called after ToC is ready {% endcomment %}
+{% include_relative _utils/smooth-scroll.js %}

docs/README.zh-CN.md

@@ -1,6 +1,6 @@
 # Chirpy
 
-🌏 [English](../README.md) • 简体中文
+Language: [English](../README.md) | 简体中文
 
 [![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)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
@@ -11,7 +11,7 @@
 
 [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
-> ⚠️ 中文版文档存在更新不及时的风险（开源文档以英文为主，请见谅）。如果发现中、英文内容不匹配的情况，一切以英文版内容为准。如果您愿意的话，可提交 issuse 提醒作者更新中文版 README，谢谢。
+> :bulb: 中文版文档存在更新不及时的风险（开源文档以英文为主，请见谅）。如果发现中、英文内容不匹配的情况，一切以英文版内容为准。如果您愿意的话，可提交 issue 提醒作者更新中文版 README，谢谢。
 
 ## 目录
 
@@ -19,7 +19,7 @@
 - [安装](#安装)
 - [使用](#使用)
 - [参与贡献](#参与贡献)
-- [感谢](#感谢)
+- [鸣谢](#鸣谢)
 - [赞助](#赞助)
 - [许可证书](#许可证书)
 
@@ -33,6 +33,7 @@
 - 语法高亮
 - 二级目录
 - 数学表达式
+- Mermaid 图表
 - 搜索
 - Atom 订阅
 - Disqus 评论
@@ -51,7 +52,7 @@ $ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --singl
 
 ### 设置本地环境
 
-如果你想在本地运行或构建, 参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/)安装 `Ruby`， `RubyGems` 和 `Bundler`。
+如果你想在本地运行或构建, 参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/)安装 `Ruby`，`RubyGems`，`Jekyll` 和 `Bundler`。
 
 首次运行或构建时, 请先安装 Jekyll plugins。在项目根目录运行：
 
@@ -61,24 +62,17 @@ $ bundle install
 
 `bundle` 会自动安装 `Gemfile` 内指定的依赖插件。
 
-为了生成一些额外的文件（Post 的 _分类_、_标签_ 以及 _更新时间列表_），需要用到一些脚本工具。而它们需要安装依赖包 [yq](https://github.com/mikefarah/yq#install)。另外，如果你电脑的操作系统是 Debian 或者 macOS，还需安装 [GNU coreutils](https://www.gnu.org/software/coreutils/)：
+### 配置 Docker 镜像（可选）
 
-- Debian
+如果你是 [**Docker**](https://www.docker.com/) 的铁粉，或者不想在本地安装上述 [_设置本地环境_](#设置本地环境) 提到的包, 那么请确保先安装并运行了 **Docker Engine** 然后从 Docker Hub 获取镜像 `jekyll/jekyll`:
 
-  ```console
+```console
-  $ sudo apt-get install coreutils
+$ docker pull jekyll/jekyll
-  ```
+```
 
-- macOS
-
-  ```console
-  $ brew install coreutils
-  ```
 
 ## 使用
 
-运行 [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) 需要一些额外的文件, 它们不能通过 Jekyll 原生的命令生成，所以请严格依照下列说明去运行或部署此项目。
-
 ### 初始化
 
 在项目根目录，开始初始化:
@@ -112,15 +106,24 @@ $ bash tools/init.sh
 
 ### 本地运行
 
-使用以下工具可轻松运行:
+发布之前，在本地预览:
 
 ```terminal
-$ bash tools/run.sh
+$ bundle exec jekyll s
 ```
 
 访问本地服务： <http://localhost:4000>
 
-如果你想在本地服务运行后，把修改源文件的更改实时刷新，可使用选项 `-r` (或 `--realtime`)，不过要先安装依赖 [**fswatch**](http://emcrisostomo.github.io/fswatch/) 。
+### 用 Docker 运行
+
+在项目根目录运行命令:
+
+```terminal
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
 
 ### 部署
 
@@ -130,7 +133,7 @@ $ bash tools/run.sh
 
 #### 部署到 GitHub Pages
 
-由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用脚本工具去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
+由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
 
 1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
 
@@ -147,10 +150,20 @@ $ bash tools/run.sh
 在项目根目录，运行:
 
 ```console
-$ bash tools/build.sh -d /path/to/site/
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-生成的静态文件将会在 `/path/to/site/`， 把内部的文件上传到服务器即可。
+或者通过 Docker 构建:
+
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
+
+生成的静态文件将会在 `_site`， 把内部的文件上传到服务器即可。
 
 ### 文档
 

feed.xml

@@ -30,10 +30,10 @@ layout: compress
     <title>{{ post.title }}</title>
     <link href="{{ post_absolute_url }}" rel="alternate" type="text/html" title="{{ post.title }}" />
     <published>{{ post.date | date_to_xmlschema }}</published>
-  {% if post.seo.date_modified %}
+  {% if post.last_modified_at %}
-    <updated>{{ post.seo.date_modified | date_to_xmlschema }}</updated>
+    <updated>{{ post.last_modified_at | date_to_xmlschema }}</updated>
   {% else %}
-    <updated>{{ site.time | date_to_xmlschema }}</updated>
+    <updated>{{ post.date | date_to_xmlschema }}</updated>
   {% endif %}
     <id>{{ post_absolute_url }}</id>
     <content src="{{ post_absolute_url }}" />
@@ -51,13 +51,13 @@ layout: compress
     <summary>{{ post.summary | strip }}</summary>
   {% else %}
     <summary>
-      {% assign content = post.content %}
+      {% include no-linenos.html content=post.content %}
-      {% include no-linenos.html %}
+      {{ content  | strip_html | truncate: 400 }}
-      {{ content | strip_html | truncate: 200 }}</summary>
+    </summary>
   {% endif %}
 
   </entry>
 {% endfor %}
 </feed>
 {% endcapture %}
-{{ source | replace: '&', '&amp;' }}
+{{ source | replace: '&', '&amp;' }}

index.html

@@ -1,12 +1,9 @@
 ---
 layout: home
-breadcrumb:
-  -
-    label: Posts
 
 # Index page
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2017-2019 Cotes Chung
 # MIT License
----
+---

sitemap.xml

@@ -1,91 +0,0 @@
----
-layout: compress
-
-# The Sitemap template
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
----
-
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-
-{% for post in site.posts %}
-  <url>
-    <loc>{{ site.url | append: site.baseurl | append: post.url }}</loc>
-    <lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
-
-    {% if post.sitemap.changefreq %}
-      <changefreq>{{ post.sitemap.changefreq }}</changefreq>
-    {% else %}
-      <changefreq>monthly</changefreq>
-    {% endif %}
-
-    {% if post.sitemap.priority %}
-      <priority>{{ post.sitemap.priority }}</priority>
-    {% else %}
-      <priority>0.5</priority>
-    {% endif %}
-  </url>
-{% endfor %}
-
-{% for page in site.pages %}
-
-  {% assign pass = false %}
-
-  {% for fuzzy in site.sitemap_exclude.fuzzy %}
-    {% if page.url contains fuzzy %}
-      {% assign pass = true %}
-      {% break %}
-    {% endif %}
-  {% endfor %}
-
-  {% unless pass %}
-    {% for accurate in site.sitemap_exclude.accurate %}
-      {% assign len = accurate | size %}
-      {% capture beg %}{{ 0 | minus: len }}{% endcapture %}
-      {% capture tail %}{{ page.url | slice: beg, len }}{% endcapture %}
-
-      {% if tail == accurate %}
-        {% assign pass = true %}
-        {% break %}
-      {% endif %}
-
-    {% endfor %}
-  {% endunless %}
-
-  {% if pass %}
-    {% continue %}
-  {% endif %}
-
-  {% capture lastmod %}
-    {% if page.lastmod %}
-      {{ page.lastmod }}
-    {% elsif page.date %}
-      {{ page.date }}
-    {% else %}
-      {{ site.time }}
-    {% endif %}
-  {% endcapture %}
-
-   <url>
-    <loc>{{ site.url | append: site.baseurl | append: page.url | remove: "index.html" }}</loc>
-    <lastmod>{{ lastmod | date_to_xmlschema }}</lastmod>
-
-    {% if page.sitemap.changefreq %}
-      <changefreq>{{ page.sitemap.changefreq }}</changefreq>
-    {% else %}
-      <changefreq>monthly</changefreq>
-    {% endif %}
-
-    {% if page.sitemap.priority %}
-      <priority>{{ page.sitemap.priority }}</priority>
-    {% else %}
-      <priority>0.3</priority>
-    {% endif %}
-  </url>
-
-{% endfor %}
-
-</urlset>

sw.js

@@ -13,8 +13,10 @@ var cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
 
 
 function isExcluded(url) {
+  const regex = /(^http(s)?|^\/)/; /* the regex for CORS url or relative url */
   for (const rule of exclude) {
-    if (url.indexOf(rule) != -1) {
+    if (!regex.test(url) ||
+      url.indexOf(rule) != -1) {
       return true;
     }
   }

tabs/tags.md

@@ -1,29 +0,0 @@
----
-title: Tags
-type: tags
-# All the Tags of posts.
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
----
-
-{% comment %}
-  'site.tags' looks like a Map, e.g. site.tags.MyTag.[ Post0, Post1, ... ]
-  Print the {{ site.tags }} will help you to understand it.
-{% endcomment %}
-<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
-{% assign tags = "" | split: "" %}
-{% for t in site.tags %}
-  {% assign tags = tags | push: t[0] %}
-{% endfor %}
-
-{% assign sorted_tags = tags | sort_natural %}
-
-{% for t in sorted_tags %}
-  <div>
-    <a class="tag" href="{{ site.baseurl }}/tags/{{ t | replace: ' ', '-' | downcase | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
-  </div>
-{% endfor %}
-
-</div>

tools/build.sh

@@ -1,147 +0,0 @@
-#!/bin/bash
-#
-# Build jekyll site and store site files in ./_site
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-WORK_DIR="$(dirname "$(dirname "$(realpath "$0")")")"
-
-CONTAINER="${WORK_DIR}/.container"
-
-dest="${WORK_DIR}/_site"
-
-cmd="JEKYLL_ENV=production bundle exec jekyll b"
-
-docker=false
-
-config=""
-
-_help() {
-  echo "Usage:"
-  echo
-  echo "   bash build.sh [options]"
-  echo
-  echo "Options:"
-  echo "  -b, --baseurl     <URL>                  The site relative url that start with slash, e.g. '/project'"
-  echo "  -h, --help                               Print the help information"
-  echo "  -d, --destination <DIR>                  destination directory (defaults to ./_site)"
-  echo "      --docker                             Build site within docker"
-  echo "      --config      <CONFIG_a[,CONFIG_b]>  Specify config files"
-}
-
-_install_tools() {
-  # docker image `jekyll/jekyll` based on Alpine Linux
-  echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories
-  apk update
-  apk add yq
-}
-
-_init() {
-  cd "$WORK_DIR"
-
-  if [[ -f Gemfile.lock ]]; then
-    rm -f Gemfile.lock
-  fi
-
-  if [[ -d $CONTAINER ]]; then
-    rm -rf "$CONTAINER"
-  fi
-
-  if [[ -d $dest ]]; then
-    bundle exec jekyll clean
-  fi
-
-  local _temp="$(mktemp -d)"
-  cp -r ./* "$_temp"
-  cp -r ./.git "$_temp"
-  mv "$_temp" "$CONTAINER"
-}
-
-_build() {
-  cd "$CONTAINER"
-  echo "$ cd $(pwd)"
-
-  bash "_scripts/sh/create_pages.sh"
-  bash "_scripts/sh/dump_lastmod.sh"
-
-  cmd+=" -d $dest"
-
-  if [[ -n $config ]]; then
-    cmd+=" --config $config"
-  fi
-
-  echo "\$ $cmd"
-  eval "$cmd"
-  echo -e "\nBuild success, the site files have been placed in '${dest}'."
-
-  if [[ -d "${dest}/.git" ]]; then
-    if [[ -n $(git -C "$dest" status -s) ]]; then
-      git -C "$dest" add .
-      git -C "$dest" commit -m "[Automation] Update site files." -q
-      echo -e "\nPlease push the changes of $dest to remote master branch.\n"
-    fi
-  fi
-
-  cd .. && rm -rf "$CONTAINER"
-}
-
-_check_unset() {
-  if [[ -z ${1:+unset} ]]; then
-    _help
-    exit 1
-  fi
-}
-
-main() {
-  while [[ $# -gt 0 ]]; do
-    opt="$1"
-    case $opt in
-      -b | --baseurl)
-        local _baseurl="$2"
-        if [[ -z $_baseurl ]]; then
-          _baseurl='""'
-        fi
-        cmd+=" -b $_baseurl"
-        shift
-        shift
-        ;;
-      -d | --destination)
-        _check_unset "$2"
-        dest="$(realpath "$2")"
-        shift
-        shift
-        ;;
-      --docker)
-        docker=true
-        shift
-        ;;
-      --config)
-        _check_unset "$2"
-        config="$(realpath "$2")"
-        shift
-        shift
-        ;;
-      -h | --help)
-        _help
-        exit 0
-        ;;
-      *) # unknown option
-        _help
-        exit 1
-        ;;
-    esac
-  done
-
-  if $docker; then
-    _install_tools
-  fi
-
-  _init
-  _build
-}
-
-main "$@"

tools/bump-version.sh

@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+#
+# Bump latest version to file `_data/meta.yml`
+#
+# v2.5.1
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2020 Cotes Chung
+# Published under MIT License
+
+set -eu
+
+META_FILE="_data/meta.yml"
+
+bump() {
+  _version_field="version: $1"
+
+  if [[ ! -f $META_FILE ]]; then
+    echo "name: Chirpy" > $META_FILE
+    echo "$_version_field" >> $META_FILE
+    echo "homepage: https://github.com/cotes2020/jekyll-theme-chirpy/" >> $META_FILE
+  else
+    sed -i "s/^version:.*/$_version_field/g" $META_FILE
+  fi
+
+  if [[ -n $(git status $META_FILE -s) ]]; then
+    git add $META_FILE
+    git commit -m "Bump version to $1"
+  fi
+}
+
+_latest_tag="$(git describe --tags --abbrev=0)"
+
+echo "Input a version number (hint: latest version is ${_latest_tag:1})"
+
+read version
+
+if [[ $version =~ ^[[:digit:]]+\.[[:digit:]]+(\.[[:digit:]]+)?$ ]]; then
+
+  if git tag --list | egrep -q "^v$version$"; then
+    echo "Error: version '$version' already exists"
+    exit -1
+  fi
+
+  echo "Bump version to $version"
+  bump "$version"
+
+  echo "Create tag v$version"
+  git tag "v$version"
+
+else
+
+  echo "Error: Illegal version number: '$version'"
+fi

tools/deploy.sh

@@ -15,6 +15,16 @@ _no_branch=false
 _backup_dir="$(mktemp -d)"
 
 init() {
+  if [[ -z ${GITHUB_ACTION+x} ]]; then
+    echo "ERROR: This script is not allowed to run outside of GitHub Action."
+    exit -1
+  fi
+
+  # Gemfile could be changed by `bundle install` in actions workflow
+  if [[ -n $(git status Gemfile.lock --porcelain) ]]; then
+    git checkout -- Gemfile.lock
+  fi
+
   if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
     _no_branch=true
     git checkout -b "$PAGES_BRANCH"

tools/run.sh

@@ -1,188 +1,11 @@
-#!/bin/bash
+#!/usr/bin/env bash
-
-# Run jekyll site at http://127.0.0.1:4000
 #
-# Requirement:
+# Run jekyll serve and then launch the site
-#   Option '-r, --realtime' needs fswatch › http://emcrisostomo.github.io/fswatch/
 #
-# v2.0
+# v2.6.1
 # https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
+# © 2020 Cotes Chung
-# Published under MIT License
+# MIT Licensed
 
-set -eu
+bundle exec jekyll s -H 0.0.0.0 -l
 
-WORK_DIR="$(dirname "$(dirname "$(realpath "$0")")")"
-
-CONTAINER="${WORK_DIR}/.container"
-SYNC_TOOL=_scripts/sh/sync_monitor.sh
-
-cmd="bundle exec jekyll s"
-JEKYLL_DOCKER_HOME="/srv/jekyll"
-
-realtime=false
-docker=false
-
-_help() {
-  echo "Usage:"
-  echo
-  echo "   bash run.sh [options]"
-  echo
-  echo "Options:"
-  echo "     -H, --host    <HOST>    Host to bind to"
-  echo "     -P, --port    <PORT>    Port to listen on"
-  echo "     -b, --baseurl <URL>     The site relative url that start with slash, e.g. '/project'"
-  echo "     -h, --help              Print the help information"
-  echo "     -t, --trace             Show the full backtrace when an error occurs"
-  echo "     -r, --realtime          Make the modified content updated in real time"
-  echo "         --docker            Run within docker"
-}
-
-_cleanup() {
-  rm -rf "$CONTAINER"
-  ps aux | grep fswatch | awk '{print $2}' | xargs kill -9 > /dev/null 2>&1
-}
-
-_setup_docker() {
-  # docker image `jekyll/jekyll` based on Alpine Linux
-  echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories
-  ## CN Apline sources mirror
-  # sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
-  apk update
-  apk add yq
-}
-
-_init() {
-  cd "$WORK_DIR"
-
-  if [[ -f Gemfile.lock ]]; then
-    rm -f Gemfile.lock
-  fi
-
-  if [[ -d $CONTAINER ]]; then
-    rm -rf "$CONTAINER"
-  fi
-
-  mkdir "$CONTAINER"
-  cp -r ./* "$CONTAINER"
-  cp -r ./.git "$CONTAINER"
-
-  if $docker; then
-    local _image_user=$(stat -c "%U" "$JEKYLL_DOCKER_HOME"/.)
-
-    if [[ $_image_user != $(whoami) ]]; then
-      # under Docker for Linux
-      chown -R "$(stat -c "%U:%G" "$JEKYLL_DOCKER_HOME"/.)" "$CONTAINER"
-    fi
-
-  fi
-
-  trap _cleanup INT
-}
-
-_check_unset() {
-  if [[ -z ${1:+unset} ]]; then
-    _help
-    exit 1
-  fi
-}
-
-_check_command() {
-  if [[ -z $(command -v "$1") ]]; then
-    echo "Error: command '$1' not found !"
-    echo "Hint: Get '$1' on <$2>"
-    exit 1
-  fi
-}
-
-_run() {
-  cd "$CONTAINER"
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-
-  if $realtime; then
-
-    exclude_regex="\/\..*"
-
-    if [[ $OSTYPE == "darwin"* ]]; then
-      exclude_regex="/\..*" # darwin gcc treat regex '/' as character '/'
-    fi
-
-    fswatch -e "$exclude_regex" -0 -r \
-      --event Created --event Removed \
-      --event Updated --event Renamed \
-      --event MovedFrom --event MovedTo \
-      "$WORK_DIR" | xargs -0 -I {} bash "./${SYNC_TOOL}" {} "$WORK_DIR" . &
-  fi
-
-  if $docker; then
-    cmd+=" -H 0.0.0.0"
-  else
-    cmd+=" -l -o"
-  fi
-
-  echo "\$ $cmd"
-  eval "$cmd"
-}
-
-main() {
-  if $docker; then
-    _setup_docker
-  fi
-
-  _init
-  _run
-}
-
-while (($#)); do
-  opt="$1"
-  case $opt in
-    -H | --host)
-      _check_unset "$2"
-      cmd+=" -H $2"
-      shift # past argument
-      shift # past value
-      ;;
-    -P | --port)
-      _check_unset "$2"
-      cmd+=" -P $2"
-      shift
-      shift
-      ;;
-    -b | --baseurl)
-      _check_unset "$2"
-      if [[ $2 == \/* ]]; then
-        cmd+=" -b $2"
-      else
-        _help
-        exit 1
-      fi
-      shift
-      shift
-      ;;
-    -t | --trace)
-      cmd+=" -t"
-      shift
-      ;;
-    -r | --realtime)
-      _check_command fswatch "http://emcrisostomo.github.io/fswatch/"
-      realtime=true
-      shift
-      ;;
-    --docker)
-      docker=true
-      shift
-      ;;
-    -h | --help)
-      _help
-      exit 0
-      ;;
-    *)
-      # unknown option
-      _help
-      exit 1
-      ;;
-  esac
-done
-
-main

tools/test.sh

@@ -14,11 +14,57 @@
 DEST=_site
 URL_IGNORE=cdn.jsdelivr.net
 
+_build=false
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash ./tools/test.sh [options]"
+  echo
+  echo "Options:"
+  echo "     --build                  Run Jekyll build before test."
+  echo "     -d, --dir   <path>       Specify the test path."
+  echo "     -h, --help               Print this information."
+}
+
 if [[ -n $1 && -d $1 ]]; then
   DEST=$1
 fi
 
-bundle exec htmlproofer $DEST \
+while (($#)); do
+  opt="$1"
+  case $opt in
+    --build)
+      _build=true
+      shift
+      ;;
+    -d | --dir)
+      if [[ ! -d $2 ]]; then
+        echo -e "Error: path '$2' doesn't exist\n"
+        help
+        exit 1
+      fi
+      DEST=$2
+      shift
+      shift
+      ;;
+    -h | --help)
+      help
+      exit 0
+      ;;
+    *)
+      # unknown option
+      help
+      exit 1
+      ;;
+  esac
+done
+
+if $_build; then
+  JEKYLL_ENV=production bundle exec jekyll b
+fi
+
+bundle exec htmlproofer "$DEST" \
   --disable-external \
   --check-html \
   --empty_alt_ignore \