Bump version to 4.3.0

Reduce the probability of users using `baseurl` incorrectly

.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/FUNDING.yml

@@ -1 +1,3 @@
-custom: ['https://www.buymeacoffee.com/coteschung', 'https://cotes.gitee.io/alipay-wechat-donation']
+custom:
+  - https://www.buymeacoffee.com/coteschung
+  - https://cotes.gitee.io/alipay-wechat-donation

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,6 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-labels: bug
 ---
 
 <!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
@@ -37,6 +36,7 @@ Steps to reproduce the behavior:
 - Gem version: <!-- by running: `gem -v`-->
 - Bundler version: <!-- by running: `bundle -v`-->
 - Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
+- Theme version: <!-- by running: `gem list | grep jekyll-theme-chirpy` -->
 
 ### Desktop
 <!-- If necessary, uncomment and fill in the following list:

.github/ISSUE_TEMPLATE/question.md

@@ -16,4 +16,4 @@ labels: question
 - [ ] My question is based on the latest code of `master` branch.
 
 ## Description
-<!-- Please describe your question in detial. -->
+<!-- Please describe your question in detail. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,9 +2,9 @@
 
 <!-- 
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
--->
 
 e.g. Fixes #(issue)
+-->
 
 ## Type of change
 
@@ -22,12 +22,12 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->
 
-- [ ] I have run `bash ./tools/test.sh --build` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/deploy.sh --dry-run` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser
 
 ### Test Configuration
 
-- Browerser type & version:
+- Browser type & version:
 - Operating system:
 - Bundler version:
 - Ruby version:

.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,9 +24,6 @@ jobs:
       matrix:
         os: [ubuntu-latest, macos-latest]
 
-    env:
-      GEMS_PATH: ~/vendor/bundle
-
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -34,29 +31,10 @@ jobs:
           fetch-depth: 0  # for posts's lastmod
 
       - name: Setup Ruby
-        uses: actions/setup-ruby@v1
+        uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 2.6.x
-
-      - name: Bundle Caching
-        uses: actions/cache@v2
-        with:
-          path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
-
-      - name: Bundle Install
-        run: |
-          bundle config path ${{ env.GEMS_PATH }}
-          bundle install --jobs 4 --retry 3
-
-      - name: Build Site
-        env:
-          JEKYLL_ENV: production
-        run: |
-          bundle exec jekyll b
+          ruby-version: 2.7
+          bundler-cache: true
 
       - name: Test Site
-        run: |
-          bash tools/test.sh
+        run: bash tools/deploy.sh --dry-run

.github/workflows/issue-interceptor.yml

@@ -0,0 +1,18 @@
+name: Intercept bad issues
+
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  auto_close_issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Auto close issues that did not follow template
+        uses: lucasbento/auto-close-issues@v1.0.2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-close-message: ":wave: Hi @${issue.user.login},\n\nThis issue is being automatically closed because it does not follow the issue template. Please DO NOT open another similar issue, try to edit the current issue according to the template, then it will be reopened automatically."
+          closed-issues-label: "🙁 Not following issue template"

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

@@ -1,16 +0,0 @@
-name: "Intercept bad issue/PRs"
-
-on: [issues, pull_request]
-
-jobs:
-  autoclose:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Autoclose issues that did not follow issue template
-      uses: roots/issue-closer@v1.1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        issue-pattern: "\\[x\\] I have read"
-        issue-close-message: "Hi @${issue.user.login} :wave:,\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: "Hi @${pull_request.user.login} :wave:,\n\nThis PR is being automatically closed because it does not follow the PR template."

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

@@ -13,9 +13,6 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    env:
-      GEMS_PATH: ~/vendor/bundle
-
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -23,49 +20,10 @@ jobs:
           fetch-depth: 0  # for posts's lastmod
 
       - name: Setup Ruby
-        uses: actions/setup-ruby@v1
+        uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 2.6.x
+          ruby-version: 2.7
+          bundler-cache: true
 
-      - name: Bundle Caching
-        uses: actions/cache@v2
-        with:
-          path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
-
-      - name: Bundle Install
-        run: |
-          bundle config path ${{ env.GEMS_PATH }}
-          bundle install --jobs 4 --retry 3
-
-      - name: Check baseurl
-        run: |
-          baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
-          if [[ -n $baseurl ]]; then
-            echo "SPEC_TEST=_site_no_baseurl" >> $GITHUB_ENV
-          fi
-
-      - name: Build Site
-        env:
-          JEKYLL_ENV: production
-        run: |
-          bundle exec jekyll b
-
-          if [[ -n $SPEC_TEST ]]; then
-            # Bypass the defects of htmlproofer
-            bundle exec jekyll b -b "" -d "$SPEC_TEST"
-          fi
-
-      - name: Test Site
-        run: |
-          if [[ -n $SPEC_TEST ]]; then
-            bash tools/test.sh -d "$SPEC_TEST"
-          else
-            bash tools/test.sh
-          fi
-          
       - name: Deploy
-        run: |
-          bash tools/deploy.sh
+        run: bash tools/deploy.sh

.gitignore

@@ -1,8 +1,18 @@
 # hidden files
 .*
-!.github
+!.git*
+!.editorconfig
+!.nojekyll
+!.travis.yml
 
-# jekyll cache 
+# bundler cache
 _site
-Gemfile.lock
 vendor
+Gemfile.lock
+
+# rubygem
+*.gem
+
+# npm dependencies
+node_modules
+package-lock.json

.travis.yml

@@ -1,33 +1,40 @@
 os: linux
 dist: bionic
 
-language: ruby
-rvm: 2.6.5
+language: minimal
 
-before_install:
-  - bundle config path 'vendor/bundle'
+if: tag =~ /^v(\d)+(\.(\d)+){2}$/
 
-install:
-  - bundle install --quiet
+jobs:
+  include:
+    - name: Deploy
+      language: ruby
+      rvm: 2.7.0
+      addons:
+        apt:
+          packages:
+            # required to avoid SSL error (for htmlproofer)
+            - libcurl4-openssl-dev
+      cache:
+        directories:
+          - $TRAVIS_BUILD_DIR/vendor/bundle
+      before_install:
+        # match the Gemfile.lock, travis' bundler is 2.1.2
+        - gem install bundler:2.2.4
+        - bundle config path 'vendor/bundle'
+      install:
+        # overriding to drop the travis `--development` flag
+        - bundle install --jobs=3 --retry=3
+      script:
+        - eval "$BUILD_CMD"
+      git:
+        depth: false # for posts' lastmod
 
-addons:
-  apt:
-    packages:
-      - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+    - name: Flush Starter
+      script: eval "$FLUSH_STARTER"
 
-script:
+before_script:
   - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
-  - eval "$BUILD_CMD"
-
-branches:
-  only: production
-
-git:
-  depth: false # for posts lastmod
-
-cache:
-  directories:
-    - $TRAVIS_BUILD_DIR/vendor/bundle
 
 notifications:
   email:

404.html

@@ -1,25 +0,0 @@
----
-# The 404 page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
-layout: page
-title: "404: Page not found"
-permalink: /404.html
-
-redirect_from:  # part of site.sitemap_exclude
-  - /norobots/
-  - /assets/
-  - /tabs/
-  - /categories/
-  - /tags/
-  - /posts/
-
-dynamic_title: true
----
-
-<div class="lead">
-  <p>Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. </p>
-  <p><a href="{{ site.baseurl }}/">Head back Home</a> to try finding it again, or search for it on the <a href="{{ site.baseurl }}/tabs/archives">Archives page</a>.</p>
-</div>

Gemfile

@@ -1,18 +1,11 @@
+# frozen_string_literal: true
+
 source "https://rubygems.org"
 
-gem "jekyll", ">= 3.8.6", "< 5.0"
-
-# plugins
-group :jekyll_plugins do
-  gem "jekyll-paginate"
-  gem "jekyll-redirect-from"
-  gem "jekyll-seo-tag", "~> 2.6.1"
-  gem "jekyll-archives"
-  gem "jekyll-sitemap"
-end
+gemspec
 
 group :test do
-  gem "html-proofer", "~> 3.16.0"
+  gem "html-proofer", "~> 3.18"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -24,3 +17,6 @@ end
 
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+
+# Jekyll <= 4.2.0 compatibility with Ruby 3.0
+gem "webrick", "~> 1.7"

README.md

@@ -1,155 +1,181 @@
-# Chirpy
+<div align="right">
 
-Language: English | [简体中文](docs/README_zh-CN.md)
+  EN /
+  [中文(简体)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/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)
+</div>
 
-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)
+<div align="center">
 
-[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
+  # Chirpy Jekyll Theme
 
-## Table of Contents
+  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
+  [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+  [![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)
 
-- [Features](#features)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Contributing](#contributing)
-- [Credits](#credits)
-- [Supporting](#supporting)
-- [License](#license)
+  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
+
+  **[Live Demo →](https://chirpy.cotes.info)**
+
+  [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/commons/devices-mockup.png)](https://chirpy.cotes.info)
+
+</div>
 
 ## Features
 
+- Localized Layout
+- Configurable Theme Mode
 - Pinned Posts
-- Configurable theme mode
-- Double-level Categories
-- Last modified date for posts
+- Hierarchical Categories
+- Last Modified Date for Posts
 - Table of Contents
-- Automatically recommend related posts
-- Syntax highlighting
-- Mathematical expressions
+- Automatically Recommend Related Posts
+- Syntax Highlighting
+- Mathematical Expressions
+- Mermaid Diagram & Flowchart
 - Search
 - Atom Feeds
 - Disqus Comments
 - Google Analytics
-- GA Pageviews reporting (Advanced)
-- SEO and Performance Optimization
+- GA Pageviews Reporting (Advanced)
+- SEO & Performance Optimization
+
+## Prerequisites
+
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
 
 ## Installation
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, rename the repository to `USERNAME.github.io` (where `USERNAME` is your GitHub username), and then open terminal and clone the fork to local by:
+### Creating a New Site
 
-```terminal
-$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
-```
+There are two ways to create a new repository for this theme:
 
-### Setting up the local envrionment
+- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
 
-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`.
+- **[Forking on GitHub](#option-2-forking-on-github)** - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
 
-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:
+#### Option 1. Using the Chirpy Starter
 
-```terminal
-$ bundle install
-```
+Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
 
-`bundle` will automatically install all the dependencies specified by `Gemfile`.
+#### Option 2. Forking on GitHub
 
-### Setting up Docker environment (optional)
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and rename it to `<GH_USERNAME>.github.io`. Please note that the default branch code is in development.  If you want the site to be stable, please switch to the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags) and start writing.
 
-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
-```
-
-## Usage
-
-### Initialization
-
-Go to the root directory of the project and start initialization:
+And then execute:
 
 ```console
 $ bash tools/init.sh
 ```
 
-> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
 
-What it does is:
-
-1. Remove some files or directories from your repository:
+The above command will:
 
+1. Removes some files or directories from your repository:
     - `.travis.yml`
     - 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 the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
 
-3. Automatically create a commit to save the changes.
+3. Removes item `Gemfile.lock` from `.gitignore`.
+
+4. Creates a new commit to save the changes automatically.
+
+### Installing Dependencies
+
+Before running for the first time, go the root directory of your site, and install dependencies as follows:
+
+```console
+$ bundle
+```
+
+## Usage
 
 ### Configuration
 
-Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
+Update the variables of `_config.yml` as needed. Some of them are typical options:
 
 - `url`
 - `avatar`
 - `timezone`
-- `theme_mode`
+- `lang`
 
-### Run Locally
+### Customing Stylesheet
+
+If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+
+Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
+
+### Running Local Server
 
 You may want to preview the site contents before publishing, so just run it by:
 
-```terminal
+```console
 $ bundle exec jekyll s
 ```
 
-Then open a browser and visit to <http://localhost:4000>.
+Or run the site on Docker with the following command:
 
-### Run on Docker
-
-Run the site on Docker with the following command:
-
-```terminal
+```console
 $ docker run -it --rm \
     --volume="$PWD:/srv/jekyll" \
     -p 4000:4000 jekyll/jekyll \
     jekyll serve
 ```
 
+After a while, the local service will be published at _<http://127.0.0.1:4000>_.
+
 ### 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`.
+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, e.g, `/project-name`.
 
-Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
+Now you can choose ONE of the following methods to deploy your Jekyll site.
 
-#### Deploy on GitHub Pages
+#### Deploy by Using Github Actions
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the 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 GitHub 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.
+Quickly check the files needed for GitHub Actions build:
 
-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)
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+
+- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
+
+- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lockfile:
+
+  ```console
+  $ bundle lock --add-platform x86_64-linux
+  ```
+
+After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
+
+Now publish your Jekyll site by:
+
+1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
+
+2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
+
+    ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5/posts/20190809/gh-pages-sources.png)
 
 3. Visit your website at the address indicated by GitHub.
 
-#### Deploy on Other Platforms
+#### Manually Build and Deploy
 
-On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
+On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
 
-Go to the root of the source project, build your site by:
+Go to the root of the source project, and build your site as follows:
 
 ```console
 $ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-Or, build the site with Docker by:
+Or build the site on Docker:
 
-```terminal
+```console
 $ docker run -it --rm \
     --env JEKYLL_ENV=production \
     --volume="$PWD:/srv/jekyll" \
@@ -157,11 +183,32 @@ $ docker run -it --rm \
     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.
+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 the target server.
 
-### Documentation
+### Upgrading
 
-For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
+It depends on how you use the theme:
+
+- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the them gem, for example:
+    ```diff
+    - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
+    + gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
+    ```
+
+    And then execute the following command:
+
+    ```console
+    $ bundle update jekyll-theme-chirpy
+    ```
+
+    As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
+
+- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
+The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
+
+## Documentation
+
+For more details and a better reading experience, please check out the [tutorials on the demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Please note that the tutorials on the demo website or Wiki are based on the latest release, and the features of `master` branch usually ahead of the documentation.
 
 ## Contributing
 
@@ -169,14 +216,32 @@ The old saying, "Two heads are better than one." Consequently, welcome to report
 
 ## Credits
 
-This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files). The avatar and favicon design comes from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
 
-: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.
+: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.
 
-## Supporting
+Last but not least, thank [JetBrains][jb] for providing the open source license.
 
-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.
+## Sponsoring
+
+If you like this theme or find it helpful, please consider sponsoring me, because it will encourage and help me better maintain the project, I will be very grateful!
+
+[![Buy Me a Coffee](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff813f?logo=buy-me-a-coffee&logoColor=white)](https://www.buymeacoffee.com/coteschung)
+[![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][cn-donation]
+[![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][cn-donation]
 
 ## License
 
 This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
+[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
+[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
+
+<!-- ReadMe links -->
+
+[jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/

_config.yml

@@ -1,28 +1,35 @@
-# The Site Settings
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT licensed
+# The Site Configuration
 
+# Import the theme
+theme: jekyll-theme-chirpy
+
+# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
+# and doesn't have a custom domain.
+baseurl: ''
+
+# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
+# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
+# otherwise, the layout language will use the default value of 'en'.
+lang: en
+
+# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+timezone: Asia/Shanghai
 
 # 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
+tagline: A text-focused Jekyll theme   # it will display as the sub-title
 
 description: >-                        # used by seo meta and the atom feed
   A minimal, portfolio, sidebar,
   bootstrap Jekyll theme with responsive web design
   and focuses on text presentation.
 
-# fill in the base hostname & protocol for your site, e.g., 'https://username.github.io'
+# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
 url: ''
 
-author: your_full_name                  # change to your full name
-
-avatar: /assets/img/sample/avatar.jpg   # support internet resources
-
 github:
   username: github_username             # change to your github username
 
@@ -30,7 +37,9 @@ twitter:
   username: twitter_username            # change to your twitter username
 
 social:
-  name: your_full_name                  # it will shows as the copyright owner in Footer
+  # Change to your full name.
+  # It will be displayed as the default author of the posts and the copyright owner in the Footer
+  name: your_full_name
   email: example@doamin.com             # change to your email address
   links:
     # The first element serves as the copyright owner's link
@@ -41,57 +50,55 @@ 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,
-# change below value to '/projectname'.
-baseurl: ''
-
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
-timezone: Asia/Shanghai
 
 google_analytics:
-  id: ''          # Fill with your Google Analytics ID
+  id: ''              # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
   pv:
-    # The Google Analytics pageviews switch.
-    # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-    enabled: false
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: ''
-    proxy_endpoint: ''
-    cache: false  # pv data local cache, good for the users from GFW area.
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
+
+# Prefer color scheme setting.
+#
+# Note: Keep empty will follow the system prefer color by default,
+# 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:   # [light|dark]
+
+# The CDN endpoint for images.
+# Notice that once it is assigned, the CDN url
+# will be added to all image (site avatar & posts' images) paths starting with '/'
+#
+# e.g. 'https://cdn.com'
+img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@0a003683c0c3ca549d12c309f9b3e03ea20981e5'
+
+# the avatar on sidebar, support local or CORS resources
+avatar: '/commons/avatar.jpg'
+
+# boolean type, the global switch for ToC in posts.
+toc: true
 
 disqus:
   comments: false  # boolean type, the global switch for posts comments.
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
-
-# Prefer color scheme setting, available values:
-#
-#     dual   - Follow the system prefer color by default, and a toggle will display
-#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
-#
-#     light  - Use the light color scheme
-#
-#     dark   - Use the dark color scheme
-#
-theme_mode: dual
-
-# boolean type, the global switch for ToC in posts.
-toc: true
-
 paginate: 10
 
-markdown: kramdown
-
-highlighter: rouge
+# ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
-    css_class: 'highlight'
+  syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
+    css_class: highlight
     # default_lang: console
     span:
       line_numbers: false
@@ -99,10 +106,6 @@ kramdown:
       line_numbers: true
       start_line: 1
 
-# DO NOT change this unless you're a Pro user on Jekyll and Web development,
-# or you think you're smart enough to change other relevant URLs within this template.
-permalink: /posts/:title/
-
 collections:
   tabs:
     output: true
@@ -118,58 +121,24 @@ defaults:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      breadcrumb:
-        -
-          label: Posts
-          url: /
+      # DO NOT modify the following parameter unless you are confident enough
+      # to update the code of all other post links in this project.
+      permalink: /posts/:title/
   -
     scope:
       path: _drafts
     values:
       comments: false
-  -
-    scope:
-      path: index.html
-    values:
-      breadcrumb:
-        -
-          label: Posts
-  -
-    scope:
-      path: tags
-    values:
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Tags
-          url: /tabs/tags/
-  -
-    scope:
-      path: categories
-    values:
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Categories
-          url: /tabs/categories/
   -
     scope:
       path: ''
       type: tabs             # see `site.collections`
     values:
       layout: page
+      permalink: /:title/
       dynamic_title: true    # Hide title in mobile screens.
-      breadcrumb:
-        -
-          label: Home
-          url: /
 
 sass:
-  sass_dir: /assets/css
   style: compressed
 
 compress_html:
@@ -179,16 +148,18 @@ compress_html:
   profile: false
   blanklines: false
   ignore:
-    envs: []
+    envs: [development]
 
 exclude:
-  - vendor
-  - Gemfile.lock
-  - Gemfile
+  - '*.gem'
+  - '*.gemspec'
   - tools
   - docs
   - README.md
   - LICENSE
+  - gulpfile.js
+  - node_modules
+  - '*.json'
 
 jekyll-archives:
   enabled: [categories, tags]
@@ -196,5 +167,5 @@ jekyll-archives:
     category: category
     tag: tag
   permalinks:
-    tag: '/tags/:name/'
-    category: '/categories/:name/'
+    tag: /tags/:name/
+    category: /categories/:name/

_data/contact.yml

@@ -1,12 +1,8 @@
 #  The contact options.
-#  v2.3
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
 
 -
   type: github
-  icon: 'fab fa-github-alt'
+  icon: 'fab fa-github'
 -
   type: twitter
   icon: 'fab fa-twitter'

_data/date_format.yml

@@ -1,11 +0,0 @@
-#  The date format
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-
-tooltip: "%a, %b %e, %Y, %l:%M %p %z"
-post:
-  long: "%b %e, %Y"
-  short: "%b %e"

_data/label.yml

@@ -1,19 +0,0 @@
-# The label text of site.
-#  v2.0
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
-
-
-panel:
-  lastmod: "Recent Update"
-  trending_tags: "Trending Tags"
-  toc: "Contents"
-
-post:
-  relate_posts: "Further Reading"
-  button:
-    next: Newer
-    previous: Older
-
-search_hint: "Search"   # text show on search bar

_data/locales/en.yml

@@ -0,0 +1,90 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Category
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Home
+  categories: Categories
+  tags: Tags
+  archives: Archives
+  about: About
+
+# the text displayed in the search bar & search results
+search:
+  hint: search
+  cancel: Cancel
+  no_results: Oops! No result founds.
+
+panel:
+  lastmod: Recent Update
+  trending_tags: Trending Tags
+  toc: Contents
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
+  post:
+    long: '%b %e, %Y'
+    short: '%b %e'
+    archive_month: '%b'
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: This post is licensed under :LICENSE_NAME by the author.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Some rights reserved.
+  verbose: >-
+    Except where otherwise noted, the blog posts on this site are licensed
+    under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+  hint_template: :HEAD_BAK to try finding it again, or search for it on the :ARCHIVES_PAGE.
+  head_back: Head back Home
+  archives_page: Archives page
+
+# ----- Posts related labels -----
+
+post:
+  published: 'on'
+  updated: Updated
+  timeago:
+    day: days ago
+    hour: hours ago
+    minute: minutes ago
+    just_now: just now
+  words: words
+  pageview_measure: views
+  read_time:
+    unit: min
+    prompt: read
+  relate_posts: Further Reading
+  share: Share
+  button:
+    next: Newer
+    previous: Older
+    copy_code:
+      succeed: Copied!
+    share_link:
+      title: Copy link
+      succeed: Link copied successfully!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Pinned
+
+# categories page
+categories:
+  category_measure: categories
+  post_measure: posts

_data/locales/id-ID.yml

@@ -0,0 +1,90 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Postingan
+  category: Kategori
+  tag: Tagar
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Beranda
+  categories: Kategori
+  tags: Tagar
+  archives: Arsip
+  about: Tentang
+
+# the text displayed in the search bar & search results
+search:
+  hint: Cari
+  cancel: Batal
+  no_results: Ups! Tidak ada hasil yang ditemukan.
+
+panel:
+  lastmod: Postingan Terbaru
+  trending_tags: Tagar Terpopuler
+  toc: Konten
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: "%a, %e %b, %Y, %l:%M %p"
+  post:
+    long: "%e %b, %Y"
+    short: "%e %b"
+    archive_month: "%b"
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Postingan ini dilisensikan di bawah :LICENSE_NAME oleh penulis.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Sebagian konten dilindungi.
+  verbose: >-
+    Kecuali jika dinyatakan, Postingan blog di situs ini dilisensikan
+    di bawah Lisensi Creative Commons Attribution 4.0 International (CC BY 4.0) oleh penulis.
+
+meta: Didukung oleh :PLATFORM dengan tema :THEME.
+
+not_found:
+  statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
+  hint_template: :HEAD_BAK untuk mencoba mencari kembali, atau cari di :ARCHIVES_PAGE.
+  head_back: Kembali ke Beranda
+  archives_page: Halaman Arsip
+
+# ----- Posts related labels -----
+
+post:
+  published: "pada"
+  updated: Diperbarui
+  timeago:
+    day: hari yang lalu
+    hour: jam yang lalu
+    minute: menit yang lalu
+    just_now: baru saja
+  words: kata
+  pageview_measure: dilihat
+  read_time:
+    unit: menit
+    prompt: baca
+  relate_posts: Postingan Lainya
+  share: Bagikan
+  button:
+    next: Terbaru
+    previous: Terlama
+    copy_code:
+      succeed: Disalin!
+    share_link:
+      title: Salin tautan
+      succeed: Tautan berhasil disalin!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Disematkan
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: Postingan

_data/locales/zh-CN.yml

@@ -0,0 +1,89 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 文章
+  category: 分类
+  tag: 标签
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 首页
+  categories: 分类
+  tags: 标签
+  archives: 归档
+  about: 关于
+
+# the text displayed in the search bar & search results
+search:
+  hint: 搜索
+  cancel: 取消
+  no_results: 搜索结果为空
+
+panel:
+  lastmod: 最近更新
+  trending_tags: 热门标签
+  toc: 文章内容
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: '%F, %R %z'
+  post:
+    long: '%F'
+    short: '%m-%d'
+    archive_month: '%m月'
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 本文由作者按照 :LICENSE_NAME 进行授权
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 保留部分权利。
+  verbose: >-
+    除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。
+
+meta: 本站由 :PLATFORM 生成，采用 :THEME 主题。
+
+not_found:
+  statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
+  hint_template: :HEAD_BAK尝试再次查找它，或在:ARCHIVES_PAGE上搜索它。
+  head_back: 返回主页
+  archives_page: 归档页面
+
+# ----- Posts related labels -----
+
+post:
+  published: 发表于
+  updated: 更新于
+  timeago:
+    day: 天前
+    hour: 小时前
+    minute: 分钟前
+    just_now: 刚刚
+  words: 字
+  pageview_measure: 次浏览
+  read_time:
+    unit: 分钟
+    prompt: 阅读
+  relate_posts: 相关文章
+  share: 分享
+  button:
+    next: 下一篇
+    previous: 上一篇
+    copy_code:
+      succeed: 已复制！
+    share_link:
+      title:  分享链接
+      succeed: 链接已复制！
+  # pinned prompt of posts list on homepage
+  pin_prompt: 顶置
+
+# categories page
+categories:
+  category_measure: 个分类
+  post_measure: 篇文章

_data/meta.yml

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

_data/rights.yml

@@ -1,17 +0,0 @@
-#  License data.
-#
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-
-license:
-  name: CC BY 4.0
-  link: "https://creativecommons.org/licenses/by/4.0/"
-
-brief: Some rights reserved.
-
-verbose: >-
-  Except where otherwise noted, the blog posts on this site are licensed
-  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.

_data/share.yml

@@ -1,12 +1,5 @@
 #  Sharing options at the bottom of the post.
 #  Icons from <https://fontawesome.com/>
-#
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
-label: "Share"
 
 platforms:
   -

_includes/css-selector.html

@@ -1,55 +1,15 @@
 <!--
   CSS selector for site.
-  Chirpy v2.3
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  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.collection == 'tabs' and page.title != 'About' %}
-
-    {% if page.title == 'Categories' %}
-      <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
-      <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
-   
-    {% elsif page.title == '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.title == 'Archives'%}
-      <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
-      <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
-   
-    {% endif %}
-
-  {% 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 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 %}
+<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
+{% if site.toc and page.toc %}
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
+{% endif %}
+
+{% if page.layout == 'page' or page.layout == 'post' %}
+  <!-- Manific Popup -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
 {% endif %}

_includes/disqus.html

@@ -1,28 +1,54 @@
 <!--
   The Disqus lazy loading.
-  Powered by: https://osvaldas.info/lazy-loading-disqus-comments
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
 -->
 
-<div id="disqus" class="pt-2 pb-2">
-  <p class="font-italic text-center text-muted small">
+<div id="disqus_thread" class="pt-2 pb-2">
+  <p class="text-center text-muted small">
     Comments powered by <a href="https://disqus.com/">Disqus</a>.
   </p>
 </div>
 
-<script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>
-<script>
-  var options = {
-    scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',
-
-    disqusConfig: function() {
-      this.page.url = '{{ site.url | append: site.baseurl | append: page.url }}';
-      this.page.identifier = '{{ page.url }}';
-    }
+<script type="text/javascript">
+  var disqus_config = function () {
+    this.page.url = '{{ page.url | absolute_url }}';
+    this.page.identifier = '{{ page.url }}';
   };
 
-  $.disqusLoader('#disqus', options);
-</script>
+  /* Lazy loading */
+
+  var disqus_observer = new IntersectionObserver(function (entries) {
+    if(entries[0].isIntersecting) {
+        (function () {
+            var d = document, s = d.createElement('script');
+            s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+            s.setAttribute('data-timestamp', +new Date());
+            (d.head || d.body).appendChild(s);
+        })();
+
+        disqus_observer.disconnect();
+    }
+  }, { threshold: [0] });
+
+  disqus_observer.observe(document.querySelector('#disqus_thread'));
+
+  /* Auto switch theme */
+
+  function reloadDisqus() {
+    /* Disqus hasn't been loaded */
+    if (typeof DISQUS === "undefined") {
+      return;
+    }
+
+    if (document.readyState == 'complete') {
+      DISQUS.reset({ reload: true, config: disqus_config });
+    }
+  }
+
+  const modeToggle = document.querySelector(".mode-toggle");
+
+  if (modeToggle !== null) {
+    modeToggle.addEventListener('click', reloadDisqus);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
+  }
+
+</script>

_includes/favicons.html

@@ -1,36 +1,17 @@
 <!--
   The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
-  Generated by: https://www.favicon-generator.org/
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  Published under the MIT license
+  Generated by: https://realfavicongenerator.net/
 -->
 
-{% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %}
+{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
-<link rel="shortcut icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
-<link rel="icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
-
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon.png">
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon-precomposed.png">
-<link rel="apple-touch-icon" sizes="57x57" href="{{ icon_url }}/apple-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="{{ icon_url }}/apple-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="{{ icon_url }}/apple-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="{{ icon_url }}/apple-icon-76x76.png">
-<link rel="apple-touch-icon" sizes="114x114" href="{{ icon_url }}/apple-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="{{ icon_url }}/apple-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="{{ icon_url }}/apple-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="{{ icon_url }}/apple-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ icon_url }}/apple-icon-180x180.png">
-
-<link rel="icon" type="image/png" sizes="192x192"  href="{{ icon_url }}/android-icon-192x192.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ icon_url }}/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="96x96" href="{{ icon_url }}/favicon-96x96.png">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ icon_url }}/favicon-16x16.png">
-
-<link rel="manifest" href="{{ icon_url }}/manifest.json">
-<meta name='msapplication-config' content='{{ icon_url }}/browserconfig.xml'>
-<meta name="msapplication-TileColor" content="#ffffff">
-<meta name="msapplication-TileImage" content="{{ icon_url }}/ms-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
+<link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
+<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
+<meta name="application-name" content="{{ site.title }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
 <meta name="theme-color" content="#ffffff">

_includes/footer.html

@@ -1,9 +1,5 @@
 <!--
   The Footer
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <footer class="d-flex w-100 justify-content-center">
@@ -12,20 +8,28 @@
       <p class="mb-0">
         © {{ 'now' | date: "%Y" }}
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.rights.brief %}
+        {% if site.data.locales[lang].copyright.brief %}
         <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.rights.verbose }}">{{ site.data.rights.brief }}</span>
+          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
         {% endif %}
       </p>
     </div>
 
     <div class="footer-right">
       <p class="mb-0">
-        Powered by
-        <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        with
-        <a href="{{ site.data.meta.homepage }}" target="_blank" rel="noopener">{{ site.data.meta.name }}</a>
-        theme.
+        {% capture _platform %}
+          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+        {% endcapture %}
+
+        {% capture _theme %}
+          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+        {% endcapture %}
+
+        {{ site.data.locales[lang].meta
+          | default: 'Powered by :PLATFORM with :THEME theme.'
+          | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
+        }}
+
       </p>
     </div>
 

_includes/google-analytics.html

@@ -1,16 +1,14 @@
 <!--
   The GA snippet
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  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 || [];
-  function gtag(){dataLayer.push(arguments);}
-  
-  gtag('js', new Date());
-  gtag('config', '{{ site.google_analytics.id }}');
+  document.addEventListener("DOMContentLoaded", function(event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics.id }}');
+  });
 </script>

_includes/head.html

@@ -1,15 +1,28 @@
 <!--
   The Head
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <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 }}">
+
+  {% if page.layout == 'home' or page.layout == 'post' %}
+
+    <!-- i18n for `_javascript/utils/timeago.js` -->
+    <meta name="day-prompt" content="{{ site.data.locales[lang].post.timeago.day }}">
+    <meta name="hour-prompt" content="{{ site.data.locales[lang].post.timeago.hour }}">
+    <meta name="minute-prompt" content="{{ site.data.locales[lang].post.timeago.minute }}">
+    <meta name="justnow-prompt" content="{{ site.data.locales[lang].post.timeago.just_now }}">
+
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
+    {% endif %}
+
+    {% if site.google_analytics.pv.cache_path %}
+      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
+    {% endif %}
+
+  {% endif %}
 
   {% seo title=false %}
 
@@ -34,36 +47,29 @@
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled %}
-      <link rel="preconnect" href="{{ site.google_analytics.pv.proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.pv.proxy_url }}">
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
+        | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+
+      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
+      <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
   {% endif %}
 
   <!-- jsDelivr CDN -->
-  <link rel="preconnect" href="cdn.jsdelivr.net">
-  <link rel="dns-prefetch" href="cdn.jsdelivr.net">
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-  <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">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
-    integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
-    crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css">
 
   {% include css-selector.html %}
 
-  <!-- JavaScripts -->
+  <!-- JavaScript -->
 
   <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script async
-    src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
-
-  {% include js-selector.html %}
-
 </head>

_includes/js-selector.html

@@ -1,41 +1,68 @@
 <!--
   JS selector for site.
-  Chirpy v2.3
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
+<!-- layout specified -->
 
-  <script async src="{{ '/assets/js/home.min.js' | relative_url }}"></script>
-
-{% elsif page.layout == 'post' %}
-
-  <script async src="{{ '/assets/js/post.min.js' | relative_url }}"></script>
-
-  {% if page.math %}
-    <!-- MathJax -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+{% if page.layout == 'home' or page.layout == 'post' %}
+  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+    <!-- pv-report needs countup.js -->
+    <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
+    <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
-
-{% elsif page.layout == 'page' %}
-
-  {% if page.title == 'Categories' and page.collection == 'tabs' %}
-    <script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script>
-  {% else %}
-    <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
-  {% endif %}
-
-{% else %}
-
-  <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
-
 {% endif %}
 
+{% if page.layout == 'post' or page.layout == 'page' %}
+  <!-- image lazy-loading & popup -->
+  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
+{% endif %}
+
+{% if page.layout == 'home'
+    or page.layout == 'categories'
+    or page.layout == 'post'
+    or page.layout == 'page' %}
+  {% assign type = page.layout %}
+{% else %}
+  {% assign type = "commons" %}
+{% endif %}
+
+{% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
+<script defer src="{{ js | relative_url }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script>
+  /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
+  MathJax = {
+    tex: {
+      inlineMath: [              /* start/end delimiter pairs for in-line math */
+        ['$','$'],
+        ['\\(','\\)']
+      ],
+      displayMath: [             /* start/end delimiter pairs for display math */
+        ['$$', '$$'],
+        ['\\[', '\\]']
+      ]
+    }
+  };
+  </script>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script type="text/javascript" id="MathJax-script" async
+    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+  </script>
+{% endif %}
+
+<!-- commons -->
+
+<script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.16.1,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
 
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   <script defer src="{{ '/app.js' | relative_url }}"></script>
+
+  <!-- GA -->
+  {% if site.google_analytics.id %}
+    {% include google-analytics.html %}
+  {% endif %}
+
 {% endif %}

_includes/lang.html

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

_includes/language-alias.html

@@ -0,0 +1,72 @@
+{% comment %}
+
+  Convert the alias of the syntax language to the official name
+
+  See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
+
+{% endcomment %}
+
+{% assign _lang = include.language | default: '' %}
+
+{% case _lang %}
+  {% when 'actionscript', 'as', 'as3' %}
+    {{ 'ActionScript' }}
+  {% when 'applescript' %}
+    {{ 'AppleScript' }}
+  {% when 'brightscript', 'bs', 'brs' %}
+    {{ 'BrightScript' }}
+  {% when 'cfscript', 'cfc' %}
+    {{ 'CFScript' }}
+  {% when 'coffeescript', 'coffee', 'coffee-script' %}
+    {{ 'CoffeeScript' }}
+  {% when 'cs', 'csharp' %}
+   {{ 'C#' }}
+  {% when 'erl' %}
+    {{ 'Erlang' }}
+  {% when 'graphql' %}
+   {{ 'GraphQL' }}
+  {% when 'haskell', 'hs' %}
+   {{ 'Haskell' }}
+  {% when 'javascript', 'js' %}
+    {{ 'JavaScript' }}
+  {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
+    {{ 'Makefile' }}
+  {% when 'md', 'mkd' %}
+    {{ 'Markdown' }}
+  {% when 'm' %}
+    {{ 'Matlab' }}
+  {% when 'objective_c', 'objc', 'obj-c', 'obj_c', 'objectivec' %}
+    {{ 'Objective-C' }}
+  {% when 'perl', 'pl' %}
+    {{ 'Perl' }}
+  {% when 'php','php3','php4','php5' %}
+    {{ 'PHP' }}
+  {% when 'plaintext', 'text' %}
+    {{ 'Text' }}
+  {% when 'py' %}
+    {{ 'Python' }}
+  {% when 'rb' %}
+    {{ 'Ruby' }}
+  {% when 'rs','no_run','ignore','should_panic' %}
+    {{ 'Rust' }}
+  {% when 'bash', 'zsh', 'ksh', 'sh' %}
+    {{ 'Shell' }}
+  {% when 'st', 'squeak' %}
+    {{ 'Smalltalk' }}
+  {% when 'tex'%}
+    {{ 'TeX' }}
+  {% when 'latex' %}
+    {{ 'LaTex' }}
+  {% when 'ts', 'typescript' %}
+    {{ 'TypeScript' }}
+  {% when 'vb', 'visualbasic' %}
+    {{ 'Visual Basic' }}
+  {% when 'vue', 'vuejs' %}
+    {{ 'Vue.js' }}
+  {% when 'yml' %}
+    {{ 'YAML' }}
+  {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml' %}
+    {{ _lang | upcase }}
+  {% else %}
+    {{ _lang | capitalize }}
+{% endcase %}

_includes/lozad.html

@@ -1,8 +0,0 @@
-<!-- image lazy load: https://github.com/ApoorvSaxena/lozad.js -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
-
-<script type="text/javascript">
-  const imgs = document.querySelectorAll('#post-wrapper img');
-  const observer = lozad(imgs);
-  observer.observe();
-</script>

_includes/mermaid.html

@@ -0,0 +1,29 @@
+<!--
+  mermaid-js loader
+-->
+
+<script src="https://cdn.jsdelivr.net/npm/mermaid@8/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

@@ -1,14 +1,8 @@
 <!--
   Switch the mode between dark and light.
-
-  v2.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
-<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
+<i class="mode-toggle fas fa-adjust"></i>
 
 <script type="text/javascript">
 
@@ -18,8 +12,8 @@
     static get LIGHT_MODE() { return "light"; }
 
     constructor() {
-      if (this.mode != null) {
-        if (this.mode == ModeToggle.DARK_MODE) {
+      if (this.hasMode) {
+        if (this.isDarkMode) {
           if (!this.isSysDarkPrefer) {
             this.setDark();
           }
@@ -34,8 +28,8 @@
 
       /* always follow the system prefers */
       this.sysDarkPrefers.addListener(function() {
-        if (self.mode != null) {
-          if (self.mode == ModeToggle.DARK_MODE) {
+        if (self.hasMode) {
+          if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
               self.setDark();
             }
@@ -48,6 +42,8 @@
 
           self.clearMode();
         }
+
+        self.updateMermaid();
       });
 
     } /* constructor() */
@@ -80,6 +76,33 @@
 
     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) {
@@ -105,6 +128,8 @@
         }
       }
 
+      this.updateMermaid();
+
     } /* flipMode() */
 
   } /* ModeToggle */
@@ -112,7 +137,9 @@
   let toggle = new ModeToggle();
 
   $(".mode-toggle").click(function() {
+
     toggle.flipMode();
+
   });
 
 </script>

_includes/no-linenos.html

@@ -1,9 +1,5 @@
 {% comment %}
   Remove the line number of the code snippet.
-  v2.2
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  Published under the MIT License
 {% endcomment %}
 
 {% assign content = include.content %}

_includes/no-zero-date.html

@@ -0,0 +1,13 @@
+{% comment %}
+  Remove the zero padding from a month/day string
+{% endcomment %}
+
+{% assign ret = include.date_str %}
+{% assign _first_chat = ret | slice: 0 %}
+
+{% if _first_chat == '0' %}
+  {% assign _last_idx = ret.size | minus: 1 %}
+  {% assign ret = ret | slice: 1, _last_idx %}
+{% endif %}
+
+{{ ret | replace: ' 0', ' ' }}

_includes/panel.html

@@ -1,21 +1,19 @@
 <!--
   The Pannel on right side (Desktop views)
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
+{% include lang.html %}
+
 <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
 
   {% include update-list.html %}
-  
+
   {% if update_list.size > 0 %}
-    
+
     <div id="access-lastmod" class="post">
-      <span>{{- site.data.label.panel.lastmod -}}</span>
+      <span>{{- site.data.locales[lang].panel.lastmod -}}</span>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
@@ -27,19 +25,19 @@
 
       </ul>
     </div> <!-- #access-lastmod -->
-  
+
   {% endif %}
 
   {% include trending-tags.html %}
 
   {% if trending_tags.size > 0 %}
     <div id="access-tags">
-      <span>{{- site.data.label.panel.trending_tags -}}</span>
+      <span>{{- site.data.locales[lang].panel.trending_tags -}}</span>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-      
-      {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+
+      {% for tag_name in trending_tags %}
+        {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
 
       </div>
@@ -47,13 +45,15 @@
   {% endif %}
   </div> <!-- .access -->
 
-  {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <span class="pl-3 pt-2 mb-2">
-      {{- site.data.label.panel.toc -}}
-    </span>
-    <nav id="toc" data-toggle="toc"></nav>
-  </div>
+  {% if include.toc %}
+    <!-- BS-toc.js will be loaded at medium priority -->
+    <script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
+    <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+      <span class="pl-3 pt-2 mb-2">
+      {{- site.data.locales[lang].panel.toc -}}
+      </span>
+      <nav id="toc" data-toggle="toc"></nav>
+    </div>
   {% endif %}
 
 </div> <!-- #panel-wrapper -->

_includes/post-nav.html

@@ -1,31 +1,30 @@
 <!--
   Navigation buttons at the bottom of the post.
-
-  v2.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 -->
 
 <div class="post-navigation d-flex justify-content-between">
   {% if page.previous.url %}
-  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary">
+  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled">
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
     <p>-</p>
   </span>
   {% endif %}
 
   {% if page.next.url %}
-  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
+    prompt="{{ site.data.locales[lang].post.button.next }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
-  <span class="btn btn-outline-primary disabled">
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[lang].post.button.next }}">
     <p>-</p>
   </span>
   {% endif %}
 
-</div>
+</div>

_includes/post-paginator.html

@@ -1,19 +1,15 @@
 <!--
   The paginator for post list on HomgPage.
-
-  v2.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 -->
 
-<ul class="pagination mt-4 mb-0 pl-lg-2">
+<ul class="pagination align-items-center mt-4 mb-0 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}
   {% 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>
@@ -70,12 +66,19 @@
 
   {% endfor %}
 
+  <!-- mobile pagination -->
+  <li class="page-index align-middle">
+    <span>{{ paginator.page }}</span>
+    <span class="text-muted">/ {{ paginator.total_pages }}</span>
+  </li>
+
   <!-- right arrow -->
   {% if paginator.next_page_path %}
     {% assign next_url = paginator.next_page_path | relative_url %}
   {% 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>

_includes/post-sharing.html

@@ -1,17 +1,12 @@
 <!--
  Post sharing snippet
-
- v2.1
- https://github.com/cotes2020/jekyll-theme-chirpy
- © 2019 Cotes Chung
- Published under the MIT License
 -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.share.label }}</span>
+  <span class="share-label text-muted mr-1">{{ site.data.locales[lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
-    {% assign url = page.url | relative_url | prepend: site.url %}
+    {% assign url = page.url | absolute_url %}
 
     {% for share in site.data.share.platforms %}
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
@@ -21,8 +16,11 @@
         </a>
     {% endfor %}
 
-    <i class="fa-fw fas fa-link small" onclick="copyLink()"
-        data-toggle="tooltip" data-placement="top" title="Copy link"></i>
+    <i id="copy-link" class="fa-fw fas fa-link small"
+        data-toggle="tooltip" data-placement="top"
+        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
+    </i>
 
   </span>
 </div>

_includes/read-time.html

@@ -0,0 +1,30 @@
+<!--
+  Calculate the post's reading time, and display the word count in tooltip
+ -->
+
+{% assign words = include.content | strip_html | number_of_words: "auto" %}
+
+<!-- words per minute  -->
+
+{% assign wpm = 180 %}
+{% assign min_time = 1 %}
+
+{% assign read_time = words | divided_by: wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = min_time %}
+{% endunless %}
+
+{% capture read_prompt %}
+  {{- site.data.locales[lang].post.read_time.prompt -}}
+{% endcapture %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom"
+  title="{{ words }} {{ site.data.locales[lang].post.words }}">
+  {{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}
+  {%- if include.prompt -%}
+    {% assign _prompt_words = read_prompt | number_of_words: 'auto' %}
+    {% unless _prompt_words > 1 %}{{" "}}{% endunless %}{{ read_prompt }}
+  {%- endif -%}
+</span>

_includes/refactor-content.html

@@ -5,23 +5,149 @@
 {% 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 | replace: '</table>', '</table></div>' %}
-  {% assign _content = _content | replace: '</table></div></code>', '</table></code>' %}
-{% endif %}
 
+{% if _content contains '<table>' %}
+  {% assign _content = _content
+    | replace: '<table>', '<div class="table-wrapper"><table>'
+    | 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 | replace: '</code></pre></div>', '</code></div>' %}
+  {% assign _content = _content
+    | 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 %}
+
+
+<!-- images -->
+
+{% if _content contains '<img src="' %}
+
+  <!-- add CDN prefix if it exists -->
+
+  {% if site.img_cdn != '' %}
+    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
+  {% else %}
+    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
+  {% endif %}
+
+  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
+
+  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+
+  {% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %}
+
+  <!-- add image placehoder to prevent layout reflow -->
+
+  {% assign _img_content = nil %}
+
+  {% assign _images = _content | split: '<img ' %}
+
+  {% for _img in _images %}
+    {% if forloop.first %}
+      {% assign _img_content = _img %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _attrs = _img | split: '>' | first | split: ' ' %}
+
+    {% for _attr in _attrs %}
+      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
+      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'width' %}
+          {% assign _width = _value %}
+        {% when 'height' %}
+          {% assign _height = _value %}
+      {% endcase %}
+
+      {% if _width and _height %}
+        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
+        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
+        {% break %}
+      {% endif %}
+
+    {% endfor %}
+
+    {% unless _width and _height %}
+      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
+    {% endunless %}
+
+  {% endfor %}
+
+  {% assign _content = _img_content %}
+
+{% endif %}
+
+<!-- Add header for code snippets -->
+
+{% if _content contains '<div class="highlight"><code>' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
+  {% assign _new_content = '' %}
+
+  {% for _snippet in _code_spippets %}
+
+    {% if forloop.last %}
+      {% assign _new_content = _new_content | append: _snippet %}
+
+    {% else %}
+
+      {% assign _left = _snippet | split: '><' | last%}
+
+      {% if _left contains 'file="' %}
+        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file-code' %}
+      {% else %}
+        {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
+        {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% assign _label_icon = 'fas fa-code small' %}
+      {% endif %}
+
+      {% capture _label %}
+        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+      {% endcapture %}
+
+      {% assign _new_content = _new_content | append: _snippet
+          | append: '<div class="code-header">'
+          | append: _label
+          | append: '<button aria-label="copy" title-succeed="'
+          | append: site.data.locales[lang].post.button.copy_code.succeed
+          | append: '"><i class="far fa-clipboard"></i></button></div>'
+          | append: '<div class="highlight"><code>'
+      %}
+
+    {% endif %}
+
+  {% endfor %}
+
+  {% assign _content = _new_content %}
+
+{% endif %}
+
+
+<!-- return -->
+
 {{ _content }}

_includes/related-posts.html

@@ -1,11 +1,6 @@
 <!--
  Recommend the other 3 posts according to the tags and categories of the current post,
  if the number is not enough, use the other latest posts to supplement.
-
- v2.0
- https://github.com/cotes2020/jekyll-theme-chirpy
- © 2019 Cotes Chung
- Published under the MIT License
 -->
 
 <!-- The total size of related posts  -->
@@ -85,7 +80,8 @@
 
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
-    <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
+    <h3 class="pt-2 mt-1 mb-4 ml-1"
+      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}

_includes/search-loader.html

@@ -1,32 +1,46 @@
 <!--
   Jekyll Simple Search loader
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
+  See: <https://github.com/christian-fei/Simple-Jekyll-Search>
 -->
 
 {% capture result_elem %}
 <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
   <a href="{{ site.url }}{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    <div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div>
-    <div><i class="fa fa-tag fa-fw"></i>{tags}</div>
+    {categories}
+    {tags}
   </div>
   <p>{snippet}</p>
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">Oops! No result founds.</p>{% endcapture %}
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
 
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
 
 <script>
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('search-results'),
-  json: '{{ site.baseurl }}/assets/js/data/search.json',
+  json: '{{ '/assets/js/data/search.json' | relative_url }}',
   searchResultTemplate: '{{ result_elem | strip_newlines }}',
-  noResultsText: '{{ not_found }}'
+  noResultsText: '{{ not_found }}',
+  templateMiddleware: function(prop, value, template) {
+    if (prop === 'categories') {
+      if (value === '') {
+        return `${value}`;
+      } else {
+        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+      }
+    }
+
+    if (prop === 'tags') {
+      if (value === '') {
+        return `${value}`;
+      } else {
+        return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+      }
+    }
+  }
 });
-</script>
+</script>

_includes/search-results.html

@@ -1,23 +1,19 @@
 <!--
   The Search results
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-xl-11 post-content">
+  <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
 
       {% 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

@@ -1,85 +1,92 @@
 <!--
   The Side Bar
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
-<div id="nav-wrapper">
-
-  <div id="profile-wrapper" class="d-flex flex-column">
-    <div id="avatar" class="d-flex justify-content-center">
-      <a href="{{ site.baseurl }}/" alt="avatar">
-        {% assign avatar_url = site.avatar %}
-        {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
-        {% if start == '/' %}
-          {% assign avatar_url = avatar_url | prepend: site.baseurl %}
-        {% endif %}
+<div id="sidebar" class="d-flex flex-column align-items-end" lang="{{lang}}">
+  <div class="profile-wrapper text-center">
+    <div id="avatar">
+      <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
+        {% capture avatar_url %}
+          {%- if site.avatar contains '://' -%}
+            {{ site.avatar }}
+          {%- elsif site.img_cdn != '' and site.img_cdn -%}
+            {{ site.avatar | prepend: site.img_cdn }}
+          {%- else -%}
+            {{ site.avatar | relative_url }}
+          {%- endif -%}
+        {% endcapture %}
         <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
       </a>
     </div>
 
-    <div class="profile-text mt-3">
-      <div class="site-title">
-        <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
-      </div>
-      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
+    <div class="site-title mt-3">
+      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
-  </div><!-- #profile-wrapper -->
+    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
+
+  </div><!-- .profile-wrapper -->
+
+  <ul class="w-100">
 
-  <ul class="nav flex-column">
     <!-- home -->
-    <li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
+      <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ "HOME" }}</span>
+        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
     {% for tab in site.tabs %}
-    <li class="nav-item d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
-      <a href="{{ tab.url | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+    <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+      <a href="{{ tab.url | relative_url }}" class="nav-link">
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ tab.title | upcase }}</span>
+        {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+
+        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
     {% endfor %}
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrapper -->
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-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" %}
-  <span id="mode-toggle-wrapper">
-    {% include mode-toggle.html %}
-  </span>
-  <span class="icon-border"></span>
-  {% endif %}
+      {% if url %}
+      <a href="{{ url }}" aria-label="{{ entry.type }}"
+        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
+        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+        <i class="{{ entry.icon }}"></i>
+      </a>
+      {% endif %}
 
-  {% 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 %}
+    {% endfor %}
 
-    {% if url != '' %}
-    <a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
-      <i class="{{ entry.icon }}"></i>
-    </a>
-    {% endif %}
-  {% endfor %}
+    {% unless site.theme_mode %}
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border order-2"></span>
+      {% endif %}
 
-</div>
+      <span id="mode-toggle-wrapper" class="order-1">
+        {% include mode-toggle.html %}
+      </span>
+    {% endunless %}
+
+  </div> <!-- .sidebar-bottom -->
+
+</div><!-- #sidebar -->

_includes/timeago.html

@@ -1,27 +1,27 @@
 <!--
   Date format snippet
-
-  v2.4.1
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
+  See: /assets/js/_utils/timeage.js
 -->
+
+{% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
+{% assign post_long_df = site.data.locales[lang].date_format.post.long %}
+{% assign post_short_df = site.data.locales[lang].date_format.post.short %}
+
+{% if include.preposition %}
+  {{ include.preposition }}
+{% endif %}
 <span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
   {% if include.tooltip %}
     data-toggle="tooltip"
     data-placement="bottom"
-    title="{{ include.date | date: site.data.date_format.tooltip }}"
+    title="{{ include.date | date: tooltip_df }}"
   {% endif %}>
-
-  {% assign this_year = site.time | date: "%Y" %}
-  {% assign post_year = include.date | date: "%Y" %}
-
-  {% if post_year == this_year %}
-    {{ include.date | date: site.data.date_format.post.short }}
-  {% else %}
-    {{ include.date | date: site.data.date_format.post.long }}
-  {% endif %}
-
+  {%- assign this_year = site.time | date: "%Y" -%}
+  {%- assign post_year = include.date | date: "%Y" -%}
+  {%- if post_year == this_year -%}
+    {{ include.date | date: post_short_df }}
+  {%- else -%}
+    {{ include.date | date: post_long_df }}
+  {%- endif -%}
   <i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
-
-</span>
+</span>

_includes/topbar.html

@@ -1,28 +1,47 @@
 <!--
   The Top Bar
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
+
 <div id="topbar-wrapper" class="row justify-content-center topbar-down">
   <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
-      {% for item in page.breadcrumb %}
-        {% if item.url %}
-        <span>
-          <a href="{{ site.baseurl }}{{ item.url | remove: '.html'}}">
-            {{ item.label }}
-          </a>
-        </span>
-        {% else %}
-          <span>{{ item.label }}</span>
+
+    {% assign paths = page.url | split: '/' %}
+
+    {% if paths.size == 0 or page.layout == 'home' %}
+      <!-- index page -->
+      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
+
+    {% else %}
+
+      {% for item in paths %}
+
+        {% if forloop.first %}
+          <span>
+            <a href="{{ '/' | relative_url }}">
+              {{ site.data.locales[lang].tabs.home | capitalize }}
+            </a>
+          </span>
+
+        {% elsif forloop.last %}
+
+          {% if page.collection == 'tabs' %}
+            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
+          {% else %}
+            <span>{{ page.title }}</span>
+          {% endif %}
+
+        {% elsif page.layout == 'category' or page.layout == 'tag' %}
+          <span>
+            <a href="{{ item | relative_url }}">
+              {{ site.data.locales[lang].tabs[item] | default: page.title }}
+            </a>
+          </span>
         {% endif %}
+
       {% endfor %}
 
-      {% unless page.layout == "home" %}
-        <span>{{ page.title }}</span>
-      {% endunless %}
+    {% endif %}
 
     </span><!-- endof #breadcrumb -->
 
@@ -30,11 +49,12 @@
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.title -}}
-      {% elsif page.dynamic_title %}
-        {{- page.title -}}
+        {{- site.data.locales[lang].title | default: site.title -}}
+      {% elsif page.collection == 'tabs' %}
+        {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
+        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- page.layout | capitalize -}}
+        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
@@ -42,10 +62,10 @@
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
-        aria-label="search" placeholder="{{ site.data.label.search_hint }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
-    <span id="search-cancel" >Cancel</span>
+    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
   </div>
 
 </div>

_includes/trending-tags.html

@@ -1,9 +1,5 @@
 {% comment %}
   The trending tags list
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT Licensed
 {% endcomment %}
 
 {% assign MAX = 10 %}
@@ -15,7 +11,7 @@
   {% assign size = tag | last | size %}
   {% assign size_list = size_list | push: size %}
 
-  {% assign tag_str = tag | first | replace: " ", "-" | append: "::" | append: size %}
+  {% assign tag_str = tag | first | append: "::" | append: size %}
   {% assign tag_list =  tag_list | push: tag_str %}
 {% endfor %}
 

_includes/update-list.html

@@ -1,9 +1,5 @@
 {% comment %}
   Get the last 5 posts from lastmod list.
-  v2.2
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT License
 {% endcomment %}
 
 {% assign MAX_SIZE = 5 %}

_javascript/commons/back-to-top.js

@@ -0,0 +1,20 @@
+/*
+Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
+*/
+$(function() {
+  $(window).scroll(() => {
+    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;
+  });
+});

_javascript/commons/search-display.js

@@ -1,34 +1,28 @@
 /*
 * This script make #search-result-wrapper switch to unloaded or shown automatically.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT License
 */
 
 $(function() {
 
-  var btnSbTrigger = $("#sidebar-trigger");
-  var btnSearchTrigger = $("#search-trigger");
-  var btnCancel = $("#search-cancel");
-  var btnClear = $("#search-cleaner");
+  const btnSbTrigger = $("#sidebar-trigger");
+  const btnSearchTrigger = $("#search-trigger");
+  const btnCancel = $("#search-cancel");
+  const btnClear = $("#search-cleaner");
 
-  var main = $("#main");
-  var topbarTitle = $("#topbar-title");
-  var searchWrapper = $("#search-wrapper");
-  var resultWrapper = $("#search-result-wrapper");
-  var results = $("#search-results");
-  var input = $("#search-input");
-  var hints = $("#search-hints");
+  const main = $("#main");
+  const topbarTitle = $("#topbar-title");
+  const searchWrapper = $("#search-wrapper");
+  const resultWrapper = $("#search-result-wrapper");
+  const results = $("#search-results");
+  const input = $("#search-input");
+  const hints = $("#search-hints");
 
-
-  /*--- Actions in small screens (Sidebar unloaded) ---*/
-
-  var scrollBlocker = (function() {
-    var offset = 0;
+  const scrollBlocker = (function () {
+    let offset = 0;
     return {
       block() {
-        offset = $(window).scrollTop();
+        offset = window.scrollY;
+        $("html,body").scrollTop(0);
       },
       release() {
         $("html,body").scrollTop(offset);
@@ -39,7 +33,10 @@ $(function() {
     };
   }());
 
-  var mobileSearchBar = (function() {
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
+  const mobileSearchBar = (function () {
     return {
       on() {
         btnSbTrigger.addClass("unloaded");
@@ -58,37 +55,38 @@ $(function() {
     };
   }());
 
-  var resultSwitch = (function() {
-    var visable = false;
+  const resultSwitch = (function () {
+    let visible = false;
 
     return {
       on() {
-        if (!visable) {
-          resultWrapper.removeClass("unloaded");
-          main.addClass("hidden");
-
-          visable = true;
+        if (!visible) {
+          // the block method must be called before $(#main) unloaded.
           scrollBlocker.block();
+          resultWrapper.removeClass("unloaded");
+          main.addClass("unloaded");
+          visible = true;
         }
       },
       off() {
-        if (visable) {
+        if (visible) {
           results.empty();
           if (hints.hasClass("unloaded")) {
             hints.removeClass("unloaded");
           }
           resultWrapper.addClass("unloaded");
-          btnClear.removeClass("visable");
-          main.removeClass("hidden");
+          btnClear.removeClass("visible");
+          main.removeClass("unloaded");
+
+          // now the release method must be called after $(#main) display
+          scrollBlocker.release();
 
           input.val("");
-          visable = false;
-
-          scrollBlocker.release();
+          visible = false;
         }
       },
-      isVisable() {
-        return visable;
+      isVisible() {
+        return visible;
       }
     };
 
@@ -130,7 +128,7 @@ $(function() {
         resultSwitch.on();
 
         if (!btnClear.hasClass("visible")) {
-          btnClear.addClass("visable");
+          btnClear.addClass("visible");
         }
 
         if (isMobileView()) {
@@ -149,7 +147,7 @@ $(function() {
       resultSwitch.off();
     }
     input.focus();
-    btnClear.removeClass("visable");
+    btnClear.removeClass("visible");
   });
 
 });

_javascript/commons/sidebar.js

@@ -1,17 +1,13 @@
 /**
  * Expand or close the sidebar in mobile screens.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
  */
 
 $(function() {
 
-  var sidebarUtil = (function() {
+  const sidebarUtil = (function () {
     const ATTR_DISPLAY = "sidebar-display";
-    var isExpanded = false;
-    var body = $("body");
+    let isExpanded = false;
+    const body = $("body");
 
     return {
       toggle() {

_javascript/commons/tooltip-loader.js

@@ -1,9 +1,5 @@
 /**
  * Initial Bootstrap Tooltip.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2019 Cotes Chung
- * MIT License
 */
 $(function () {
   $("[data-toggle=\"tooltip\"]").tooltip();

_javascript/commons/topbar-switch.js

@@ -0,0 +1,69 @@
+/*
+ * Hide Header on scroll down
+ */
+
+$(function() {
+
+  const topbarWrapper = $("#topbar-wrapper");
+  const toc = $("#toc-wrapper");
+  const access = $(".access");
+  const searchInput = $("#search-input");
+
+  let didScroll;
+  let lastScrollTop = 0;
+
+  const delta = 5;
+  const topbarHeight = topbarWrapper.outerHeight();
+
+  function hasScrolled() {
+    var st = $(this).scrollTop();
+
+    /* Make sure they scroll more than delta */
+    if (Math.abs(lastScrollTop - st) <= delta) {
+      return;
+    }
+
+    if (st > lastScrollTop && st > topbarHeight) {
+      /* Scroll Down */
+      topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
+
+      if (toc.length > 0) {
+        toc.removeClass("topbar-down");
+      }
+
+      if (access.length > 0) {
+        access.removeClass("topbar-down");
+      }
+
+      if (searchInput.is(":focus")) {
+        searchInput.blur(); /* remove focus */
+      }
+
+    } else if (st + $(window).height() < $(document).height()) {
+      /* Scroll Up */
+      topbarWrapper.removeClass("topbar-up").addClass("topbar-down");
+      if (toc.length > 0) {
+        toc.addClass("topbar-down");
+      }
+      if (access.length > 0) {
+        access.addClass("topbar-down");
+      }
+    }
+
+    lastScrollTop = st;
+  }
+
+  $(window).scroll(function(event) {
+    if ($("#topbar-title").is(":hidden")) { /* Not in small screens */
+      didScroll = true;
+    }
+  });
+
+  setInterval(function() {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+});

_javascript/commons/topbar-title.js

@@ -1,16 +1,16 @@
 /*
- * Topbar title auto change while scrolling in mobile screens.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
+ * Top bar title auto change while scrolling in mobile screens.
 */
 
 $(function() {
 
-  var DEFAULT = $("#topbar-title").text().trim();
-  var title = ($("div.post>h1").length > 0) ?
-          $("div.post>h1").text().trim() : $("h1").text().trim();
+  const topbarTitle = $("#topbar-title");
+  const postTitle = $("div.post>h1");
+
+  const DEFAULT = topbarTitle.text().trim();
+
+  let title = (postTitle.length > 0) ?
+    postTitle.text().trim() : $("h1").text().trim();
 
   if ($("#page-category").length || $("#page-tag").length) {
     /* The title in Category or Tag page will be "<title> <count_of_posts>" */
@@ -22,26 +22,26 @@ $(function() {
   /* Replace topbar title while scroll screens. */
   $(window).scroll(function () {
     if ($("#post-list").length /* in Home page */
-      || $("div.post>h1").is(":hidden") /* is tab pages */
-      || $("#topbar-title").is(":hidden") /* not mobile screens */
+      || postTitle.is(":hidden") /* is tab pages */
+      || topbarTitle.is(":hidden") /* not mobile screens */
       || $("#sidebar.sidebar-expand").length) { /* when the sidebar trigger is clicked */
       return false;
     }
 
     if ($(this).scrollTop() >= 95) {
-      if ($("#topbar-title").text() !== title) {
-        $("#topbar-title").text(title);
+      if (topbarTitle.text() !== title) {
+        topbarTitle.text(title);
       }
     } else {
-      if ($("#topbar-title").text() !== DEFAULT) {
-        $("#topbar-title").text(DEFAULT);
+      if (topbarTitle.text() !== DEFAULT) {
+        topbarTitle.text(DEFAULT);
       }
     }
   });
 
   /* Click title remove hover effect. */
-  $("#topbar-title").click(function() {
+  topbarTitle.click(function() {
     $("body,html").animate({scrollTop: 0}, 800);
   });
 
-});
+});

_javascript/copyright

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

_javascript/utils/category-collapse.js

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

_javascript/utils/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>");
+});

_javascript/utils/clipboard.js

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

_javascript/utils/img-extra.js

@@ -0,0 +1,47 @@
+/**
+  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
+  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+*/
+
+$(function() {
+
+  const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
+
+  if ($(`${IMG_SCOPE} img`).length <= 0 ) {
+    return;
+  }
+
+  /* lazy loading */
+
+  const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
+  const observer = lozad(imgList);
+  observer.observe();
+
+  /* popup */
+
+  $(`${IMG_SCOPE} p > img[data-src],${IMG_SCOPE} img[data-src].preview-img`).each(
+    function() {
+      let nextTag = $(this).next();
+      const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
+      const src = $(this).attr('data-src'); // created by lozad.js
+
+      $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
+    }
+  );
+
+  $('.popup').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    showCloseBtn: false,
+    zoom: {
+      enabled: true,
+      duration: 300,
+      easing: 'ease-in-out'
+    }
+  });
+
+  /* markup the image links */
+
+  $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
+
+});

_javascript/utils/pageviews.js

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

_javascript/utils/smooth-scroll.js

@@ -0,0 +1,81 @@
+/*
+  Safari doesn't support CSS `scroll-behavior: smooth`,
+  so here is a compatible solution 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 (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
+        if (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;
+          let 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, () => {
+
+              const $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() */
+});

_javascript/utils/timeago.js

@@ -0,0 +1,73 @@
+/*
+ * Calculate the Timeago
+ */
+
+$(function() {
+
+  const timeagoElem = $(".timeago");
+
+  let toRefresh = timeagoElem.length;
+
+  let intervalId = void 0;
+
+  const dPrompt = $("meta[name=day-prompt]").attr("content");
+  const hrPrompt = $("meta[name=hour-prompt]").attr("content");
+  const minPrompt = $("meta[name=minute-prompt]").attr("content");
+  const justnowPrompt = $("meta[name=justnow-prompt]").attr("content");
+
+  function timeago(isoDate, dateStr) {
+    let now = new Date();
+    let past = new Date(isoDate);
+
+    if (past.getFullYear() !== now.getFullYear()
+        || past.getMonth() !== now.getMonth()) {
+      return dateStr;
+    }
+
+    let seconds = Math.floor((now - past) / 1000);
+
+    let day = Math.floor(seconds / 86400);
+    if (day >= 1) {
+      toRefresh -= 1;
+      return ` ${day} ${dPrompt}`;
+    }
+
+    let hour = Math.floor(seconds / 3600);
+    if (hour >= 1) {
+      return ` ${hour} ${hrPrompt}`;
+    }
+
+    let minute = Math.floor(seconds / 60);
+    if (minute >= 1) {
+      return ` ${minute} ${minPrompt}`;
+    }
+
+    return justnowPrompt;
+  }
+
+  function updateTimeago() {
+    $(".timeago").each(function() {
+      if ($(this).children("i").length > 0) {
+        let dateStr = $(this).clone().children().remove().end().text();
+        let node = $(this).children("i");
+        let iosDate = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
+        $(this).text(timeago(iosDate, dateStr));
+        $(this).append(node);
+      }
+    });
+
+    if (toRefresh === 0 && typeof intervalId !== "undefined") {
+      clearInterval(intervalId); /* stop interval */
+    }
+    return toRefresh;
+  }
+
+  if (toRefresh === 0) {
+    return;
+  }
+
+  if (updateTimeago() > 0) { /* run immediately */
+    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
+  }
+
+});

_layouts/archives.html

@@ -0,0 +1,39 @@
+---
+layout: page
+# The Archives of posts.
+---
+
+{% include lang.html %}
+
+<div id="archives" class="pl-xl-2">
+
+{% for post in site.posts %}
+  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+  {% if forloop.first %}
+    {% assign last_day = "" %}
+    {% assign last_month = "" %}
+  <span class="lead">{{this_year}}</span>
+  <ul class="list-unstyled">
+  {% endif %}
+    <li>
+      <div>
+        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
+        {% capture _mth_df %}{{ site.data.locales[lang].date_format.post.archive_month }}{% endcapture %}
+        {% capture this_month %}{{ post.date | date: _mth_df }}{% endcapture %}
+        <span class="date day">{{ this_day }}</span>
+        <span class="date month small text-muted">{% include no-zero-date.html date_str=this_month %}</span>
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+      </div>
+    </li>
+  {% if forloop.last %}
+  </ul>
+  {% elsif this_year != pre_year %}
+  </ul>
+  <span class="lead">{{pre_year}}</span>
+  <ul class="list-unstyled">
+    {% assign last_day = "" %}
+    {% assign last_month = "" %}
+  {% endif %}
+{% endfor %}
+</div>

_layouts/categories.html

@@ -0,0 +1,99 @@
+---
+layout: page
+# All the Categories of posts
+---
+
+{% include lang.html %}
+
+{% assign HEAD_PREFIX = "h_" %}
+{% assign LIST_PREFIX = "l_" %}
+
+{% assign group_index = 0 %}
+
+{% assign sort_categories = site.categories | sort %}
+
+{% for category in sort_categories %}
+  {% assign category_name = category | first %}
+  {% assign posts_of_category = category | last %}
+  {% assign first_post = posts_of_category | first %}
+
+  {% if category_name == first_post.categories[0] %}
+    {% assign sub_categories = "" | split: "" %}
+
+    {% for post in posts_of_category %}
+      {% assign second_category = post.categories[1] %}
+      {% if second_category %}
+        {% unless sub_categories contains second_category %}
+          {% assign sub_categories = sub_categories | push: second_category %}
+        {% endunless %}
+      {% endif %}
+    {% endfor %}
+
+    {% assign sub_categories = sub_categories | sort %}
+    {% assign sub_categories_size = sub_categories | size %}
+
+  <div class="card categories">
+    <!-- top-category -->
+    <div id="{{ HEAD_PREFIX }}{{ group_index }}"
+      class="card-header d-flex justify-content-between hide-border-bottom">
+      <span>
+        <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
+
+        {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
+        <a href="{{ _category_url | relative_url }}" class="ml-1 mr-2">{{ category_name }}</a>
+
+        <!-- content count -->
+        {% assign top_posts_size = site.categories[category_name] | size %}
+        <span class="text-muted small font-weight-light">
+          {% if sub_categories_size > 0 %}
+            {{ sub_categories_size }}
+            {{ site.data.locales[lang].categories.category_measure }},
+          {% endif %}
+            {{ top_posts_size }}
+            {{ site.data.locales[lang].categories.post_measure }}
+        </span>
+      </span>
+
+      <!-- arrow -->
+      {% if sub_categories_size > 0%}
+      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
+        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 %}
+      <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+        <i class="fas fa-fw fa-angle-right"></i>
+      </span>
+      {% endif %}
+
+    </div> <!-- .card-header -->
+
+    <!-- Sub-categories -->
+    {% if sub_categories_size > 0 %}
+    <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
+      <ul class="list-group">
+        {% for sub_category in sub_categories %}
+        <li class="list-group-item">
+          <i class="far fa-folder fa-fw"></i>
+
+          {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
+          <a href="{{ _sub_ctg_url | relative_url }}" 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 }}
+            {{ site.data.locales[lang].categories.post_measure }}
+          </span>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+    {% endif %}
+
+  </div> <!-- .card -->
+
+    {% assign group_index = group_index | plus: 1 %}
+
+  {% endif %}
+{% endfor %}

_layouts/category.html

@@ -1,11 +1,10 @@
 ---
 layout: page
 # The Category layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# MIT Licensed
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -14,11 +13,13 @@ layout: page
   </h1>
 
   <ul class="post-content pl-0">
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
+
     {% 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>
-      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
+      <span class="text-muted small">{{ post.date | date: post_df }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -1,35 +1,25 @@
 ---
 layout: compress
 # Default layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 <!DOCTYPE html>
 
-{% if site.lang %}
-  {% assign lang = site.lang | split: "_" | first %}
-{% else %}
-  {% assign lang = 'en' %}
-{% endif %}
+{% include lang.html %}
 
 {% 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 }}" {{ prefer_mode }}>
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
 
-    <div id="sidebar" class="d-flex flex-column">
-      {% include sidebar.html %}
-    </div>
+    {% include sidebar.html %}
 
     {% include topbar.html %}
 
@@ -46,6 +36,10 @@ layout: compress
 
     </div> <!-- #main-wrapper -->
 
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
     <div id="mask"></div>
 
     <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
@@ -54,9 +48,7 @@ layout: compress
 
     {% include search-loader.html %}
 
-    {% if site.google_analytics.id and jekyll.environment == 'production' %}
-      {% include google-analytics.html %}
-    {% endif %}
+    {% include js-selector.html %}
 
   </body>
 

_layouts/home.html

@@ -1,15 +1,13 @@
 ---
 layout: page
 # The Home page layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
+{% include lang.html %}
+
+{% assign pinned = site.posts | where: "pin", "true" %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true" %}
 
-{% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
-{% assign default = site.posts | where_exp: "item", "item.pin != true"  %}
 {% assign posts = "" | split: "" %}
 
 <!-- Get pinned posts -->
@@ -43,19 +41,15 @@ layout: page
   {% endfor %}
 {% endif %}
 
-
 <div id="post-list">
 
 {% for post in posts %}
 
   <div class="post-preview">
-    <div class="d-flex justify-content-between pr-xl-2">
-      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
-      {% if post.pin == true %}
-        <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>
+    <h1>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+    </h1>
+
     <div class="post-content">
       <p>
         {% include no-linenos.html content=post.content %}
@@ -63,19 +57,35 @@ layout: page
       </p>
     </div>
 
-    <div class="post-meta text-muted">
-      <!-- posted date -->
-      <i class="far fa-clock fa-fw"></i>
-      {% include timeago.html date=post.date tooltip=true %}
+    <div class="post-meta text-muted d-flex justify-content-between">
 
-      <!-- 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>
+      <div>
+        <!-- posted date -->
+        <i class="far fa-calendar fa-fw"></i>
+        {% include timeago.html date=post.date tooltip=true %}
+
+        <!-- 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.proxy_endpoint or site.google_analytics.pv.cache_path %}
+        <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.locales[lang].post.pin_prompt }}</span>
+      </div>
       {% endif %}
-    </div>
+
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
 
 {% endfor %}

_layouts/page.html

@@ -1,17 +1,20 @@
 ---
 layout: default
 # The page layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
 <div class="row">
   <div class="col-12 col-lg-11 col-xl-8">
     <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 mb-md-4">
     {% if page.dynamic_title %}
-      <h1 class="dynamic-title">{{ page.title }}</h1>
+      <h1 class="dynamic-title">
+        {% if page.collection == 'tabs' %}
+          {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
+          {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
+        {% else %}
+          {{- page.title -}}
+        {% endif %}
+      </h1>
       <div class="post-content">
         {{ content }}
       </div>

_layouts/post.html

@@ -1,12 +1,10 @@
 ---
 layout: default
 # The posts' layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
+{% include lang.html %}
+
 <div class="row">
 
   <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
@@ -18,62 +16,60 @@ 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 }}
-          {% else %}
-            {{ site.author }}
-          {% endif %}
+          <span class="semi-bold">
+            {{ page.author | default: site.social.name }}
           </span>
+          {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
+          {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
         </div>
 
-        <!-- lastmod -->
-        {% if page.last_modified_at %}
         <div>
-          Updated
-          {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-        </div>
-        {% endif %}
+          <!-- lastmod -->
+          {% if page.last_modified_at %}
+          <span>
+            {{ site.data.locales[lang].post.updated }}
+            {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
+          </span>
+          {% endif %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true %}
+
+          <!-- page views -->
+          {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+          <span id="pv" class="pageviews">
+            <i class="fas fa-spinner fa-spin fa-fw"></i>
+          </span>
+          {{ site.data.locales[lang].post.pageview_measure }}
+          {% endif %}
 
-        <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
-        <div>
-          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
-          views
         </div>
-        {% endif %}
 
       </div> <!-- .post-meta -->
 
       <div class="post-content">
-        {%- capture img_placehodler -%}
-          data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
-        {% endcapture%}
 
-        {% if page.image %}
-          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
+        {% if page.image.src %}
+          <img src="{{ page.image.src }}"
+            class="preview-img"
+            alt="{{ page.image.alt | default: "Preview Image" }}"
+            {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
+            {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
         {% endif %}
 
-        <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-        {% if content contains '<img src=' %}
-          {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
-          {{ content | replace: '<img src=', replacement }}
-        {% else %}
-          {{ content }}
-        {% endif %}
+        {{ content }}
+
       </div>
 
       <div class="post-tail-wrapper text-muted">
 
         <!-- categories -->
         {% if page.categories.size > 0 %}
+
         <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>
@@ -84,7 +80,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>
@@ -94,13 +90,16 @@ layout: default
 
         <div class="post-tail-bottom
           d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
-          {% if site.data.rights.license %}
           <div class="license-wrapper">
-            This post is licensed under
-            <a href="{{ site.data.rights.license.link }}">{{ site.data.rights.license.name }}</a>
-            by the author.
-          </div>
+          {% if site.data.locales[lang].copyright.license.template %}
+            {% capture _replacement %}
+            <a href="{{ site.data.locales[lang].copyright.license.link }}">
+              {{ site.data.locales[lang].copyright.license.name }}
+            </a>
+            {% endcapture %}
+            {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
           {% endif %}
+          </div>
 
           {% include post-sharing.html %}
 
@@ -113,7 +112,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 -->
 
@@ -134,5 +141,3 @@ layout: default
   </div> <!-- .col-* -->
 
 </div> <!-- .row -->
-
-{% include lozad.html %}

_layouts/tag.html

@@ -1,12 +1,10 @@
 ---
 layout: page
 # The layout for Tag page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
+{% include lang.html %}
+
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
@@ -14,11 +12,13 @@ layout: page
     <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
+
     {% 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>
-      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
+      <span class="text-muted small">{{ post.date | date: post_df }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/tags.html

@@ -0,0 +1,21 @@
+---
+layout: page
+# All the Tags of posts.
+---
+
+<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

@@ -1,4 +1,7 @@
+#!/usr/bin/env ruby
+#
 # Check for changed posts
+
 Jekyll::Hooks.register :posts, :post_init do |post|
 
   commit_num = `git rev-list --count HEAD "#{ post.path }"`

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

@@ -5,25 +5,27 @@ date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
-image: /assets/img/sample/devices-mockup.png
+mermaid: true
+image:
+  src: /commons/devices-mockup.png
+  width: 850
+  height: 585
 ---
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
 
 
 ## Titles
-
 ---
+# H1 - heading
 
-# H1
+<h2 data-toc-skip>H2 - heading</h2>
 
-<h2 data-toc-skip>H2</h2>
-
-<h3 data-toc-skip>H3</h3>
-
-<h4>H4</h4>
+<h3 data-toc-skip>H3 - heading</h3>
 
+<h4>H4 - heading</h4>
 ---
+<br>
 
 ## Paragraph
 
@@ -39,21 +41,37 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
-## List
+## Lists
 
 ### Ordered list
 
-1. first item
-2. second item
-3. third item
+1. Firstly
+2. Secondly
+3. Thirdly
 
 ### Unordered list
 
-- item 1
-	- sub item 1
-	- sub item 2
+- Chapter
+	- Section
+      - Paragraph
+
+### Task list
+
+- [ ] TODO
+- [x] Completed
+- [ ] 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 +79,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)
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
 _Full screen width and center alignment_
 
-You can change the size of the picture:
+<br>
 
-![Desktop View](/assets/img/sample/mockup.png){: width="400"}
-_400px image width_
+- Shadow
 
-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:
+![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
+_shadow effect (visible in light mode)_
 
-- Normal position
-  
-  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
+<br>
 
-- Float to the left
+- Left aligned
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
+
+<br>
+
+- Float to left
+
+  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left}
   "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
-- Float to the right
+<br>
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+- Float to right
+
+  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right}
   "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
-## 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
 
@@ -115,11 +148,17 @@ The mathematics powered by [**MathJax**](https://www.mathjax.org/):
 
 $$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
 
-When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
-## Code Snippet
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+
+## Code block
 
 ### Common
 
@@ -132,79 +171,30 @@ 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
 ```
 
-#### Ruby
-
-```ruby
-def sum_eq_n?(arr, n)
-  return true if arr.empty? && n == 0
-  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
-end
-```
-
 #### Shell
 
-```shell
+```bash
 if [ $? -ne 0 ]; then
     echo "The command was not successful.";
     #do the needful / exit
 fi;
 ```
 
-#### Liquid
+### Specific filename
 
-{% raw %}
-```liquid
-{% if product.title contains 'Pack' %}
-  This product's title contains the word Pack.
-{% endif %}
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography"
 ```
-{% endraw %}
-
-#### HTML
-
-```html
-<div class="sidenav">
-  <a href="#contact">Contact</a>
-  <button class="dropdown-btn">Dropdown
-    <i class="fa fa-caret-down"></i>
-  </button>
-  <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>
-```
-
+{: file='_sass/jekyll-theme-chirpy.scss'}
 
 ## 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

@@ -4,11 +4,12 @@ author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
+render_with_liquid: false
 ---
 
 ## 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
 
@@ -68,16 +69,119 @@ math: true
 ---
 ```
 
-## Preview Image
+## Mermaid
 
-If you want to add an image to the top of the post contents, specify the url for the image by:
+[**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:
 
 ```yaml
 ---
-image: /path/to/image-file
+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 attribute `src`, `width`, `height` and `alt` for the image:
+
+```yaml
+---
+image:
+  src: /path/to/image/file
+  width: 1000   # in pixels
+  height: 400   # in pixels
+  alt: image alternative text
+---
+```
+
+Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. Later section ["Image size"](#image-size) will also mention this.
+
+
+### 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_
+```
+{: .nolineno}
+
+### Image size
+
+In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
+```
+{: .nolineno}
+
+### 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){: .normal }
+  ```
+  {: .nolineno}
+
+- **Float to the left**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .left }
+  ```
+  {: .nolineno}
+
+- **Float to the right**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .right }
+  ```
+  {: .nolineno}
+
+> **Limitation**: Once the position of the image is specified, the image caption should not be added.
+
+### Image shadow
+
+The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: .shadow }
+```
+{: .nolineno}
+
+### CDN URL
+
+If you host the images on the CDN, you can save the time of repeatedly writing the CDN url by assigning the variable `img_cdn` of `_config.yml` file:
+
+```yaml
+img_cdn: https://cdn.com
+```
+{: file='_config.yml' .nolineno}
+
+Once `img_cdn` is assigned, the CDN url will be added to the path of all images (images of site avatar and posts) starting with `/`.
+
+For instance, when using images:
+
+```markdown
+![The flower](/path/to/flower.png)
+```
+{: .nolineno}
+
+The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
+
+```html
+<img src="https://cdn.com/path/to/flower.png" alt="The flower">
+```
+{: .nolineno}
+
 ## 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:
@@ -90,31 +194,51 @@ 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 follows:
 
 ```
-This is a common code snippet, without syntax highlight and line number.
+This is a plaintext code snippet.
 ```
 
-## Specific Language
+### Specifying Language
 
-Using <code class="highlighter-rouge">```language</code> 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 !
+Using ```` ```{language} ```` you will get a code block with syntax highlight:
 
+````markdown
 ```yaml
-# Yaml code snippet
-items:
-    - part_no:   A4786
-      descrip:   Water Bucket (Filled)
-      price:     1.47
-      quantity:  4
+key: value
 ```
+````
+
+> **Limination**: The Jekyll style `highlight` tag ais not compatible with this theme.
+
+### Line Number
+
+By default, all languages except `plaintext`, `console` and `terminal` will display line numbers. When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line:
+
+````markdown
+```shell
+echo 'No more line numbers!'
+```
+{: .nolineno}
+````
+
+### Specifying the Filename
+
+You may have noticed that the code language will be displayed on the left side of the header of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
+
+````markdown
+```shell
+# content
+```
+{: file="path/to/file" }
+````
 
 ### Liquid Codes
 
-If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
 
+````markdown
 {% raw %}
 ```liquid
 {% if product.title contains 'Pack' %}
@@ -122,6 +246,9 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 {% endif %}
 ```
 {% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
 ## Learn More
 

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

@@ -7,120 +7,140 @@ tags: [getting started]
 pin: true
 ---
 
+## Prerequisites
+
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
 
 ## Installation
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, rename the repository to `USERNAME.github.io` (where `USERNAME` is your GitHub username), and then open terminal and clone the fork to local by:
+### Creating a New Site
 
-```terminal
-$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
-```
+There are two ways to create a new repository for this theme:
 
-### Setting up the local envrionment
+- **[Using the Chirpy Starter](#option-1-using-the-chirpy-starter)** - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
 
-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`. 
+- **[Forking on GitHub](#option-2-forking-on-github)** - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
 
-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:
+#### Option 1. Using the Chirpy Starter
 
-```terminal
-$ bundle install
-```
+Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
 
-`bundle` will automatically install all the dependencies specified by `Gemfile`.
+#### Option 2. Forking on GitHub
 
-### Setting up Docker environment (optional)
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and rename it to `<GH_USERNAME>.github.io`. Please note that the default branch code is in development.  If you want the site to be stable, please switch to the [latest tag][latest-tag] and start writing.
 
-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
-```
-
-## Usage
-
-### Initialization
-
-Go to the root directory of the project and start initialization:
+And then execute:
 
 ```console
 $ bash tools/init.sh
 ```
 
-> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
 
-What it does is:
-
-1. Remove some files or directories from your repository:
+The above command will:
 
+1. Removes some files or directories from your repository:
     - `.travis.yml`
     - 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 the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
 
-3. Automatically create a commit to save the changes.
+3. Removes item `Gemfile.lock` from `.gitignore`.
+
+4. Creates a new commit to save the changes automatically.
+
+### Installing Dependencies
+
+Before running for the first time, go the root directory of your site, and install dependencies as follows:
+
+```console
+$ bundle
+```
+
+## Usage
 
 ### Configuration
 
-Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
+Update the variables of `_config.yml` as needed. Some of them are typical options:
 
 - `url`
 - `avatar`
 - `timezone`
-- `theme_mode`
+- `lang`
 
-### Run Locally
+### Customing Stylesheet
+
+If you need to customize stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+
+Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
+
+### Running Local Server
 
 You may want to preview the site contents before publishing, so just run it by:
 
-```terminal
+```console
 $ bundle exec jekyll s
 ```
 
-Then open a browser and visit to <http://localhost:4000>.
+Or run the site on Docker with the following command:
 
-### Run on Docker
-
-Run the site on Docker with the following command:
-
-```terminal
-$ docker run --rm -it \
+```console
+$ docker run -it --rm \
     --volume="$PWD:/srv/jekyll" \
     -p 4000:4000 jekyll/jekyll \
     jekyll serve
 ```
 
+After a while, the local service will be published at _<http://127.0.0.1:4000>_.
 
 ### 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`.
+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, e.g, `/project-name`.
 
-Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
+Now you can choose ONE of the following methods to deploy your Jekyll site.
 
-#### Deploy on GitHub Pages
+#### Deploy by Using Github Actions
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the 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 GitHub 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.
+Quickly check the files needed for GitHub Actions build:
 
-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"}
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+
+- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
+
+- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lockfile:
+
+  ```console
+  $ bundle lock --add-platform x86_64-linux
+  ```
+
+After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
+
+Now publish your Jekyll site by:
+
+1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
+
+2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
+
+    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="850" height="153" }
 
 3. Visit your website at the address indicated by GitHub.
 
-#### Deploy on Other Platforms
+#### Manually Build and Deploy
 
-On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
+On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
 
-Go to the root of the source project, build your site by:
+Go to the root of the source project, and build your site as follows:
 
 ```console
 $ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-Or, build the site with Docker by:
+Or build the site on Docker:
 
-```terminal
+```console
 $ docker run -it --rm \
     --env JEKYLL_ENV=production \
     --volume="$PWD:/srv/jekyll" \
@@ -128,4 +148,34 @@ $ docker run -it --rm \
     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.
+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 the target server.
+
+### Upgrading
+
+It depends on how you use the theme:
+
+- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the them gem, for example:
+
+    ```diff
+  - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
+  + gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
+    ```
+    {: .nolineno file="Gemfile" }
+
+    And then execute the following command:
+
+    ```console
+    $ bundle update jekyll-theme-chirpy
+    ```
+
+    As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
+
+- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
+The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
+[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
+[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags

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

@@ -4,36 +4,34 @@ author: Cotes Chung
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]
-toc: false
 ---
 
-In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image files of [Favicons](https://www.favicon-generator.org/about/) are placed in `assets/img/favicons/`. You may need to replace them with your own. So let's see how to customize these Favicons.
+The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you how to create and replace the default favicons.
 
-With a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
+## Generate the favicon
 
-![upload-image](/assets/img/sample/upload-image.png)
+Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click button <kbd>Select your Favicon image</kbd> to upload your image file.
 
-Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
+In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
 
-![download-icons](/assets/img/sample/download-icons.png){: width="600"}
+## Download & Replace
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
-- browserconfig.xml
-- manifest.json
- 
-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/`.
+- `browserconfig.xml`
+- `site.webmanifest`
 
-The following table helps you understand the changes to the icon file:
+Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
 
-> ✓ means keep, ✗ means delete.
+The following table will helps you understand the changes to the favicon files:
 
-| File(s)             | From Favicon & App Icon Generator | From Chirpy |
+| File(s)             | From Online Tool                  | From Chirpy |
 |---------------------|:---------------------------------:|:-----------:|
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 | `browserconfig.xml` | ✗                                 | ✓           |
-| `manifest.json`     | ✗                                 | ✓           |
+| `site.webmanifest`  | ✗                                 | ✓           |
 
+> Note: ✓ means keep, ✗ means delete.
 
-The next time you build the site, the icon will be replaced with a customized edition.
+The next time you build the site, the favicon will be replaced with a customized edition.

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

@@ -0,0 +1,239 @@
+---
+title: Enable Google Page Views
+author: Dinesh Prasanth Moluguwan Krishnamoorthy
+date: 2021-01-03 18:32:00 -0500
+categories: [Blogging, Tutorial]
+tags: [google analytics, pageviews]
+---
+
+
+This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv.*` empty unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
+
+## Set up Google Analytics
+
+### Create GA account and property
+
+First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well.
+
+1. Head to <https://analytics.google.com/> and click on **Start Measuring**
+2. Enter your desired _Account Name_ and choose the desired checkboxes
+3. Enter your desired _Property Name_. This is the name of the tracker project that appears on your Google Analytics dashboard
+4. Enter the required information _About your business_
+5. Hit _Create_ and accept any license popup to setup your Google Analytics account and create your property
+
+### Create Data Stream
+
+With your property created, you now need to set up Data Stream to track your blog traffic. After you signup, the prompt should automatically take you to creating your first **Data Stream**. If not, follow these steps:
+
+1. Go to **Admin** on the left column
+2. Select the desired property from the drop down on the second column
+3. Click on **Data Streams**
+4. Add a stream and click on **Web**
+5. Enter your blog's URL
+
+It should look like this:
+
+![google-analytics-data-stream](/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"}
+
+Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file
+
+```yaml
+google_analytics:
+  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
+  pv:
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
+```
+{: file="_config.yml"}
+
+When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
+
+![google-analytics-realtime](/posts/20210103/02-google-analytics-realtime.png){: width="616" height="557"}
+
+## Setup Page Views
+
+There is a detailed [tutorial](https://developers.google.com/analytics/solutions/google-analytics-super-proxy) available to set up Google Analytics superProxy. But, if you are interested to just quickly get your Chirpy-based blog display page views, follow along. These steps were tested on a Linux machine. If you are running Windows, you can use Git bash terminal to run Unix-like commands.
+
+### Setup Google App Engine
+
+1. Visit <https://console.cloud.google.com/appengine>
+
+2. Click on **Create Application**
+
+3. Click on **Create Project**
+
+4. Enter the name and choose the data center close to you
+
+5. Select **Python** language and **Standard** environment
+
+6. Enable billing account. Yeah, you have to link your credit card. But, you won't be billed unless you exceed your free quota. For a simple blog, free quota is more than sufficient.
+
+7. Go to your App Engine dashboard on your browser and select **API & Services** from the left navigation menu
+
+8. Click on **Enable APIs and Services** button on the top
+
+9. Enable the following APIs: _Google Analytics API_
+
+10. On the left, Click on _OAuth Consent Screen_ and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under _Publishing Status_
+
+11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add a entry under `Authorized redirect URIs` that matches: `https://<project-id>.<region>.r.appspot.com/admin/auth`
+
+12. Note down the **Your Client ID** and **Your Client Secret**. You'll need this in the next section.
+
+13. Download and install the cloud SDK for your platform: <https://cloud.google.com/sdk/docs/quickstart>
+
+14. Run the following commands:
+
+    ```console
+    [root@bc96abf71ef8 /]# gcloud init
+
+    ~snip~
+
+    Go to the following link in your browser:
+
+        https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=XYZ.apps.googleusercontent.com&redirect_uri=ABCDEFG
+
+    Enter verification code: <VERIFICATION CODE THAT YOU GET AFTER YOU VISIT AND AUTHENTICATE FROM THE ABOVE LINK>
+
+    You are logged in as: [blah_blah@gmail.com].
+
+    Pick cloud project to use:
+    [1] chirpy-test-300716
+    [2] Create a new project
+    Please enter numeric choice or text value (must exactly match list
+    item): 1
+
+
+    [root@bc96abf71ef8 /]# gcloud info
+    # Your selected project info should be displayed here
+    ```
+
+### Setup Google Analytics superProxy
+
+1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local.
+
+2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
+  ```diff
+- application: your-project-id
+- version: 1
+  ```
+
+3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from you App Engine Dashboard.
+
+4. Enter any random key for `XSRF_KEY`, your `config.py` should look similar to this
+
+    ```python
+    #!/usr/bin/python2.7
+
+    __author__ = 'pete.frisella@gmail.com (Pete Frisella)'
+
+    # OAuth 2.0 Client Settings
+    AUTH_CONFIG = {
+      'OAUTH_CLIENT_ID': 'YOUR_CLIENT_ID',
+      'OAUTH_CLIENT_SECRET': 'YOUR_CLIENT_SECRET',
+      'OAUTH_REDIRECT_URI': '%s%s' % (
+        'https://chirpy-test-XXXXXX.ue.r.appspot.com',
+        '/admin/auth'
+      )
+    }
+
+    # XSRF Settings
+    XSRF_KEY = 'OnceUponATimeThereLivedALegend'
+    ```
+    {: file="src/config.py"}
+
+    **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
+
+5. From inside the src/ directory, deploy the app
+
+    ```console
+    [root@bc96abf71ef8 src]# gcloud app deploy
+    Services to deploy:
+
+    descriptor:      [/tmp/google-analytics-super-proxy/src/app.yaml]
+    source:          [/tmp/google-analytics-super-proxy/src]
+    target project:  [chirpy-test-XXXX]
+    target service:  [default]
+    target version:  [VESRION_NUM]
+    target url:      [https://chirpy-test-XXXX.ue.r.appspot.com]
+
+
+    Do you want to continue (Y/n)? Y
+
+    Beginning deployment of service [default]...
+    ╔════════════════════════════════════════════════════════════╗
+    ╠═ Uploading 1 file to Google Cloud Storage                 ═╣
+    ╚════════════════════════════════════════════════════════════╝
+    File upload done.
+    Updating service [default]...done.
+    Setting traffic split for service [default]...done.
+    Deployed service [default] to [https://chirpy-test-XXXX.ue.r.appspot.com]
+
+    You can stream logs from the command line by running:
+    $ gcloud app logs tail -s default
+
+    To view your application in the web browser run:
+    $ gcloud app browse
+    ```
+
+6. Visit the deployed service. Add a `/admin` to the end of the URL.
+
+7. Click on **Authorize Users** and make sure to add yourself as a managed user.
+
+8. If you get any errors, please Google it. The errors are self-explanatory and should be easy to fix.
+
+If everything went good, you'll get this screen:
+
+![superProxy-deployed](/posts/20210103/03-superProxy-deployed.png){: width="1366" height="354"}
+
+### Create Google Analytics Query
+
+Head to `https://PROJECT_ID.REGION_ID.r.appspot.com/admin` and create a query after verifying the account. **GA Core Reporting API** query request can be created in [Query Explorer](https://ga-dev-tools.appspot.com/query-explorer/).
+
+The query parameters are as follows:
+
+- **start-date**: fill in the first day of blog posting
+- **end-date**: fill in `today` (this is a parameter supported by GA Report, which means that it will always end according to the current query date)
+- **metrics**: select `ga:pageviews`
+- **dimensions**: select `ga:pagePath`
+
+In order to reduce the returned results and reduce the network bandwidth, we add custom filtering rules [^ga-filters]:
+
+- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`.
+
+    Among them, `;` means using _logical AND_ to concatenate two rules.
+
+    If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`.
+
+After <kbd>Run Query</kbd>, copy the generated contents of **API Query URI** at the bottom of the page, and fill in the **Encoded URI for the query** of SuperProxy on GAE.
+
+After the query is saved on GAE, a **Public Endpoint** (public access address) will be generated, and we will get the query result in JSON format when accessing it. Finally, click <kbd>Enable Endpoint</kbd> in **Public Request Endpoint** to make the query effective, and click <kbd>Start Scheduling</kbd> in **Scheduling** to start the scheduled task.
+
+![superproxy-query](/posts/20210103/04-superproxy-query.png){: width="1100" height="126"}
+
+
+## Configure Chirpy to Display Page View
+
+Once all the hard part is done, it is very easy to enable the Page View on Chirpy theme. Your superProxy dashboard should look something like below and you can grab the required values.
+
+![superproxy-dashboard](/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"}
+
+Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
+
+```yaml
+google_analytics:
+  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
+  pv:
+    proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
+```
+{: file="_config.yml"}
+
+Now, you should see the Page View enabled on your blog.
+
+## Reference
+
+[^ga-filters]: [Google Analytics Core Reporting API: Filters](https://developers.google.com/analytics/devguides/reporting/core/v3/reference#filters)
+
+[chirpy-homepage]: https://github.com/cotes2020/jekyll-theme-chirpy/

_sass/addon/module.scss

@@ -1,14 +1,15 @@
 /*
 * Mainly scss modules, only imported to `assets/css/main.scss`
-*
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
 */
 
 /* ---------- scss placeholder --------- */
 
+%heading {
+  color: var(--heading-color);
+  font-weight: 400;
+  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -17,6 +18,7 @@
 %table-cell {
   padding: 0.4rem 1rem;
   font-size: 95%;
+  white-space: nowrap;
 }
 
 %link-hover {
@@ -33,13 +35,12 @@
   border-bottom: 1px solid var(--link-underline-color);
 }
 
-%no-bottom-border {
-  border-bottom: none;
+%clickable-transition {
+  transition: color 0.35s ease-in-out;
 }
 
-%heading {
-  font-weight: 400;
-  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+%no-bottom-border {
+  border-bottom: none;
 }
 
 %section {
@@ -54,24 +55,19 @@
   margin-top: -2.5rem;
 }
 
+%cursor-pointer {
+  cursor: pointer;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
 }
 
-@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
-  color: $color;
-  transition: color 0.35s ease-in-out;
+%sidebar-links {
+  color: rgba(117, 117, 117, 0.9);
   user-select: none;
-  margin: 0 0.25rem;
-}
-
-@mixin icon-round($diameter) {
-  border: 1px solid;
-  border-radius: 50%;
-  width: $diameter;
-  height: $diameter;
 }
 
 @mixin ml-mr($value) {
@@ -96,11 +92,11 @@
   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;

_sass/addon/syntax.scss

@@ -1,13 +1,9 @@
 /*
 * The syntax highlight.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
 */
 
-@import "_colors/light-syntax";
-@import "_colors/dark-syntax";
+@import "colors/light-syntax";
+@import "colors/dark-syntax";
 
 html:not([mode]),
 html[mode=light] {
@@ -31,20 +27,20 @@ html[mode=dark] {
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 5px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 0.8rem 1rem;
+  padding: 1.2rem;
 }
 
-$code-font-size: 0.85rem;
-
 div > pre {
   @extend %code-snippet-bg;
   @extend %code-snippet-radius;
@@ -56,6 +52,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 */
 }
 
@@ -68,26 +65,14 @@ div > pre {
   }
 
   overflow: auto;
-  .lineno {
-    margin: 0.8rem 0;
-    padding: 0 0.5rem;
-    min-width: 2.2rem;
-    text-align: right;
-    color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-  }
+
   pre {
     margin-bottom: 0;
     font-size: $code-font-size;
     line-height: 1.4rem;
     word-wrap: normal; /* Fixed Safari overflow-x */
   }
+
   table {
     padding: 0;
     border: 0;
@@ -96,10 +81,30 @@ div > pre {
       word-break: normal; /* Fixed iOS safari linenos code break */
     }
   }
+
   td {
     padding: 0;
     border: 0;
   }
+
+  .lineno {
+    padding-right: 0.5rem;
+    min-width: 2.2rem;
+    text-align: right;
+    color: var(--highlight-lineno-color);
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  /* set the dollar sign to non-selectable */
+  .gp {
+    user-select: none;
+  }
+
 } //.highlight
 
 code {
@@ -111,7 +116,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 +135,16 @@ code {
 }
 
 td.rouge-code {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
+
+  // Prevent some browser extends from
+  // changing the URL string of code block.
+  a {
+    color: inherit !important;
+    border-bottom: none !important;
+    pointer-events: none;
+  }
+
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -140,7 +152,8 @@ div {
   &[class^='highlighter-rouge'],
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
     pre.lineno {
       display: none;
     }
@@ -149,3 +162,101 @@ div {
     }
   }
 }
+
+.code-header {
+  background: var(--code-header-bg);
+  border-top-left-radius: $code-radius;
+  border-top-right-radius: $code-radius;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1.85rem;
+
+  // icons
+  i {
+    font-size: 1rem;
+    color: var(--lang-badge-muted-color);
+
+    &.small {
+      font-size: 70%;
+    }
+  }
+
+  // the label block
+  span {
+    padding-left: 0.35rem;
+
+    &::after {
+      content: attr(text-data);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--lang-badge-color);
+    }
+
+    i {
+      margin: 0 0.5rem;
+    }
+
+    @at-root [file] #{&} > i {
+      position: relative;
+      top: 1px; // center the file icon
+      margin-left: 0.25rem;
+    }
+
+  }
+
+  // clipboard
+  button {
+    border: 1px solid var(--code-header-bg);
+    border-radius: $code-radius;
+    padding: 0;
+    width: 1.95rem;
+    background-color: inherit;
+
+    @extend %cursor-pointer;
+
+    &[timeout] {
+      &:hover {
+        border-color: var(--clipboard-checked-color);
+      }
+
+      i {
+        color: var(--clipboard-checked-color);
+      }
+    }
+
+    &:not([timeout]):hover {
+      background-color: rgba(128, 128, 128, 0.37);
+
+      i {
+        color: white;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+  }
+
+}
+
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
+
+      border-radius: 0;
+
+      .highlight {
+        padding-left: 0.25rem;
+      }
+
+      .code-header {
+        border-radius: 0;
+        padding-left: 0.4rem;
+        padding-right: 0.5rem;
+      }
+    }
+  }
+}

_sass/addon/variables.scss

@@ -0,0 +1,34 @@
+/*
+ * The SCSS variables
+ */
+
+/* sidebar */
+
+$sidebar-width: 260px !default;        // the basic width
+$sidebar-width-small: 210px !default;  // screen width: >= 850px, <= 1199px (iPad landscape)
+$sidebar-width-large: 350px !default;  // screen width: >= 1650px
+
+/* tabs of sidebar */
+
+$tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
+$tab-height: 3rem !default;
+$tab-cursor-height: 1.6rem !default;
+
+$cursor-width: 2px !default;    // the cursor width of the selected tab
+
+/* other framework sizes */
+
+$topbar-height: 3rem !default;
+
+$footer-height: 5rem !default;
+$footer-height-mobile: 6rem !default;   // screen width: <= 576px
+
+$main-content-max-width: 1150px !default;
+
+$panel-max-width: 300px !default;
+
+$post-extend-min-height: 35rem !default;
+
+/* syntax highlight */
+
+$code-font-size: 0.85rem !default;

_sass/colors/dark-syntax.scss

@@ -1,29 +1,11 @@
-/*!
-* The syntax dark mode styles.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
+/*
+ * The syntax dark mode styles.
+ */
 
 @mixin dark-syntax {
-  /* -----  My styles ------ */
-  --highlight-bg-color: #272822;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #3c4042;
-  --inline-code-bg: var(--highlight-bg-color);
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  pre { color: #818c96; } /* 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 .hll { background-color: #272822; }
+  .highlight pre { background-color: var(--highlight-bg-color); }
+  .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 +17,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 */
@@ -85,4 +67,22 @@
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
   .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
+
+  /* -----  custom styles ------ */
+
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --code-header-bg: #353535;
+  --lang-badge-color: #858586;
+  --lang-badge-muted-color: #6c6c6d;
+  --clipboard-checked-color: #2bcc2b;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
 }

_sass/colors/dark-typography.scss

@@ -1,54 +1,57 @@
-/*!
-* The main dark mode styles
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
+/*
+ * The main dark mode styles
+ */
 
 @mixin dark-scheme {
-  /* framework */
-  --main-wrapper-bg: rgb(27, 27, 30);
+  /* Framework color */
   --body-bg: var(--main-wrapper-bg);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-icon-color: rgb(100, 102, 105);
-  --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
-  --footer-bg-color: var(--main-wrapper-bg);
+  --main-wrapper-bg: rgb(27, 27, 30);
+  --main-border-color: rgb(44, 45, 45);
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
-  /* common color */
+  /* Common color */
   --text-color: rgb(175, 176, 177);
   --text-muted-color: rgb(107, 116, 124);
-  --link-color: rgb(138, 180, 248);
-  --link-underline-color: rgb(82, 108, 150);
-  --main-border-color: rgb(44, 45, 45);
-  --button-bg: rgb(39, 40, 43);
+  --heading-color: #cccccc;
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(82, 108, 150);
+  --button-bg: rgb(39, 40, 43);
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --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);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+  --sidebar-muted-color: #6d6c6b;
+  --sidebar-active-color: rgb(255 255 255 / 80%);
+  --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-btn-bg: rgb(117 116 116 / 20%);
 
-  /* Top Bar */
+  /* Topbar */
   --topbar-text-color: var(--text-color);
+  --topbar-wrapper-bg: rgb(39, 40, 43);
+  --search-wrapper-bg: rgb(34, 34, 39);
+  --search-wrapper-border-color: rgb(34, 34, 39);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
   --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-active-bg: rgba(28, 52, 94, 1);
-  --btn-active-border-color: rgb(66, 94, 138);
-  --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
-  --btn-paginator-shadow: var(--main-wrapper-bg);
+  --btn-text-color: var(--text-color);
+  --pin-bg: rgb(34 35 37);
+  --pin-color: inherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
@@ -74,6 +77,7 @@
   /* categories */
   --categories-border: rgb(64, 66, 69);
   --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
@@ -81,6 +85,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
+  --footer-bg-color: var(--main-wrapper-bg);
   --footer-link: rgb(171, 171, 171);
 
   .post-content img {

_sass/colors/light-syntax.scss

@@ -1,10 +1,6 @@
-/*!
-* The syntax light mode code snippet colors.
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
-*/
+/*
+ * The syntax light mode code snippet colors.
+ */
 
 @mixin light-syntax {
   /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
@@ -72,8 +68,12 @@
 
   /* --- custom light colors --- */
   --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #353a3d;
+  --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
   --inline-code-bg: #f3f3f3;
+  --code-header-bg: #eaeaea;
+  --lang-badge-color: rgb(128 128 128 / 87%);
+  --lang-badge-muted-color: rgb(128 128 128 / 36%);
+  --clipboard-checked-color: #43c743;
+
 } // light-syntax

_sass/colors/light-typography.scss

@@ -1,42 +1,44 @@
-/*!
-* The syntax light mode typography colors
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
-*/
+/*
+ * The syntax light mode typography colors
+ */
 
 @mixin light-scheme {
-  /* Common */
+  /* Framework color */
   --body-bg: #fafafa;
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --btn-border-color: #e9ecef;
-  --text-color: #333333;
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
+
+  /* Common color */
+  --text-color: #34343c;
+  --text-muted-color: gray;
+  --heading-color: black;
   --blockquote-border-color: #eee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;
   --link-underline-color: #dee2e6;
-  --text-muted-color: gray;
-  --tb-odd-bg: #fbfcfd;
-  --tb-border-color: #eaeaea;
   --button-bg: #fff;
+  --btn-border-color: #e9ecef;
   --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(
-    circle,
-    rgba(42, 30, 107, 1) 0%,
-    rgba(35, 37, 46, 1) 100%);
-  --nav-cursor-color: #fcfcfc;
+  --sidebar-bg: #eeeeee;
+  --sidebar-muted-color: #a2a19f;
+  --sidebar-active-color: #424242;
+  --nav-cursor-color: #757575;
+  --sidebar-btn-bg: white;
 
   /* Topbar */
-  --topbar-wrapper-bg: white;
   --topbar-text-color: rgb(78, 78, 78);
-  --search-wrapper-bg: #f5f5f5;
+  --topbar-wrapper-bg: white;
+  --search-wrapper-bg: rgb(245 245 245 / 50%);
+  --search-wrapper-border-color: rgb(245 245 245);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: var(--btn-border-color);
@@ -44,26 +46,31 @@
   /* Home page */
   --post-list-text-color: dimgray;
   --btn-patinator-text-color: #555555;
-  --btn-paginator-hover-color: #e9ecef;
-  --btn-active-bg: #2a408e;
-  --btn-active-border-color: #007bff;
-  --btn-text-color: #f8f8f8;
-  --btn-paginator-border-color: #f1f1f1;
-  --btn-paginator-shadow: #4b92d2;
+  --btn-paginator-hover-color: var(--sidebar-bg);
+  --btn-paginator-border-color: var(--sidebar-bg);
+  --btn-text-color: #676666;
+  --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);
+  --footnote-target-bg: lightcyan;
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;
   --tag-shadow: var(--btn-border-color);
   --tag-hover: rgb(222, 226, 230);
-  --categories-hover-bg: var(--btn-border-color);
+  --tb-odd-bg: #fbfcfd;
+  --tb-border-color: #eaeaea;
   --dash-color: silver;
 
+  /* Categories */
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
   /* Archive */
   --timeline-color: rgba(0, 0, 0, 0.075);
   --timeline-node-bg: #c2c6cc;
@@ -71,6 +78,5 @@
 
   /* Footer */
   --footer-bg-color: #ffffff;
-  --footnote-target-bg: lightcyan;
   --footer-link: #424242;
 } // light-scheme

_sass/jekyll-theme-chirpy.scss

@@ -0,0 +1,24 @@
+/*!
+ * The styles for Jekyll theme Chirpy
+ *
+ * Chirpy v4.3.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+
+@import
+  "colors/light-typography",
+  "colors/dark-typography",
+
+  "addon/module",
+  "addon/variables",
+  "variables-hook",
+  "addon/syntax",
+  "addon/commons",
+
+  "layout/home",
+  "layout/post",
+  "layout/tags",
+  "layout/archives",
+  "layout/categories",
+  "layout/category-tag";

_sass/layout/archives.scss

@@ -1,13 +1,6 @@
----
-# Style for Archives
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Style for Archives
+*/
 
 %date-timeline {
   content: "";
@@ -19,43 +12,15 @@
   background-color: var(--timeline-color);
 }
 
-%date-font {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
 #archives {
   letter-spacing: 0.03rem;
-  li {
-    font-size: 1.1rem;
-    line-height: 3rem;
-    &:nth-child(odd) {
-      background-color: var(--main-wrapper-bg, #fff);
-      background-image: linear-gradient(
-        to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
-    }
-    > div {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 
   span.lead {
     font-size: 1.5rem;
-    @extend %date-font;
     position: relative;
     left: 8px;
 
-    &:not(:first-child) {
-      position: relative;
-      left: 4px;
-      &::after {
-        left: 67px;
-      }
-    }
-
-    &::after {
-      /* Year dot */
+    &::after { /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -72,16 +37,72 @@
       box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
+
+    &:not(:first-child) {
+      position: relative;
+      left: 4px;
+      &::after {
+        left: 67px;
+      }
+    }
+
   } // #archives span.lead
 
+  ul {
+    li {
+      font-size: 1.1rem;
+      line-height: 3rem;
+
+      div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        a {
+          /* post title in Archvies */
+          margin-left: 2.5rem;
+          position: relative;
+          top: 0.1rem;
+        }
+      }
+
+      &:nth-child(odd) {
+        background-color: var(--main-wrapper-bg, #fff);
+        background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+      }
+
+      &::after {
+        @extend %date-timeline;
+
+        height: 2.8rem;
+        top: -1.3rem;
+      }
+
+      &:first-child::before {
+        @extend %date-timeline;
+
+        height: 3.06rem;
+        top: -1.61rem;
+      }
+    }
+
+    &:not(:last-child) > li:last-child::after {
+      height: 3.4rem;
+    }
+
+    &:last-child > li:last-child::after {
+      display: none;
+    }
+  } // #archives ul
+
   .date {
     white-space: nowrap;
     display: inline-block;
     &.month {
       width: 1.4rem;
       text-align: center;
-      @extend %date-font;
-      ~a::before {
+
+      ~ a::before {
         /* A dot for Month and Day */
         content: "";
         display: inline-block;
@@ -110,36 +131,8 @@
     }
   } // #archives .date
 
-  ul {
-    > li {
-      > div > a {
-        /* post title in Archvies */
-        margin-left: 2.5rem;
-        position: relative;
-        top: 0.1rem;
-      }
-      &::after {
-        @extend %date-timeline;
-        height: 2.8rem;
-        top: -1.3rem;
-      }
-      &:first-child::before {
-        @extend %date-timeline;
-        height: 3.06rem;
-        top: -1.61rem;
-      }
-    }
-    &:not(:last-child) > li:last-child::after {
-      height: 3.4rem;
-    }
-    &:last-child > li:last-child::after {
-      display: none;
-    }
-  } // #archives ul
-
 } // #archives
 
-
 @media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;

_sass/layout/categories.scss

@@ -1,13 +1,6 @@
----
-# Style for Tab Categories
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Style for Tab Categories
+*/
 
 %category-icon-color {
   color: gray;
@@ -15,16 +8,22 @@
 
 .categories {
   margin-bottom: 2rem;
+
   .card-header {
     padding-right: 12px;
   }
+
+  i {
+    @extend %category-icon-color;
+
+    font-size: 86%; // fontawesome icons
+  }
+
   .list-group-item {
     border-left: none;
     border-right: none;
     padding-left: 2rem;
-    > i {
-      @extend %category-icon-color;
-    }
+
     &:first-child {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -32,16 +31,6 @@
 
   }
 
-  .card-header > span > i:first-child {
-    @extend %category-icon-color;
-  }
-
-  i {
-    &.far, &.fas {
-      font-size: 86%; // fontawesome icons
-    }
-  }
-
 } // .categories
 
 .category-trigger {
@@ -49,12 +38,19 @@
   height: 1.7rem;
   border-radius: 50%;
   text-align: center;
-  color: #6c757d!important;
-  > i.fas {
+  color: #6c757d !important;
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
+
+  i {
     position: relative;
     height: 0.7rem;
     width: 1rem;
-    transition: 300ms ease all;
+    transition: transform 300ms ease;
   }
 }
 

_sass/layout/category-tag.scss

@@ -1,18 +1,18 @@
----
-# Style for page Category and Tag
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
+/*
+  Style for page Category and Tag
+*/
 
+.dash {
+  margin: 0 .5rem .6rem .5rem;
+  border-bottom: 2px dotted var(--dash-color);
+}
 
-{% include_relative _addon/main.scss %}
-
-#page-category, #page-tag {
+#page-category,
+#page-tag {
   ul > li {
     line-height: 1.5rem;
     padding: 0.6rem 0;
+
     &::before { // dot
       background: #999;
       width: 5px;
@@ -24,14 +24,16 @@
       top: 0.6rem;
       margin-right: 0.5rem;
     }
+
     > a { /* post's title */
-      font-size: 1.1rem;
       @extend %no-bottom-border;
+
+      font-size: 1.1rem;
     }
+
     > span:last-child {
       white-space: nowrap;
-    }
-    /* post's date */
+    } /* post's date */
   }
 }
 
@@ -43,22 +45,19 @@
   font-size: 1.25rem;
 }
 
-a:hover {
-  #page-category &,
-  #page-tag &,
-  #access-lastmod & {
+#page-category,
+#page-tag,
+#access-lastmod {
+  a:hover {
     @extend %link-hover;
+
     margin-bottom: -1px; // Avoid jumping
   }
 }
 
-.dash {
-  margin: 0 .5rem .6rem .5rem;
-  border-bottom: 2px dotted var(--dash-color);
-}
-
 @media all and (max-width: 576px) {
-  #page-category, #page-tag {
+  #page-category,
+  #page-tag {
     ul > li {
       &::before {
         margin: 0 .5rem;

_sass/layout/home.scss

@@ -1,90 +1,34 @@
----
-# Style for Homepage
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-{% include_relative _addon/main.scss %}
-
-#post-list {
-  margin-top: 1rem;
-  padding-right: 0.5rem;
-
-  .post-preview {
-    padding-top: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--main-border-color);
-
-    h1 {
-      font-size: 1.4rem;
-      margin: 0;
-      ~i { // pinned icon
-        font-size: 0.86rem;
-      }
-    }
-
-    .post-meta {
-      i {
-        font-size: 0.73rem;
-        &:not(:first-child) { // post-meta icons on the homepage
-          margin-left: 1.5rem;
-        }
-      }
-    }
-
-    .post-content {
-      margin-top: 0.6rem;
-      margin-bottom: 0.6rem;
-      color: var(--post-list-text-color);
-      >p {
-        /* Make preview shorter on the homepage */
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-    }
-
-  } // .post-preview
-
-} // #post-list
+/*
+  Style for Homepage
+*/
 
 .pagination {
-  font-size: 1rem;
+  color: var(--btn-patinator-text-color);
+  font-family: 'Lato', sans-serif;
+
   a:hover {
     text-decoration: none;
   }
 
   .page-item {
     .page-link {
-      color: var(--btn-patinator-text-color);
+      color: inherit;
       width: 2.5rem;
       height: 2.5rem;
       padding: 0;
-      text-align: center;
       display: -webkit-box;
-      display: flex;
       -webkit-box-pack: center;
-      justify-content: center;
       -webkit-box-align: center;
-      align-items: center;
       border-radius: 50%;
       border: 1px solid var(--btn-paginator-border-color);
-      font-family: 'Lato', sans-serif;
       background-color: var(--button-bg);
       &:hover {
-        background-color: var(--btn-paginator-hover-color)
+        background-color: var(--btn-paginator-hover-color);
       }
     }
     &.active {
       .page-link {
-        background-color: var(--btn-active-bg);
-        border-color: var(--btn-active-border-color);
-        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+        background-color: var(--btn-paginator-hover-color);
         color: var(--btn-text-color);
       }
     }
@@ -100,23 +44,79 @@
     &:last-child .page-link {
       border-radius: 50%;
     }
-    &:not(:last-child) {
-      margin-right: 0.7rem;
-    }
   } // .page-item
 
 } // .pagination
 
-@media all and (max-width: 576px) {
-  #post-list .post-meta>span i:not(:first-child) {
-    margin-left: 1rem;
-  }
-}
+#post-list {
+  margin-top: 1rem;
+  padding-right: 0.5rem;
+
+  .post-preview {
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--main-border-color);
+
+    a:hover {
+      @extend %link-hover;
+    }
+
+    h1 {
+      font-size: 1.4rem;
+      margin: 0;
+    }
+
+    .post-meta {
+      i {
+        font-size: 0.73rem;
+      }
+      span:not(:last-child) {
+        margin-right: 1.2rem;
+      }
+    }
+
+    .post-content {
+      margin-top: 0.6rem;
+      margin-bottom: 0.6rem;
+      color: var(--post-list-text-color);
+      > p {
+        /* Make preview shorter on the homepage */
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
+  } // .post-preview
+
+} // #post-list
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: center;
+    justify-content: space-evenly;
+
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+
+    }
+
   }
 }
 
@@ -125,15 +125,43 @@
 
   #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: 0.85rem;
-    .page-item .page-link {
-      width: 2.2rem;
-      height: 2.2rem;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+
+      .page-link {
+        width: 2rem;
+        height: 2rem;
+      }
+
     }
-  }
+
+    .page-index {
+      display: none;
+    }
+
+  } // .pagination
 
 }
 

_sass/layout/post.scss

@@ -1,21 +1,10 @@
----
-# Post-specific style
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
-{% include_relative _addon/syntax.scss %}
-
-$prompt-older: "{{ site.data.label.post.button.previous }}";
-$prompt-newer: "{{ site.data.label.post.button.next }}";
+/*
+  Post-specific style
+*/
 
 @mixin btn-sharing-color($light-color, $important: false) {
   @if $important {
-    color: var(--btn-share-color, $light-color)!important;
+    color: var(--btn-share-color, $light-color) !important;
   } @else {
     color: var(--btn-share-color, $light-color);
   }
@@ -27,25 +16,27 @@ $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-wrapper .post-meta {
+  > div:nth-child(2) {
+    > span:not(:first-child)::before {
+      @include dot;
+    }
+  }
+}
+
 .post-content {
-  > ol, > ul, > dl {
-    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;
+  .preview-img {
     @include align-center;
+
+    margin-top: 0;
+    margin-bottom: 2.5rem !important;
   }
 }
 
@@ -65,25 +56,50 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
   .btn {
     @include btn-post-nav;
+
     color: var(--link-color);
+
     &:hover {
       background: #2a408e;
       color: #fff;
       border-color: #2a408e;
     }
+
     &.disabled {
       @include btn-post-nav;
+
       pointer-events: auto;
       cursor: not-allowed;
       background: none;
       color: gray;
+
       &:hover {
         border-color: none;
       }
     }
+
     &.btn-outline-primary.disabled:focus {
       box-shadow: none;
     }
+
+    &::before {
+      color: var(--text-muted-color);
+      font-size: 0.65rem;
+      text-transform: uppercase;
+      content: attr(prompt);
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      left: 0.5px;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      right: 0.5px;
+    }
   }
 
   p {
@@ -93,29 +109,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     white-space: normal;
   }
 
-  a, span {
-    &::before {
-      color: var(--text-muted-color);
-      font-size: 0.65rem;
-      text-transform: uppercase;
-    }
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      left: 0.5px;
-      &::before {
-        content: $prompt-older
-      }
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      right: 0.5px;
-      &::before {
-        content: $prompt-newer
-      }
-    }
-  }
 } // .post-navigation
 
 @keyframes fade-up {
@@ -137,7 +130,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
-  animation: fade-up .8s;
+  animation: fade-up 0.8s;
   &.topbar-down {
     top: 6rem;
   }
@@ -146,33 +139,43 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   }
 }
 
-#toc li>a {
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+#toc li a {
+  font-size: 0.8rem;
+
+  &.nav-link:not(.active) {
+    color: inherit;
+  }
+
 }
 
+nav[data-toggle=toc] {
+  .nav {
+    .nav > li > a.active {
+      font-weight: 600 !important;
+    }
+  }
+}
 
-/*--- Related Posts ---*/
+/* --- Related Posts --- */
 
 #related-posts {
-  >h3 {
+  > h3 {
     @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;
-    -moz-transition: all .3s ease-in-out;
-    transition: all .3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.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);
-      box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -197,7 +200,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   ul {
     list-style-type: none;
     padding-inline-start: 1.5rem;
-    >li::before {
+    > li::before {
       background: #c2c9d4;
       width: 5px;
       height: 5px;
@@ -213,9 +216,12 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #post-extend-wrapper {
   min-height: 2rem;
+
   #disqus_thread {
+    min-height: 7.5rem;
     margin-bottom: 2rem;
   }
+
 }
 
 .post-tail-bottom a {
@@ -223,12 +229,13 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 %btn-share-hovor {
-  color: var(--btn-share-hover-color)!important;
+  color: var(--btn-share-hover-color) !important;
 }
 
 .share-wrapper {
   vertical-align: middle;
   user-select: none;
+
   .share-icons {
     font-size: 1.2rem;
     a {
@@ -237,20 +244,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       }
       &:hover {
         text-decoration: none;
-        >i {
+        > i {
           @extend %btn-share-hovor;
         }
       }
     }
-    >i {
-      padding-top: 0.35rem;
+    > i {
+      position: relative;
+      bottom: 1px;
+
+      @extend %cursor-pointer;
+
       &:hover {
         @extend %btn-share-hovor;
       }
     }
     .fab {
       &.fa-twitter {
-        @include btn-sharing-color(rgba(29, 161, 242, 1.00));
+        @include btn-sharing-color(rgba(29, 161, 242, 1));
       }
       &.fa-facebook-square {
         @include btn-sharing-color(rgb(66, 95, 156));
@@ -271,9 +282,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 } // .share-wrapper
 
-
 .share-label {
   @include label(inherit, 400, inherit);
+
   &::after {
     content: ":";
   }
@@ -281,25 +292,22 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 .license-wrapper {
   line-height: 1.2rem;
-  >a {
+  > a {
     font-weight: 600;
     &:hover {
       @extend %link-hover;
     }
   }
-  i {
-    font-weight: 400;
-  }
+
   span:last-child {
     font-size: 0.85rem;
   }
 } // .license-wrapper
 
-
 @media all and (max-width: 576px) {
   .post-tail-bottom {
-    -ms-flex-wrap: wrap-reverse!important;
-    flex-wrap: wrap-reverse!important;
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
     >div:first-child {
       width: 100%;
       margin-top: 1rem;
@@ -308,37 +316,27 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 @media all and (max-width: 768px) {
-  .post img {
+  .post-content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
 
 @media all and (min-width: 768px) {
-  .post {
+  #post-wrapper {
     .post-meta {
       >div:not(:first-child)::before {
-        content: "\2022";
-        color: rgba(158, 158, 158, 0.8);
-        font-weight: bold;
-        padding-left: 0.5rem;
-        padding-right: 0.3rem;
+        @include dot(0.5rem, 0.2rem);
       }
       &.flex-column {
-        -webkit-box-orient: horizontal!important;
-        -webkit-box-direction: normal!important;
-        -ms-flex-direction: row!important;
-        flex-direction: row!important;
+        -webkit-box-orient: horizontal !important;
+        -webkit-box-direction: normal !important;
+        -ms-flex-direction: row !important;
+        flex-direction: row !important;
       }
     }
   } // .post
 }
 
-@media all and (min-width: 768px) and (max-width: 830px) {
-  .post img {
-    max-width: calc(100% + 2rem);
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .post-navigation {

_sass/layout/tags.scss

@@ -1,13 +1,6 @@
----
-# Styles for Tab Tags
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Styles for Tab Tags
+*/
 
 .tag {
   border-radius: 0.7em;

_sass/variables-hook.scss

@@ -0,0 +1,3 @@
+/*
+  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
+*/

_tabs/about.md

@@ -1,13 +1,7 @@
 ---
 title: About
-icon: fas fa-info
+icon: fas fa-info-circle
 order: 4
-
-# The About page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
 

_tabs/archives.md

@@ -1,42 +1,7 @@
 ---
+layout: archives
 title: Archives
 icon: fas fa-archive
 order: 3
-
-# The Archives of posts.
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
-<div id="archives" class="pl-xl-2">
-{% for post in site.posts %}
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
-  {% if forloop.first %}
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  <span class="lead">{{this_year}}</span>
-  <ul class="list-unstyled">
-  {% endif %}
-    <li>
-      <div>
-        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
-        {% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
-        <span class="date day">{{ this_day }}</span>
-        <span class="date month small text-muted">{{ this_month }}</span>
-        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      </div>
-    </li>
-  {% if forloop.last %}
-  </ul>
-  {% elsif this_year != pre_year %}
-  </ul>
-  <span class="lead">{{pre_year}}</span>
-  <ul class="list-unstyled">
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  {% endif %}
-{% endfor %}
-</div>