Bump version to 5.1.0

Bootstrap 4.6.x has its own class `.shadow`

.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

@@ -0,0 +1,73 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* 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
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+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
+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.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+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>
+
+For answers to common questions about this code of conduct, see
+<https://www.contributor-covenant.org/faq>
+
+[homepage]: https://www.contributor-covenant.org

.github/CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# How to Contribute
+
+We want to thank you for sparing time to improve this project! Here are some guidelines for contributing：
+
+To ensure that the blog design is not confused, this project does not accept suggestions for design changes, such as color scheme, fonts, typography, etc. If your request is about an enhancement, it is recommended to first submit a [_Feature Request_](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md) issue to discuss whether your idea fits the project.
+
+## Basic Process
+
+Generally, contribute to the project by:
+
+1. Fork this project on GitHub and clone it locally.
+2. Create a new branch from the default branch and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
+3. After completing the development, submit a new _Pull Request_.
+
+## Modifying JavaScript
+
+If your contribution involves JS modification, please read the following sections.
+
+### Inline Scripts
+
+If you need to add comments to the inline JS (the JS code between the tags `<script>` and `</script>`), please use `/**/` instead of two slashes `//`. Because the HTML will be compressed by [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) during deployment, but it cannot handle the `//` properly. And this will disrupt the structure of the compressed HTML.
+
+### External Scripts
+
+If you need to add or modify JavaScripts in the directory `_javascript`, you need to install [Gulp.js](https://gulpjs.com/docs/en/getting-started/quick-start).
+
+During development, real-time debugging can be performed through the following commands:
+
+```console
+$ bash tools/run.sh
+```
+
+Open another terminal tab and run:
+
+```console
+$ gulp dev # Type 'Ctrl + C' to stop
+```
+
+After debugging, run the command `gulp` (without any argument) will automatically output the compressed files to the directory `assests/js/dist/`.
+
+---
+
+:tada: Your volunteering will make the open-source world more beautiful, thanks again! :tada:

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,64 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+---
+
+<!-- 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 changing the "[ ]" to "[x]" -->
+
+- [ ] I have read the [tutorials](https://cotes2020.github.io/chirpy-demo/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar reports on [existing issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue) (including closed ones).
+- [ ] I found the bug on the latest code of the `master` branch.
+
+## Describe the bug
+
+<!-- A clear and concise description of what the bug is. -->
+
+### To Reproduce
+
+Steps to reproduce the behavior:
+<!--
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+-->
+
+### Expected behavior
+
+<!-- A clear and concise description of what you expected to happen. -->
+
+### Screenshots
+
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+### Software
+
+<!-- Please complete the following information -->
+- 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 "` -->
+- Theme version: <!-- by running: `gem list | grep jekyll-theme-chirpy` -->
+
+### 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)]
+-->
+
+### 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

@@ -0,0 +1,35 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+labels: enhancement
+---
+
+<!-- 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 changing the "[ ]" to "[x]" -->
+- [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
+- [ ] There is no similar request on [existing issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue) (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 `master` branch of the latest code.
+
+
+## Is your feature request related to a problem? Please describe
+
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+
+## Describe the solution you'd like
+
+<!-- A clear and concise description of what you want to happen. -->
+
+
+## Describe alternatives you've considered
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+
+## Additional context
+
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,20 @@
+---
+name: Question
+about: Ask whatever you want
+labels: question
+---
+
+<!-- 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 changing the "[ ]" to "[x]" -->
+
+- [ ] I have read the [newlest tutorials](https://cotes2020.github.io/chirpy-demo/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There is no similar question on [existing issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue) (including closed ones).
+- [ ] I have tried to find the answer on [Jekyll Forum](https://talk.jekyllrb.com/) and [StackOverflow](https://stackoverflow.com/questions/tagged/jekyll).
+- [ ] My question is based on the latest code of the `master` branch.
+
+## Description
+
+<!-- Please describe your question in detail. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,42 @@
+## Description
+
+<!-- 
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+e.g. Fixes #(issue)
+-->
+
+## Type of change
+
+<!-- 
+Please select the desired item checkbox and change it to "[x]", then delete options that are not relevant.
+-->
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Documentation update
+
+## How has this been tested
+
+<!-- 
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+-->
+
+- [ ] I have run `bash ./tools/deploy.sh --dry-run` (at the root of the project) locally and passed
+- [ ] I have tested this feature in the browser
+
+### Test Configuration
+
+- Browser type & version:
+- Operating system:
+- Ruby version: <!-- by running: `ruby -v` -->
+- Bundler version: <!-- by running: `bundle -v`-->
+- Jekyll version: <!-- by running: `bundle list | grep " jekyll "` -->
+
+### Checklist
+
+<!-- Select checkboxes by change the "[ ]" to "[x]" -->
+- [ ] I have performed a self-review of my code
+- [ ] I have commented on my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings

.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

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

.github/workflows/issue-interceptor.yml

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

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

@@ -0,0 +1,29 @@
+name: 'Automatic build'
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+
+jobs:
+  continuous-delivery:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0  # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.7
+          bundler-cache: true
+
+      - name: Deploy
+        run: bash tools/deploy.sh

.gitignore

@@ -1,11 +1,18 @@
+# hidden files
 .*
-*.pyc
+!.git*
+!.editorconfig
+!.nojekyll
+!.travis.yml
 
-# jekyll debug
+# bundler cache
 _site
-
-# Jeykll Gemfile.lock
+vendor
 Gemfile.lock
 
-# yui-compressor
-*.jar
+# rubygem
+*.gem
+
+# npm dependencies
+node_modules
+package-lock.json

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "assets/lib"]
+	path = assets/lib
+	url = https://github.com/cotes2020/chirpy-static-assets.git

.nojekyll

@@ -0,0 +1 @@
+

.travis.yml

@@ -1,40 +1,48 @@
+os: linux
+dist: bionic
 language: ruby
-rvm: 2.5.3
-
-before_install:
-  - pyenv global 3.7.1
-
-install:
-  - pip install --upgrade pip
-  - pip install ruamel.yaml
-  - bundle install --path vendor/bundle --quiet
+rvm: 2.7.0
 
 addons:
   apt:
     packages:
-    - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+      - libcurl4-openssl-dev  # to avoid SSL error (for htmlproofer)
 
-script:
-  - bash _scripts/travis/cibuild.sh
+# Overriding to drop the `--development` flag which requires the Gemfile.lock at build
+install: bundle install --jobs=3 --retry=3 --path=vendor/bundle
 
-branches:
-  only: master
+before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
 
-git:
-  depth: false # for posts lastmod
+jobs:
+  include:
+    - stage: Upgrade
+      git:
+        depth: false  # for posts' lastmod
+      script: eval "$BUILD_CMD"
+    - stage: Starter
+      language: minimal
+      install: true   # skip install step
+      script: eval "$FLUSH_STARTER"
+    - stage: Docs
+      cache: bundler
+      git:
+        depth: false  # for posts' lastmod
+      script: eval "$DOCS_CMD"
 
-cache:
-  directories:
-    - $TRAVIS_BUILD_DIR/vendor/bundle
-    - $TRAVIS_BUILD_DIR/tmp/.htmlproofer
+stages:
+  - name: Upgrade
+    if: branch =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
+  - name: Starter
+    if: branch =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
+  - name: Docs
+    if: branch = docs
 
 notifications:
   email:
     recipients:
-      - secure: "GdZFhI2fu6MHwHeGkI9AI8NJexfT+cncJKoOTBxrMPywxvfm6HZ1vZTOwLD9mwG4XZUSznruD4NwRiXMBKs/94n8Z2f0QagCp2is/TuQWBVDUn1bowTbx1S7da6I3qTBGyIHvQWySwFgJuK9/uUeHdQF9ojMejESKZWfc6NjlgYie3Us3ax+Lygq6o4x+8+YPqlC/XwEKUUMUpXZT8Yubxg+s1mLwY9zmp2kJwB1snf6u498FPCWtCuQdGc91HEL4McfUfevnkNKttJQFwdE+mFkLoLn1FcXN0WQ8hPVTQvD/5TaCvACuB1oQ4dm4cnnoIRC5iuQntkP2Am7jPLnHLwxHDqB8vLDNxi1phbfGTk89ffY4n5FirF7DiYIn7hDDbDBlE4++9Pv/i7xgLp9+NzAzz25tdcfKZfXujrwE6b/2NbtXer/eWXyi7d6V/qWO6x8m7/IerX2/VrbXyQIgTvIDe2sSAraM77MMIiQ2KS6yhPIfjyCsC1sokFNRqUWut2UkqMFKOmAnSi/jTQY6/t1aOXGHtVRwgjFoyvBTk9F9NElxt3mseK26Mad3yAv5xLqhqHPFZJbVHJ8dP6RQvWwuvMK1uSqobTl+t0qBvvdSbt1/Oc/ubN1T2clObx1faF2luoMFhRtN+H5s7wfEMrO+sJAuSZnAHuDRpDIwCs="
+      - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
     on_success: never
 
 env:
   global:
     - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
-    - secure: "QNAqDoDQ+mF/3DFxKbc7fnYa5+FysJTX9Vs4XneH6iH63MS2lNtHfC7uT/M0/sRJaygK9eAdb+RaIeADE7CAMzqP3qdWx7l2N6qWab/kyK9KujUBsvoTGX6lDQTwC2Z+zlr5uUScHfLOhqHh6dbm6glziy2NB4dn9pVBXQrmBn09Rf9LImRT2u2h8gzmdl19hZ9TsW1/ROOb/1Soc3JElGRPrIxKI7ufHLQZt0UzZkYXGejQJwtstEEkRSmhfkJjlASeaeuyOFBvkWXjL1nKPsElwEKsAR+4II98JKA83YVqa9TJT2YSnXeLEFIhYDVSG6RLAMEU4rrITzRYC/hWKBKje4G0PDEM/cpnytk9Xhq+7oUFRmXCq3ZQgTQgzWhzl1kExC8b96hiWmQ+lVCw+Q2BG6+NloEEuOHOM839CTXfiitjRJ8KYUdLgW6IaruaingySBsbh1Vl+Dhu73QZ5H40KLdIH6woLXWAgtxkjpaL6DTeWDO6xMiwDreBa/2CJRT5R1tiG45CurZ+AkQ+yAAfSOEwGtE29oZl0sWeWMwVTaAClc0IJaG1+h8jxIVuQqHvK3fzd5RdlDtShrfCCVvQD0n29wXrdeNEg90F92kvdtmw8XgKc2P/Cl5uNzvVeTbFF3ZIHYpCVV4LW4Hn8clgYu+WUa/w4pVrBSdQOUw="

404.html

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

Gemfile

@@ -1,17 +1,22 @@
-source 'https://rubygems.org'
+# frozen_string_literal: true
 
-gem 'jekyll', '>=3.8.6'
+source "https://rubygems.org"
 
-# Official Plugins
-group :jekyll_plugins do
-  gem 'jekyll-paginate'
-  gem 'jekyll-redirect-from'
-  gem 'jekyll-seo-tag'
-end
+gemspec
 
 group :test do
-  gem 'html-proofer'
+  gem "html-proofer", "~> 3.18"
 end
 
-# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+# 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?
+
+# Jekyll <= 4.2.0 compatibility with Ruby 3.0
+gem "webrick", "~> 1.7"

README.md

@@ -1,161 +1,105 @@
-# Jekyll Theme Chirpy
+<div align="center">
 
-[![Build Status](https://travis-ci.com/cotes2020/jekyll-theme-chirpy.svg?branch=master)](https://travis-ci.com/cotes2020/jekyll-theme-chirpy)
-[![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-red.svg)](https://996.icu)
+  # Chirpy Jekyll Theme
 
-![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)
+  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
 
-A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text presentation. Hope you like it! [Live Demo »](https://chirpy.cotes.info)
+  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
+  [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)](https://www.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=cotes2020/jekyll-theme-chirpy&amp;utm_campaign=Badge_Grade)
+  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
+  [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
+
+  [**Live Demo →**](https://cotes2020.github.io/chirpy-demo)
+
+  [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/chirpy-images/main/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
+
+</div>
 
 ## Features
 
-* Posts' Last Modified Date
-* Table of Contents
-* Disqus Comments
-* Syntax highlighting
-* Two Level Categories
-* Search
-* HTML Compress
-* Atom Feeds
-* Google Analytics
-* GA Pageviews (Advanced)
-* SEO Tag
-* Performance Optimization
-
-## Getting Started
-
-### Preparation
-
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In addition, to use the funny script tools, we also need to install [Python](https://www.python.org/downloads/)(version 3.5 or abover) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/).
-
-Next, [fork](https://github.com/cotes2020/jekyll-theme-chirpy/fork) **Chirpy** and then clone your replicated repository locally.
+- Localized Layout
+- Dark/Light Theme Mode
+- Pinned Posts
+- Hierarchical Categories
+- Last Modified Date for Posts
+- Table of Contents
+- Auto-generated Related Posts
+- Syntax Highlighting
+- Mathematical Expressions
+- Mermaid Diagram & Flowchart
+- Disqus/Utterances/Giscus Comments
+- Search
+- Atom Feeds
+- Google Analytics
+- GA Pageviews Reporting
+- SEO & Performance Optimization
 
 
-### Install Jekyll Plugins
+## Quick Start
 
-Go to root directory of the repository and run the following:
+Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.
 
-```terminal
-$ bundle install
-```
+### Step 1. Creating a New Site
 
-`bundle` will install all the dependent Jekyll Plugins listed in file `Gemfile` automatically.
+Create a new repository from the [**Chirpy Starter**](https://github.com/cotes2020/chirpy-starter/generate) and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
 
+### Step 2. Installing Dependencies
 
-### File Structure
-
-The main files and related brief introductions are listed below.
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-│   └── travis      # CI stuff, remove it
-├── .travis.yml     # remove it, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── build.sh        # script tool
-├── run.sh          # script tool
-├── init.sh         # script tool
-├── pv.sh           
-├── feed.xml
-├── index.html
-├── robots.txt
-├── search.json
-└── sitemap.xml
-```
-
-
-### Configuration
-
-Customize the variables in file `_config.yml` as needed.
-
-
-### Atom Feed
-
-The Atom feed url of your site will be:
-
-```
-<SITE_URL>/feed.xml
-```
-
-The `SITE_URL` was defined by variable `url` in file `_config.yml`.
-
-
-###  Run Locally
-
-You may want to preview the site before publishing, so just run the script tool:
-
-```terminal
-$ bash run.sh
-```
-
->**Note**: 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.
-
-Open a brower 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, ensure the `url` in `_config.yml` has been set to `https://<username>.github.io`.
-
-#### Option 1: Built by GitHub Pages
-
-By deploying your site in this way, you can push the source code to GitHub repository directly.
-
-> **Note**: If you want to add any third-party Jekyll plugins or custom scripts to your project, please refer to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename your repository as `<username>.github.io`.
-
-**2**. Commit the changes of your repository, then run the initialization script:
+Before running for the first time, go to the root directory of your site, and install dependencies as follows:
 
 ```console
-$ bash init.sh
+$ bundle
 ```
 
-It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+### Step 3. Running Local Server
 
-**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
-
-**4**. Visit `https://<username>.github.io` and enjoy.
-
-
-#### Option 2: Build Locally
-
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts will not work. If you want to use any another third-party Jekyll plugins, **your have to build locally rather than on GitHub Pages**.
-
-**1**. On GitHub website, create a brand new repository with name `<username>.github.io` and then clone it locally.
-
-**2**. Build your site by:
+Run the following command in the root directory of the site:
 
 ```console
-$ bash build.sh -d /path/to/<username>.github.io/
+$ bundle exec jekyll s
 ```
 
-The build results will be stored in the root directory of `<username>.github.io` and don't forget to push the changes of `<username>.github.io` to branch `master` on GitHub.
+Or run with Docker:
 
-**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
+```console
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
 
-**4**. Visit `https://<username>.github.io` and enjoy.
+After a while, navigate to the site at <http://localhost:4000>.
 
 ## Documentation
 
-For more information, please see the [tutorial](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 on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/) / [wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Note that the tutorial is based on the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags), and the features of the default branch are usually ahead of the documentation.
 
+## Contributing
+
+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). The avatar and favicon design come from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
+
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas, or inspired me to write more readable documentation.
+
+Last but not least, thank [JetBrains][jb] for providing the OSS development license.
+
+## Sponsoring
+
+If you like this theme or find it helpful, please consider sponsoring me, because it will encourage and help me better maintain the project, I will be very grateful!
+
+[![Ko-fi](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff5f5f?logo=ko-fi&logoColor=white)](https://ko-fi.com/coteschung)
+[![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][cn-donation]
+[![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][cn-donation]
 
 ## License
 
 This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+
+<!-- ReadMe links -->
+
+[jb]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[cn-donation]: https://cotes.gitee.io/alipay-wechat-donation/

_config.yml

@@ -1,21 +1,35 @@
-# The Site Settings
-# © 2017-2019 Cotes Chung
-# MIT licensed
+# The Site Configuration
 
+# Import the theme
+theme: jekyll-theme-chirpy
+
+# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
+# and doesn't have a custom domain.
+baseurl: ''
+
+# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
+# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
+# otherwise, the layout language will use the default value of 'en'.
+lang: en
+
+# Additional parameters for datetime localization, optional. › https://github.com/iamkun/dayjs/tree/dev/src/locale
+prefer_datetime_locale:
+
+# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+timezone: Asia/Shanghai
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
-#--------------------------
+# ↓ --------------------------
 
-title: Chirpy
+title: Chirpy                          # the main title
 
-description: 'A text-based Jekyll theme.'
+tagline: A text-focused Jekyll theme   # it will display as the sub-title
 
-# Replace with your domain, e.g. 'https://username.github.io'
-url: 'https://www.example.com'
+description: >-                        # used by seo meta and the atom feed
+  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
 
-author: your_full_name                  # change to your full name
-
-avatar: /assets/img/sample/avatar.jpg   # Support network resources.
+# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
+url: ''
 
 github:
   username: github_username             # change to your github username
@@ -24,7 +38,9 @@ twitter:
   username: twitter_username            # change to your twitter username
 
 social:
-  name: your_full_name                  # it will shows as the copyright owner in Footer
+  # Change to your full name.
+  # It will be displayed as the default author of the posts and the copyright owner in the Footer
+  name: your_full_name
   email: example@doamin.com             # change to your email address
   links:
     # The first element serves as the copyright owner's link
@@ -34,49 +50,79 @@ social:
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
-google_site_verification: google_meta_tag_verification # change to your verification string
+google_site_verification:               # fill in to your verification string
 
-#--------------------------
-
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
-timezone: Asia/Shanghai
+# ↑ --------------------------
+# The end of `jekyll-seo-tag` settings
 
 google_analytics:
-  # Fill with your Google Analytics ID
-  id: ''
-  # The Google Analytics pageviews switch.
-  # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-  pv: false
-  # superProxy baseURL and URL, only valid when `google_analytics.pv` is set to 'true'
-  proxy_baseurl: ''
-  proxy_url: ''
+  id:                 # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
+  pv:
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 
+# Prefer color scheme setting.
+#
+# Note: Keep empty will follow the system prefer color by default,
+# and there will be a toggle to switch the theme between dark and light
+# on the bottom left of the sidebar.
+#
+# Available options:
+#
+#     light  - Use the light color scheme
+#     dark   - Use the dark color scheme
+#
+theme_mode:   # [light|dark]
 
-disqus:
-  shortname: 'disqus'   # Change to your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
-  comments: true        # boolean type, the global switch for posts comments.
+# The CDN endpoint for images.
+# Notice that once it is assigned, the CDN url
+# will be added to all image (site avatar & posts' images) paths starting with '/'
+#
+# e.g. 'https://cdn.com'
+img_cdn: 'https://raw.githubusercontent.com/cotes2020/chirpy-images/main'
 
-# The year your website was first run.
-first_run: 2019
+# the avatar on sidebar, support local or CORS resources
+avatar: '/commons/avatar.jpg'
 
-# boolean type, global switch for ToC in posts.
+# boolean type, the global switch for ToC in posts.
 toc: true
 
+comments:
+  active:         # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
+  # The active options are as follows:
+  disqus:
+    shortname:    # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+  # utterances settings › https://utteranc.es/
+  utterances:
+    repo:         # <gh-username>/<repo>
+    issue_term:   # < url | pathname | title | ...>
+  # Giscus options › https://giscus.app
+  giscus:
+    repo:             # <gh-username>/<repo>
+    repo_id:
+    category:
+    category_id:
+    mapping:          # optional, default to 'pathname'
+    input_position:   # optional, default to 'bottom'
+    lang:             # optional, default to the value of `site.lang`
 
-# if your site type is Project Pages site, change below value to '/projectname'
-baseurl: ''
+# Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
+assets:
+  self_host:
+    enabled:      # boolean, keep empty means false
+    # specify the Jekyll environment, empty means both
+    # only works if `assets.self_host.enabled` is 'true'
+    env:          # [development|production]
 
 paginate: 10
 
-markdown: kramdown
-
-highlighter: rouge
+# ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
-    css_class: 'highlight'
+  syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
+    css_class: highlight
     # default_lang: console
     span:
       line_numbers: false
@@ -84,91 +130,68 @@ kramdown:
       line_numbers: true
       start_line: 1
 
-permalink: /posts/:title/
+collections:
+  tabs:
+    output: true
+    sort_by: order
 
 defaults:
-  -
-    scope:
-      path: ""          # An empty string here means all files in the project
+  - scope:
+      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
-          url: /
-  -
-    scope:
+      # DO NOT modify the following parameter unless you are confident enough
+      # to update the code of all other post links in this project.
+      permalink: /posts/:title/
+  - scope:
       path: _drafts
     values:
       comments: false
-  -
-    scope:
-      path: tags
-    values:
-      location: Tag
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Tags
-          url: /tabs/tags/
-  -
-    scope:
-      path: categories
-    values:
-      location: Category
-      breadcrumb:
-        -
-          label: Home
-          url: /
-        -
-          label: Categories
-          url: /tabs/categories/
-  -
-    scope:
-      path: tabs
+  - scope:
+      path: ''
+      type: tabs             # see `site.collections`
     values:
       layout: page
-      dynamic_title: true    # Hide title in mobile screens.
-      breadcrumb:
-        -
-          label: Home
-          url: /
+      permalink: /:title/
+  - scope:
+      path: assets/img/favicons
+    values:
+      swcache: true
+  - scope:
+      path: assets/js/dist
+    values:
+      swcache: true
 
 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 vender directory on Travis-CI's VM .
-  - Gemfile.lock
-  - Gemfile
-  - run.sh
-  - build.sh
-  - init.sh
-  - pv.sh
+  - '*.gem'
+  - '*.gemspec'
+  - tools
+  - README.md
+  - LICENSE
+  - gulpfile.js
+  - node_modules
+  - package*.json
 
-sitemap_exclude:  # Sitemap will exclude the following items.
-  - /norobots/
-  - /assets/
-  - /tabs/
-  - /categories/
-  - /tags/
-  - /posts/
-  - /404.html
-  - /redirects.json
-  - /search.json
+jekyll-archives:
+  enabled: [categories, tags]
+  layouts:
+    category: category
+    tag: tag
+  permalinks:
+    tag: /tags/:name/
+    category: /categories/:name/

_data/assets/cross_origin.yml

@@ -0,0 +1,62 @@
+# CDNs
+
+cdns:
+  # Google Fonts
+  - url: https://fonts.googleapis.com
+  - url: https://fonts.gstatic.com
+    args: crossorigin
+  - url: https://fonts.googleapis.com
+  # jsDelivr CDN
+  - url: https://cdn.jsdelivr.net
+
+# fonts
+
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+
+# Libraries
+
+jquery:
+  js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
+
+bootstrap:
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
+
+bootstrap-toc:
+  css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
+  js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
+
+fontawesome:
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css
+
+search:
+  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
+
+mermaid:
+  js: https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
+
+dayjs:
+  js:
+    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js
+
+countup:
+  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
+
+magnific-popup:
+  css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css
+  js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js
+
+lozad:
+  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+
+clipboard:
+  js:  https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
+
+polyfill:
+  js: https://polyfill.io/v3/polyfill.min.js?features=es6
+
+mathjax:
+  js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js

_data/assets/self_host.yml

@@ -0,0 +1,51 @@
+# fonts
+
+webfonts: /assets/lib/fonts/main.css
+
+# Libraries
+
+jquery:
+  js: /assets/lib/jquery-3.6.0/jquery.min.js
+
+bootstrap:
+  css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css
+  js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js
+
+bootstrap-toc:
+  css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css
+  js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
+
+fontawesome:
+  css: /assets/lib/fontawesome-free-5.15.4/css/all.min.css
+
+search:
+  js: /assets/lib/simple-jekyll-search-1.10.0/simple-jekyll-search.min.js
+
+mermaid:
+  js: /assets/lib/mermaid-8.13.10/mermaid.min.js
+
+dayjs:
+  js:
+    common: /assets/lib/dayjs-1.10.7/dayjs.min.js
+    locale: /assets/lib/dayjs-1.10.7/locale/en.min.js
+    relativeTime: /assets/lib/dayjs-1.10.7/plugin/relativeTime.min.js
+    localizedFormat: /assets/lib/dayjs-1.10.7/plugin/localizedFormat.min.js
+
+countup:
+  js: /assets/lib/countup.js-1.9.3/countUp.min.js
+
+magnific-popup:
+  css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
+  js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
+
+lozad:
+  js: /assets/lib/lozad-1.16.0/lozad.min.js
+
+clipboard:
+  js: /assets/lib/clipboard-2.0.9/clipboard.min.js
+
+polyfill:
+  js: /assets/lib/polyfill-v3-es6/polyfill.min.js
+
+mathjax:
+  js: /assets/lib/mathjax-3.2.0/tex-chtml.js

_data/contact.yml

@@ -0,0 +1,30 @@
+#  The contact options.
+
+-
+  type: github
+  icon: 'fab fa-github'
+-
+  type: twitter
+  icon: 'fab fa-twitter'
+-
+  type: email
+  icon: 'fas fa-envelope'
+  noblank: true            # open link in current tab
+-
+  type: rss
+  icon: 'fas fa-rss'
+  noblank: true
+
+# Uncomment and complete the url below to enable more contact options
+# -
+#   type: mastodon
+#   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
+#   url:  ''                  # Fill with your mastodon account page
+# -
+#   type: linkedin
+#   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
+#   url:  ''                  # Fill with your Linkedin homepage
+# -
+#   type: stack-overflow
+#   icon: 'fab fa-stack-overflow'
+#   url:  ''                  # Fill with your stackoverflow homepage

_data/label.yml

@@ -1,17 +0,0 @@
-# The label text of site.
-# © 2017-2019 Cotes Chung
-# MIT Licensed
-
-tabs:
-  - { name: "Home", icon: 'fas fa-home' }
-  - { name: "Categories", path: tabs, url: categories, icon: 'fas fa-stream' }
-  - { name: "Tags", path: tabs, url: tags, icon: 'fas fa-tags' }
-  - { name: "Archives", path: tabs, url: archives, icon: 'fas fa-archive'}
-  - { name: "About", path: tabs, url: about, icon: 'fas fa-info'}
-
-panel:
-  lastmod: "Recent Update"
-  trending_tags: "Trending Tags"
-  toc: "Contents"
-
-search_hint: "Search"   # text show on search bar

_data/locales/en.yml

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

_data/locales/id-ID.yml

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

_data/locales/ko-KR.yml

@@ -0,0 +1,78 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 포스트
+  category: 카테고리
+  tag: 태그
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 홈
+  categories: 카테고리
+  tags: 태그
+  archives: 아카이브
+  about: 정보
+
+# the text displayed in the search bar & search results
+search:
+  hint: 검색
+  cancel: 취소
+  no_results: 검색 결과가 없습니다.
+
+panel:
+  lastmod: 최근 업데이트
+  trending_tags: 인기 태그
+  toc: 바로가기
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 이 기사는 저작권자의 :LICENSE_NAME 라이센스를 따릅니다.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 일부 권리 보유
+  verbose: >-
+    명시되지 않는 한 이 사이트의 블로그 게시물은 작성자의
+    Creative Commons Attribution 4.0 International(CC BY 4.0) 라이선스에 따라 사용이 허가되었습니다.
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: 해당 URL은 존재하지 않습니다.
+  hint_template: :HEAD_BAK을 눌러 다시 찾거나 :ARCHIVES_PAGE에서 검색해 주세요.
+  head_back: 홈으로 돌아가기
+  archives_page: 아카이브 페이지
+
+# ----- Posts related labels -----
+
+post:
+  written_by: By
+  posted: 게시
+  updated: 업데이트
+  words: 단어
+  pageview_measure: 조회
+  read_time:
+    unit: 분
+    prompt: 읽는 시간
+  relate_posts: 관련된 글
+  share: 공유하기
+  button:
+    next: 다음 글
+    previous: 이전 글
+    copy_code:
+      succeed: 복사되었습니다!
+    share_link:
+      title: 링크 복사하기
+      succeed: 링크가 복사되었습니다!
+  # pinned prompt of posts list on homepage
+  pin_prompt: 핀
+
+# categories page
+categories:
+  category_measure: 카테고리
+  post_measure: 포스트

_data/locales/my-MM.yml

@@ -0,0 +1,78 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: ပို့စ်
+  category: ကဏ္ဍ
+  tag: နာမ(တက်ဂ်)
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: အဓိကစာမျက်နှာ
+  categories: ကဏ္ဍများ
+  tags: နာမ(တက်ဂ်)များ
+  archives: မှတ်တမ်း​တိုက်
+  about: အကြောင်းအရာ
+
+# the text displayed in the search bar & search results
+search:
+  hint: ရှာဖွေမည်
+  cancel: ဖျက်သိမ်းမည်
+  no_results: အိုး! ဘာမှမရှိပါ
+
+panel:
+  lastmod: မကြာသေးမီကမွမ်းမံထားသည်
+  trending_tags: ခေတ်စားနေသည့်တက်ဂ်များ
+  toc: အကြောင်းအရာများ
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: ဤပို့စ်သည်စာရေးသူ၏ :LICENSE_NAME လိုင်စင်ရထားသည်။
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: မူပိုင်ခွင့်အချို့ကို လက်ဝယ်ထားသည်။
+  verbose: >-
+    အခြားမှတ်သားထားချက်များမှလွဲ၍ ဤဆိုက်ရှိ ဘလော့ဂ်ပို့စ်များသည် စာရေးသူ၏
+    Creative Commons Attribution 4.0 International (CC BY 4.0) အောက်တွင် လိုင်စင်ရထားပါသည်။
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
+  hint_template: ၎င်းကို ထပ်မံရှာဖွေရန် :HEAD_BAK , သို့မဟုတ် :ARCHIVES_PAGE တွင်ရှာပါ။
+  head_back: အဓိကစာမျက်နှာသို့ပြန်သွားပါ။
+  archives_page: မှတ်တမ်း​တိုက် စာမျက်နှာ။
+
+# ----- Posts related labels -----
+
+post:
+  written_by: ကရေးသားခဲ့သည်။
+  posted: တင်ထားခဲ့သည်။
+  updated: မွမ်းမံထားခဲ့သည်။
+  words: စကားလုံးများ
+  pageview_measure: အမြင်များ
+  read_time:
+    unit: မိနစ်
+    prompt: ဖတ်ပါမည်
+  relate_posts: နောက်ထပ်ဖတ်ရန်
+  share: မျှဝေရန်
+  button:
+    next: အသစ်များ
+    previous: အဟောင်းများ
+    copy_code:
+      succeed: ကူးယူလိုက်ပြီ။
+    share_link:
+      title: လင့်ခ်ကို ကူးယူရန်
+      succeed: လင့်ခ်ကို ကူးယူလိုက်ပြီ။
+  # pinned prompt of posts list on homepage
+  pin_prompt: ချိတ်ထားသည်။
+
+# categories page
+categories:
+  category_measure: ကဏ္ဍများ
+  post_measure: ပို့စ်များ

_data/locales/ru-RU.yml

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

_data/locales/uk-UA.yml

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

_data/locales/zh-CN.yml

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

_data/share.yml

@@ -0,0 +1,27 @@
+#  Sharing options at the bottom of the post.
+#  Icons from <https://fontawesome.com/>
+
+platforms:
+  -
+    type: Twitter
+    icon: "fab fa-twitter"
+    link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
+  -
+    type: Facebook
+    icon: "fab fa-facebook-square"
+    link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL"
+  -
+    type: Telegram
+    icon: "fab fa-telegram"
+    link: "https://t.me/share/url?url=URL&text=TITLE"
+
+  # Uncomment below if you need to.
+  # -
+  #   type: Linkedin
+  #   icon: "fab fa-linkedin"
+  #   link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
+  #
+  # -
+  #   type: Weibo
+  #   icon: "fab fa-weibo"
+  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"

_includes/assets-origin.html

@@ -0,0 +1,12 @@
+{% comment %} Site static assets origin {% endcomment %}
+{% assign origin = 'cross_origin' %}
+
+{% if site.assets.self_host.enabled %}
+  {% if site.assets.self_host.env %}
+    {% if site.assets.self_host.env == jekyll.environment %}
+      {% assign origin = 'self_host' %}
+    {% endif %}
+  {% else %}
+    {% assign origin = 'self_host' %}
+  {% endif %}
+{% endif %}

_includes/comments.html

@@ -0,0 +1,5 @@
+<!--  The comments switcher -->
+{% if page.comments and site.comments.active %}
+  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}

_includes/comments/disqus.html

@@ -0,0 +1,54 @@
+<!--
+  The Disqus lazy loading.
+-->
+<div id="disqus_thread" class="pt-2 pb-2">
+  <p class="text-center text-muted small">
+    Comments powered by <a href="https://disqus.com/">Disqus</a>.
+  </p>
+</div>
+
+<script type="text/javascript">
+
+  var disqus_config = function () {
+    this.page.url = '{{ page.url | absolute_url }}';
+    this.page.identifier = '{{ page.url }}';
+  };
+
+  /* Lazy loading */
+
+  var disqus_observer = new IntersectionObserver(function (entries) {
+    if(entries[0].isIntersecting) {
+        (function () {
+            var d = document, s = d.createElement('script');
+            s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+            s.setAttribute('data-timestamp', +new Date());
+            (d.head || d.body).appendChild(s);
+        })();
+
+        disqus_observer.disconnect();
+    }
+  }, { threshold: [0] });
+
+  disqus_observer.observe(document.querySelector('#disqus_thread'));
+
+  /* Auto switch theme */
+
+  function reloadDisqus() {
+    /* Disqus hasn't been loaded */
+    if (typeof DISQUS === "undefined") {
+      return;
+    }
+
+    if (document.readyState == 'complete') {
+      DISQUS.reset({ reload: true, config: disqus_config });
+    }
+  }
+
+  const modeToggle = document.querySelector(".mode-toggle");
+
+  if (typeof modeToggle !== "undefined") {
+    /*  modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme'  */
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
+  }
+
+</script>

_includes/comments/giscus.html

@@ -0,0 +1,56 @@
+<!-- https://giscus.app/ -->
+<script type="text/javascript">
+  $(function () {
+    const origin = "https://giscus.app";
+    const iframe = "iframe.giscus-frame";
+    const lightTheme = "light";
+    const darkTheme = "dark_dimmed";
+    let initTheme = lightTheme;
+
+    if ($("html[data-mode=dark]").length > 0
+        || ($("html[data-mode]").length == 0
+            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      initTheme = darkTheme;
+    }
+
+    let giscusAttributes = {
+      "src": "https://giscus.app/client.js",
+      "data-repo": "{{ site.comments.giscus.repo}}",
+      "data-repo-id": "{{ site.comments.giscus.repo_id }}",
+      "data-category": "{{ site.comments.giscus.category }}",
+      "data-category-id": "{{ site.comments.giscus.category_id }}",
+      "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
+      "data-reactions-enabled": "1",
+      "data-emit-metadata": "0",
+      "data-theme": initTheme,
+      "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
+      "data-lang": "{{ site.comments.giscus.lang | default: lang }}",
+      "crossorigin": "anonymous",
+      "async": ""
+    };
+
+    let giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById("tail-wrapper").appendChild(giscusScript);
+
+    addEventListener("message", (event) => {
+      if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+        /* global theme mode changed */
+        const mode = event.data.message;
+        const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+
+        const message = {
+          setConfig: {
+            theme: theme
+          }
+        };
+
+        const giscus = document.querySelector(iframe).contentWindow;
+        giscus.postMessage({ giscus: message }, origin);
+      }
+
+    });
+
+  });
+</script>

_includes/comments/utterances.html

@@ -0,0 +1,51 @@
+<!-- https://utteranc.es/ -->
+<script src="https://utteranc.es/client.js"
+        repo="{{ site.comments.utterances.repo }}"
+        issue-term="{{ site.comments.utterances.issue_term }}"
+        crossorigin="anonymous"
+        async>
+</script>
+
+<script type="text/javascript">
+  $(function() {
+    const origin = "https://utteranc.es";
+    const iframe = "iframe.utterances-frame";
+    const lightTheme = "github-light";
+    const darkTheme = "github-dark";
+    let initTheme = lightTheme;
+
+    if ($("html[data-mode=dark]").length > 0
+        || ($("html[data-mode]").length == 0
+            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      initTheme = darkTheme;
+    }
+
+    addEventListener("message", (event) => {
+      let theme;
+
+      /* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
+      if (event.origin === origin) {
+        /* page initial */
+        theme = initTheme;
+
+      } else if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+        /* global theme mode changed */
+        const mode = event.data.message;
+        theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+
+      } else {
+        return;
+      }
+
+      const message = {
+        type: "set-theme",
+        theme: theme
+      };
+
+      const utterances = document.querySelector(iframe).contentWindow;
+      utterances.postMessage(message, origin);
+    });
+
+  });
+</script>

_includes/date-format.html

@@ -1,8 +0,0 @@
-<!--
- Define the liquid date formats.
- © 2019 Cotes Chung
- Published under the MIT License
--->
-
-{% assign TOOLTIP_DATE = "%a, %b %e, %Y, %l:%M %p %z" %}
-{% assign POST_DATE = "%b %e, %Y" %}

_includes/disqus.html

@@ -1,24 +0,0 @@
-<!--
-  The Disqus lazy loading.
-  Powered by: https://osvaldas.info/lazy-loading-disqus-comments
-  © 2019 Cotes Chung
-  MIT License
--->
-
-<div id="disqus" class="pt-2 pb-4">
-  <p class="font-italic text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
-</div>
-
-<script src="{{ site.baseurl }}/assets/lib/jquery.disqusloader.min.js"></script>
-<script>
-  var options = {
-    scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',
-
-    disqusConfig: function() {
-      this.page.url = '{{ site.url | append: site.baseurl | append: page.url }}';
-      this.page.identifier = '{{ page.url }}';
-    }
-  };
-
-  $.disqusLoader('#disqus', options);
-</script>

_includes/favicons.html

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

_includes/fixlinenos.html

@@ -1,9 +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 _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign _content = _content | replace: '</code></pre>', '</code>' %}
-{% endif %}

_includes/footer.html

@@ -1,24 +1,37 @@
 <!--
   The Footer
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <footer class="d-flex w-100 justify-content-center">
-  <div class="d-flex justify-content-between  align-items-center">
-    <div class="copyright">
-      {% assign first = site.first_run | plus: 0 %}
-      {% assign last = 'now' | date: "%Y" | plus: 0 %}
+  <div class="d-flex justify-content-between align-items-center text-muted">
+    <div class="footer-left">
       <p class="mb-0">
-        © {% if last > first %}{{ first }}-{% endif %}{{-last-}}
-        <a href="{{ site.social.links[0] }}" class="ml-1">{{ site.social.name }}</a>.
-        <br>Powered by <a href="https://jekyllrb.com" target="_blank">Jekyll</a> & <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>, hosted on <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
+        © {{ 'now' | date: "%Y" }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+        {% if site.data.locales[lang].copyright.brief %}
+        <span data-toggle="tooltip" data-placement="top"
+          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
+        {% endif %}
       </p>
     </div>
-    <div class="license">
+
+    <div class="footer-right">
       <p class="mb-0">
-        The blog posts on this site are licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
+        {% capture _platform %}
+          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+        {% endcapture %}
+
+        {% capture _theme %}
+          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+        {% endcapture %}
+
+        {{ site.data.locales[lang].meta
+          | default: 'Powered by :PLATFORM with :THEME theme.'
+          | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
+        }}
+
       </p>
     </div>
+
   </div> <!-- div.d-flex -->
 </footer>

_includes/google-analytics.html

@@ -1,14 +1,14 @@
 <!--
   The GA snippet
-  © 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,111 +1,90 @@
 <!--
   The Head
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 
 <head>
-  <title>
-  {%- if page.layout == "home" -%}
-    {{- site.title -}}
-  {%- else -%}
-    {{ page.title }} | {{ site.title }}
-  {%- endif -%}
-  </title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+  <!-- Allow having a localized datetime different from the appearance language -->
+  {% if site.prefer_datetime_locale %}
+    <meta name="prefer-datetime-locale" content="{{ site.prefer_datetime_locale }}">
+  {% endif %}
+
+  {% if page.layout == 'home' or page.layout == 'post' %}
+
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
+    {% endif %}
+
+    {% if site.google_analytics.pv.cache_path %}
+      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
+    {% endif %}
+
+  {% endif %}
+
   {% seo title=false %}
 
+  <title>
+  {%- unless page.layout == "home" -%}
+    {{ page.title | append: " | "}}
+  {%- endunless -%}
+    {{ site.title }}
+  </title>
+
   {% include favicons.html %}
 
-  <!-- google fonts -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
-  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
 
-  <!-- ga -->
-  {% if jekyll.environment == 'production' %}
+    <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
+
+  {% else %}
+
+    {% for cdn in site.data.assets[origin].cdns %}
+      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
+      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+    {% endfor %}
+
+    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts }}">
+
+  {% endif %}
+
+  <!-- GA -->
+  {% if jekyll.environment == 'production'
+      and site.google_analytics.id != empty and site.google_analytics.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.proxy_baseurl and site.google_analytics.pv %}
-      <link rel="preconnect" href="{{ site.google_analytics.proxy_baseurl }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.proxy_baseurl }}">
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
+          | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
+      <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
   {% endif %}
 
-  <link rel="preconnect" href="cdn.jsdelivr.net">
-  <link rel="dns-prefetch" href="cdn.jsdelivr.net">
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css }}">
 
-  <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">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css }}">
 
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
-    integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
-    crossorigin="anonymous">
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
-
-  {% if page.layout == 'home' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/home.css">
+  {% if site.toc and page.toc %}
+    <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css }}">
   {% endif %}
 
-  {% if page.title == 'Categories' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
+  {% if page.layout == 'page' or page.layout == 'post' %}
+    <!-- Manific Popup -->
+    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css }}">
   {% endif %}
 
-  {% if page.title == 'Tags' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
-  {% endif %}
+  <!-- JavaScript -->
 
-  {% if page.layout == 'category' or page.layout == 'tag' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
-  {% endif %}
+  <script src="{{ site.data.assets[origin].jquery.js }}"></script>
 
-  {% if page.title == 'Archives' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
-  {% endif %}
-
-  {% if page.title == 'About' and page.layout == 'page' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
-  {% endif %}
-
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-
-  <script>
-    window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/lib/jquery-3.4.1.min.js"><\/script>');
-  </script>
-
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
-    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous" async></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
-    integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous" async></script>
-
-  <script src="{{ site.baseurl }}/assets/js/dist/commons.js" async></script>
-
-  {% if page.layout == 'home' or page.layout == 'post' %}
-    <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js" async></script>
-    {% if site.google_analytics.pv %}
-      <script src="{{ site.baseurl }}/assets/lib/countUp.min.js" async></script>
-      <script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
-    {% endif %}
-  {% endif %}
-
-  {% if page.layout == 'post' %}
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
-    {% if site.toc and page.toc %}
-      <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
-      <script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js" async></script>
-      <script src="{{ site.baseurl }}/assets/js/dist/toc.min.js" async></script>
-    {% endif %}
-  {% endif %}
-
-</head>
+</head>

_includes/js-selector.html

@@ -0,0 +1,100 @@
+<!--
+  JS selector for site.
+-->
+
+<!-- layout specified -->
+
+{% if page.layout == 'post' %}
+  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+    <!-- pv-report needs countup.js -->
+    <script async src="{{ site.data.assets[origin].countup.js }}"></script>
+    <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
+  {% endif %}
+{% endif %}
+
+{% if page.layout == 'post' or page.layout == 'page' %}
+  <!-- image lazy-loading & popup & clipboard -->
+  {% assign _urls = site.data.assets[origin].magnific-popup.js
+      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].clipboard.js
+  %}
+
+  {% include jsdelivr-combine.html urls=_urls %}
+
+{% endif %}
+
+{% if page.layout == 'home'
+    or page.layout == 'post'
+    or page.layout == 'archives'
+    or page.layout == 'category'
+    or page.layout == 'tag' %}
+
+  {% if site.prefer_datetime_locale %}
+    {% assign locale = site.prefer_datetime_locale | downcase %}
+  {% else %}
+    {% assign locale = site.lang | split: '-' | first %}
+  {% endif %}
+
+  {% assign _urls = site.data.assets[origin].dayjs.js.common
+      | append: ',' | append: site.data.assets[origin].dayjs.js.locale
+      | replace: ':LOCALE', locale
+      | append: ',' | append: site.data.assets[origin].dayjs.js.relativeTime
+      | append: ',' | append: site.data.assets[origin].dayjs.js.localizedFormat
+  %}
+
+  {% include jsdelivr-combine.html urls=_urls %}
+
+{% endif %}
+
+{% if page.layout == 'home'
+    or page.layout == 'categories'
+    or page.layout == 'post'
+    or page.layout == 'page' %}
+  {% assign type = page.layout %}
+{% elsif page.layout == 'archives'
+    or page.layout == 'category'
+    or page.layout == 'tag' %}
+  {% assign type = "misc" %}
+{% else %}
+  {% assign type = "commons" %}
+{% endif %}
+
+{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
+<script defer src="{{ script | relative_url }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script>
+  /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
+  MathJax = {
+    tex: {
+      inlineMath: [              /* start/end delimiter pairs for in-line math */
+        ['$','$'],
+        ['\\(','\\)']
+      ],
+      displayMath: [             /* start/end delimiter pairs for display math */
+        ['$$', '$$'],
+        ['\\[', '\\]']
+      ]
+    }
+  };
+  </script>
+  <script src="{{ site.data.assets[origin].polyfill.js }}"></script>
+  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js }}">
+  </script>
+{% endif %}
+
+<!-- commons -->
+
+<script src="{{ site.data.assets[origin].bootstrap.js }}"></script>
+
+{% if jekyll.environment == 'production' %}
+  <!-- PWA -->
+  <script defer src="{{ '/app.js' | relative_url }}"></script>
+
+  <!-- GA -->
+  {% if site.google_analytics.id != empty and site.google_analytics.id %}
+    {% include google-analytics.html %}
+  {% endif %}
+
+{% endif %}

_includes/jsdelivr-combine.html

@@ -0,0 +1,32 @@
+{% assign urls = include.urls | split: ',' %}
+
+{% assign combined_urls = nil %}
+
+{% assign domain = 'https://cdn.jsdelivr.net/' %}
+
+{% for url in urls %}
+
+  {% if url contains domain %}
+    {% assign url_snippet = url | slice: domain.size, url.size %}
+
+    {% if combined_urls %}
+      {% assign combined_urls = combined_urls | append: ',' | append: url_snippet %}
+    {% else %}
+      {% assign combined_urls = domain | append: 'combine/' | append: url_snippet %}
+    {% endif %}
+
+  {% elsif url contains '//' %}
+
+    <script src="{{ url }}"></script>
+
+  {% else %}
+
+    <script src="{{ url | relative_url }}"></script>
+
+  {% endif %}
+
+{% endfor %}
+
+{% if combined_urls %}
+  <script src="{{ combined_urls }}"></script>
+{% endif %}

_includes/lang.html

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

_includes/language-alias.html

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

_includes/lozad.html

@@ -1,7 +0,0 @@
-<!-- image lazy load -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
-
-<script type="text/javascript">
-  const observer = lozad();
-  observer.observe();
-</script>

_includes/mermaid.html

@@ -0,0 +1,57 @@
+<!--
+  mermaid-js loader
+-->
+
+<script src="{{ site.data.assets[origin].mermaid.js }}"></script>
+
+<script>
+  $(function() {
+    function updateMermaid(event) {
+      if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+
+        const mode = event.data.message;
+
+        if (typeof mermaid === "undefined") {
+          return;
+        }
+
+        let expectedTheme = (mode === 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");
+      }
+    }
+
+    let initTheme = "default";
+
+    if ($("html[data-mode=dark]").length > 0
+      || ($("html[data-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);
+
+    window.addEventListener("message", updateMermaid);
+  });
+</script>

_includes/mode-toggle.html

@@ -0,0 +1,129 @@
+<!--
+  Switch the mode between dark and light.
+-->
+
+<script type="text/javascript">
+  class ModeToggle {
+    static get MODE_KEY() { return "mode"; }
+    static get MODE_ATTR() { return "data-mode"; }
+    static get DARK_MODE() { return "dark"; }
+    static get LIGHT_MODE() { return "light"; }
+    static get ID() { return "mode-toggle"; }
+
+    constructor() {
+      if (this.hasMode) {
+        if (this.isDarkMode) {
+          if (!this.isSysDarkPrefer) {
+            this.setDark();
+          }
+        } else {
+          if (this.isSysDarkPrefer) {
+            this.setLight();
+          }
+        }
+      }
+
+      let self = this;
+
+      /* always follow the system prefers */
+      this.sysDarkPrefers.addEventListener("change", () => {
+        if (self.hasMode) {
+          if (self.isDarkMode) {
+            if (!self.isSysDarkPrefer) {
+              self.setDark();
+            }
+
+          } else {
+            if (self.isSysDarkPrefer) {
+              self.setLight();
+            }
+          }
+
+          self.clearMode();
+        }
+
+        self.notify();
+
+      });
+
+    } /* constructor() */
+
+    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+
+    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+
+    get isDarkMode() { return this.mode === ModeToggle.DARK_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;
+      }
+    }
+
+    setDark() {
+      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+    }
+
+    setLight() {
+      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+    }
+
+    clearMode() {
+      $('html').removeAttr(ModeToggle.MODE_ATTR);
+      sessionStorage.removeItem(ModeToggle.MODE_KEY);
+    }
+
+    /* Notify another plugins that the theme mode has changed */
+    notify() {
+      window.postMessage({
+        direction: ModeToggle.ID,
+        message: this.modeStatus
+      }, "*");
+    }
+
+  } /* ModeToggle */
+
+  const toggle = new ModeToggle();
+
+  function flipMode() {
+    if (toggle.hasMode) {
+      if (toggle.isSysDarkPrefer) {
+        if (toggle.isLightMode) {
+          toggle.clearMode();
+        } else {
+          toggle.setLight();
+        }
+
+      } else {
+        if (toggle.isDarkMode) {
+          toggle.clearMode();
+        } else {
+          toggle.setDark();
+        }
+      }
+
+    } else {
+      if (toggle.isSysDarkPrefer) {
+        toggle.setLight();
+      } else {
+        toggle.setDark();
+      }
+    }
+
+    toggle.notify();
+
+  } /* flipMode() */
+
+</script>

_includes/no-linenos.html

@@ -0,0 +1,10 @@
+{% comment %}
+  Remove the line number of the code snippet.
+{% endcomment %}
+
+{% assign content = include.content %}
+
+{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% endif %}

_includes/panel.html

@@ -1,65 +0,0 @@
-<!--
-  The Pannel on right side (Desktop views)
-  © 2017-2019 Cotes Chung
-  MIT License
--->
-
-<div id="panel-wrapper" class="col-xl-3 pl-2 topbar-down">
-
-  <div class="access">
-  {% assign lastmod_list = "" | split: "" %}
-  {% assign index = 0 %}
-
-  {% for post in site.posts %}
-    {% if post.seo.date_modified > post.date and post.seo.date_modified != nil %}
-      {% capture item %}
-        {{ post.seo.date_modified }}::{{ index }}
-      {% endcapture %}
-      {% assign lastmod_list = lastmod_list | push: item %}
-    {% endif %}
-    {% assign index = index | plus: 1 %}
-  {% endfor %}
-
-  {% if lastmod_list.size > 0 %}
-    <div id="access-lastmod" class="post mb-4">
-      <h3 data-toc-skip>
-        {{- site.data.label.panel.lastmod -}}
-      </h3>
-      <ul class="post-content pl-0 pb-1 ml-1 mt-2">
-    {% assign MAX_SIZE = 5 %}
-    {% assign sum = 0 %}
-    {% assign lastmod_list = lastmod_list | sort | reverse %}
-    {% for item in lastmod_list %}
-      {% assign index = item | split: "::" | last | plus: 0 %}
-      {% assign post = site.posts[index] %}
-        <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
-      {% assign sum = sum | plus: 1 %}
-      {% if sum >= MAX_SIZE %}
-        {% break %}
-      {% endif %}
-    {% endfor %}
-      </ul>
-    </div><!-- #access-lastmod -->
-  {% endif %}
-
-    <div id="access-tags">
-      <h3 data-toc-skip>
-        {{- site.data.label.panel.trending_tags -}}
-      </h3>
-      <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-       {% include trending-tags.html %}
-      </div>
-    </div>
-
-  </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">
-      {{- site.data.label.panel.toc -}}
-    </h3>
-    <nav id="toc" data-toggle="toc"></nav>
-  </div>
-  {% endif %}
-
-</div> <!-- #panel-wrapper -->

_includes/post-nav.html

@@ -0,0 +1,30 @@
+<!--
+  Navigation buttons at the bottom of the post.
+-->
+
+<div class="post-navigation d-flex justify-content-between">
+  {% if page.previous.url %}
+  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
+    <p>{{ page.previous.title }}</p>
+  </a>
+  {% else %}
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
+    <p>-</p>
+  </span>
+  {% endif %}
+
+  {% if page.next.url %}
+  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
+    prompt="{{ site.data.locales[lang].post.button.next }}">
+    <p>{{ page.next.title }}</p>
+  </a>
+  {% else %}
+  <span class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[lang].post.button.next }}">
+    <p>-</p>
+  </span>
+  {% endif %}
+
+</div>

_includes/post-paginator.html

@@ -0,0 +1,88 @@
+<!--
+  The paginator for post list on HomgPage.
+-->
+
+<ul class="pagination align-items-center mt-4 mb-0 pl-lg-2">
+  <!-- left arrow -->
+  {% if paginator.previous_page %}
+    {% assign prev_url = paginator.previous_page_path | relative_url %}
+  {% else %}
+    {% assign prev_url = "#" %}
+  {% endif %}
+
+  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
+      <i class="fas fa-angle-left"></i>
+    </a>
+  </li>
+
+  <!-- page numbers -->
+  {% assign left_ellipsis = false %}
+  {% assign right_ellipsis = false %}
+
+  {% for i in (1..paginator.total_pages) %}
+
+    {% assign pre = paginator.page | minus: 1 %}
+    {% assign next = paginator.page | plus: 1 %}
+    {% assign pre_less = pre | minus: 1 %}
+    {% assign next_more = next | plus: 1 %}
+    {% assign show = false %}
+
+    {% if paginator.page == 1 %}
+      {% if i <= 3 or i == paginator.total_pages %}
+        {% assign show = true %}
+      {% endif %}
+    {% elsif paginator.page == paginator.total_pages %}
+      {% if i == 1 or i >= pre_less %}
+        {% assign show = true %}
+      {% endif %}
+    {% else %}
+      {% if i == 1 or i == paginator.total_pages%}
+        {% assign show = true %}
+      {% elsif i >= pre and i <= next %}
+        {% assign show = true %}
+      {% endif %}
+    {% 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>
+      </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 %}
+    {% endif %}
+
+  {% endfor %}
+
+  <!-- mobile pagination -->
+  <li class="page-index align-middle">
+    <span>{{ paginator.page }}</span>
+    <span class="text-muted">/ {{ paginator.total_pages }}</span>
+  </li>
+
+  <!-- right arrow -->
+  {% if paginator.next_page_path %}
+    {% assign next_url = paginator.next_page_path | relative_url %}
+  {% else %}
+    {% assign next_url = "#" %}
+  {% endif %}
+
+  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
+      <i class="fas fa-angle-right"></i>
+    </a>
+  </li>
+
+</ul> <!-- .pagination -->

_includes/post-sharing.html

@@ -0,0 +1,26 @@
+<!--
+ Post sharing snippet
+-->
+
+<div class="share-wrapper">
+  <span class="share-label text-muted mr-1">{{ site.data.locales[lang].post.share }}</span>
+  <span class="share-icons">
+    {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
+    {% assign url = page.url | absolute_url %}
+
+    {% for share in site.data.share.platforms %}
+      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url | escape %}
+        <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
+          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
+          <i class="fa-fw {{ share.icon }}"></i>
+        </a>
+    {% endfor %}
+
+    <i id="copy-link" class="fa-fw fas fa-link small"
+        data-toggle="tooltip" data-placement="top"
+        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        data-title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
+    </i>
+
+  </span>
+</div>

_includes/read-time.html

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

_includes/refactor-content.html

@@ -0,0 +1,277 @@
+<!--
+  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 %}
+
+<!-- images -->
+
+{% assign IMG_TAG = '<img ' %}
+
+{% if _content contains IMG_TAG %}
+  {% assign _img_content = nil %}
+  {% assign _img_snippets = _content | split: IMG_TAG %}
+
+  {% for _img_snippet in _img_snippets %}
+    {% if forloop.first %}
+      {% assign _img_content = _img_snippet %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _src = nil %}
+
+    {% assign _left = _img_snippet | split: '>' | first %}
+    {% assign _right = _img_snippet | remove: _left %}
+
+    {% assign _left = _left | remove: ' /' %}
+    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: ' ' %}
+
+    {% for _attr in _attrs %}
+      {% assign _pair = _attr | split: '=' %}
+      {% if _pair.size < 2 %}
+        {% continue %}
+      {% endif %}
+
+      {% capture _key %}{{ _pair | first }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'width' %}
+          {% assign _width = _value %}
+        {% when 'height' %}
+          {% assign _height = _value %}
+        {% when 'src' %}
+          {% assign _src = _value %}
+      {% endcase %}
+
+      {% if _width and _height and _src %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+
+    {% if _src %}
+      {% unless _src contains '://' %}
+
+        <!-- Add CDN URL -->
+        {% if site.img_cdn %}
+          {% assign _src_prefix = site.img_cdn %}
+        {% else %}
+          {% assign _src_prefix = site.baseurl %}
+        {% endif %}
+
+        <!-- Add image path -->
+        {% if page.img_path %}
+          {% assign _path = page.img_path %}
+          {% assign last_char = _path | slice: -1 %}
+
+          {% unless last_char == '/' %}
+            {% assign _path = _path | append: '/' %}
+          {% endunless %}
+
+          {% assign _src_prefix = _src_prefix | append: _path %}
+        {% endif %}
+
+        {% assign _final_src = _src_prefix | append: _src %}
+        {% assign _left = _left | replace: _src, _final_src %}
+
+      {% endunless %}
+
+      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+
+      {% assign _left = _left | replace: 'src=', 'data-src=' %}
+
+    {% endif %}
+
+    <!-- Add SVG placehoder to prevent layout reflow -->
+
+    {% if _width and _height %}
+      {%- capture _svg -%}
+        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
+      {%- endcapture -%}
+
+      {% assign _left =  _svg | append: ' ' | append: _left %}
+    {% endif %}
+
+    <!-- Bypass the HTML-proofer test -->
+    {% assign _left = _left | append: ' data-proofer-ignore' %}
+
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
+
+  {% endfor %}
+
+  {% assign _content = _img_content %}
+
+{% endif %}
+
+<!-- Add header for code snippets -->
+
+{% if _content contains '<div class="highlight"><code>' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
+  {% assign _new_content = '' %}
+
+  {% for _snippet in _code_spippets %}
+
+    {% if forloop.last %}
+      {% assign _new_content = _new_content | append: _snippet %}
+
+    {% else %}
+
+      {% assign _left = _snippet | split: '><' | last%}
+
+      {% if _left contains 'file="' %}
+        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file-code' %}
+      {% else %}
+        {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
+        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% assign _label_icon = 'fas fa-code small' %}
+      {% endif %}
+
+      {% capture _label %}
+        <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
+      {% endcapture %}
+
+      {% assign _new_content = _new_content | append: _snippet
+          | append: '<div class="code-header">'
+          | append: _label
+          | append: '<button aria-label="copy" data-title-succeed="'
+          | append: site.data.locales[lang].post.button.copy_code.succeed
+          | append: '"><i class="far fa-clipboard"></i></button></div>'
+          | append: '<div class="highlight"><code>'
+      %}
+
+    {% endif %}
+
+  {% endfor %}
+
+  {% assign _content = _new_content %}
+
+{% endif %}
+
+<!-- Create heading anchors -->
+
+{% assign heading_levels = '2,3,4,5' | split: ',' %}
+{% assign _heading_content = _content %}
+
+{% for level in heading_levels %}
+  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
+  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+
+  {% if _heading_content contains mark_start %}
+    {% assign _new_content = nil %}
+    {% assign heading_snippets = _heading_content | split: mark_start %}
+
+    {% for snippet in heading_snippets %}
+      {% if forloop.first %}
+        {% assign _new_content = snippet %}
+        {% continue %}
+      {% endif %}
+
+      {% assign id = snippet | split: '"' | first %}
+      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+
+      {% assign left = snippet | split: mark_end | first %}
+      {% assign right = snippet | slice: left.size, snippet.size %}
+      {% assign left = left | replace: '">', '"><span class="mr-2">' | append: '</span>' %}
+
+      {% assign _new_content = _new_content | append: mark_start
+          | append: left | append: anchor | append: mark_end | append: right
+      %}
+
+    {% endfor %}
+
+    {% assign _heading_content = _new_content %}
+
+  {% endif %}
+{% endfor %}
+
+{% assign _content = _heading_content %}
+
+<!-- Wrap prompt element of blockquote with the <div> tag -->
+
+{% assign blockquote_start = '<blockquote class=' %}
+{% assign blockquote_end = '</blockquote>' %}
+{% assign cls_prefix = 'prompt-' %}
+
+{% if _content contains blockquote_start %}
+
+  {% assign _prompt_content = nil %}
+  {% assign _prompt_snippets = _content | split: blockquote_start %}
+
+  {% for _snippet in _prompt_snippets %}
+
+    {% if forloop.first %}
+      {% assign _prompt_content =  _snippet %}
+      {% continue %}
+    {% endif %}
+
+    {% assign left = _snippet | split: blockquote_end | first %}
+    {% assign right = _snippet | slice: left.size, _snippet.size %}
+
+    {% assign cls_str = left | split: '>' | first %}
+    {% assign cls_array = cls_str | remove: '"' | split: ' ' %}
+    {% assign is_prompt = false %}
+
+    {% for cls in cls_array %}
+      {% if cls contains cls_prefix %}
+        {% assign is_prompt = true %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+
+    {% unless is_prompt %}
+      {% assign _prompt_content = _prompt_content | append: blockquote_start | append: _snippet %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign left = left | slice: cls_str.size, left.size %}
+    {% assign left = cls_str | append: '><div' | append: left | append: '</div>' %}
+
+    {% assign _prompt_content = _prompt_content | append: blockquote_start | append: left | append: right %}
+
+  {% endfor %}
+
+  {% assign _content = _prompt_content %}
+
+{% endif %}
+
+<!-- return -->
+
+{{ _content }}

_includes/related-posts.html

@@ -1,71 +1,106 @@
 <!--
- The related posts of current post.
- Placed in the bottom of every single post.
- © 2019 Cotes Chung
- Published under the MIT License
+ 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.
 -->
 
-{% assign MAX_SIZE = 3 %}
+<!-- The total size of related posts  -->
+{% assign TOTAL_SIZE = 3 %}
+
+<!-- An random integer that bigger than 0  -->
 {% assign TAG_SCORE = 1 %}
+
+<!-- Equals to TAG_SCORE / {max_categories_hierarchy}  -->
 {% assign CATEGORY_SCORE = 0.5 %}
 
+{% assign SEPARATOR = ":" %}
+
 {% assign score_list = "" | split: "" %}
-{% assign post_index = 0 %}
+{% assign last_index = site.posts.size | minus: 1 %}
 
-{% for post in site.posts %}
-  {% if post.url != page.url %}
-    {% assign score = 0 %}
-
-    {% for tag in post.tags %}
-      {% if page.tags contains tag %}
-        {% assign score = score | plus: TAG_SCORE %}
-      {% endif %}
-    {% endfor %}
-
-    {% for category in post.categories %}
-      {% if page.categories contains category %}
-        {% assign score = score | plus: CATEGORY_SCORE %}
-      {% endif %}
-    {% endfor %}
-
-    {% if score > 0 %}
-      {% capture score_item %}{{ score }}:{{ post_index }}{% endcapture %}
-      {% assign score_list = score_list | push: score_item %}
-    {% endif %}
+{% for i in (0..last_index) %}
+  {% assign post = site.posts[i] %}
 
+  {% if post.url == page.url %}
+    {% continue %}
   {% endif %}
-  {% assign post_index = post_index | plus: 1 %}
+
+  {% assign score = 0 %}
+
+  {% for tag in post.tags %}
+    {% if page.tags contains tag %}
+      {% assign score = score | plus: TAG_SCORE %}
+    {% endif %}
+  {% endfor %}
+
+  {% for category in post.categories %}
+    {% if page.categories contains category %}
+      {% assign score = score | plus: CATEGORY_SCORE %}
+    {% endif %}
+  {% endfor %}
+
+  {% if score > 0 %}
+    {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %}
+    {% assign score_list = score_list | push: score_item %}
+  {% endif %}
+
 {% endfor %}
 
+
+{% assign index_list = "" | split: "" %}
+
 {% if score_list.size > 0 %}
   {% assign score_list = score_list | sort | reverse %}
-  {% assign count = 0 %}
-  <div id="related-posts" class="mt-4 mb-4 pb-3">
-    <h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
+  {% for entry in score_list limit: TOTAL_SIZE %}
+    {% assign index = entry | split: SEPARATOR | last %}
+    {% assign index_list = index_list | push: index %}
+  {% endfor %}
+{% endif %}
+
+<!-- Fill with the other newlest posts  -->
+{% assign less = TOTAL_SIZE | minus: index_list.size %}
+
+{% if less > 0 %}
+
+  {% for i in (0..last_index) %}
+    {% assign post = site.posts[i] %}
+    {% if post.url != page.url  %}
+      {% capture cur_index %}{{ i }}{% endcapture %}
+      {% unless index_list contains cur_index %}
+        {% assign index_list = index_list | push: cur_index %}
+        {% assign less = less | minus: 1 %}
+        {% if less <= 0 %}
+          {% break %}
+        {% endif %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
+
+{% endif %}
+
+
+{% if index_list.size > 0 %}
+  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
+    <h3 class="pt-2 mt-1 mb-4 ml-1"
+      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
-    {% for score_item in score_list %}
-      {% assign data = score_item | split: ":" %}
-      {% assign index = data[1] | plus: 0 %}
+    {% for entry in index_list %}
+      {% assign index = entry | plus: 0 %}
       {% assign post = site.posts[index] %}
       <div class="card">
-        <a href="{{ post.url }}">
+        <a href="{{ post.url | relative_url }}">
           <div class="card-body">
-            <span class="timeago small">
-                {{ post.date | date: POST_DATE }}
-                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-            </span>
-            <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
+            {% include timeago.html date=post.date class="small" %}
+            <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">
-              <p>{{ post.content | markdownify | strip_html | truncate: 200 | replace: '&', '&amp;' }}</p>
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
+              </p>
             </div>
           </div>
         </a>
       </div>
-      {% assign count = count | plus: 1 %}
-      {% if count >= MAX_SIZE %}
-        {% break %}
-      {% endif %}
     {% endfor %}
     </div> <!-- .card-deck -->
-  </div>
-{% endif %}
+  </div> <!-- #related-posts -->
+{% endif %}

_includes/search-loader.html

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

_includes/search-results.html

@@ -1,14 +1,11 @@
 <!--
   The Search results
-  © 2017-2019 Cotes Chung
-  MIT License
 -->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-xl-11 post-content">
+  <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted">{{ site.data.label.panel.trending_tags }}</h4>
       {% include trending-tags.html %}
     </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,68 +1,93 @@
 <!--
   The Side Bar
-  © 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 = site.avatar %}
-        {% if avatar | slice: 0 == '/' %}
-          {% assign avatar = avatar | prepend: site.baseurl %}
+<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">
+        {% if site.avatar != empty and site.avatar %}
+          {% capture avatar_url %}
+            {% if site.avatar contains '://' %}
+              {{ site.avatar }}
+            {% elsif site.img_cdn != empty 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'">
         {% endif %}
-        <img src="{{ avatar }}">
       </a>
     </div>
 
-    <div class="profile-text mt-3">
-      <div id="site-title">
-        <a href="{{ site.baseurl }}/">{{- site.title -}}</a>
-      </div>
-      <div id="site-subtitle" class="font-italic">{{ site.description }}</div>
+    <div class="site-title mt-3">
+      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
-  </div>
+    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
 
-  <ul class="nav flex-column">
-  {% assign page_urls = page.url | split: "/" %}
+  </div><!-- .profile-wrapper -->
 
-  {% for item in site.data.label.tabs %}
-    {% assign ref = site.baseurl | append: "/" %}
+  <ul class="w-100">
 
-    {% if item.path %}
-      {% assign ref = ref | append: item.path | append: "/" %}
-      {% if item.url %}
-        {% assign ref = ref | append: item.url | append: "/" %}
-      {% endif %}
-    {% endif %}
+    <!-- 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>{{ site.data.locales[lang].tabs.home | upcase }}</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>
+        {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-    <li class="nav-item d-flex justify-content-center
-      {% if item.url == page_urls.last 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-3 mr-4 unloaded"></i>
-        <span>{{ item.name | upcase }}</span>
+        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: 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 align-items-center">
 
-<div class="contact d-flex justify-content-around mt-4">
-  <a href="https://github.com/{{ site.github.username }}" target="_blank">
-    <i class="fab fa-github-alt"></i>
-  </a>
-  <a href="https://twitter.com/{{ site.twitter.username }}" target="_blank">
-    <i class="fab fa-twitter"></i>
-  </a>
-  {% assign email = site.social.email | split: '@' %}
-  <a href="javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))">
-    <i class="fas fa-envelope"></i>
-  </a>
-  <a href="{{ site.baseurl }}/feed.xml" target="_blank">
-    <i class="fas fa-rss"></i>
-  </a>
-</div>
+    {% unless site.theme_mode %}
+      <button class="mode-toggle btn" aria-label="Switch Mode">
+        <i class="fas fa-adjust"></i>
+      </button>
+
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border"></span>
+      {% endif %}
+    {% endunless %}
+
+    {% 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 url %}
+      <a href="{{ url }}" aria-label="{{ entry.type }}"
+        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+        <i class="{{ entry.icon }}"></i>
+      </a>
+      {% endif %}
+
+    {% endfor %}
+
+  </div> <!-- .sidebar-bottom -->
+
+</div><!-- #sidebar -->

_includes/timeago.html

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

_includes/toc.html

@@ -0,0 +1,16 @@
+{% assign enable_toc = false %}
+{% if site.toc and page.toc %}
+  {% if page.content contains '<h2' or page.content contains '<h3' %}
+    {% assign enable_toc = true %}
+  {% endif %}
+{% endif %}
+
+{% if enable_toc %}
+<!-- BS-toc.js will be loaded at medium priority -->
+<script src="{{ site.data.assets[origin].bootstrap-toc.js }}"></script>
+
+<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
+  <nav id="toc" data-toggle="toc"></nav>
+</div>
+{% endif %}

_includes/topbar.html

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

_includes/trending-tags.html

@@ -1,26 +1,50 @@
-<!--
+{% comment %}
   The trending tags list
-
-  © 2019 Cotes Chung
-  MIT Licensed
--->
+{% endcomment %}
 
 {% assign MAX = 10 %}
 
-{% capture tags_array %}
-  {% for tag in site.tags %}
-    {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
+{% assign size_list = "" | split: "" %}
+{% assign tag_list = "" | split: "" %}
+
+{% 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 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 %}
-{% endcapture %}
+{% endfor %}
 
-{% assign trends = tags_array | split: " " | sort | reverse %}
-{% assign count = 0 %}
+{% if trending_tags.size > 0 %}
+  <div id="access-tags">
+    <div class="panel-heading">{{- site.data.locales[lang].panel.trending_tags -}}</div>
+    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
-{% for trend in trends %}
-  {% assign count = count | plus: 1 %}
-  {% assign tag = trend | split: ":" | last  %}
-  <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase }}/">{{ tag | replace: '-', ' ' }}</a>
-  {% if count >= MAX %}
-    {% break %}
-  {% endif %}
-{% endfor %}
+    {% 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 %}

_includes/update-list.html

@@ -0,0 +1,40 @@
+{% comment %}
+  Get the last 5 posts from lastmod list.
+{% endcomment %}
+
+{% assign MAX_SIZE = 5 %}
+
+{% assign all_list = "" | split: "" %}
+
+{% 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 %}
+
+{% assign update_list = "" | split: "" %}
+
+{% for entry in all_list limit:MAX_SIZE %}
+  {% assign update_list = update_list | push: entry %}
+{% endfor %}
+
+{% if update_list.size > 0 %}
+
+  <div id="access-lastmod" class="post">
+    <div class="panel-heading">{{- site.data.locales[lang].panel.lastmod -}}</div>
+    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+      {% for item in update_list %}
+        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+      <li><a href="{{ url }}">{{ post.title }}</a></li>
+      {% endfor %}
+    </ul>
+  </div> <!-- #access-lastmod -->
+
+{% endif %}

_javascript/commons/back-to-top.js

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

_javascript/commons/locale-helper.js

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

_javascript/commons/mode-toggle.js

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

_javascript/commons/scroll-helper.js

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

_javascript/commons/search-display.js

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

_javascript/commons/sidebar.js

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

_javascript/commons/tooltip-loader.js

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

_javascript/commons/topbar-switcher.js

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

_javascript/commons/topbar-title.js

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

_javascript/copyright

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

_javascript/utils/category-collapse.js

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

_javascript/utils/checkbox.js

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

_javascript/utils/clipboard.js

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

_javascript/utils/img-extra.js

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

_javascript/utils/locale-datetime.js

@@ -0,0 +1,20 @@
+/**
+ * Update month/day to locale datetime
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
+ */
+
+$(function() {
+  dayjs.locale(LocaleHelper.locale());
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
+
+  $(`[${LocaleHelper.attrTimestamp()}]`).each(function () {
+    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
+    const df = LocaleHelper.getDateFormat($(this));
+    const text = date.format(df);
+
+    $(this).text(text);
+    $(this).removeAttr(LocaleHelper.attrTimestamp());
+    $(this).removeAttr(LocaleHelper.attrDateFormat());
+  });
+});

_javascript/utils/pageviews.js

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

_javascript/utils/smooth-scroll.js

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

_javascript/utils/timeago.js

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

_layouts/archives.html

@@ -1,12 +1,10 @@
 ---
-title: Archives
-
+layout: page
 # The Archives of posts.
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
 <div id="archives" class="pl-xl-2">
+
 {% for post in site.posts %}
   {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
   {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
@@ -18,11 +16,12 @@ title: Archives
   {% endif %}
     <li>
       <div>
-        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
-        {% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
-        <span class="date day">{{ this_day }}</span>
-        <span class="date month small text-muted">{{ this_month }}</span>
-        <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+        {% assign ts = post.date | date: '%s' %}
+        <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
+        <span class="date month small text-muted" data-ts="{{ ts }}" data-df="MMM">
+          {{ post.date | date: '%m' }}
+        </span>
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       </div>
     </li>
   {% if forloop.last %}
@@ -35,4 +34,4 @@ title: Archives
     {% assign last_month = "" %}
   {% endif %}
 {% endfor %}
-</div>
+</div>

_layouts/categories.html

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

_layouts/category.html

@@ -1,26 +1,24 @@
 ---
 layout: page
 # The Category layout
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <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] %}
+    {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
-      <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small">{{ post.date | date: POST_DATE }}</span>
+      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
+        {{ post.date | date: '%Y-%m-%d' }}
+      </span>
     </li>
     {% endfor %}
   </ul>
-</div>
+</div>

_layouts/default.html

@@ -1,47 +1,61 @@
 ---
 layout: compress
 # Default layout
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+
+{% include lang.html %}
+
+{% include assets-origin.html %}
+
+{% capture prefer_mode %}
+  {% if site.theme_mode %}
+    data-mode="{{ site.theme_mode }}"
+  {% endif %}
+{% endcapture %}
+
+<html lang="{{ site.lang }}"{{ prefer_mode }}>
 
   {% include head.html %}
 
-  <body data-spy="scroll" data-target="#toc">
-    <div id="sidebar" class="d-flex flex-column">
-      {% include sidebar.html %}
-    </div>
-    <div id="main-wrapper" class="bg-white">
-      {% include topbar.html %}
+  {% unless site.theme_mode %}
+    {% include mode-toggle.html %}
+  {% endunless %}
+
+  <body data-spy="scroll" data-target="#toc" data-topbar-visible="true">
+
+    {% include sidebar.html %}
+
+    {% include topbar.html %}
+
+    <div id="main-wrapper">
       <div id="main">
 
-        {% capture _content %}
-          {{ content }}
-        {% endcapture %}
-
-        {% include fixlinenos.html %}
-        {{ _content }}
+        {{ content }}
 
         {% include footer.html %}
+
       </div>
+
       {% include search-results.html %}
-    </div>
+
+    </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 %}
 
+    {% include js-selector.html %}
+
   </body>
 
-</html>
+</html>

_layouts/home.html

@@ -1,121 +1,100 @@
 ---
 layout: page
 # The Home page layout
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
-{% include date-format.html %}
+{% include lang.html %}
+
+{% assign pinned = site.posts | where: "pin", "true" %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
+
+{% assign posts = "" | split: "" %}
+
+<!-- Get pinned posts -->
+
+{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
+{% assign pinned_num = pinned.size | minus: offset %}
+
+{% if pinned_num > 0 %}
+  {% for i in (offset..pinned.size) limit: pinned_num %}
+    {% assign posts = posts | push: pinned[i] %}
+  {% endfor %}
+{% else %}
+  {% assign pinned_num = 0 %}
+{% endif %}
+
+
+<!-- Get default posts -->
+
+{% assign default_beg = offset | minus: pinned.size %}
+
+{% if default_beg < 0 %}
+  {% assign default_beg = 0 %}
+{% endif %}
+
+{% assign default_num = paginator.posts | size | minus: pinned_num  %}
+{% assign default_end = default_beg | plus: default_num | minus: 1 %}
+
+{% if default_num > 0 %}
+  {% for i in (default_beg..default_end) %}
+    {% assign posts = posts | push: default[i] %}
+  {% endfor %}
+{% endif %}
 
 <div id="post-list">
-  {% for post in paginator.posts %}
+
+{% for post in posts %}
+
   <div class="post-preview">
     <h1>
-      <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
     </h1>
+
     <div class="post-content">
       <p>
-      {{ post.content | strip_html | truncate: 200 | replace: '&', '&amp;' }}
+        {% include no-linenos.html content=post.content %}
+        {{ content | markdownify | strip_html | truncate: 200 | escape }}
       </p>
     </div>
 
-    <div class="post-meta text-muted pt-1">
-      <!-- posted date -->
-      <i class="far fa-clock fa-fw"></i>
-      <span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
-      {{ post.date | date: POST_DATE }}
-      <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-      </span>
-      <!-- page views -->
-      {% if site.google_analytics.pv %}
-      <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 class="post-meta text-muted d-flex">
+
+      <div class="mr-auto">
+        <!-- posted date -->
+        <i class="far fa-calendar fa-fw"></i>
+        {% include timeago.html date=post.date tooltip=true capitalize=true %}
+
+        <!-- time to read -->
+        <i class="far fa-clock fa-fw"></i>
+        {% include read-time.html content=post.content %}
+
+        <!-- categories -->
+        {% if post.categories.size > 0 %}
+          <i class="far fa-folder-open fa-fw"></i>
+          <span>
+          {% for category in post.categories %}
+            {{ category }}
+            {%- unless forloop.last -%},{%- endunless -%}
+          {% endfor %}
+          </span>
+        {% endif %}
+      </div>
+
+      {% if post.pin %}
+      <div class="pin">
+        <i class="fas fa-thumbtack fa-fw"></i>
+        <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+      </div>
       {% endif %}
-    </div>
+
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
-  {% endfor %}
+
+{% endfor %}
+
 </div> <!-- #post-list -->
 
 {% if paginator.total_pages > 0 %}
-<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 }}">
-      <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 %}
-  {% assign right_ellipsis = false %}
-
-  {% for i in (1..paginator.total_pages) %}
-
-    {% assign pre = paginator.page | minus: 1 %}
-    {% assign next = paginator.page | plus: 1 %}
-    {% assign pre_less = pre | minus: 1 %}
-    {% assign next_more = next | plus: 1 %}
-    {% assign show = false %}
-
-    {% if paginator.page == 1 %}
-      {% if i <= 3 or i == paginator.total_pages %}
-        {% assign show = true %}
-      {% endif %}
-    {% elsif paginator.page == paginator.total_pages %}
-      {% if i == 1 or i >= pre_less %}
-        {% assign show = true %}
-      {% endif %}
-    {% else %}
-      {% if i == 1 or i == paginator.total_pages%}
-        {% assign show = true %}
-      {% elsif i >= pre and i <= next %}
-        {% assign show = true %}
-      {% endif %}
-    {% 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>
-        </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 %}
-      {% 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 }}">
-      <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 -->
+  {% include post-paginator.html %}
 {% endif %}

_layouts/page.html

@@ -1,26 +1,66 @@
 ---
 layout: default
-# The page layout
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
-<div class="row bg-white">
-  <div class="col-12 col-lg-11 col-xl-8">
-    <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
-    {% if page.dynamic_title %}
-      <h1 class="dynamic-title">{{ page.title }}</h1>
-      <div class="post-content">
+{% include lang.html %}
+
+{% include assets-origin.html %}
+
+<div class="row">
+
+  <!-- core -->
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
+    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+
+    {% capture _content %}
+      {% if layout.refactor or page.layout == 'page' %}
+        {% include refactor-content.html content=content %}
+      {% else %}
         {{ content }}
+      {% endif %}
+    {% endcapture %}
+
+    {% if page.layout == 'page' or page.collection == 'tabs'%}
+      {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+      <h1 class="dynamic-title">
+        {{ title }}
+      </h1>
+      <div class="post-content">
+        {{ _content }}
       </div>
     {% else %}
-      {{ content }}
+      {{ _content }}
     {% endif %}
 
-    </div> <!-- #page -->
+    </div>
+  </div> <!-- #core-wrapper -->
 
-  </div><!-- .col-12 -->
+  <!-- pannel -->
+  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
 
-  {% include panel.html %}
+    <div class="access">
+      {% include update-list.html %}
+      {% include trending-tags.html %}
+    </div>
+
+    {% for _include in layout.pannel_includes %}
+      {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
+    {% endfor %}
+  </div>
 
 </div>
+
+<!-- tail -->
+{% if layout.tail_includes %}
+<div class="row">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+      {% for _include in layout.tail_includes %}
+        {% assign _include_path = _include | append: '.html' %}
+        {% include {{ _include_path }} %}
+      {% endfor %}
+    </div>
+  </div>
+</div> <!-- .row -->
+{% endif %}

_layouts/post.html

@@ -1,117 +1,144 @@
 ---
-layout: default
-# The posts' layout
-# © 2017-2019 Cotes Chung
-# MIT Licensed
+layout: page
+refactor: true
+pannel_includes:
+  - toc
+tail_includes:
+  - related-posts
+  - post-nav
+  - comments
 ---
 
-<div class="row">
-  {% include date-format.html %}
+{% include lang.html %}
 
-  <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
-      <h1 data-toc-skip>{{ page.title }}</h1>
-      <div class="post-meta text-muted d-flex flex-column">
-        <!-- Published Date and Categoreis -->
-        <div>
-          <span class="timeago" data-toggle="tooltip" title="{{ page.date | date: TOOLTIP_DATE }}">
-            {{ page.date | date: POST_DATE }}
-            <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
-          </span>
-          {% if page.categories.size > 0 %}on{% endif %}
-          {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
-            {%- unless forloop.last -%}, {%- endunless -%}
-          {% endfor %}
-        </div>
+{% if page.image.src %}
+  {% capture bg %}
+    {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+  {% endcapture %}
+  <img src="{{ page.image.src }}" class="preview-img {{ bg | strip }}"
+      alt="{{ page.image.alt | default: "Preview Image" }}"
 
-        <!-- lastmod -->
-        {% if page.seo.date_modified > page.date %}
-        <div>
-          Updated
-          <span class="timeago lastmod" data-toggle="tooltip" title="{{ page.seo.date_modified | date: TOOLTIP_DATE }}">
-            {{ page.seo.date_modified | date: POST_DATE }}
-            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
-          </span>
-        </div>
-        {% endif %}
-
-        <!-- page views -->
-        {% if site.google_analytics.pv %}
-        <div>
-          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span> views
-        </div>
-        {% endif %}
-
-      </div> <!-- .post-meta -->
-
-      <div class="post-content">
-        {% if page.image %}
-        <img src="{{ page.image }}">
-        {% endif %}
-        <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-        {% if content contains '<img src=' %}
-          {{ content | replace: '<img src=', '<img class="lozad" src="/assets/img/commons/loading.png" data-src=' }}
-        {% else %}
-          {{ content }}
-        {% endif %}
-      </div>
-
-      <div class="post-tail text-muted">
-        <!-- Tags -->
-        {% if page.tags.size > 0 %}
-        <div class="mb-4">
-          {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
-            class="post-tag no-text-decoration" >
-            {{- tag -}}
-          </a>
-          {% endfor %}
-          </div>
-        {% endif %}
-      </div><!-- div.post-tail -->
-
-    </div> <!-- .post -->
-  </div> <!-- #post-wrapper -->
-
-  {% include panel.html %}
-
-</div> <!-- .row -->
-
-<div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
-
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
-      {% include related-posts.html %}
-
-      <div class="post-pager d-flex justify-content-between">
-      {% if page.previous.url %}
-        <a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
+      {% if page.image.width %}
+        width="{{ page.image.width }}"
+      {% elsif page.image.w %}
+        width="{{ page.image.w }}"
       {% endif %}
-          <i class="fas fa-angle-left mr-1"></i>
-          OLDER POST
-        </a>
 
-      {% if page.next.url %}
-        <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
-      {% else %}
-        <a href="javascript:;" class="btn btn-outline-primary disabled">
-      {% endif %}
-        NEWER POST
-        <i class="fas fa-angle-right ml-1"></i>
-        </a>
-      </div> <!-- div.post-pager -->
+      {% if page.image.height %}
+        height="{{ page.image.height }}"
+      {% elsif page.image.h %}
+        height="{{ page.image.h }}"
+      {% endif %}>
+{% endif %}
 
-    {% if site.disqus.comments and page.comments %}
-      {% include disqus.html %}
+<h1 data-toc-skip>{{ page.title }}</h1>
+
+<div class="post-meta text-muted">
+
+  <!-- author -->
+  <div>
+    {% capture author_name %}{{ page.author.name | default: site.social.name }}{% endcapture %}
+    {% assign author_link = nil %}
+
+    {% if page.author.link %}
+      {% assign author_link = page.author.link %}
+    {% elsif author_name == site.social.name %}
+      {% assign author_link = site.social.links[0] %}
     {% endif %}
 
-    </div> <!-- .pl-1 pr-1 -->
+    {{ site.data.locales[lang].post.written_by }}
+    <em>
+      {% if author_link %}
+        <a href="{{ author_link }}">{{ author_name }}</a>
+      {% else %}
+        {{ author_name }}
+      {% endif %}
+    </em>
+  </div>
 
-  </div> <!-- #post-extend-wrapper -->
+  <div class="d-flex">
+    <div>
+      <!-- published date -->
+      <span>
+        {{ site.data.locales[lang].post.posted }}
+        {% include timeago.html date=page.date tooltip=true %}
+      </span>
 
-</div> <!-- .row -->
+      <!-- lastmod date -->
+      {% if page.last_modified_at %}
+      <span>
+        {{ site.data.locales[lang].post.updated }}
+        {% include timeago.html date=page.last_modified_at tooltip=true %}
+      </span>
+      {% endif %}
 
-{% include lozad.html %}
+      <!-- read time -->
+      {% include read-time.html content=content prompt=true %}
+
+      <!-- page views -->
+      {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
+      <span>
+        <em id="pv" class="pageviews">
+          <i class="fas fa-spinner fa-spin fa-fw"></i>
+        </em>
+        {{ site.data.locales[lang].post.pageview_measure }}
+      </span>
+      {% endif %}
+    </div>
+
+  </div> <!-- .d-flex -->
+
+</div> <!-- .post-meta -->
+
+<div class="post-content">
+  {{ content }}
+</div>
+
+<div class="post-tail-wrapper text-muted">
+
+  <!-- categories -->
+  {% if page.categories.size > 0 %}
+  <div class="post-meta mb-3">
+    <i class="far fa-folder-open fa-fw mr-1"></i>
+    {% for category in page.categories %}
+      <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
+      {%- unless forloop.last -%}, {%- endunless -%}
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  <!-- tags -->
+  {% if page.tags.size > 0 %}
+  <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 | slugify | url_encode }}/"
+          class="post-tag no-text-decoration" >
+        {{- tag -}}
+      </a>
+      {% endfor %}
+  </div>
+  {% endif %}
+
+  <div class="post-tail-bottom
+    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
+    <div class="license-wrapper">
+
+      {% if site.data.locales[lang].copyright.license.template %}
+
+        {% capture _replacement %}
+        <a href="{{ site.data.locales[lang].copyright.license.link }}">
+          {{ site.data.locales[lang].copyright.license.name }}
+        </a>
+        {% endcapture %}
+
+        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+
+      {% endif %}
+    </div>
+
+    {% include post-sharing.html %}
+
+  </div><!-- .post-tail-bottom -->
+
+</div><!-- div.post-tail-wrapper -->

_layouts/tag.html

@@ -1,25 +1,23 @@
 ---
 layout: page
 # The layout for Tag page
-# © 2017-2019 Cotes Chung
-# MIT Licensed
 ---
 
-{% include date-format.html %}
-
 <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] %}
+    {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
-      <a href="{{ post.url | absolute_url }}">{{ post.title }}</a>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small">{{ post.date | date: POST_DATE }}</span>
+      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
+        {{ post.date | date: '%Y-%m-%d' }}
+      </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

@@ -1,24 +1,33 @@
 ---
-title: "Text and Typography"
+title: Text and Typography
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
+math: true
+mermaid: true
+image:
+  src: /commons/devices-mockup.png
+  width: 800
+  height: 500
 ---
 
-This Jekyll template totally compatible with Markdown syntax. Now, let's take a look for the text and typography in this theme.
+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
 
@@ -34,39 +43,136 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
+## Lists
+
+### Ordered list
+
+1. Firstly
+2. Secondly
+3. Thirdly
+
+### Unordered list
+
+- Chapter
+  - Section
+    - Paragraph
+
+### Task list
+
+- [ ] TODO
+- [x] Completed
+- [ ] Defeat COVID-19
+  - [x] Vaccine production
+  - [ ] Economic recovery
+  - [ ] People smile again
+
+### Description list
+
+Sun
+: the star around which the earth orbits
+
+Moon
+: the natural satellite of the earth, visible by reflected light from the sun
+
 ## Block Quote
 
-> This line to shows the Block Quote.
+> This line shows the _block quote_.
+
+## Prompts
+
+> An example showing the `tip` type prompt.
+{: .prompt-tip }
+
+> An example showing the `info` type prompt.
+{: .prompt-info }
+
+> An example showing the `warning` type prompt.
+{: .prompt-warning }
+
+> An example showing the `danger` type prompt.
+{: .prompt-danger }
 
 ## 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
-
-[http://127.0.0.1:4000](http://127.0.0.1:4000)
+## Links
 
+<http://127.0.0.1:4000>
 
 ## Footnote
 
-Click the hook will locate the footnote[^footnote].
+Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
 
+## Images
 
-## Image
+- Default (with caption)
 
-![Desktop View](/assets/img/sample/mockup.png)
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
+_Full screen width and center alignment_
 
+<br>
+
+- Shadow
+
+![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" style="max-width: 90%" }
+_shadow effect (visible in light mode)_
+
+<br>
+
+- Left aligned
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 70%" .normal}
+
+<br>
+
+- Float to left
+
+  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .left}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+<br>
+
+- Float to right
+
+  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" style="max-width: 200px" .right}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+<br>
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## Mathematics
+
+The mathematics powered by [**MathJax**](https://www.mathjax.org/):
+
+$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
 ## Inline code
 
 This is an example of `Inline Code`.
 
+## Filepath
 
-## Code Snippet
+Here is the `/path/to/the/file.extend`{: .filepath}.
+
+## Code block
 
 ### Common
 
@@ -79,79 +185,30 @@ This is a common code snippet, without syntax highlight and line number.
 #### Console
 
 ```console
-$ date
-Sun Nov  3 15:11:12 CST 2019
-```
-
-
-#### Terminal
-
-```terminal
 $ env |grep SHELL
 SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
 ```
 
-#### Ruby
-
-```ruby
-def sum_eq_n?(arr, n)
-  return true if arr.empty? && n == 0
-  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
-end
-```
-
 #### Shell
 
-```shell
+```bash
 if [ $? -ne 0 ]; then
     echo "The command was not successful.";
     #do the needful / exit
 fi;
 ```
 
-#### Liquid
+### Specific filename
 
-{% raw %}
-```liquid
-{% if product.title contains 'Pack' %}
-  This product's title contains the word Pack.
-{% endif %}
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography"
 ```
-{% endraw %}
-
-#### HTML
-
-```html
-<div class="sidenav">
-  <a href="#contact">Contact</a>
-  <button class="dropdown-btn">Dropdown
-    <i class="fa fa-caret-down"></i>
-  </button>
-  <div class="dropdown-container">
-    <a href="#">Link 1</a>
-    <a href="#">Link 2</a>
-    <a href="#">Link 3</a>
-  </div>
-  <a href="#contact">Search</a>
-</div>
-```
-
-**Horizontal Scrolling**
-
-```html
-<div class="panel-group">
-  <div class="panel panel-default">
-    <div class="panel-heading" id="{{ category_name }}">
-      <i class="far fa-folder"></i>
-      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
-      </a>
-    </div>
-  </div>
-</div>
-```
-
+{: file='_sass/jekyll-theme-chirpy.scss'}
 
 ## Reverse Footnote
 
-[^footnote]: The footnote source.
+[^footnote]: The footnote source
+[^fn-nth-2]: The 2nd footnote source

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

@@ -1,13 +1,19 @@
 ---
-title: "Writing a New Post"
+title: Writing a New Post
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
+render_with_liquid: false
 ---
 
+This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
+
 ## Naming and Path
 
-Create a new file name 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`{: .filepath} and put it in the `_posts`{: .filepath} of the root directory. Please note that the `EXTENSION`{: .filepath} must be one of `md`{: .filepath} and `markdown`{: .filepath}. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this.
 
 ## Front Matter
 
@@ -18,23 +24,43 @@ Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-m
 title: TITLE
 date: YYYY-MM-DD HH:MM:SS +/-TTTT
 categories: [TOP_CATEGORIE, SUB_CATEGORIE]
-tags: [TAG]
+tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
 
-> **Note**: The posts' ***layout*** has been set to `post` by default, so there is no need to add the variable ***layout*** in Front Matter block.
+> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+{: .prompt-tip }
 
-- **The TimeZone of Date**
+### Timezone of Date
 
-    To ensure that the posts' release date matches the city you live in, please modify the value of `timezone` in the file `_config.yml`. 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).
+In order to accurately record the release date of a post, you should not only set up the `timezone` of `_config.yml`{: .filepath} but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
 
-- **Categories and Tags**
+### Categories and Tags
 
-    The `categories` of each post is designed to contain up to two elements, and the number of elements in `tag` can be zero or infinite.
+The `categories` of each post are designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
+
+```yaml
+---
+categories: [Animal, Insect]
+tags: [bee]
+---
+```
+
+### Author Information
+
+The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
+
+```yaml
+---
+author:
+  name: Full Name
+  link: https://example.com
+---
+```
 
 ## 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`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
 
 ```yaml
 ---
@@ -42,10 +68,11 @@ 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:
+The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
+
+If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
 
 ```yaml
 ---
@@ -53,34 +80,249 @@ comments: false
 ---
 ```
 
+## Mathematics
 
-## Code Block
-
-Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
-
-```
-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.
-
-> **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 !
+For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
 
 ```yaml
-# Yaml code snippet
-items:
-    - part_no:   A4786
-      descrip:   Water Bucket (Filled)
-      price:     1.47
-      quantity:  4
+---
+math: true
+---
 ```
 
-#### Liquid codes
+## Mermaid
 
-If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
 
+```yaml
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown languages: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
+
+## Images
+
+### Caption
+
+Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
+
+```markdown
+![img-description](/path/to/image)
+_Image Caption_
+```
+{: .nolineno}
+
+### Size
+
+In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
+```
+{: .nolineno}
+
+Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`height` → `h`, `width` → `w`). The following example has the same effect as the above:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }
+```
+{: .nolineno}
+
+### Position
+
+By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
+
+> Once the position is specified, the image caption should not be added.
+{: .prompt-warning }
+
+- **Normal position**
+
+  Image will be left aligned in below sample:
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .normal }
+  ```
+  {: .nolineno}
+
+- **Float to the left**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .left }
+  ```
+  {: .nolineno}
+
+- **Float to the right**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .right }
+  ```
+  {: .nolineno}
+
+### Shadow
+
+The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: .shadow }
+```
+{: .nolineno}
+
+### CDN URL
+
+If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file:
+
+```yaml
+img_cdn: https://cdn.com
+```
+{: file='_config.yml' .nolineno}
+
+Once `img_cdn` is assigned, the CDN URL will be added to the path of all images (images of site avatar and posts) starting with `/`.
+
+For instance, when using images:
+
+```markdown
+![The flower](/path/to/flower.png)
+```
+{: .nolineno}
+
+The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
+
+```html
+<img src="https://cdn.com/path/to/flower.png" alt="The flower">
+```
+{: .nolineno}
+
+### Image Path
+
+When a post contains many images, it will be a time-consuming task to repeatedly define the path of the images. To solve this, we can define this path in the YAML block of the post:
+
+```yml
+---
+img_path: /img/path/
+---
+```
+{: .nolineno }
+
+And then, the image source of Markdown can write the file name directly:
+
+```md
+![The flower](flower.png)
+```
+{: .nolineno }
+
+The output will be:
+
+```html
+<img src="/img/path/flower.png" alt="The flower">
+```
+{: .nolineno }
+
+### Preview Image
+
+If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height`, and `alt` for the image:
+
+```yaml
+---
+image:
+  src: /path/to/image/file
+  width: 1000   # in pixels
+  height: 400   # in pixels
+  alt: image alternative text
+---
+```
+
+Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
+
+Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `src` only needs the image file name.
+
+## Pinned Posts
+
+You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
+
+```yaml
+---
+pin: true
+---
+```
+
+## Prompts
+
+There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They can be generated by adding the class `prompt-{type}` to the blockquote. For example, define a prompt of type `info` as follows:
+
+```md
+> Example line for prompt.
+{: .prompt-info }
+```
+{: .nolineno }
+
+## Syntax
+
+### Inline Code
+
+```md
+`inline code part`
+```
+{: .nolineno }
+
+### Filepath Hightlight
+
+```md
+`/path/to/a/file.extend`{: .filepath}
+```
+{: .nolineno }
+
+### Code Block
+
+Markdown symbols ```` ``` ```` can easily create a code block as follows:
+
+````md
+```
+This is a plaintext code snippet.
+```
+````
+
+#### Specifying Language
+
+Using ```` ```{language} ```` you will get a code block with syntax highlight:
+
+````markdown
+```yaml
+key: value
+```
+````
+
+> The Jekyll tag `{% highlight %}` is not compatible with this theme.
+{: .prompt-danger }
+
+#### Line Number
+
+By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it:
+
+````markdown
+```shell
+echo 'No more line numbers!'
+```
+{: .nolineno }
+````
+
+#### Specifying the Filename
+
+You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
+
+````markdown
+```shell
+# content
+```
+{: file="path/to/file" }
+````
+
+#### Liquid Codes
+
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
+
+````markdown
 {% raw %}
 ```liquid
 {% if product.title contains 'Pack' %}
@@ -88,7 +330,10 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 {% endif %}
 ```
 {% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
 ## Learn More
-For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
 
+For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).

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

@@ -1,131 +1,188 @@
 ---
 title: Getting Started
+author:
+  name: Cotes Chung
+  link: https://github.com/cotes2020
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
+pin: true
 ---
 
-## Preparation
+## Prerequisites
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In addition, to use the funny script tools, we also need to install [Python](https://www.python.org/downloads/)(version 3.5 or abover) and [ruamel.yaml](https://pypi.org/project/ruamel.yaml/).
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.
 
-Next, [fork](https://github.com/cotes2020/jekyll-theme-chirpy/fork) **Chirpy** and then clone your replicated repository locally.
+## Installation
 
+### Creating a New Site
 
-## Install Jekyll Plugins
+There are two ways to create a new repository for this theme:
 
-Go to root directory of the repository and run the following:
+- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) - Easy to upgrade, isolates irrelevant project files so you can focus on writing.
+- [**Forking on GitHub**](#option-2-forking-on-github) - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
 
-```terminal
-$ bundle install
-```
+#### Option 1. Using the Chirpy Starter
 
-`bundle` will install all the dependent Jekyll Plugins listed in file `Gemfile` automatically.
+Create a new repository from the [**Chirpy Starter**][use-starter] and name it `<GH_USERNAME>.github.io`, where `GH_USERNAME` represents your GitHub username.
 
+#### Option 2. Forking on GitHub
 
-## File Structure
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub and rename it to `<GH_USERNAME>.github.io`. Please note that the default branch code is in development.  If you want the site to be stable, please switch to the [latest tag][latest-tag] and start writing.
 
-The main files and related brief introductions are listed below.
-
-```sh
-jekyll-theme-chirpy/
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-│   └── travis      # CI stuff, remove it
-├── .travis.yml     # remove it, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── build.sh        # script tool
-├── run.sh          # script tool
-├── init.sh         # script tool
-├── pv.sh           
-├── feed.xml
-├── index.html
-├── robots.txt
-├── search.json
-└── sitemap.xml
-```
-
-
-## Configuration
-
-Customize the variables in file `_config.yml` as needed.
-
-
-## Atom Feed
-
-The Atom feed url of your site will be:
-
-```
-<SITE_URL>/feed.xml
-```
-
-The `SITE_URL` was defined by variable `url` in file `_config.yml`.
-
-
-##  Run Locally
-
-You may want to preview the site before publishing, so just run the script tool:
-
-```terminal
-$ bash run.sh
-```
-
->**Note**: 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.
-
-Open a brower 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, ensure the `url` in `_config.yml` has been set to `https://<username>.github.io`.
-
-### Option 1: Built by GitHub Pages
-
-By deploying your site in this way, you can push the source code to GitHub repository directly.
-
-> **Note**: If you want to add any third-party Jekyll plugins or custom scripts to your project, please refer to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename your repository as `<username>.github.io`.
-
-**2**. Commit the changes of your repository, then run the initialization script:
+And then execute:
 
 ```console
-$ bash init.sh
+$ bash tools/init.sh
 ```
 
-It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts.
+> If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+{: .prompt-info }
 
-**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repository `<username>.github.io`.
+The above command will:
 
-**4**. Visit `https://<username>.github.io` and enjoy.
+1. Removes some files or directories from your repository:
+    - `.travis.yml`{: .filepath}
+    - files under `_posts`{: .filepath}
 
+2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}.
 
-### Option 2: Build Locally
+3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}.
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts will not work. If you want to use any another third-party Jekyll plugins, **your have to build locally rather than on GitHub Pages**.
+4. Creates a new commit to save the changes automatically.
 
-**1**. On GitHub website, create a brand new repository with name `<username>.github.io` and then clone it locally.
+### Installing Dependencies
 
-**2**. Build your site by:
+Before running for the first time, go to the root directory of your site, and install dependencies as follows:
 
 ```console
-$ bash build.sh -d /path/to/<username>.github.io/
+$ bundle
 ```
 
-The build results will be stored in the root directory of `<username>.github.io` and don't forget to push the changes of `<username>.github.io` to branch `master` on GitHub.
+## Usage
 
-**3**. Go to GitHub website and enable GitHub Pages service for the new repository `<username>.github.io`.
+### Configuration
 
-**4**. Visit `https://<username>.github.io` and enjoy.
+Update the variables of `_config.yml`{: .filepath} as needed. Some of them are typical options:
+
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
+
+### Customing Stylesheet
+
+If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+
+Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, create a new file `_sass/variables-hook.scss`{: .filepath} and assign new values to the target variable in it.
+
+### Customing Static Assets
+
+Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/assets/cross_origin.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published.
+
+Also, if you'd like to self-host the static assets, please refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme).
+
+### 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:
+
+```console
+$ docker run -it --rm \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    jekyll serve
+```
+
+After a while, the local service will be published at _<http://127.0.0.1:4000>_.
+
+## Deployment
+
+Before the deployment begins, check out the file `_config.yml`{: .filepath} 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 starts with a slash, e.g, `/project-name`.
+
+Now you can choose ONE of the following methods to deploy your Jekyll site.
+
+### Deploy by Using Github Actions
+
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
+
+Quickly check the files needed for GitHub Actions build:
+
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`{: .filepath}. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+
+- Ensure your Jekyll site has file `tools/deploy.sh`{: .filepath}. Otherwise, copy it from here to your Jekyll site.
+
+- Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file:
+
+  ```console
+  $ bundle lock --add-platform x86_64-linux
+  ```
+
+After the above steps, rename your repository to `<GH_USERNAME>.github.io` on GitHub.
+
+Now publish your Jekyll site by:
+
+1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
+
+2. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar, and then in the section **Source** of _GitHub Pages_, select the `/(root)` directory of branch `gh-pages` as the [publishing source][pages-src]. Remember to click <kbd>Save</kbd> before leaving.
+
+    ![gh-pages-sources](/posts/20190809/gh-pages-sources.png){: width="1580" height="250" }
+
+3. Visit your website at the address indicated by GitHub.
+
+### Manually Build and Deploy
+
+On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
+
+Go to the root of the source project, and build your site as follows:
+
+```console
+$ JEKYLL_ENV=production bundle exec jekyll b
+```
+
+Or build the site on Docker:
+
+```console
+$ 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`{: .filepath} of the project's root directory. Now you should upload those files to the target server.
+
+## Upgrading
+
+It depends on how you use the theme:
+
+- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`{: .filepath}), editing the `Gemfile`{: .filepath} and update the version number of the theme gem, for example:
+
+  ```diff
+  - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
+  + gem "jekyll-theme-chirpy", "~> 3.3", ">= 3.3.0"
+  ```
+  {: .nolineno file="Gemfile" }
+
+  And then execute the following command:
+
+  ```console
+  $ bundle update jekyll-theme-chirpy
+  ```
+
+  As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
+
+- If you forked from the source project (there will be `gemspec` in the `Gemfile`{: .filepath} of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
+The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
+
+[starter]: https://github.com/cotes2020/chirpy-starter
+[use-starter]: https://github.com/cotes2020/chirpy-starter/generate
+[workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
+[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
+[pages-src]: https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
+[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags

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

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