Bump version to 3.0.0

good for gem-based first run

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+# 2 space indentation
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true

.gitattributes

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

.github/CODE_OF_CONDUCT.md

@@ -11,8 +11,7 @@ appearance, race, religion, or sexual identity and orientation.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to creating a positive environment include:
 
 * Using welcoming and inclusive language
 * Being respectful of differing viewpoints and experiences
@@ -22,12 +21,10 @@ include:
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
 * Trolling, insulting/derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
 * Other conduct which could reasonably be considered inappropriate in a
  professional setting
 
@@ -55,7 +52,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at cotes.chung@gmail.com. All
+reported by contacting the project team at `cotes.chung@gmail.com`. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.
@@ -68,9 +65,9 @@ members of the project's leadership.
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+<https://www.contributor-covenant.org/faq>
+
+[homepage]: https://www.contributor-covenant.org

.github/CONTRIBUTING.md

@@ -7,15 +7,9 @@ To ensure that the blog design is not confused, this project does not accept sug
 Generally, contribute to the project by:
 
 1. Fork this project on GitHub and clone it locally.
-2. Create a new branch named `feature/my-feature` (or `feature/fix-a-bug`), which branch from `develop`:
-
-    ```console
-    $ git checkout -b feature/<my-feature> develop
-    ```
-    > Please note that the new branch name must include the prefix `feature/`.
-
+2. Create a new branch from `master` and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
 3. After completing the development, commit and push to remote.
-4. Submit a new **pull request** to the `develop` branch of upstream, i.e., `cotes2020/jekyll-theme-chirpy:develop`.
+4. Submit a new pull request.
 
 ---
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-labels: bug
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
 <!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
@@ -12,38 +11,44 @@ labels: bug
 - [ ] There are no similar reports on existing issues (including closed ones).
 - [ ] I found the bug on the latest code of `master` branch.
 
-
 ## Describe the bug
 <!-- A clear and concise description of what the bug is. -->
 
-**To Reproduce**
+### To Reproduce
 
 Steps to reproduce the behavior:
-
+<!--
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
+-->
 
-
-**Expected behavior**
+### Expected behavior
 <!-- A clear and concise description of what you expected to happen. -->
 
-**Screenshots**
+### Screenshots
 <!-- If applicable, add screenshots to help explain your problem. -->
 
-**Desktop**
+### Software
 <!-- Please complete the following information -->
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
+- Ruby version: <!-- by running: `ruby -v` -->
+- Gem version: <!-- by running: `gem -v`-->
+- Bundler version: <!-- by running: `bundle -v`-->
+- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
 
-**Smartphone**
-<!-- please complete the following information -->
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser: [e.g. stock browser, safari]
- - Version: [e.g. 22]
+### Desktop
+<!-- If necessary, uncomment and fill in the following list:
+- OS: [e.g. macOS 10.15.6]
+- Browser: [e.g. Chrome 85.0.4183.83 (64-bit)]
+-->
 
-**Additional context**
+### Smartphone
+<!-- If necessary, uncomment and fill in the following list:
+- Device: [e.g. iPhone 6]
+- OS: [e.g. iOS 13.6.1]
+- Browser: [e.g. Chrome 22]
+-->
+
+### Additional context
 <!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,14 +4,14 @@ about: Suggest an idea for this project
 labels: enhancement
 ---
 
-<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
 
 ## Checklist
 <!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
 - [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
 - [ ] There are no similar request on existing issues (including closed ones).
 - [ ] I have read the [project progress](https://github.com/cotes2020/jekyll-theme-chirpy/projects) and know the current progress of the project.
-- [ ] I was in the `develop` branch of the latest code.
+- [ ] I was in the `master` branch of the latest code.
 
 
 ## Is your feature request related to a problem? Please describe

.github/ISSUE_TEMPLATE/question.md

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,25 +16,24 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
 
-## How has this been tested?
+## How has this been tested
 
 <!-- 
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->
 
-- [ ] I have run `bash ./tools/build.sh && bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/test.sh --build` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser
 
-**Test Configuration**
+### Test Configuration
 
-* Browerser type & version:
-* Operating system:
-* Bundler version:
-* Ruby version:
-* Jekyll version:
+- Browerser type & version:
+- Operating system:
+- Bundler version:
+- Ruby version:
+- Jekyll version:
 
-
-## Checklist:
+### Checklist
 <!-- Select checkboxes by change the "[ ]" to "[x]" -->
 - [ ] My code follows the [Google style guidelines](https://google.github.io/styleguide/)
 - [ ] I have performed a self-review of my own code
@@ -42,4 +41,4 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
 - [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] Any dependent changes have been merged and published in downstream modules
+- [ ] Any dependent changes have been merged and published in downstream modules

.github/stale.yml

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

.github/workflows/ci.yml

@@ -1,6 +1,8 @@
 name: 'Continuous Integration'
 on:
   push:
+    branches-ignore:
+      - 'production'
     tags-ignore:
       - '*'
     paths-ignore:
@@ -13,7 +15,7 @@ on:
       - 'LICENSE'
   pull_request:
     paths:
-      - "**"
+      - '**'
 
 jobs:
   ci:
@@ -22,47 +24,38 @@ jobs:
       matrix:
         os: [ubuntu-latest, macos-latest]
 
-    steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '2.6.x'
+    env:
+      GEMS_PATH: ~/vendor/bundle
 
+    steps:
       - name: Checkout
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7
 
       - name: Bundle Caching
-        id: bundle-cache
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
-          path: vendor/bundle
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          path: ${{ env.GEMS_PATH }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - name: Install GNU-Coreutils(for macOS)
-        if: runner.os == 'macOS'
-        run: |
-          brew install coreutils
-
-      - name: Bundle config
-        run: |
-          bundle config path vendor/bundle
-
       - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
         run: |
-          bundle install
-
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
-        run: |
-          bundle install --local
+          bundle config path ${{ env.GEMS_PATH }}
+          bundle install --jobs 4 --retry 3
 
       - name: Build Site
+        env:
+          JEKYLL_ENV: production
         run: |
-          bash tools/build.sh
+          bundle exec jekyll b
 
       - name: Test Site
         run: |

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

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

.github/workflows/issues-cleaner.yml

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

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

@@ -0,0 +1,68 @@
+name: 'Automatic build'
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+
+jobs:
+  continuous-delivery:
+
+    runs-on: ubuntu-latest
+
+    env:
+      GEMS_PATH: ~/vendor/bundle
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7
+
+      - name: Bundle Caching
+        uses: actions/cache@v2
+        with:
+          path: ${{ env.GEMS_PATH }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
+          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 "BASE_URL=$baseurl" >> $GITHUB_ENV
+          fi
+
+      - name: Build Site
+        env:
+          JEKYLL_ENV: production
+        run: |
+          bundle exec jekyll b -d "_site$BASE_URL"
+
+      - name: Test Site
+        run: |
+          bash tools/test.sh
+
+      - name: Deploy
+        run: |
+          if [[ -n $BASE_URL ]]; then
+            mv _site$BASE_URL _site-rename
+            rm -rf _site
+            mv _site-rename _site
+          fi
+
+          bash tools/deploy.sh

.gitignore

@@ -1,17 +1,16 @@
 # hidden files
 .*
+!.github
 
-# python compiled files
-*.pyc
-
-# jekyll debug
+# jekyll cache
 _site
-
-# Jeykll Gemfile.lock
-Gemfile.lock
-
-# yui-compressor
-*.jar
-
-# bundle cache
 vendor
+
+# rubygem
+*.gem
+# yard docs
+doc
+
+# npm dependencies
+node_modules
+package-lock.json

.travis.yml

@@ -2,36 +2,25 @@ os: linux
 dist: bionic
 
 language: ruby
-rvm: 2.6.5
+rvm: 2.7.0
 
-before_install:
-  - bundle config path 'vendor/bundle'
-
-install:
-  - bundle install --quiet
+cache: bundler
 
 addons:
   apt:
     packages:
-    - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+      - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
 
 script:
-  - >-
-    git clone https://${GH_PAT}@github.com/${GH_USER}/${BUILDER_REPO}.git
-    ${HOME}/${BUILDER_REPO} --depth=1 -q
-  - cp -r ${HOME}/${BUILDER_REPO}/framework/* .
-  - bash _cibuild.sh
+  - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
+  - eval "$BUILD_CMD"
 
 branches:
-  only: master
+  only: production
 
 git:
   depth: false # for posts lastmod
 
-cache:
-  directories:
-    - $TRAVIS_BUILD_DIR/vendor/bundle
-
 notifications:
   email:
     recipients:
@@ -40,4 +29,4 @@ notifications:
 
 env:
   global:
-    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
+    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

404.html

@@ -1,14 +1,9 @@
 ---
-# 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
+redirect_from:
   - /norobots/
   - /assets/
   - /tabs/
@@ -22,4 +17,4 @@ 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>
+</div>

Gemfile

@@ -1,14 +1,26 @@
 source "https://rubygems.org"
 
-gem "jekyll", ">=3.8.6"
+gem "jekyll", "~> 4.1"
 
-# Official Plugins
+# plugins
 group :jekyll_plugins do
-  gem "jekyll-paginate"
-  gem "jekyll-redirect-from"
-  gem "jekyll-seo-tag", "~> 2.6.1"
+  gem "jekyll-paginate", "~> 1.1"
+  gem "jekyll-redirect-from", "~> 0.16"
+  gem "jekyll-seo-tag", "~> 2.7"
+  gem "jekyll-archives", "~> 2.2"
+  gem "jekyll-sitemap", "~> 1.4"
 end
 
 group :test do
-  gem "html-proofer"
+  gem "html-proofer", "~> 3.18"
 end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?

Gemfile.lock

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

README.md

@@ -1,262 +1,224 @@
 # Chirpy
 
-🌏 English • [简体中文](docs/README_zh-CN.md)
+Language: English | [简体中文](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)
 
-A minimal, sidebar, responsive web design Jekyll theme, focusing on text presentation, aim to help you easily record and share your knowledge. [Live Demo »](https://chirpy.cotes.info)
+A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation. Designed to help you record and share your knowledge easily. [Live Demo »](https://chirpy.cotes.info)
 
-[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
+[![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png)](https://chirpy.cotes.info)
 
 ## Table of Contents
 
-* [Features](#features)
-* [Installing](#installing)
-* [Usage](#usage)
-* [Contributing](#contributing)
-* [Credits](#credits)
-* [Support](#support)
-* [License](#license)
+- [Features](#features)
+- [Installation](#installation)
+- [Prerequisites](#prerequisites)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [Credits](#credits)
+- [Supporting](#supporting)
+- [License](#license)
 
 ## Features
 
-* Pinned Posts
-* Configurable theme mode
-* Double-level Categories
-* Last modified date for posts
-* Table of Contents
-* Automatically recommend related posts
-* Syntax highlighting
-* Mathematical expressions
-* Search
-* Atom Feeds
-* Disqus Comments
-* Google Analytics
-* GA Pageviews reporting (Advanced)
-* SEO and Performance Optimization
-
-## Installing
-
-### Prerequisites
-
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of basic environment (`Ruby`, `RubyGems` and `Bundler`). 
-
-To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
-
-* Debian
-
-  ```console
-  $ sudo apt-get install coreutils
-  ```
-
-* macOS
-
-  ```console
-  $ brew install coreutils
-  ```
+- Pinned Posts
+- Configurable theme mode
+- Double-level Categories
+- Last modified date for posts
+- Table of Contents
+- 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
 
 
-### Jekyll Plugins
+## Prerequisites
 
-[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
+
+## Installation
+
+There are two ways to get the theme:
+
+  - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy)
+  - Fork from GitHub
+
+### Install From Rubygems
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-chirpy"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-chirpy
+```
+
+And then execute:
 
 ```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
+$ bundle
 ```
 
-And replace the `USER` above to your GitHub username.
+Finally, copy the missing files (refer to the [starter project][starter] for the detailed file directory structure) from the theme's gem to your Jekyll site, and append all the variables of the theme's `_config.yml` to your Jekyll site.
 
-The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
-
-```terminal
-$ bundle install
+> **Hint**: To locate the theme’s gem, execute:
+>
+```console
+$ bundle info --path jekyll-theme-chirpy
 ```
 
-`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
+Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+
+### Fork From GitHub
+
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local.
+
+Install gem dependencies by:
+
+```console
+$ bundle
+```
+
+And then execute:
+
+```console
+$ bash tools/init.sh
+```
+
+> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+
+What it does is:
+
+  1. Remove 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`.
+
+  3. Automatically create a commit to save the changes.
 
 
 ## Usage
 
-
-### Directory Structure
-
-The main files and related brief introductions are listed below:
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── docs
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
-```
-
-
-As mentioned above, some files or directories should be removed from your repo:
-
-```terminal
-$ rm -rf .travis.yml .github _posts/* 
-```
-
-
 ### 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`
-	
-	Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
+  - `url`
+  - `avatar`
+  - `timezone`
+  - `theme_mode`
 
+### Running Local Server
 
-* `avatar`
-    
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as small as possible(may be *<https://tinypng.com/>* will help).
-
-* `timezone`
-
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-
-* `theme_mode`
-  
-	There are three options for the theme color scheme:
-	
-	- **dual** 	- The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
-
-	- **dark**	- Always show dark mode.
-	- **light**	- Always show light mode.
-
-
-###  Run Locally
-
-You may want to preview the site content before publishing, so just run the script tool:
-
-```terminal
-$ bash tools/run.sh
-```
-
-Open a modern browser and visit at <http://localhost:4000>.
-
-Few days later, you may find that the file modification(e.g. edits to a post) does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine. Type `-h` for more information.
-
-###  Deploying to GitHub Pages
-
-Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
-
-#### Option 1: Built by GitHub Pages
-
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
-
-> **Note**: If you want to use any third-party Jekyll plugins that not on [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename the repository to:
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
-
-**2**. Commit the changes of the repo first, then run the publish script:
+You may want to preview the site contents before publishing, so just run it by:
 
 ```console
-$ bash tools/publish.sh
+$ bundle exec jekyll s
 ```
 
-> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, and then push to `origin/master`. Its output is similar to the following log:
+Or run the site on Docker with the following command:
 
 ```terminal
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[INFO] Published successfully!
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
 ```
 
-**3**. Go to GitHub website and enable GitHub Pages service for the repo.
+Open a browser and visit to _<http://localhost:4000>_.
 
-**4**. Check it out:
+### Deployment
 
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/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`.
 
+Now you can now choose ONE of the following methods to deploy your website.
 
-#### Option 2: Build Locally
+#### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any other plugin that not on the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
+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 GH Pages service.
 
-**1**. Browse to GitHub website, create a brand new repo named: 
+Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`.
+Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
 
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
+[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
 
-and clone it.
+Rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
 
-**2**. In the root of the source project, build your site by:
+And then publish your 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 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://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
+
+  3. Visit your website at the address indicated by GitHub.
+
+#### Deploy on Other Platforms
+
+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.
+
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+Or build the site with Docker by:
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
 
-**4**. Visit at:
+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.
 
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
+## Documentation
 
-#### Finishing work
-
-No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Securing your GitHub Pages site with HTTPS](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).
-
-
-### Documentation
-
-For more details and the better reading experience, please check out the [tutorial in 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).
+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).
 
 ## Contributing
 
 The old saying, "Two heads are better than one." Consequently, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
 
-
 ## 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).
 
-: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.
 
+Also, thank [JetBrains][JB] for providing the open source license.
 
-## Support
+[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][JB]
 
-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.
+[JB]:https://www.jetbrains.com/?from=jekyll-theme-chirpy
 
+## Supporting
+
+If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart: Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
 
 ## License
 
-This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.

_config.yml

@@ -1,29 +1,21 @@
-# The Site Settings
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT licensed
-
+# The Site Configuration
 
 # 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.
 
-# Replace with the website url, e.g. 'https://username.github.io'
-url: 'protocol://domain'
+# 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
 
@@ -42,8 +34,7 @@ social:
     # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-
-#--------------------------
+# --------------------------
 
 
 # Only if your site type is GitHub Project sites and doesn't have a custom domain,
@@ -69,31 +60,39 @@ disqus:
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
 
-# Prefer color scheme setting, available values:
+# Prefer color scheme setting.
 #
-#     dual   - Follow the system prefer color by default, and a toggle will display
-#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+# 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: dual
+theme_mode:   # [light|dark]
 
-# boolean type, global switch for ToC in posts.
+# 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: ''
+
+# the avatar on sidebar, support local or CORS resources
+avatar: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/avatar.jpg
+
+# boolean type, the global switch for ToC in posts.
 toc: true
 
 paginate: 10
 
-markdown: kramdown
-
-highlighter: rouge
-
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
-    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
@@ -105,16 +104,21 @@ kramdown:
 # or you think you're smart enough to change other relevant URLs within this template.
 permalink: /posts/:title/
 
+collections:
+  tabs:
+    output: true
+    sort_by: order
+
+
 defaults:
   -
     scope:
-      path: ""          # An empty string here means all files in the project
+      path: ''          # An empty string here means all files in the project
       type: posts
     values:
       layout: post
       comments: true    # Enable comments in posts.
       toc: true         # Display TOC column in posts.
-      location: Post
       breadcrumb:
         -
           label: Posts
@@ -124,12 +128,17 @@ defaults:
       path: _drafts
     values:
       comments: false
+  -
+    scope:
+      path: index.html
+    values:
+      breadcrumb:
+        -
+          label: Posts
   -
     scope:
       path: tags
     values:
-      tab_active: Tags
-      location: Tag
       breadcrumb:
         -
           label: Home
@@ -141,8 +150,6 @@ defaults:
     scope:
       path: categories
     values:
-      tab_active: Categories
-      location: Category
       breadcrumb:
         -
           label: Home
@@ -152,7 +159,8 @@ defaults:
           url: /tabs/categories/
   -
     scope:
-      path: tabs
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
       dynamic_title: true    # Hide title in mobile screens.
@@ -161,42 +169,36 @@ defaults:
           label: Home
           url: /
 
-
 sass:
-  sass_dir: /assets/css
   style: compressed
 
 compress_html:
   clippings: all
-  comments: ["<!-- ", " -->"]
-  endings: [html, head, body, dt, dd, rt, rp,
-            optgroup, option, colgroup, caption,
-            thead, tbody, tfoot, tr, td, th]
+  comments: all
+  endings: all
   profile: false
   blanklines: false
   ignore:
-    envs: []
+    envs: [development]
 
 exclude:
-  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
+  - vendor
   - Gemfile.lock
   - Gemfile
   - tools
   - docs
   - README.md
   - LICENSE
+  - gulpfile.js
+  - node_modules
+  - package.json
+  - package-lock.json
 
-sitemap_exclude:  # Sitemap will exclude the following items.
-  fuzzy:
-    - /assets/
-  accurate:
-    - /norobots/
-    - /tabs/
-    - /categories/
-    - /tags/
-    - /posts/
-    - 404.html
-    - feed.xml
-    - sitemap.xml
-    - robots.txt
-    - redirects.json
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: category
+    tag: tag
+  permalinks:
+    tag: /tags/:name/
+    category: /categories/:name/

_data/contact.yml

@@ -1,8 +1,4 @@
 #  The contact options.
-#  v2.3
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
 
 -
   type: github
@@ -21,11 +17,14 @@
 
 # Uncomment and complete the url below to enable more contact options
 # -
+#   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your mastodon account page
 # -
+#   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your Linkedin homepage
 # -
+#   type: stack-overflow
 #   icon: 'fab fa-stack-overflow'
 #   url:  ''                  # Fill with your stackoverflow homepage

_data/date_format.yml

@@ -1,11 +1,7 @@
 #  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 +1,19 @@
 # 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"
+  lastmod: Recent Update
+  trending_tags: Trending Tags
+  toc: Contents
 
 post:
-  relate_posts: "Further Reading"
+  relate_posts: Further Reading
+  share: Share
   button:
     next: Newer
     previous: Older
 
-search_hint: "Search"   # text show on search bar
+search_hint: Search   # text show on search bar
+
+pin_prompt: Pinned    # pinned prompt
+
+read_time_unit: min   # see posts' time to read

_data/rights.yml

@@ -1,10 +1,4 @@
-#  License data.
-#
-#  v2.1
-#  https://github.com/cotes2020/jekyll-theme-chirpy
-#  © 2020 Cotes Chung
-#  MIT Licensed
-
+#  License data
 
 license:
   name: CC BY 4.0
@@ -14,4 +8,4 @@ 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.
+  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:
   -

_data/tabs.yml

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

_includes/css-selector.html

@@ -1,54 +1,10 @@
 <!--
   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.type == '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.type == 'tags' %}
-
-    <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
-
-  {% elsif page.type == 'archives' %}
-
-    <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
-
-  {% else %}
-
-    <link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
-
-  {% endif %}
-
-{% elsif page.layout == 'category' or page.layout == 'tag' %}
-
-  <link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
-
-{% elsif page.layout == 'post' %}
-
-  <link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
-
-  {% if 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 %}

_includes/disqus.html

@@ -1,26 +1,25 @@
 <!--
   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
+  Powered by: <https://github.com/osvaldasvalutis/disqusLoader.js>
 -->
 
-<div id="disqus" class="pt-2 pb-4">
-  <p class="font-italic text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+<div id="disqus" class="pt-2 pb-2">
+  <p class="text-center text-muted pb-5">
+    Loading comments from <a href="https://disqus.com/">Disqus</a> ...
+  </p>
 </div>
 
-<script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>
+<script src="{{ '/assets/js/lib/jquery.disqusloader.min.js' | relative_url }}"></script>
 <script>
-  var options = {
+  const options = {
     scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',
 
     disqusConfig: function() {
-      this.page.url = '{{ site.url | append: site.baseurl | append: page.url }}';
+      this.page.title = '{{ page.title }}';
+      this.page.url = '{{ page.url | absolute_url }}';
       this.page.identifier = '{{ page.url }}';
     }
   };
 
   $.disqusLoader('#disqus', options);
-</script>
+</script>

_includes/favicons.html

@@ -1,10 +1,6 @@
 <!--
   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
 -->
 
 {% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %}

_includes/fixlinenos.html

@@ -1,12 +0,0 @@
-<!--
-  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 include.content contains '<pre class="highlight">' %}
-  {% assign content = include.content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign content = content | replace: '</code></pre>', '</code>' %}
-  {{ content }}
-{% else %}
-  {{ include.content }}
-{% endif %}

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

_includes/google-analytics.html

@@ -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 defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  document.addEventListener("DOMContentLoaded", function(event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
 
-  ga('create', '{{ site.google_analytics.id }}', 'auto');
-  ga('send', 'pageview');
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics.id }}');
+  });
 </script>

_includes/head.html

@@ -1,15 +1,29 @@
 <!--
   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">
 
+  {% if page.layout == 'home' or page.layout == 'post' %}
+    <meta name="pv-cache-enabled" content="{{ site.google_analytics.pv.enabled }}">
+
+    {% if site.google_analytics.pv.enabled %}
+      {% if site.google_analytics.pv.proxy_endpoint != ''
+        and 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 %}
+        <meta name="pv-cache-data" content="{{ '/assets/js/data/pageviews.json' | relative_url }}">
+      {% endif %}
+
+    {% endif %}
+  {% endif %}
+
+  {% seo title=false %}
+
   <title>
   {%- unless page.layout == "home" -%}
     {{ page.title | append: " | "}}
@@ -17,8 +31,6 @@
     {{ site.title }}
   </title>
 
-  {% seo title=false %}
-
   {% include favicons.html %}
 
   <!-- Google Fonts -->
@@ -44,10 +56,6 @@
   <link rel="dns-prefetch" href="cdn.jsdelivr.net">
 
   <!-- Bootstrap -->
-  <link rel="preload" as="style"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
-    integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin>
-
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
@@ -62,14 +70,11 @@
 
   <!-- JavaScripts -->
 
-  <link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-
-  <script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" async></script>
+  <script defer
+    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>
+</head>

_includes/js-selector.html

@@ -1,41 +1,39 @@
 <!--
   JS selector for site.
-  Chirpy v2.3
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2020 Cotes Chung
-  MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
-
-  <script src="{{ '/assets/js/home.min.js' | relative_url }}" async></script>
-
-{% elsif page.layout == 'post' %}
-
-  <script src="{{ '/assets/js/post.min.js' | relative_url }}" async></script>
-
-  {% if page.math %}
-    <!-- MathJax -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
-  {% endif %}
-
-{% elsif page.layout == 'page' %}
-
-  {% if page.type == 'categories' %}
-    <script src="{{ '/assets/js/categories.min.js' | relative_url }}" async></script>
-  {% else %}
-    <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
+{% if page.layout == 'home' or page.layout == 'post' %}
+  {% if site.google_analytics.pv.enabled %}
+    <!-- pv-report needs countup.js -->
+    <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
+    <script async src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
+{% endif %}
 
+{% if page.layout == 'home'
+    or page.layout == 'post'
+    or page.layout == 'categories' %}
+  {% assign type = page.layout %}
 {% else %}
-
-  <script src="{{ '/assets/js/page.min.js' | relative_url }}" async></script>
-
+  {% assign type = "page" %}
 {% endif %}
 
+{% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
+<script defer src="{{ js | relative_url }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+{% endif %}
 
-<!-- PWA -->
 {% if jekyll.environment == 'production' %}
-  <script src="{{ '/app.js' | relative_url }}" defer></script>
+  <!-- PWA -->
+  <script defer src="{{ '/app.js' | relative_url }}"></script>
+
+  <!-- GA -->
+  {% if site.google_analytics.id %}
+    {% include google-analytics.html %}
+  {% endif %}
+
 {% endif %}

_includes/lozad.html

@@ -1,8 +1,10 @@
-<!-- image lazy load: https://github.com/ApoorvSaxena/lozad.js -->
+<!--
+  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 imgs = document.querySelectorAll('.post-content img');
   const observer = lozad(imgs);
   observer.observe();
-</script>
+</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() */
@@ -74,16 +70,43 @@
 
     get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
 
-    get isLightkMode() { return this.mode == ModeToggle.LIGHT_MODE; }
+    get isLightMode() { return this.mode == ModeToggle.LIGHT_MODE; }
 
     get hasMode() { return this.mode != null; }
 
     get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
 
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer) ) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
+
+    updateMermaid() {
+      if (typeof mermaid !== "undefined") {
+        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
+        let config = { theme: expectedTheme };
+
+        /* re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+        $(".mermaid").each(function() {
+          let svgCode = $(this).prev().children().html();
+          $(this).removeAttr("data-processed");
+          $(this).html(svgCode);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     flipMode() {
       if (this.hasMode) {
         if (this.isSysDarkPrefer) {
-          if (this.isLightkMode) {
+          if (this.isLightMode) {
             this.clearMode();
           } else {
             this.setLight();
@@ -105,6 +128,8 @@
         }
       }
 
+      this.updateMermaid();
+
     } /* flipMode() */
 
   } /* ModeToggle */
@@ -112,7 +137,9 @@
   let toggle = new ModeToggle();
 
   $(".mode-toggle").click(function() {
+
     toggle.flipMode();
+
   });
 
-</script>
+</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/panel.html

@@ -1,70 +1,57 @@
 <!--
   The Pannel on right side (Desktop views)
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
 
-  {% if site.data.updates %}
+  {% include update-list.html %}
 
-    {% include update-list.html %}
-
-    {% if update_list.size > 0 %}
+  {% if update_list.size > 0 %}
 
     <div id="access-lastmod" class="post">
-      <h3 data-toc-skip>
-        {{- site.data.label.panel.lastmod -}}
-      </h3>
+      <span>{{- site.data.label.panel.lastmod | default: 'Recent Update' -}}</span>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
-        {% assign post_url = item | split: "::" | last | url_encode | prepend: "/posts/" | append: "/" %}
-        {% assign post = site.posts | where: "url", post_url | first %}
-
-        {% if post %}
-          {% assign url = post.url | relative_url %}
-          <li><a href="{{ url }}">{{ post.title }}</a></li>
-        {% endif %}
-
+        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+        <li><a href="{{ url }}">{{ post.title }}</a></li>
       {% endfor %}
 
       </ul>
-    </div><!-- #access-lastmod -->
+    </div> <!-- #access-lastmod -->
 
-    {% endif %}
-
-  {% endif %} <!-- site.data.updates -->
+  {% endif %}
 
   {% include trending-tags.html %}
 
   {% if trending_tags.size > 0 %}
     <div id="access-tags">
-      <h3 data-toc-skip>
-        {{- site.data.label.panel.trending_tags -}}
-      </h3>
+      <span>{{- site.data.label.panel.trending_tags | default: '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>
     </div>
   {% endif %}
   </div> <!-- .access -->
 
-  {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2 mb-2">
-      {{- site.data.label.panel.toc -}}
-    </h3>
-    <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.label.panel.toc | default: 'Contents' -}}
+      </span>
+      <nav id="toc" data-toggle="toc"></nav>
+    </div>
   {% endif %}
 
 </div> <!-- #panel-wrapper -->

_includes/post-nav.html

@@ -1,15 +1,11 @@
 <!--
   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.label.post.button.previous | default: 'previous' }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
@@ -19,7 +15,8 @@
   {% 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.label.post.button.next | default: 'next' }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
@@ -28,4 +25,4 @@
   </span>
   {% endif %}
 
-</div>
+</div>

_includes/post-paginator.html

@@ -1,26 +1,19 @@
 <!--
   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">
   <!-- left arrow -->
   {% if paginator.previous_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
+    {% 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>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
-  </li>
-  {% endif %}
-  <!-- endof left arrow -->
 
   <!-- page numbers -->
   {% assign left_ellipsis = false %}
@@ -51,38 +44,37 @@
     {% endif %}
 
     {% if show %}
-        <!-- show number -->
-        <li class="page-item {% if i == paginator.page %} active{% endif %}">
-          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      <!-- show number -->
+      <li class="page-item {% if i == paginator.page %} active{% endif %}">
+        <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      </li>
+    {% else %}
+      <!-- hide number -->
+      {% if i < pre and left_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
         </li>
-      {% else %}
-        <!-- hide number -->
-        {% if i < pre and left_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign left_ellipsis = true %}
-        {% elsif i > next and right_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign right_ellipsis = true %}
-        {% endif %}
+        {% assign left_ellipsis = true %}
+      {% elsif i > next and right_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
+        </li>
+        {% assign right_ellipsis = true %}
       {% endif %}
+    {% endif %}
 
   {% endfor %}
 
   <!-- right arrow -->
-  {% if paginator.next_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
+  {% 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>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
-  </li>
-  {% endif %}
 
-</ul> <!-- .pagination -->
+</ul> <!-- .pagination -->

_includes/post-sharing.html

@@ -1,22 +1,17 @@
 <!--
  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.label.post.share | default: '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 %}
         <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
-          title="{{ share.type }}" target="_blank">
+          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
           <i class="fa-fw {{ share.icon }}"></i>
         </a>
     {% endfor %}
@@ -25,4 +20,4 @@
         data-toggle="tooltip" data-placement="top" title="Copy link"></i>
 
   </span>
-</div>
+</div>

_includes/read-time.html

@@ -0,0 +1,19 @@
+<!--
+  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 %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom" title="{{ words }} words">
+  {{- read_time -}}{{" "}}{{- site.data.label.read_time_unit | default: "min" -}}
+</span>

_includes/refactor-content.html

@@ -0,0 +1,66 @@
+<!--
+  Refactor the HTML structure.
+-->
+
+{% assign _content = include.content %}
+
+<!--
+  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>'
+    | 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'
+    | 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 %}
+
+{% if _content contains '<img src="' %}
+
+  {% 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 lozad = true %}
+  {% assign img_placehodler
+    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
+
+  {% assign lozad_replacement = '<img src="'
+    | append: img_placehodler
+    | append: '" data-src="' %}
+
+  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+
+{% endif %}
+
+<!-- return -->
+{{ _content }}
+
+{% if lozad %}
+  {% include lozad.html %}
+{% endif %}

_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  -->
@@ -84,8 +79,9 @@
 
 
 {% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
-    <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
+  <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 | default: 'Further Reading' }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}

_includes/search-loader.html

@@ -1,9 +1,5 @@
 <!--
   Jekyll Simple Search loader
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 {% capture result_elem %}
@@ -25,8 +21,8 @@
 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 }}'
 });
-</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 id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags | default: '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,90 +1,91 @@
 <!--
   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">
+
+  <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>
 
-  <ul class="nav flex-column">
-  {% assign page_urls = page.url | split: "/" %}
+    <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
 
-  {% for item in site.data.tabs %}
-    {% assign ref = site.baseurl | append: "/" %}
+  </div><!-- .profile-wrapper -->
 
-    {% if item.path %}
-      {% assign ref = ref | append: item.path | append: "/" %}
-      {% if item.url %}
-        {% assign ref = ref | append: item.url | append: "/" %}
-      {% endif %}
-    {% endif %}
-
-    <li class="nav-item d-flex justify-content-center
-      {% if item.url == page_urls.last
-        or item.name == page.tab_active
-        or item.name == "Home" and page.layout == "home" %}active{% endif %}">
-      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ item.name | upcase }}</span>
+  <ul class="w-100">
+    <!-- home -->
+    <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>
+      </a>
+    </li>
+    <!-- the real tabs -->
+    {% for tab in site.tabs %}
+    <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>
       </a>
     </li> <!-- .nav-item -->
-  {% endfor %}
+    {% endfor %}
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrapper -->
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
 
-<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
+    {% for entry in site.data.contact %}
+      {% capture url %}
+        {%- if entry.type == 'github' -%}
+          https://github.com/{{ site.github.username }}
+        {%- elsif entry.type == 'twitter' -%}
+          https://twitter.com/{{ site.twitter.username }}
+        {%- elsif entry.type == 'email' -%}
+          {% assign email = site.social.email | split: '@' %}
+          javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
+        {%- elsif entry.type == 'rss' -%}
+          {{ "/feed.xml" | relative_url }}
+        {%- else -%}
+          {{ entry.url }}
+        {%- endif -%}
+      {% endcapture %}
 
-  {% if site.theme_mode == "dual" %}
-  <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:window.open('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 }}" {% unless entry.noblank %}target="_blank"{% 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
 -->
+
+{% assign tooltip_df = site.data.date_format.tooltip | default: '%a, %b %e, %Y, %l:%M %p %z' %}
+{% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+{% assign post_short_df = site.data.date_format.post.short | default: '%b %e' %}
+
 <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 }}
+    {{ include.date | date: post_short_df }}
   {% else %}
-    {{ include.date | date: site.data.date_format.post.long }}
+    {{ include.date | date: post_long_df }}
   {% endif %}
 
   <i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
 
-</span>
+</span>

_includes/topbar.html

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

_includes/trending-tags.html

@@ -1,31 +1,36 @@
 {% comment %}
   The trending tags list
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT Licensed
 {% endcomment %}
 
 {% assign MAX = 10 %}
 
-{% capture tags_array %}
-  {% for tag in site.tags %}
-    {{ tag[1] | size }}::{{ tag[0] | replace: ' ', '-' }}
-  {% endfor %}
-{% endcapture %}
+{% assign size_list = "" | split: "" %}
+{% assign tag_list = "" | split: "" %}
 
-{% assign all_tags = tags_array | split: " " | sort | reverse %}
-{% assign count = 0 %}
+{% for tag in site.tags %}
+  {% assign size = tag | last | size %}
+  {% assign size_list = size_list | push: size %}
+
+  {% assign tag_str = tag | first | append: "::" | append: size %}
+  {% assign tag_list =  tag_list | push: tag_str %}
+{% endfor %}
+
+{% assign size_list = size_list | sort | reverse %}
+
+{% assign tag_list = tag_list | sort_natural %}
 
 {% assign trending_tags = "" | split: "" %}
 
-{% for iter in all_tags %}
-  {% assign count = count | plus: 1 %}
-  {% assign tag = iter | split: "::" | last  %}
-
-  {% assign trending_tags = trending_tags | push: tag %}
-
-  {% if count >= MAX %}
-    {% break %}
-  {% endif %}
+{% for size in size_list limit: MAX %}
+  {% for tag_str in tag_list %}
+    {% assign tag = tag_str | split: "::" %}
+    {% assign tag_name = tag | first %}
+    {% assign tag_size = tag | last | plus: 0 %}
+    {% if tag_size == size %}
+      {% unless trending_tags contains tag_name %}
+        {% assign trending_tags = trending_tags | push: tag_name %}
+        {% break %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
 {% endfor %}

_includes/update-list.html

@@ -1,20 +1,18 @@
 {% 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 %}
 
 {% assign all_list = "" | split: "" %}
 
-{% for entry in site.data.updates %}
-  {% capture elem %}
-    {{- entry.lastmod -}}::{{- entry.filename -}}
-  {% endcapture %}
-  {% assign all_list = all_list | push: elem %}
+{% for post in site.posts %}
+  {% if post.last_modified_at %}
+    {% capture elem %}
+      {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
+    {% endcapture %}
+    {% assign all_list = all_list | push: elem %}
+  {% endif %}
 {% endfor %}
 
 {% assign all_list = all_list | sort | reverse %}

_layouts/archives.html

@@ -1,13 +1,9 @@
 ---
-title: Archives
-type: archives
+layout: page
 # 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 %}
@@ -37,4 +33,4 @@ type: archives
     {% assign last_month = "" %}
   {% endif %}
 {% endfor %}
-</div>
+</div>

_layouts/categories.html

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

_layouts/category.html

@@ -1,25 +1,24 @@
 ---
 layout: page
 # The Category layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# MIT Licensed
 ---
 
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ site.categories[page.category] | size }}</span>
+    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
 
   <ul class="post-content pl-0">
-    {% for post in site.categories[page.category] %}
+    {% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+
+    {% 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_long_df }}</span>
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_layouts/default.html

@@ -1,42 +1,30 @@
 ---
 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 %}
-
 {% capture prefer_mode %}
-  {% if site.theme_mode != "dual" %}
+  {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ lang }}" {{ prefer_mode }} >
+<html lang="{{ site.lang | split: "_" | first | default: "en" }}" {{ prefer_mode }}>
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
 
-    <div id="sidebar" class="d-flex flex-column">
-      {% include sidebar.html %}
-    </div>
+    {% include sidebar.html %}
 
     {% include topbar.html %}
 
     <div id="main-wrapper">
       <div id="main">
 
-        {% include fixlinenos.html content=content %}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
 
@@ -46,18 +34,18 @@ layout: compress
 
     </div> <!-- #main-wrapper -->
 
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
     <div id="mask"></div>
 
-    <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
+    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
       <i class="fas fa-angle-up"></i>
     </a>
 
-    {% if jekyll.environment == 'production' %}
-      {% include google-analytics.html %}
-    {% endif %}
-
     {% include search-loader.html %}
 
   </body>
 
-</html>
+</html>

_layouts/home.html

@@ -1,15 +1,11 @@
 ---
 layout: page
 # The Home page layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 
 {% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
-{% assign default = site.posts | where_exp: "item", "item.pin == nil "  %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true"  %}
 {% assign posts = "" | split: "" %}
 
 <!-- Get pinned posts -->
@@ -49,13 +45,10 @@ layout: page
 {% 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 %}
-        <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 +56,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.enabled %}
+        <i class="far fa-eye fa-fw"></i>
+        <span id="pv_{{-post.title-}}" class="pageviews">
+          <i class="fas fa-spinner fa-spin fa-fw"></i>
+        </span>
+        {% endif %}
+      </div>
+
+      {% if post.pin %}
+      <div class="pin">
+        <i class="fas fa-thumbtack fa-fw"></i>
+        <span>{{ site.data.label.pin_prompt | default: 'Pinned' }}</span>
+      </div>
       {% endif %}
-    </div>
+
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
 
 {% endfor %}

_layouts/page.html

@@ -1,10 +1,6 @@
 ---
 layout: default
 # The page layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
 <div class="row">

_layouts/post.html

@@ -1,10 +1,6 @@
 ---
 layout: default
 # The posts' layout
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 <div class="row">
@@ -18,58 +14,42 @@ 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 %}
+            {{ page.author | default: site.author }}
           </span>
         </div>
 
-        <!-- lastmod -->
-        {%- capture filename -%}
-          {{ page.url | split: "/" | last }}
-        {%- endcapture -%}
-
-        {% for item in site.data.updates %}
-          {% assign encode_filename = item.filename | url_encode %}
-          {% if filename == encode_filename %}
-            {% assign lastmod = item.lastmod %}
-            {% break %}
+        <div>
+          <!-- lastmod -->
+          {% if page.last_modified_at %}
+          <span>
+            Updated
+            {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
+          </span>
           {% endif %}
-        {% endfor %}
 
-        {% if lastmod %}
-        <div>
-          Updated
-          {% include timeago.html date=lastmod class="lastmod" tooltip=true %}
-        </div>
-        {% endif %}
+          <!-- read time -->
+          {% include read-time.html content=content %}
 
-        <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
-        <div>
+          <!-- page views -->
+          {% if site.google_analytics.pv.enabled %}
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
-          views
+          {% endif %}
+
         </div>
-        {% endif %}
 
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+
         {% if page.image %}
-          <img src="{{ page.image }}">
-        {% endif %}
-        <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-        {% if content contains '<img src=' %}
-          {{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }}
-        {% else %}
-          {{ content }}
+          <img src="{{ page.image }}" class="preview-img" alt="Preview Image">
         {% endif %}
+
+        {{ content }}
+
       </div>
 
       <div class="post-tail-wrapper text-muted">
@@ -79,7 +59,7 @@ layout: default
         <div class="post-meta mb-3">
           <i class="far fa-folder-open fa-fw mr-1"></i>
           {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
+            <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
             {%- unless forloop.last -%}, {%- endunless -%}
           {% endfor %}
         </div>
@@ -90,7 +70,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>
@@ -99,7 +79,7 @@ layout: default
         {% endif %}
 
         <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center pt-5 pb-2">
+          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
@@ -116,29 +96,35 @@ layout: default
 
     </div> <!-- .post -->
 
+
   </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 -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% include related-posts.html %}
 
-      {% include post-nav.html %}
+    {% include post-nav.html %}
 
-      {% if site.disqus.comments and page.comments %}
-        {% include disqus.html %}
-      {% endif %}
+    {% if site.disqus.comments and page.comments %}
+      {% include disqus.html %}
+    {% endif %}
 
-      {% include related-posts.html %}
+    </div> <!-- #post-extend-wrapper -->
 
-    </div> <!-- .pl-1 pr-1 -->
-
-  </div> <!-- #post-extend-wrapper -->
+  </div> <!-- .col-* -->
 
 </div> <!-- .row -->
-
-{% include lozad.html %}

_layouts/tag.html

@@ -1,25 +1,24 @@
 ---
 layout: page
 # The layout for Tag page
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
+
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ site.tags[page.tag] | size }}</span>
+    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
-    {% for post in site.tags[page.tag] %}
+    {% assign post_long_df = site.data.date_format.post.long | default: '%b %e, %Y' %}
+
+    {% 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_long_df }}</span>
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_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

@@ -0,0 +1,14 @@
+#!/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 }"`
+
+  if commit_num.to_i > 1
+    lastmod_date = `git log -1 --pretty="%ad" --date=iso "#{ post.path }"`
+    post.data['last_modified_at'] = lastmod_date
+  end
+
+end

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

@@ -5,22 +5,24 @@ date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
+mermaid: true
+image: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
 ---
 
-This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in here.
+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 - heading</h3>
 
-<h3 data-toc-skip>H3</h3>
-
-#### H4
-
-***
+<h4>H4 - heading</h4>
+---
+<br>
 
 ## Paragraph
 
@@ -36,36 +38,107 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
+## Lists
+
+### Ordered list
+
+1. Firstly
+2. Secondly
+3. Thirdly
+
+### Unordered list
+
+- Chapter
+	- Setcion
+      - Paragraph
+
+### Task list
+
+- [ ] TODO
+- [x] Completed
+- Hold on
+- [ ] Defeat COVID-19
+  - [x] Vaccine production
+  - [ ] Economic recovery
+  - [ ] People smile again
+
+### Description list
+
+Sun
+: the star around which the earth orbits
+
+Moon
+: the natural satellite of the earth, visible by reflected light from the sun
+
+
 ## Block Quote
 
 > This line to shows the Block Quote.
 
 ## Tables
 
-|Company|Contact|Country|
-|:---|:--|---:|
-|Alfreds Futterkiste | Maria Anders | Germany
-|Island Trading | Helen Bennett | UK
-|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
+| 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].
 
 
-## Image
+## Images
 
-![Desktop View]({{ "/assets/img/sample/mockup.png" | relative_url }})
+- Default (with caption)
 
+![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png)
+_Full screen width and center alignment_
 
-## Inline code
+<br>
+
+- Specify width
+
+![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="400"}
+_400px image width_
+
+<br>
+
+- Left aligned
+
+![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="350" .normal}
+
+<br>
+
+- Float to left
+
+  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="240" .left}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+<br>
+
+- Float to right
+
+  ![Desktop View](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190808/mockup.png){: width="240" .right}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+<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
 
@@ -77,7 +150,13 @@ When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
-## Code Snippet
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+
+## Code block
 
 ### Common
 
@@ -90,14 +169,6 @@ This is a common code snippet, without syntax highlight and line number.
 #### Console
 
 ```console
-$ date
-Sun Nov  3 15:11:12 CST 2019
-```
-
-
-#### Terminal
-
-```terminal
 $ env |grep SHELL
 SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
@@ -131,38 +202,18 @@ fi;
 ```
 {% endraw %}
 
-#### HTML
+#### Java
 
-```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>
+```java
+private void writeObject(java.io.ObjectOutputStream s)
+  throws java.io.IOException {
+  // Write out any hidden serialization magic
+  s.defaultWriteObject();
+  for (E e: map.keySet()) s.writeObject(e);
+}
 ```
 
-**Horizontal Scrolling**
-
-```html
-<div class="panel-group">
-  <div class="panel panel-default">
-    <div class="panel-heading" id="{{ category_name }}">
-      <i class="far fa-folder"></i>
-      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
-      </a>
-    </div>
-  </div>
-</div>
-```
-
-
 ## Reverse Footnote
 
-[^footnote]: The footnote source.
+[^footnote]: The footnote source
+[^fn-nth-2]: The 2nd footnote source

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

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

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

@@ -9,192 +9,154 @@ pin: true
 
 ## Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of basic environment (`Ruby`, `RubyGems` and `Bundler`). 
+Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll` and `Bundler`.
 
-To improve the writing experience, we need to use some script tools. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+## Installation
 
-* Debian
+There are two ways to get the theme:
 
-  ```console
-  $ sudo apt-get install coreutils
-  ```
+  - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy)
+  - Fork from GitHub
 
-* macOS
+### Install From Rubygems
 
-  ```console
-  $ brew install coreutils
-  ```
+Add this line to your Jekyll site's `Gemfile`:
 
+```ruby
+gem "jekyll-theme-chirpy"
+```
 
-## Jekyll Plugins
+And add this line to your Jekyll site's `_config.yml`:
 
-[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
+```yaml
+theme: jekyll-theme-chirpy
+```
+
+And then execute:
 
 ```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git -b master
+$ bundle
 ```
 
-And replace the `USER` above to your GitHub username.
+Finally, copy the missing files (refer to the [starter project][starter] for the detailed file directory structure) from the theme's gem to your Jekyll site, and append all the variables of the theme's `_config.yml` to your Jekyll site.
 
-The first time you run or build the project on local machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
-
-```terminal
-$ bundle install
+> **Hint**: To locate the theme’s gem, execute:
+>
+```console
+$ bundle info --path jekyll-theme-chirpy
 ```
 
-`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
+Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem.
 
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
 
-## Directory Structure
+### Fork From GitHub
 
-The main files and related brief introductions are listed below:
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local.
 
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
-```
-
-
-As mentioned above, some files or directories should be removed from your repo:
-
-```terminal
-$ rm -rf .travis.yml .github _posts/* 
-```
-
-## Configuration
-
-Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
-
-* `url`
-    
-    Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
-
-
-* `avatar`
-    
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one (a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as small as possible (may be *<https://tinypng.com/>* will help).
-
-* `timezone`
-
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-
-* `theme_mode`
-  
-    There are three options for the theme color scheme:
-    
-    - **dual**  - The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
-
-    - **dark**  - Always show dark mode.
-    - **light** - Always show light mode.
-
-
-##  Run Locally
-
-You may want to preview the site content before publishing, so just run the script tool:
-
-```terminal
-$ bash tools/run.sh
-```
-
-Open a browser and visit <http://localhost:4000>.
-
-Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
-
-##  Deploying to GitHub Pages
-
-Before the deployment begins, checkout the file `_config.yml` and make sure that the `url` has been configured. What's more, if you prefer the [Project site on GitHub](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and also use the default domain `<username>.github.io`, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
-
-
-### Option 1: Built by GitHub Pages
-
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
-
-> **Note**: If you want to use any third-party Jekyll plugins that not on [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename the repository to:
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
-
-**2**. Commit the changes of the repo first, then run the publish script:
+Install gem dependencies by:
 
 ```console
-$ bash tools/publish.sh
+$ bundle
 ```
 
-> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
-
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, and then push to `origin/master`. Its output is similar to the following log:
-
-```terminal
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[INFO] Published successfully!
-```
-
-**3**. Go to GitHub website and enable GitHub Pages service for the repo.
-
-**4**. Check it out:
-
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-
-### Option 2: Build Locally
-
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any other plugin that not on the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
-
-**1**. Browse to GitHub website, create a brand new repo named: 
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| Any one except `<username>.github.io`, let's say `project`|
-
-and clone it.
-
-**2**. In the root of the source project, build your site by:
+And then execute:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ bash tools/init.sh
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+> **Note**: If you don't plan to deploy your site on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
+What it does is:
 
-**4**. Visit at:
+  1. Remove some files or directories from your repository:
 
-|Site Type | Site URL |
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
+      - `.travis.yml`
+      - files under `_posts`
+      - folder `docs`
 
-### Finishing work
+  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`.
 
-No matter which way you choose to deploy the website on GitHub, please enforce the `HTTPS` for it. See official docs: [Securing your GitHub Pages site with HTTPS](https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https).
+  3. Automatically create a commit to save the changes.
+
+
+## Usage
+
+### Configuration
+
+Update the variables of `_config.yml` as needed. Some of them are typical options:
+
+  - `url`
+  - `avatar`
+  - `timezone`
+  - `theme_mode`
+
+### Running Local Server
+
+You may want to preview the site contents before publishing, so just run it by:
+
+```console
+$ bundle exec jekyll s
+```
+
+Or run the site on Docker with the following command:
+
+```terminal
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
+
+Open a browser and visit to _<http://localhost: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, e.g, `/project-name`.
+
+Now you can now choose ONE of the following methods to deploy your website.
+
+#### Deploy on GitHub Pages
+
+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 GH Pages service.
+
+Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`.
+Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+
+[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+
+Rename your repoistory to `<GH-USERNAME>.github.io` on GitHub.
+
+And then publish your 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 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://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png)
+
+  3. Visit your website at the address indicated by GitHub.
+
+#### Deploy on Other Platforms
+
+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.
+
+Go to the root of the source project, build your site by:
+
+```console
+$ JEKYLL_ENV=production bundle exec jekyll b
+```
+
+Or build the site with Docker by:
+
+```terminal
+$ docker run -it --rm \
+    --env JEKYLL_ENV=production \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    jekyll build
+```
+
+Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.

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

@@ -11,17 +11,29 @@ In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image fi
 
 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.
 
-![upload-image]({{ "/assets/img/sample/upload-image.png" | relative_url }})
+![upload-image](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/upload-image.png)
 
 Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
 
-![download-icons]({{ "/assets/img/sample/download-icons.png" | relative_url }})
+![download-icons](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/download-icons.png){: width="600"}
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
 - browserconfig.xml
 - manifest.json
- 
-Now, copy the rest image files (`.PNG` and `.ICO`) to cover the original one in folder `assets/img/favicons/`.
 
-Lastly, don't forget to rebuild your site so that the icon becomes your custom edition.
+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/`.
+
+The following table helps you understand the changes to the icon file:
+
+> ✓ means keep, ✗ means delete.
+
+| File(s)             | From Favicon & App Icon Generator | From Chirpy |
+|---------------------|:---------------------------------:|:-----------:|
+| `*.PNG`             | ✓                                 | ✗           |
+| `*.ICO`             | ✓                                 | ✗           |
+| `browserconfig.xml` | ✗                                 | ✓           |
+| `manifest.json`     | ✗                                 | ✓           |
+
+
+The next time you build the site, the icon will be replaced with a customized edition.

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

@@ -0,0 +1,245 @@
+---
+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` disabled 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](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/01-google-analytics-data-stream.png)
+
+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 with your Google Analytics ID
+  pv:
+    # The Google Analytics pageviews switch.
+    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.
+```
+
+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](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/02-google-analytics-realtime.png)
+
+## 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'
+    ```
+**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](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/03-superProxy-deployed.png)
+
+### 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](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/04-superproxy-query.png)
+
+
+## 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](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20210103/05-superproxy-dashboard.png)
+
+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-XXXXXXXXXX'   # Fill with your Google Analytics ID
+  pv:
+    # The Google Analytics pageviews switch.
+    enabled: true
+    # the next options only valid when `google_analytics.pv` is enabled.
+    proxy_url: 'https://PROJECT_ID.REGION_ID.r.appspot.com'
+    proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
+    cache: false      # pv data local cache, good for the users from GFW area.
+```
+
+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

@@ -7,7 +7,7 @@
 * MIT Licensed
 */
 
-/*---------- scss placeholder ---------*/
+/* ---------- scss placeholder --------- */
 
 %tag-hover {
   background: var(--tag-hover);
@@ -15,12 +15,13 @@
 }
 
 %table-cell {
-  padding: .35rem .8rem;
+  padding: 0.4rem 1rem;
   font-size: 95%;
+  white-space: nowrap;
 }
 
 %link-hover {
-  color: #d2603a!important;
+  color: #d2603a !important;
   border-bottom: 1px solid #d2603a;
   text-decoration: none;
 }
@@ -54,7 +55,7 @@
   margin-top: -2.5rem;
 }
 
-/*---------- scss mixin ---------*/
+/* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
@@ -64,7 +65,6 @@
   color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 .25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -96,5 +96,23 @@
   color: $color;
   font-size: $font-size;
   font-weight: $font-weight;
-  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
+}
+
+@mixin panel-label {
+  @include label(inherit);
+  display: block;
+  line-height: 1.2;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  letter-spacing: -0.02em;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
 }

_sass/addon/syntax.scss

@@ -6,11 +6,11 @@
 * MIT Licensed
 */
 
-@import "_colors/light-syntax";
-@import "_colors/dark-syntax";
+@import "colors/light-syntax";
+@import "colors/dark-syntax";
 
-
-html:not([mode]), html[mode=light] {
+html:not([mode]),
+html[mode=light] {
   @include light-syntax;
 }
 
@@ -19,7 +19,8 @@ html[mode=dark] {
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
+  html:not([mode]),
+  html[mode=dark] {
     @include dark-syntax;
   }
 
@@ -28,33 +29,49 @@ html[mode=dark] {
   }
 }
 
-/*-- Codes Snippet --*/
+/* -- Codes Snippet -- */
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 5px;
+  border-radius: 6px;
+}
+
+%code-snippet-padding {
+  padding: 1.5rem;
+}
+
+$code-font-size: 0.85rem;
+
+div > pre {
+  @extend %code-snippet-bg;
+  @extend %code-snippet-radius;
+  @extend %code-snippet-padding;
 }
 
 .highlighter-rouge {
-  background-color: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
   @extend %code-snippet-radius;
+
   color: var(--highlighter-rouge-color);
+  margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
   @extend %code-snippet-radius;
-  background: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
+
   @at-root figure#{&} {
-    background: var(--highlight-bg-color);
+    @extend %code-snippet-bg;
   }
+
   overflow: auto;
   .lineno {
-    margin: .8rem 0rem;
-    padding: 0 .5rem;
+    margin-left: 0.2rem;
+    padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -66,6 +83,12 @@ html[mode=dark] {
     -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;
@@ -78,14 +101,6 @@ html[mode=dark] {
     padding: 0;
     border: 0;
   }
-  pre {
-    margin-bottom: 0;
-    font-size: .85rem;
-    line-height: 1.4rem;
-    word-wrap: normal;
-    /* Fixed Safari overflow-x */
-  }
-
 } //.highlight
 
 code {
@@ -93,27 +108,39 @@ code {
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
+
   &.highlighter-rouge {
+    font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 .15rem;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
-  @at-root a>&.highlighter-rouge {
+
+  @at-root a > &.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
     color: inherit;
   }
-  @at-root a:hover>&.highlighter-rouge {
+
+  @at-root a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
+
   blockquote &.highlighter-rouge {
     color: inherit;
   }
 }
 
 td.rouge-code {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1.5rem 1.5rem 1.5rem 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 */
@@ -126,7 +153,24 @@ div {
       display: none;
     }
     td.rouge-code {
-      padding: .8rem 1rem;
+      @extend %code-snippet-padding;
     }
   }
 }
+
+div[class^='language-']::before {
+  content: attr(lang);
+  position: absolute;
+  right: 1.8rem;
+  margin-top: 3px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--highlight-lineno-color);
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  div[class^='language-']::before {
+    right: 3.1rem;
+  }
+}

_sass/addon/variables.scss

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

_sass/colors/dark-syntax.scss

@@ -0,0 +1,84 @@
+/*
+ * The syntax dark mode styles.
+ */
+
+@mixin dark-syntax {
+  /* -----  My styles ------ */
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --highlight-lineno-border-color: #303435;
+  --inline-code-bg: #272822;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
+
+  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+  .highlight pre { background-color: 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 */
+  .highlight .l { color: #ae81ff; } /* Literal */
+  .highlight .n { color: #f8f8f2; } /* Name */
+  .highlight .o { color: #f92672; } /* Operator */
+  .highlight .p { color: #f8f8f2; } /* Punctuation */
+  .highlight .cm { color: #75715e; } /* Comment.Multiline */
+  .highlight .cp { color: #75715e; } /* Comment.Preproc */
+  .highlight .c1 { color: #75715e; } /* Comment.Single */
+  .highlight .cs { color: #75715e; } /* Comment.Special */
+  .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 */
+  .highlight .kn { color: #f92672; } /* Keyword.Namespace */
+  .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
+  .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
+  .highlight .kt { color: #66d9ef; } /* Keyword.Type */
+  .highlight .ld { color: #e6db74; } /* Literal.Date */
+  .highlight .m { color: #ae81ff; } /* Literal.Number */
+  .highlight .s { color: #e6db74; } /* Literal.String */
+  .highlight .na { color: #a6e22e; } /* Name.Attribute */
+  .highlight .nb { color: #f8f8f2; } /* Name.Builtin */
+  .highlight .nc { color: #a6e22e; } /* Name.Class */
+  .highlight .no { color: #66d9ef; } /* Name.Constant */
+  .highlight .nd { color: #a6e22e; } /* Name.Decorator */
+  .highlight .ni { color: #f8f8f2; } /* Name.Entity */
+  .highlight .ne { color: #a6e22e; } /* Name.Exception */
+  .highlight .nf { color: #a6e22e; } /* Name.Function */
+  .highlight .nl { color: #f8f8f2; } /* Name.Label */
+  .highlight .nn { color: #f8f8f2; } /* Name.Namespace */
+  .highlight .nx { color: #a6e22e; } /* Name.Other */
+  .highlight .py { color: #f8f8f2; } /* Name.Property */
+  .highlight .nt { color: #f92672; } /* Name.Tag */
+  .highlight .nv { color: #f8f8f2; } /* Name.Variable */
+  .highlight .ow { color: #f92672; } /* Operator.Word */
+  .highlight .w { color: #f8f8f2; } /* Text.Whitespace */
+  .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
+  .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
+  .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
+  .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
+  .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
+  .highlight .sc { color: #e6db74; } /* Literal.String.Char */
+  .highlight .sd { color: #e6db74; } /* Literal.String.Doc */
+  .highlight .s2 { color: #e6db74; } /* Literal.String.Double */
+  .highlight .se { color: #ae81ff; } /* Literal.String.Escape */
+  .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
+  .highlight .si { color: #e6db74; } /* Literal.String.Interpol */
+  .highlight .sx { color: #e6db74; } /* Literal.String.Other */
+  .highlight .sr { color: #e6db74; } /* Literal.String.Regex */
+  .highlight .s1 { color: #e6db74; } /* Literal.String.Single */
+  .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */
+  .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
+  .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
+  .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
+  .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
+  .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 */
+}

_sass/colors/dark-typography.scss

@@ -1,10 +1,6 @@
-/*!
-* 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 */
@@ -26,14 +22,14 @@
   --button-bg: rgb(39, 40, 43);
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
-
   --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);
@@ -51,6 +47,8 @@
   --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-paginator-shadow: var(--main-wrapper-bg);
+  --pin-bg: rgb(34 35 37);
+  --pin-color: inherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
@@ -71,7 +69,6 @@
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
   --search-tag-bg: var(--tag-bg);
-
   --dash-color: rgb(63, 65, 68);
 
   /* categories */
@@ -84,7 +81,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
-  ---footer-link: rgb(146, 146, 146);
+  --footer-link: rgb(171, 171, 171);
 
   .post-content img {
     filter: brightness(90%);
@@ -98,10 +95,10 @@
   nav[data-toggle=toc] .nav-link.active,
   nav[data-toggle=toc] .nav-link.active:focus,
   nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav>li>a:focus,
-  nav[data-toggle=toc] .nav>li>a:hover {
-    color: var(--toc-highlight)!important;
-    border-left-color: var(--toc-highlight)!important;
+  nav[data-toggle=toc] .nav > li > a:focus,
+  nav[data-toggle=toc] .nav > li > a:hover {
+    color: var(--toc-highlight) !important;
+    border-left-color: var(--toc-highlight) !important;
   }
 
   /* categories */
@@ -126,8 +123,13 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image: linear-gradient(to left,
-      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
+    background-image: linear-gradient(
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30));
   }
 
 } // dark-scheme

_sass/colors/light-syntax.scss

@@ -0,0 +1,75 @@
+/*
+ * The syntax light mode code snippet colors.
+ */
+
+@mixin light-syntax {
+  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
+  .highlight .hll { background-color: #ffffcc; }
+  .highlight .c { color: #999988; font-style: italic; } /* Comment */
+  .highlight .err { color: #a61717; background-color: #e3d2d2; } /* Error */
+  .highlight .k { color: #000000; font-weight: bold; } /* Keyword */
+  .highlight .o { color: #000000; font-weight: bold; } /* Operator */
+  .highlight .cm { color: #999988; font-style: italic; } /* Comment.Multiline */
+  .highlight .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */
+  .highlight .c1 { color: #999988; font-style: italic; } /* Comment.Single */
+  .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */
+  .highlight .gd { color: #d01040; background-color: #ffdddd; } /* Generic.Deleted */
+  .highlight .ge { color: #000000; font-style: italic; } /* Generic.Emph */
+  .highlight .gr { color: #aa0000; } /* Generic.Error */
+  .highlight .gh { color: #999999; } /* Generic.Heading */
+  .highlight .gi { color: #008080; background-color: #ddffdd; } /* Generic.Inserted */
+  .highlight .go { color: #888888; } /* Generic.Output */
+  .highlight .gp { color: #555555; } /* Generic.Prompt */
+  .highlight .gs { font-weight: bold; } /* Generic.Strong */
+  .highlight .gu { color: #aaaaaa; } /* Generic.Subheading */
+  .highlight .gt { color: #aa0000; } /* Generic.Traceback */
+  .highlight .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */
+  .highlight .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */
+  .highlight .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */
+  .highlight .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */
+  .highlight .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */
+  .highlight .kt { color: #445588; font-weight: bold; } /* Keyword.Type */
+  .highlight .m { color: #009999; } /* Literal.Number */
+  .highlight .s { color: #d01040; } /* Literal.String */
+  .highlight .na { color: #008080; } /* Name.Attribute */
+  .highlight .nb { color: #0086b3; } /* Name.Builtin */
+  .highlight .nc { color: #445588; font-weight: bold; } /* Name.Class */
+  .highlight .no { color: #008080; } /* Name.Constant */
+  .highlight .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */
+  .highlight .ni { color: #800080; } /* Name.Entity */
+  .highlight .ne { color: #990000; font-weight: bold; } /* Name.Exception */
+  .highlight .nf { color: #990000; font-weight: bold; } /* Name.Function */
+  .highlight .nl { color: #990000; font-weight: bold; } /* Name.Label */
+  .highlight .nn { color: #555555; } /* Name.Namespace */
+  .highlight .nt { color: #000080; } /* Name.Tag */
+  .highlight .nv { color: #008080; } /* Name.Variable */
+  .highlight .ow { color: #000000; font-weight: bold; } /* Operator.Word */
+  .highlight .w { color: #bbbbbb; } /* Text.Whitespace */
+  .highlight .mf { color: #009999; } /* Literal.Number.Float */
+  .highlight .mh { color: #009999; } /* Literal.Number.Hex */
+  .highlight .mi { color: #009999; } /* Literal.Number.Integer */
+  .highlight .mo { color: #009999; } /* Literal.Number.Oct */
+  .highlight .sb { color: #d01040; } /* Literal.String.Backtick */
+  .highlight .sc { color: #d01040; } /* Literal.String.Char */
+  .highlight .sd { color: #d01040; } /* Literal.String.Doc */
+  .highlight .s2 { color: #d01040; } /* Literal.String.Double */
+  .highlight .se { color: #d01040; } /* Literal.String.Escape */
+  .highlight .sh { color: #d01040; } /* Literal.String.Heredoc */
+  .highlight .si { color: #d01040; } /* Literal.String.Interpol */
+  .highlight .sx { color: #d01040; } /* Literal.String.Other */
+  .highlight .sr { color: #009926; } /* Literal.String.Regex */
+  .highlight .s1 { color: #d01040; } /* Literal.String.Single */
+  .highlight .ss { color: #990073; } /* Literal.String.Symbol */
+  .highlight .bp { color: #999999; } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #008080; } /* Name.Variable.Class */
+  .highlight .vg { color: #008080; } /* Name.Variable.Global */
+  .highlight .vi { color: #008080; } /* Name.Variable.Instance */
+  .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */
+
+  /* --- custom light colors --- */
+  --highlight-bg-color: #f7f7f7;
+  --highlighter-rouge-color: #353a3d;
+  --highlight-lineno-color: #c2c6cc;
+  --highlight-lineno-border-color: #e9ecef;
+  --inline-code-bg: #f3f3f3;
+} // light-syntax

_sass/colors/light-typography.scss

@@ -1,124 +1,76 @@
-/*!
-* 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 */
   --body-bg: #fafafa;
-
   --mask-bg: #c1c3c5;
-
   --main-wrapper-bg: white;
-
   --main-border-color: #f3f3f3;
-
   --btn-border-color: #e9ecef;
-
   --text-color: #333333;
-
   --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-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%);
-
+    circle,
+    rgba(42, 30, 107, 1) 0%,
+    rgba(35, 37, 46, 1) 100%);
   --nav-cursor-color: #fcfcfc;
 
   /* Topbar */
-
   --topbar-wrapper-bg: white;
-
   --topbar-text-color: rgb(78, 78, 78);
-
   --search-wrapper-bg: #f5f5f5;
-
   --search-tag-bg: #f8f9fa;
-
   --search-icon-color: #c2c6cc;
-
   --input-focus-border-color: var(--btn-border-color);
 
   /* 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;
+  --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;
-
-  --relate-post-date: rgba(30, 55, 70, .4);
-
+  --label-color: #616161;
+  --relate-post-date: rgba(30, 55, 70, 0.4);
   --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);
-
   --dash-color: silver;
 
-
   /* Archive */
-
   --timeline-color: rgba(0, 0, 0, 0.075);
-
   --timeline-node-bg: #c2c6cc;
-
   --timeline-year-dot-color: #ffffff;
 
   /* Footer */
-
   --footer-bg-color: #ffffff;
-
   --footnote-target-bg: lightcyan;
-
-  ---footer-link: inherit;
-}
+  --footer-link: #424242;
+} // light-scheme

_sass/jekyll-theme-chirpy.scss

@@ -0,0 +1,22 @@
+/*!
+ * The styles for Jekyll theme Chirpy
+ *
+ * Chirpy v3.0.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * © 2021 Cotes Chung
+ * MIT Licensed
+ */
+
+@import "colors/light-typography";
+@import "colors/dark-typography";
+
+@import "addon/module";
+@import "addon/variables";
+@import 'addon/syntax';
+@import "addon/commons";
+
+@import "layout/home";
+@import "layout/post";
+@import "layout/tags";
+@import "layout/archives";
+@import "layout/categories";
+@import "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,10 +12,6 @@
   background-color: var(--timeline-color);
 }
 
-%date-font {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
 #archives {
   letter-spacing: 0.03rem;
   li {
@@ -33,7 +22,7 @@
       background-image: linear-gradient(
         to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
     }
-    >div {
+    > div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -42,7 +31,6 @@
 
   span.lead {
     font-size: 1.5rem;
-    @extend %date-font;
     position: relative;
     left: 8px;
 
@@ -54,8 +42,7 @@
       }
     }
 
-    &::after {
-      /* Year dot */
+    &::after { /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -80,8 +67,8 @@
     &.month {
       width: 1.4rem;
       text-align: center;
-      @extend %date-font;
-      ~a::before {
+
+      ~ a::before {
         /* A dot for Month and Day */
         content: "";
         display: inline-block;
@@ -111,12 +98,12 @@
   } // #archives .date
 
   ul {
-    >li {
-      >div>a {
+    > li {
+      > div > a {
         /* post title in Archvies */
         margin-left: 2.5rem;
         position: relative;
-        top: .1rem;
+        top: 0.1rem;
       }
       &::after {
         @extend %date-timeline;
@@ -129,10 +116,10 @@
         top: -1.61rem;
       }
     }
-    &:not(:last-child)>li:last-child::after {
+    &:not(:last-child) > li:last-child::after {
       height: 3.4rem;
     }
-    &:last-child>li:last-child::after {
+    &:last-child > li:last-child::after {
       display: none;
     }
   } // #archives ul

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

_sass/layout/category-tag.scss

@@ -1,18 +1,11 @@
----
-# Style for page Category and Tag
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-
-{% include_relative _addon/main.scss %}
+/*
+  Style for page Category and Tag
+*/
 
 #page-category, #page-tag {
-  ul>li {
+  ul > li {
     line-height: 1.5rem;
-    padding: .6rem 0;
+    padding: 0.6rem 0;
     &::before { // dot
       background: #999;
       width: 5px;
@@ -21,25 +14,25 @@
       display: block;
       content: "";
       position: relative;
-      top: .6rem;
-      margin-right: .5rem;
+      top: 0.6rem;
+      margin-right: 0.5rem;
     }
-    >a { /* post's title */
+    > a { /* post's title */
       font-size: 1.1rem;
       @extend %no-bottom-border;
     }
-    >span:last-child {
+    > span:last-child {
       white-space: nowrap;
     }
     /* post's date */
   }
 }
 
-#page-tag h1>i { // tag icon
+#page-tag h1 > i { // tag icon
   font-size: 1.2rem;
 }
 
-#page-category h1>i {
+#page-category h1 > i {
   font-size: 1.25rem;
 }
 
@@ -59,15 +52,15 @@ a:hover {
 
 @media all and (max-width: 576px) {
   #page-category, #page-tag {
-    ul>li {
+    ul > li {
       &::before {
         margin: 0 .5rem;
       }
-      >a {
+      > a {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
     }
   }
-}
+}

_sass/layout/home.scss

@@ -1,16 +1,10 @@
----
-# Style for Homepage
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# MIT License
----
-
-{% include_relative _addon/main.scss %}
+/*
+  Style for Homepage
+*/
 
 #post-list {
   margin-top: 1rem;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 
   .post-preview {
     padding-top: 1.5rem;
@@ -20,25 +14,22 @@
     h1 {
       font-size: 1.4rem;
       margin: 0;
-      ~i { // pinned icon
-        font-size: .86rem;
-      }
     }
 
     .post-meta {
       i {
-        font-size: .73rem;
-        &:not(:first-child) { // post-meta icons on the homepage
-          margin-left: 1.5rem;
-        }
+        font-size: 0.73rem;
+      }
+      span:not(:last-child) {
+        margin-right: 1.2rem;
       }
     }
 
     .post-content {
-      margin-top: .6rem;
-      margin-bottom: .6rem;
+      margin-top: 0.6rem;
+      margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
-      >p {
+      > p {
         /* Make preview shorter on the homepage */
         margin: 0;
         overflow: hidden;
@@ -49,6 +40,17 @@
       }
     }
 
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
   } // .post-preview
 
 } // #post-list
@@ -107,12 +109,6 @@
 
 } // .pagination
 
-@media all and (max-width: 576px) {
-  #post-list .post-meta>span i:not(:first-child) {
-    margin-left: 1rem;
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
@@ -125,10 +121,25 @@
 
   #post-list {
     margin-top: 1.5rem;
+    .post-preview .post-meta {
+      .pin {
+        background: var(--pin-bg);
+        border-radius: 5px;
+        line-height: 1.4rem;
+        height: 1.3rem;
+        margin-top: 3px;
+        padding-left: 1px;
+        padding-right: 6px;
+
+        > span {
+          display: inline;
+        }
+      }
+    }
   }
 
   .pagination {
-    font-size: .85rem;
+    font-size: 0.85rem;
     .page-item .page-link {
       width: 2.2rem;
       height: 2.2rem;
@@ -142,4 +153,4 @@
   #post-list {
     padding-right: 0;
   }
-}
+}

_sass/layout/post.scss

@@ -1,17 +1,6 @@
----
-# 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 {
@@ -27,25 +16,39 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.author {
-  @include semi-bold;
+@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+  content: "\2022";
+  color: rgba(158, 158, 158, 0.8);
+  padding-left: $pl;
+  padding-right: $pr;
 }
 
-.post {
-  img {
-    max-width: 100%;
-    margin-top: .5rem;
-    margin-bottom: 1.5rem;
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
+#post-wrapper .post-meta {
+  > div:nth-child(2) {
+    > span:not(:first-child)::before {
+      @include dot;
+    }
+  }
+
+  #pv::after {
+    content: " views";
+  }
+
+  .readtime::after {
+    content: " read";
+  }
+}
+
+.post-content {
+  .preview-img {
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+    @include align-center;
   }
 }
 
 .post-tail-wrapper {
-  margin-top: 4rem;
+  margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
@@ -84,31 +87,26 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   p {
     font-size: 1.1rem;
     line-height: 1.5rem;
-    margin-top: .3rem;
+    margin-top: 0.3rem;
     white-space: normal;
   }
 
-  a, span {
+  a {
     &::before {
       color: var(--text-muted-color);
-      font-size: .65rem;
+      font-size: 0.65rem;
       text-transform: uppercase;
+      content: attr(prompt);
     }
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      left: .5px;
-      &::before {
-        content: $prompt-older
-      }
+      left: 0.5px;
     }
     &:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      right: .5px;
-      &::before {
-        content: $prompt-newer
-      }
+      right: 0.5px;
     }
   }
 } // .post-navigation
@@ -127,25 +125,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 #toc-wrapper {
-  margin-top: 7rem;
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
-  animation: fade-up .8s;
+  animation: fade-up 0.8s;
   &.topbar-down {
     top: 6rem;
   }
-  >h3 {
-    @include label(inherit, 600);
+  > span {
+    @include panel-label;
   }
 }
 
 #toc li>a {
   line-height: 1rem;
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 
@@ -156,19 +153,19 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     @include label(1.1rem, 600);
   }
   .card {
-    border: 1px solid var(--card-border-color);
+    border-color: var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    -webkit-transition: all .3s ease-in-out;
-    -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);
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
     }
   }
 
@@ -177,8 +174,8 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   }
 
   p {
-    font-size: .9rem;
-    margin-bottom: .5rem;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -209,6 +206,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #post-extend-wrapper {
   min-height: 2rem;
+  #disqus_thread {
+    margin-bottom: 2rem;
+  }
 }
 
 .post-tail-bottom a {
@@ -226,7 +226,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-size: 1.2rem;
     a {
       &:not(:last-child) {
-        margin-right: .25rem;
+        margin-right: 0.25rem;
       }
       &:hover {
         text-decoration: none;
@@ -236,7 +236,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       }
     }
     >i {
-      padding-top: .35rem;
+      padding-top: 0.35rem;
       &:hover {
         @extend %btn-share-hovor;
       }
@@ -284,7 +284,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-weight: 400;
   }
   span:last-child {
-    font-size: .85rem;
+    font-size: 0.85rem;
   }
 } // .license-wrapper
 
@@ -298,23 +298,29 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       margin-top: 1rem;
     }
   }
+
+  .post-content > div[class^='language-'] {
+    @include ml-mr(-1.25rem);
+    border-radius: 0;
+
+    &::before { // the lang badge
+      right: 1rem;
+    }
+  }
+
 }
 
 @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: .5rem;
-        padding-right: .3rem;
+        @include dot(0.5rem, 0.2rem);
       }
       &.flex-column {
         -webkit-box-orient: horizontal!important;
@@ -334,47 +340,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  .post img {
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-
   .post-navigation {
     padding-left: 0;
     padding-right: 0;
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
-
-}
-
-/*
-  The following resposive design aim to
-  make #post-extend-wrapper margin-right same as pannel's width
-*/
-@media all and (min-width: 1200px) {
-  #post-extend-wrapper {
-    margin-right: 25%;
-  }
-}
-
-@media all and (min-width: 1460px) {
-  #post-extend-wrapper {
-    margin-right: 300px;
-  }
-}
-
-@media all and (min-width: 1650px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 10 + 300px);
-  }
-}
-
-@media all and (min-width: 1700px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 8 + 300px);
-  }
 }

_sass/layout/tags.scss

@@ -1,18 +1,11 @@
----
-# 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;
   padding: 6px 8px 7px;
-  margin-right: .8rem;
+  margin-right: 0.8rem;
   line-height: 3rem;
   letter-spacing: 0;
   border: 1px solid var(--tag-border) !important;
@@ -22,4 +15,4 @@
     font-size: 0.7em;
     font-family: 'Oswald', sans-serif;
   }
-}
+}

_scripts/sh/create_pages.sh

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

_scripts/sh/dump_lastmod.sh

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

_scripts/sh/sync_monitor.sh

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

_tabs/about.md

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

_tabs/archives.md

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

_tabs/categories.md

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

_tabs/tags.md

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

app.js

@@ -1,12 +1,8 @@
 ---
 layout: compress
-# Chirpy v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT Licensed
 ---
 
 /* Registering Service Worker */
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}');
-};
+};

assets/css/_addon/fonts.scss

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

assets/css/_colors/dark-syntax.scss

@@ -1,93 +0,0 @@
-/*!
-* The syntax dark mode styles.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
-
-@mixin dark-syntax {
-  /* 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 .c { color: #75715e } /* Comment */
-  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
-  .highlight .k { color: #66d9ef } /* Keyword */
-  .highlight .l { color: #ae81ff } /* Literal */
-  .highlight .n { color: #f8f8f2 } /* Name */
-  .highlight .o { color: #f92672 } /* Operator */
-  .highlight .p { color: #f8f8f2 } /* Punctuation */
-  .highlight .cm { color: #75715e } /* Comment.Multiline */
-  .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 .gs { font-weight: bold } /* Generic.Strong */
-  .highlight .kc { color: #66d9ef } /* Keyword.Constant */
-  .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
-  .highlight .kn { color: #f92672 } /* Keyword.Namespace */
-  .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
-  .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
-  .highlight .kt { color: #66d9ef } /* Keyword.Type */
-  .highlight .ld { color: #e6db74 } /* Literal.Date */
-  .highlight .m { color: #ae81ff } /* Literal.Number */
-  .highlight .s { color: #e6db74 } /* Literal.String */
-  .highlight .na { color: #a6e22e } /* Name.Attribute */
-  .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
-  .highlight .nc { color: #a6e22e } /* Name.Class */
-  .highlight .no { color: #66d9ef } /* Name.Constant */
-  .highlight .nd { color: #a6e22e } /* Name.Decorator */
-  .highlight .ni { color: #f8f8f2 } /* Name.Entity */
-  .highlight .ne { color: #a6e22e } /* Name.Exception */
-  .highlight .nf { color: #a6e22e } /* Name.Function */
-  .highlight .nl { color: #f8f8f2 } /* Name.Label */
-  .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
-  .highlight .nx { color: #a6e22e } /* Name.Other */
-  .highlight .py { color: #f8f8f2 } /* Name.Property */
-  .highlight .nt { color: #f92672 } /* Name.Tag */
-  .highlight .nv { color: #f8f8f2 } /* Name.Variable */
-  .highlight .ow { color: #f92672 } /* Operator.Word */
-  .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
-  .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
-  .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
-  .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
-  .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
-  .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
-  .highlight .sc { color: #e6db74 } /* Literal.String.Char */
-  .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
-  .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
-  .highlight .se { color: #ae81ff } /* Literal.String.Escape */
-  .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
-  .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
-  .highlight .sx { color: #e6db74 } /* Literal.String.Other */
-  .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
-  .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
-  .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
-  .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
-  .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
-  .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-  .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
-
-  .highlight .gh { } /* Generic Heading & Diff Header */
-  .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 */
-
-
-  /*-----  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; }
-}

assets/css/_colors/light-syntax.scss

@@ -1,80 +0,0 @@
-/*!
-* The syntax light mode code snippet colors.
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT Licensed
-*/
-
-@mixin light-syntax {
-  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
-  .highlight .hll { background-color: #ffffcc }
-  .highlight .c { color: #999988; font-style: italic } /* Comment */
-  .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-  .highlight .k { color: #000000; font-weight: bold } /* Keyword */
-  .highlight .o { color: #000000; font-weight: bold } /* Operator */
-  .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-  .highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
-  .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-  .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-  .highlight .gd { color: #d01040; background-color: #ffdddd } /* Generic.Deleted */
-  .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
-  .highlight .gr { color: #aa0000 } /* Generic.Error */
-  .highlight .gh { color: #999999 } /* Generic.Heading */
-  .highlight .gi { color: #008080; background-color: #ddffdd } /* Generic.Inserted */
-  .highlight .go { color: #888888 } /* Generic.Output */
-  .highlight .gp { color: #555555 } /* Generic.Prompt */
-  .highlight .gs { font-weight: bold } /* Generic.Strong */
-  .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
-  .highlight .gt { color: #aa0000 } /* Generic.Traceback */
-  .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
-  .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
-  .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
-  .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
-  .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
-  .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-  .highlight .m { color: #009999 } /* Literal.Number */
-  .highlight .s { color: #d01040 } /* Literal.String */
-  .highlight .na { color: #008080 } /* Name.Attribute */
-  .highlight .nb { color: #0086B3 } /* Name.Builtin */
-  .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
-  .highlight .no { color: #008080 } /* Name.Constant */
-  .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
-  .highlight .ni { color: #800080 } /* Name.Entity */
-  .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
-  .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
-  .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
-  .highlight .nn { color: #555555 } /* Name.Namespace */
-  .highlight .nt { color: #000080 } /* Name.Tag */
-  .highlight .nv { color: #008080 } /* Name.Variable */
-  .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
-  .highlight .w { color: #bbbbbb } /* Text.Whitespace */
-  .highlight .mf { color: #009999 } /* Literal.Number.Float */
-  .highlight .mh { color: #009999 } /* Literal.Number.Hex */
-  .highlight .mi { color: #009999 } /* Literal.Number.Integer */
-  .highlight .mo { color: #009999 } /* Literal.Number.Oct */
-  .highlight .sb { color: #d01040 } /* Literal.String.Backtick */
-  .highlight .sc { color: #d01040 } /* Literal.String.Char */
-  .highlight .sd { color: #d01040 } /* Literal.String.Doc */
-  .highlight .s2 { color: #d01040 } /* Literal.String.Double */
-  .highlight .se { color: #d01040 } /* Literal.String.Escape */
-  .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
-  .highlight .si { color: #d01040 } /* Literal.String.Interpol */
-  .highlight .sx { color: #d01040 } /* Literal.String.Other */
-  .highlight .sr { color: #009926 } /* Literal.String.Regex */
-  .highlight .s1 { color: #d01040 } /* Literal.String.Single */
-  .highlight .ss { color: #990073 } /* Literal.String.Symbol */
-  .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #008080 } /* Name.Variable.Class */
-  .highlight .vg { color: #008080 } /* Name.Variable.Global */
-  .highlight .vi { color: #008080 } /* Name.Variable.Instance */
-  .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
-
-  /*--- custom light colors ---*/
-  --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #353a3d;
-  --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
-
-  --inline-code-bg: #f3f3f3;
-} // light-syntax

assets/css/lib/bootstrap-toc.min.css

@@ -1,4 +0,0 @@
-/*!
- * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/)
- * Copyright 2015 Aidan Feldman
- * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav-link+ul{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav-link.active+ul{display:block}

assets/css/page.scss

@@ -1,10 +0,0 @@
----
-# The default style for layout Page
-# v2.2
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2020 Cotes Chung
-# MIT License
----
-
-{% include_relative _addon/main.scss %}
-{% include_relative _addon/syntax.scss %}

assets/css/style.scss

@@ -0,0 +1,7 @@
+---
+---
+
+// see: /_sass/addon/commons.scss
+$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
+
+@import "jekyll-theme-chirpy";