Add --config option to the build-tool.

on Docker Desktop CE (Mac) 2.4.0.0
- command `mv` will cause permission preserve error
- command `chown` will get I/O error

.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

@@ -2,21 +2,15 @@
 
 I want to thank you for sparing a time to improve this project! Here are some guidelines for contributing：
 
-## Bug Reporting
+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. 
 
-If you found a bug, please ensure it doesn't appear in other existing [issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues). After that, [create a new issues](https://github.com/cotes2020/jekyll-theme-chirpy/issues/new/choose) with template `Bug Report` and follow it's illustration to describe the situation.
+Generally, contribute to the project by:
-
-
-## Code Optimization
-
-If you are willing to improve some of the existing code, such as performance optimization, code simplification, or even correct spelling errors of variable names, please submit a new PR to help us.
-
-
-## Feature Request
-
-Basically, to ensure that the blog design is not confused, we do not accept suggestions for design changes, such as colors scheme, fonts, typography, etc. As long as your request is not a design issue, it is recommended to first submit a `Feature Request` issue to discuss whether your idea fits the project. Once the discussion is complete and the request is approved, fork this project, complete the development of new features, and submit a `Pull Request`. What's more, the PR should be merged into `master` branch without conflict.
 
+1. Fork this project on GitHub and clone it locally.
+2. Create a new branch from `master` and give it a descriptive name (e.g., `my-new-feature`, `fix-a-bug`).
+3. After completing the development, commit and push to remote.
+4. Submit a new pull request.
 
 ---
 
-:tada:Your volunteering will make the open source world more beautiful, thanks again!:tada:
+:tada: Your volunteering will make the open source world more beautiful, thanks again! :tada:

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,36 +4,50 @@ about: Create a report to help us improve
 labels: bug
 ---
 
-<!-- Please make sure you have read the README or Wiki, and your question does not appear in other existing issues (including closed ones). Thanks for your cooperation! Now let's start it. -->
+<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. If you are new to Jekyll or Github Pages, you may be misreporting bugs. When you are not sure if this is a bug, choose to the `Question` type instead. -->
 
-**Describe the bug**
+
+## Checklist
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
+- [ ] There are no similar reports on existing issues (including closed ones).
+- [ ] I found the bug on the latest code of `master` branch.
+
+## Describe the bug
 <!-- A clear and concise description of what the bug is. -->
 
-**To Reproduce**
+### To Reproduce
-<!--
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
--->
 
-**Expected behavior**
+### Expected behavior
 <!-- A clear and concise description of what you expected to happen. -->
 
-**Screenshots**
+### Screenshots
 <!-- If applicable, add screenshots to help explain your problem. -->
 
-**Desktop (please complete the following information):**
+### Software
- - OS: [e.g. iOS]
+<!-- Please complete the following information -->
- - Browser: [e.g. chrome, safari]
+- Ruby version: [by running: `ruby -v`]
- - Version: [e.g. 22]
+- Gem version: [by running: `gem -v`]
+- Bundler version: [by running: `bundle -v`]
+- Jekyll version: [by running: `bundle list | grep " jekyll "`]
 
-**Smartphone (please complete the following information):**
+### Desktop
- - Device: [e.g. iPhone6]
+<!-- Please complete the following information -->
- - OS: [e.g. iOS8.1]
+- OS: [e.g. macOS 10.15.6]
- - Browser: [e.g. stock browser, safari]
+- Browser: [e.g. Chrome 85.0.4183.83 (Official Build) (64-bit)]
- - Version: [e.g. 22]
 
-**Additional context**
+### Smartphone
+<!-- please complete the following information -->
+- Device: [e.g. iPhone 6]
+- OS: [e.g. iOS 13.6.1]
+- Browser: [e.g. Chrome 22]
+
+### Additional context
 <!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,18 +4,27 @@ about: Suggest an idea for this project
 labels: enhancement
 ---
 
-<!-- Please make sure your request does not appear in other existing issues (including closed ones). Thanks for your cooperation. Now, I can't wait to listen your idea! -->
+<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
+
+## Checklist
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
+- [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
+- [ ] There are no similar request on existing issues (including closed ones).
+- [ ] I have read the [project progress](https://github.com/cotes2020/jekyll-theme-chirpy/projects) and know the current progress of the project.
+- [ ] I was in the `master` branch of the latest code.
 
 
-**Is your feature request related to a problem? Please describe.**
+## 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**
+
+## Describe the solution you'd like
 <!-- A clear and concise description of what you want to happen. -->
 
-**Describe alternatives you've considered**
+
+## Describe alternatives you've considered
 <!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 
-**Additional context**
+## Additional context
 <!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -4,54 +4,17 @@ about: Ask what ever you want
 labels: question
 ---
 
-<!-- Please make sure you have read the README or Wiki, and your question does not appear in other existing issues (including closed ones). Thanks for your cooperation. Now, uncomment the relevant part to describe the situation. -->
+<!-- Note: Please follow the template to open a new issue, otherwise your question will probably be ignored. -->
 
-<!-- 
+## Checklist
-**Don't understand what the README or Wiki says.**
-Point out the parts that are hard for you to understand. 
--->
 
-<!-- 
+<!-- Please complete the following list of tasks, and then check it by change the "[ ]" to "[x]" -->
-**Want to complain about my bad days.**
-Don't hesitate to share your story!
--->
 
-<!--
+- [ ] I have read the [tutorials](https://chirpy.cotes.info/categories/tutorial/) and know the correct effect of the functional design.
-**Just wanted to say hi to the author.**
+- [ ] There are no similar question on existing issues (including closed ones).
-Hi, I'm ..., have a nice day ! 
+- [ ] I searched the Internet for related problems, but still couldn't solve it.
--->
+- [ ] My question is based on the latest code of `master` branch.
 
 
-<!-- 
+## Description
-**Not sure if it's a bug**
+<!-- Please describe your question. -->
-Please try to describe the problem
-
-**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.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser: [e.g. stock browser, safari]
- - Version: [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here. 
--->

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,44 @@
+## 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/build.sh && bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] I have tested this feature in the browser
+
+### Test Configuration
+
+- Browerser type & version:
+- Operating system:
+- Bundler version:
+- Ruby version:
+- Jekyll version:
+
+### Checklist
+<!-- Select checkboxes by change the "[ ]" to "[x]" -->
+- [ ] My code follows the [Google style guidelines](https://google.github.io/styleguide/)
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] Any dependent changes have been merged and published in downstream modules

.github/workflows/ci.yml

@@ -1,13 +1,13 @@
-name: build
+name: 'Continuous Integration'
 on:
   push:
     branches-ignore:
-      - stable
+      - 'production'
     tags-ignore:
       - '*'
     paths-ignore:
       - '.github/**'
-      - '!.github/workflows/**'
+      - '!.github/workflows/ci.yml'
       - '.travis.yml'
       - '.gitignore'
       - 'docs/**'
@@ -15,7 +15,7 @@ on:
       - 'LICENSE'
   pull_request:
     paths:
-      - "**"
+      - '**'
 
 jobs:
   ci:
@@ -29,12 +29,24 @@ jobs:
         with:
           ruby-version: '2.6.x'
 
-      - uses: actions/setup-python@v1
+      - name: Install tools (for Ubuntu)
-        with:
+        if: matrix.os == 'ubuntu-latest'
-          python-version: '3.7.x'
+        run: |
+          sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CC86BB64
+          sudo add-apt-repository ppa:rmescandon/yq
+          sudo apt update
+          sudo apt install yq -y
+
+      - name: Install tools (for macOS)
+        if: matrix.os == 'macos-latest'
+        run: |
+          brew install coreutils
+          brew install yq
 
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
 
       - name: Bundle Caching
         id: bundle-cache
@@ -45,24 +57,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - id: get-pip-cache-path
-        run: |
-          echo "::set-output name=path::`pip show pip | grep "Location" | awk '{print $2}'`"
-
-      - name: Pip caching
-        id: pip-cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.get-pip-cache-path.outputs.path }}
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-
-      - name: Install gnu-coreutils for macOS
-        if: runner.os == 'macOS'
-        run: |
-          brew install coreutils
-
       - name: Bundle config
         run: |
           bundle config path vendor/bundle
@@ -77,11 +71,6 @@ jobs:
         run: |
           bundle install --local
 
-      - name: Pip installing
-        if: steps.pip-cache.outputs.cache-hit != 'true'
-        run: |
-          pip install -r _scripts/py/requirements.txt
-
       - name: Build Site
         run: |
           bash tools/build.sh

.github/workflows/issues-cleaner.yml

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

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

@@ -0,0 +1,81 @@
+name: 'Automatic build'
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+
+jobs:
+  continuous-delivery:
+
+    runs-on: ubuntu-latest
+
+    env:
+      GEMS_PATH: /tmp/bundle
+
+    steps:
+      - uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.6.x
+
+      - name: Install tools
+        run: |
+          sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CC86BB64
+          sudo add-apt-repository ppa:rmescandon/yq
+          sudo apt update
+          sudo apt install yq -y
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Bundle Caching
+        id: bundle-cache
+        uses: actions/cache@v1
+        with:
+          path: ${{ env.GEMS_PATH }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          restore-keys: |
+            ${{ runner.os }}-gems-
+
+      - name: Bundle config
+        run: |
+          bundle config path ${{ env.GEMS_PATH }}
+
+      - name: Bundle Install
+        if: steps.bundle-cache.outputs.cache-hit != 'true'
+        run: |
+          bundle install
+
+      - name: Bundle Install locally
+        if: steps.bundle-cache.outputs.cache-hit == 'true'
+        run: |
+          bundle install --local
+
+      - name: Check baseurl
+        run: |
+          baseurl="$(grep '^baseurl:' _config.yml | yq r - baseurl)"
+          if [[ -n $baseurl ]]; then
+            echo "SPEC_TEST=_site_no_baseurl" >> $GITHUB_ENV
+          fi
+
+      - name: Build Site
+        run: |
+          bash tools/build.sh
+
+          if [[ -n $SPEC_TEST ]]; then
+            # Bypass the defects of htmlproofer
+            bash tools/build.sh -b "" -d "$SPEC_TEST"
+          fi          
+
+      - name: Test Site
+        run: |
+          bash tools/test.sh "$SPEC_TEST"
+
+      - name: Deploy
+        run: |
+          bash tools/deploy.sh

.travis.yml

@@ -5,16 +5,18 @@ language: ruby
 rvm: 2.6.5
 
 before_install:
-  - pyenv global 3.7.6
+  - bundle config path 'vendor/bundle'
 
 install:
-  - pip install -r _scripts/py/requirements.txt
+  - bundle install --quiet
-  - bundle install --path vendor/bundle --quiet
 
 addons:
   apt:
+    sources:
+      - sourceline: "ppa:rmescandon/yq"
     packages:
-    - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+      - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+      - yq
 
 script:
   - >-
@@ -24,7 +26,7 @@ script:
   - bash _cibuild.sh
 
 branches:
-  only: stable
+  only: production
 
 git:
   depth: false # for posts lastmod
@@ -41,4 +43,4 @@ notifications:
 
 env:
   global:
-    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
+    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

Gemfile

@@ -12,6 +12,3 @@ end
 group :test do
   gem "html-proofer"
 end
-
-# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]

README.md

@@ -1,260 +1,203 @@
-# Jekyll Theme Chirpy
+# Chirpy
 
-[![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=event%3Apush)
+🌏 English • [简体中文](docs/README_zh-CN.md)
+
+[![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
 [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
 [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-Language: English | [简体中文](docs/README_zh-CN.md)
+A minimal, sidebar, responsive web design Jekyll theme, focusing on text presentation, aim to help you easily record and share your knowledge. [Live Demo »](https://chirpy.cotes.info)
 
-A minimal, portfolio, sidebar, bootstrap Jekyll theme with responsive web design and focuses on text exhibition. It will help you easily record and share your knowledge. 
+[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
-
-**Features**
-
-* Auto Dark Mode
-* Posts' Last Modified Date
-* Table of Contents
-* Automatically Recommend Related Posts
-* Syntax highlighting
-* Two Level Categories
-* Search
-* Atom Feeds
-* Disqus Comments
-* Google Analytics
-* GA Pageviews (Advanced)
-* SEO Tag
-* Performance Optimization
-
-[![devices-mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
 ## Table of Contents
 
-* [Installing](#installing)
+- [Features](#features)
-* [Usage](#usage)
+- [Installation](#installation)
-* [Contributing](#contributing)
+- [Usage](#usage)
-* [Credits](#credits)
+- [Contributing](#contributing)
-* [Support](#support)
+- [Credits](#credits)
-* [License](#license)
+- [Support](#support)
+- [License](#license)
 
+## Features
 
-## Installing
+- Pinned Posts
+- Configurable theme mode
+- Double-level Categories
+- Last modified date for posts
+- Table of Contents
+- Automatically recommend related posts
+- Syntax highlighting
+- Mathematical expressions
+- Search
+- Atom Feeds
+- Disqus Comments
+- Google Analytics
+- GA Pageviews reporting (Advanced)
+- SEO and Performance Optimization
 
-### Prerequisites
+## Installation
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (`Ruby `, `RubyGems` and `Bundler`). In order to use the script tools to save time, 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/).
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, rename the repository to `USERNAME.github.io` (where `USERNAME` is your GitHub username), and then open terminal and clone the fork to local by:
 
-In addition, if your machine is running Debian or macOS, make sure the [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, get it by:
+```terminal
-
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
-* Debian
-
-```console
-$ sudo apt-get install coreutils
 ```
 
-* macOS
+### Setting up the local envrionment
 
-```console
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
-$ brew install coreutils
-```
 
-
+Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
-### Jekyll Plugins
-
-[Fork **Chirpy** from GitHub](https://github.com/cotes2020/jekyll-theme-chirpy/fork), then clone your forked repo to local:
-
-```console
-$ git clone git@github.com:USER/jekyll-theme-chirpy.git
-```
-
-replace the `USER` above to your GitHub username.
-
-The first time you run or build the project on your machine, perform the installation of Jekyll plugins. Go to the root of repo and run:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will automatically install all the dependent Jekyll Plugins that listed in the `Gemfile`.
+`bundle` will automatically install all the dependencies specified by `Gemfile`.
 
+In order to generate some extra files (_categories_, _tags_ and _last modified list_), we need to use some tool scripts. And they require dependency package [yq](https://github.com/mikefarah/yq#install) to be installed. What's more, if your machine is running Debian or macOS, you also need to install [GNU coreutils](https://www.gnu.org/software/coreutils/).
+
+- on Debian:
+
+  ```console
+  $ sudo apt-get install coreutils
+  ```
+
+- on macOS:
+
+  ```console
+  $ brew install coreutils
+  ```
+
+### Setting up Docker environment (optional)
+
+If you're a loyal fan of [**Docker**](https://www.docker.com/) or just too lazy to install the packages mentioned in [_Setting up the local envrionment_](#setting-up-the-local-envrionment), please make sure you have **Docker Engine** installed and running, and then get Docker image `jekyll/jekyll` from Docker Hub by the following command:
+
+```console
+$ docker pull jekyll/jekyll:latest
+```
 
 ## Usage
 
+Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
 
-### Directory Structure
+### Initialization
 
-The main files and related brief introductions are listed below.
+Go to the root directory of the project and start initialization:
 
-```sh
+```console
-jekyll-theme-chirpy/
+$ bash tools/init.sh
-├── _data
-├── _includes      
-├── _layouts
-├── _posts          # posts stay here
-├── _scripts
-├── .travis.yml     # remove it
-├── .github         # remove this, too
-├── assets      
-├── tabs
-│   └── about.md    # the ABOUT page
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── docs
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
 ```
 
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
-As mentioned above, some files or directories should be removed from your repo:
+What it does is:
 
-- .travis.yml
+1. Remove some files or directories from your repository:
-- .github
 
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
 
-### Customization
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. 
 
-Basically, go to `_config.yml` and customize the variables as needed, some of them are typical options:
+3. Automatically create a commit to save the changes.
 
-* `url`
+### Configuration
-	
-	Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
 
+Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
 
-* `avatar`
+- `url`
-    
+- `avatar`
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as samll as possible(may be *<https://tinypng.com/>* will help).
+- `timezone`
+- `theme_mode`
 
-* `timezone`
+### Run Locally
 
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
+You may want to preview the site contents before publishing, so just run it by:
-
-* `theme_mode`
-  
-	There are three options for the theme color scheme:
-	
-	- **dual** 	- The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
-
-	- **dark**	- Always show dark mode.
-	- **light**	- Always show light mode.
-
-
-###  Run Locally
-
-You may want to preview the site before publishing, so just run the script tool:
 
 ```terminal
 $ bash tools/run.sh
 ```
 
-Open a modern brower and visit at <http://localhost:4000>.
+Then open a browser and visit to <http://localhost:4000>.
 
-Few days later, you may find that the file modification(e.g. edits to a post) does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine. Type `-h` for more information.
+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
+### Run on Docker
 
-Before the deployment begins, ensure the `url` in file `_config.yml` has been set to `https://<username>.github.io`(or the custom domain, if you have. e.g. `https://yourdomain.com`). What's more, if you prefer to the [Project site](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites), change `baseurl` of file `_config.yml` to your project name, starting with a slash. e.g. `/project`.
+Run the site on Docker with the following command:
-
-#### Option 1: Built by GitHub Pages
-
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
-
-> **Note**: If you want to use any third-party Jekyll plugins that not in [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename the repository to:
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
-
-**2**. Commit the changes of the repo first, then run the initialization script:
 
 ```terminal
-$ bash tools/init.sh
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    bash tools/run.sh --docker
 ```
 
->**Note**: The *Recent Update* requires the posts' latest git-log date, so make sure the changes in `_posts` have been committed before running this command.
+Please note that on Docker containers, you'll lose the real-time refresh feature.
 
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit. Its output is similar to the following log:
+### Deployment
 
-```terminal
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[Automation] Updated the Categories, Tags, Lastmod for post(s).
- 11 files changed, 46 insertions(+), 3 deletions(-)
- ...
-Updated the Categories, Tags, Lastmod for post(s).
-```
 
-**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repo.
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
 
-**4**. Check it out:
+#### Deploy on GitHub Pages
 
-|Site Type | Site URL |
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
 
+1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
 
-#### Option 2: Build Locally
+2. Browse to your repository on GitHub and choose the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
+    ![gh-pages-sources](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any another plugins that not in the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
+3. Visit your website at the address indicated by GitHub.
 
-**1**. Browse to GitHub website, create a brand new repo named: 
+#### Deploy on Other Platforms
 
-|Site Type | Repo's Name|
+On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
 
-and clone it.
+Go to the root of the source project, build your site by:
-
-**2**. In the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ bash tools/build.sh
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+> **Note**: The output path can be specified with the option `-d`.
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
+Or, build the site with Docker by:
 
-**4**. Visit at:
+```terminal
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    bash tools/build.sh --docker
+```
 
-|Site Type | Site URL |
+Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-and enjoy!
 
 ### Documentation
 
-For more details and the better reading experience, please check out the [tutorial in demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
+For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki).
 
 ## Contributing
 
-The old saying: "Two heads are better than one. Five heads are better than two." So, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
+The old saying, "Two heads are better than one." Consequently, welcome to report bugs, improve code quality or submit a new feature. For more information, see [contributing guidelines](.github/CONTRIBUTING.md).
-
 
 ## Credits
 
-This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools(their copyright information can be found in the relevant files).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
-
-:tada:Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
 
 ## Support
 
-If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart:Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
+If you enjoy this theme or find it helpful, please consider becoming my sponsor, I'd really appreciate it! Click the button <kbd>:heart: Sponsor</kbd> at the top of the [Home Page](https://github.com/cotes2020/jekyll-theme-chirpy) and choose a link that suits you to donate; this will encourage and help me better maintain the project.
-
 
 ## License
 
-This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.
+This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.

_config.yml

@@ -45,18 +45,18 @@ google_site_verification: google_meta_tag_verification # change to your verifica
 
 #--------------------------
 
-# if your site type is Project Pages site, change below value to '/projectname'
+
+# Only if your site type is GitHub Project sites and doesn't have a custom domain,
+# change below value to '/projectname'.
 baseurl: ''
 
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
 timezone: Asia/Shanghai
 
 google_analytics:
-  # Fill with your Google Analytics ID
+  id: ''          # Fill with your Google Analytics ID
-  id: ''
-  # The Google Analytics pageviews switch.
-
   pv:
+    # The Google Analytics pageviews switch.
     # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
     enabled: false
     # the next options only valid when `google_analytics.pv` is enabled.
@@ -101,6 +101,8 @@ kramdown:
       line_numbers: true
       start_line: 1
 
+# DO NOT change this unless you're a Pro user on Jekyll and Web development,
+# or you think you're smart enough to change other relevant URLs within this template.
 permalink: /posts/:title/
 
 defaults:
@@ -158,11 +160,6 @@ defaults:
         -
           label: Home
           url: /
-  -
-    scope:
-      path: assets/data
-    values:
-      layout: compress
 
 
 sass:
@@ -171,21 +168,21 @@ sass:
 
 compress_html:
   clippings: all
-  comments: ["<!-- ", " -->"]
+  comments: all
-  endings: [html, head, body, dt, dd, rt, rp,
+  endings: all
-            optgroup, option, colgroup, caption,
-            thead, tbody, tfoot, tr, td, th]
   profile: false
   blanklines: false
   ignore:
     envs: []
 
 exclude:
-  - vendor        # Avoid Jekyll mistakenly read the vender directory on Travis-CI's VM .
+  - vendor        # Avoid Jekyll mistakenly read the vendor directory on Travis-CI's VM .
   - Gemfile.lock
   - Gemfile
   - tools
   - docs
+  - README.md
+  - LICENSE
 
 sitemap_exclude:  # Sitemap will exclude the following items.
   fuzzy:

_data/contact.yml

@@ -0,0 +1,31 @@
+#  The contact options.
+#  v2.3
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+-
+  type: github
+  icon: 'fab fa-github-alt'
+-
+  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
+# -
+#   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
+#   url:  ''                  # Fill with your mastodon account page
+# -
+#   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
+#   url:  ''                  # Fill with your Linkedin homepage
+# -
+#   icon: 'fab fa-stack-overflow'
+#   url:  ''                  # Fill with your stackoverflow homepage

_data/date_format.yml

@@ -6,4 +6,6 @@
 
 
 tooltip: "%a, %b %e, %Y, %l:%M %p %z"
-post: "%b %e, %Y"
+post:
+  long: "%b %e, %Y"
+  short: "%b %e"

_data/rights.yml

@@ -7,15 +7,11 @@
 
 
 license:
-  link: "https://creativecommons.org/licenses/by/4.0/"
-  prompt: This post is licensed under
   name: CC BY 4.0
-  icons:
+  link: "https://creativecommons.org/licenses/by/4.0/"
-    - "fab fa-creative-commons"
-    - "fab fa-creative-commons-by"
 
 brief: Some rights reserved.
 
 verbose: >-
-  The blog posts on this site are licensed
+  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.
+  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.

_data/share.yml

@@ -24,6 +24,11 @@ platforms:
 
   # 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/css-selector.html

@@ -0,0 +1,54 @@
+<!--
+  CSS selector for site.
+  Chirpy v2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT Licensed
+-->
+
+{% if page.layout == 'home' %}
+  <link rel="preload" href="{{ '/assets/css/home.css' | relative_url }}" as="style">
+  <link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
+
+{% elsif page.layout == 'page' %}
+
+  {% if page.type == 'categories' %}
+
+    <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
+
+  {% elsif page.type == 'tags' %}
+
+    <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
+
+  {% elsif page.type == 'archives' %}
+
+    <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
+
+  {% else %}
+
+    <link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
+    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
+
+  {% endif %}
+
+{% elsif page.layout == 'category' or page.layout == 'tag' %}
+
+  <link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
+  <link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
+
+{% elsif page.layout == 'post' %}
+
+  <link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
+
+  {% if site.toc and page.toc %}
+
+    <link rel="preload" as="style" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}" />
+
+  {% endif %}
+
+{% endif %}

_includes/disqus.html

@@ -7,11 +7,13 @@
   MIT License
 -->
 
-<div id="disqus" class="pt-2 pb-4">
+<div id="disqus" class="pt-2 pb-2">
-  <p class="font-italic text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+  <p class="font-italic text-center 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 src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>
 <script>
   var options = {
     scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',

_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

@@ -12,9 +12,9 @@
       <p class="mb-0">
         © {{ 'now' | date: "%Y" }}
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.right.brief %}
+        {% if site.data.rights.brief %}
         <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.right.verbose }}">{{ site.data.right.brief }}</span>
+          title="{{ site.data.rights.verbose }}">{{ site.data.rights.brief }}</span>
         {% endif %}
       </p>
     </div>
@@ -23,8 +23,9 @@
       <p class="mb-0">
         Powered by
         <a href="https://jekyllrb.com" target="_blank">Jekyll</a>
-        with theme
+        with
-        <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>.
+        <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>
+        theme.
       </p>
     </div>
 

_includes/google-analytics.html

@@ -5,12 +5,12 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  window.dataLayer = window.dataLayer || [];
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  function gtag(){dataLayer.push(arguments);}
-  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');
+  gtag('js', new Date());
-
+  gtag('config', '{{ site.google_analytics.id }}');
-  ga('create', '{{ site.google_analytics.id }}', 'auto');
-  ga('send', 'pageview');
 </script>

_includes/head.html

@@ -11,22 +11,21 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <title>
-  {%- if page.layout == "home" -%}
+  {%- unless page.layout == "home" -%}
-    {{- site.title -}}
+    {{ page.title | append: " | "}}
-  {%- else -%}
+  {%- endunless -%}
-    {{ page.title }} | {{ site.title }}
+    {{ site.title }}
-  {%- endif -%}
   </title>
 
   {% seo title=false %}
 
   {% include favicons.html %}
 
-  <!-- google fonts -->
+  <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
   <link rel="dns-prefetch" href="https://fonts.gstatic.com">
 
-  <!-- ga -->
+  <!-- GA -->
   {% if jekyll.environment == 'production' %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
@@ -40,114 +39,37 @@
     {% endif %}
   {% endif %}
 
-  <!-- jsdelivr CDN -->
+  <!-- jsDelivr CDN -->
   <link rel="preconnect" href="cdn.jsdelivr.net">
   <link rel="dns-prefetch" href="cdn.jsdelivr.net">
 
+  <!-- Bootstrap -->
   <link rel="preload" as="style"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin>
 
-  <link rel="preload" as="style"
-    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="preload" as="style" href="{{ site.baseurl }}/assets/css/main.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="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="{{ site.baseurl }}/assets/css/main.css">
+  {% include css-selector.html %}
 
-  {% if page.layout == 'home' %}
+  <!-- JavaScripts -->
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/home.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/home.css">
-  {% endif %}
 
-  {% if page.title == 'Categories' and page.layout == 'page' %}
+  <link rel="preload" as="script" href="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/categories.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
-  {% endif %}
-
-  {% if page.title == 'Tags' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/tags.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
-  {% endif %}
-
-  {% if page.layout == 'category' or page.layout == 'tag' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/category-tag.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
-  {% endif %}
-
-  {% if page.title == 'Archives' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/archives.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
-  {% endif %}
-
-  {% if page.title == 'About' and page.layout == 'page' %}
-    <link rel="preload" href="{{ site.baseurl }}/assets/css/syntax.css" as="style">
-    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
-  {% endif %}
-
-  <!-- jquery -->
-  <link rel="preload" as="script"
-    href="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
 
-  <!-- popper -->
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1"
-  <link rel="preload" as="script"
-    href="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
-    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin>
-
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
-  <script>
+  <script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" async></script>
-    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"
+  {% include js-selector.html %}
-    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous"></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.enabled %}
-      <script src="{{ site.baseurl }}/assets/data/pv-data.json"></script>
-      <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="preload" as="style" href="{{ site.baseurl }}/assets/css/post.css">
-    <link rel="preload" as="style" href="{{ site.baseurl }}/assets/css/syntax.css">
-
-    <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="preload" as="style" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css">
-      <link rel="preload" as="script" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js">
-
-      <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 %}
-
-  <script src="{{ site.baseurl }}/assets/js/dist/tooltip-loader.min.js" async></script>
 
 </head>

_includes/js-selector.html

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

_includes/lozad.html

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

_includes/mode-toggle.html

@@ -7,8 +7,8 @@
   MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" light-mode-invisible></i>
+<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
-<i class="mode-toggle fas fa-moon" dark-mode-invisible></i>
+<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
 
 <script type="text/javascript">
 

_includes/no-linenos.html

@@ -0,0 +1,14 @@
+{% comment %}
+  Remove the line number of the code snippet.
+  v2.2
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  Published under the MIT License
+{% endcomment %}
+
+{% assign content = include.content %}
+
+{% 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

@@ -6,58 +6,61 @@
   MIT License
 -->
 
-<div id="panel-wrapper" class="col-xl-3 pl-2 topbar-down">
+<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
-  {% assign lastmod_list = "" | split: "" %}
-  {% assign index = 0 %}
 
-  {% for post in site.posts %}
+  {% if site.data.updates %}
-    {% if post.seo.date_modified > post.date and post.seo.date_modified != nil %}
+
-      {% capture item %}
+    {% include update-list.html %}
-        {{ post.seo.date_modified }}::{{ index }}
+
-      {% endcapture %}
+    {% if update_list.size > 0 %}
-      {% 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">
       <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 %}
+      {% for item in update_list %}
-    {% assign lastmod_list = lastmod_list | sort | reverse %}
+        {% assign post_url = item | split: "::" | last | url_encode | prepend: "/posts/" | append: "/" %}
-    {% for item in lastmod_list %}
+        {% assign post = site.posts | where: "url", post_url | first %}
-      {% assign index = item | split: "::" | last | plus: 0 %}
+
-      {% assign post = site.posts[index] %}
+        {% if post %}
-        <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
+          {% assign url = post.url | relative_url %}
-      {% assign sum = sum | plus: 1 %}
+          <li><a href="{{ url }}">{{ post.title }}</a></li>
-      {% if sum >= MAX_SIZE %}
+        {% endif %}
-        {% break %}
+
-      {% endif %}
+      {% endfor %}
-    {% endfor %}
+
       </ul>
     </div><!-- #access-lastmod -->
-  {% endif %}
 
+    {% endif %}
+
+  {% endif %} <!-- site.data.updates -->
+
+  {% include trending-tags.html %}
+
+  {% if trending_tags.size > 0 %}
     <div id="access-tags">
       <h3 data-toc-skip>
         {{- site.data.label.panel.trending_tags -}}
       </h3>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-       {% include trending-tags.html %}
+
+      {% for tag in trending_tags %}
+        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+      {% endfor %}
       </div>
     </div>
-
+  {% endif %}
   </div> <!-- .access -->
 
   {% if page.layout == 'post' and site.toc and page.toc %}
   <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-    <h3 data-toc-skip class="pl-3 pt-2 mb-3">
+    <h3 data-toc-skip class="pl-3 pt-2 mb-2">
       {{- site.data.label.panel.toc -}}
     </h3>
     <nav id="toc" data-toggle="toc"></nav>

_includes/post-sharing.html

@@ -8,7 +8,7 @@
 -->
 
 <div class="share-wrapper">
-  <span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
+  <span class="share-label text-muted mr-1">{{ site.data.share.label }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign url = page.url | relative_url | prepend: site.url %}

_includes/refactor-content.html

@@ -0,0 +1,27 @@
+<!--
+  Refactor the HTML structure.
+-->
+
+{% assign _content = include.content %}
+
+<!--
+  Suroundding the markdown table with '<div class="table-wrapper">. and '</div>'
+-->
+{% if _content contains '<table>' %}
+  {% assign _content = _content | replace: '<table>', '<div class="table-wrapper"><table>' %}
+  {% assign _content = _content | replace: '</table>', '</table></div>' %}
+  {% assign _content = _content | replace: '</table></div></code>', '</table></code>' %}
+{% endif %}
+
+
+<!--
+  Fixed kramdown code highlight rendering:
+  https://github.com/penibelst/jekyll-compress-html/issues/101
+  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+-->
+{% if _content contains '<pre class="highlight">' %}
+  {% assign _content = _content | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code' %}
+  {% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
+{% endif %}
+
+{{ _content }}

_includes/related-posts.html

@@ -1,73 +1,110 @@
 <!--
- The related posts of current post.
+ Recommend the other 3 posts according to the tags and categories of the current post,
- Placed in the bottom of every single post.
+ if the number is not enough, use the other latest posts to supplement.
+
  v2.0
  https://github.com/cotes2020/jekyll-theme-chirpy
  © 2019 Cotes Chung
  Published under the MIT License
 -->
 
-{% 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 %}
+{% for i in (0..last_index) %}
-  {% if post.url != page.url %}
+  {% assign post = site.posts[i] %}
-    {% 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 %}
 
+  {% 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 %}
+  {% for entry in score_list limit: TOTAL_SIZE %}
-  <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
+    {% 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.label.post.relate_posts }}</h3>
     <div class="card-deck mb-4">
-    {% for score_item in score_list %}
+    {% for entry in index_list %}
-      {% assign data = score_item | split: ":" %}
+      {% assign index = entry | plus: 0 %}
-      {% assign index = data[1] | plus: 0 %}
       {% assign post = site.posts[index] %}
       <div class="card">
         <a href="{{ post.url | relative_url }}">
           <div class="card-body">
-            <span class="timeago small">
+            {% include timeago.html date=post.date class="small" %}
-                {{ post.date | date: site.data.date_format.post }}
-                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-            </span>
             <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 }}
+              </p>
             </div>
           </div>
         </a>
       </div>
-      {% assign count = count | plus: 1 %}
-      {% if count >= MAX_SIZE %}
-        {% break %}
-      {% endif %}
     {% endfor %}
     </div> <!-- .card-deck -->
-  </div>
+  </div> <!-- #related-posts -->
-{% endif %}
+{% endif %}

_includes/search-loader.html

@@ -5,7 +5,6 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<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">
@@ -20,11 +19,13 @@
 
 {% capture not_found %}<p class="mt-5">Oops! No result founds.</p>{% endcapture %}
 
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>
+
 <script>
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('search-results'),
-  json: '{{ site.baseurl }}/assets/data/search.json',
+  json: '{{ site.baseurl }}/assets/js/data/search.json',
   searchResultTemplate: '{{ result_elem | strip_newlines }}',
   noResultsText: '{{ not_found }}'
 });

_includes/search-results.html

@@ -8,8 +8,15 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
   <div class="col-12 col-xl-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted">{{ site.data.label.panel.trending_tags }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags }}</h4>
+
       {% include trending-tags.html %}
+
+      {% for tag in trending_tags %}
+        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+      {% endfor %}
+
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/sidebar.html

@@ -15,15 +15,15 @@
         {% if start == '/' %}
           {% assign avatar_url = avatar_url | prepend: site.baseurl %}
         {% endif %}
-        <img src="{{ avatar_url }}" alt="avatar">
+        <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
       </a>
     </div>
 
     <div class="profile-text mt-3">
-      <div id="site-title">
+      <div class="site-title">
-        <a href="{{ site.baseurl }}/">{{- site.title -}}</a>
+        <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
       </div>
-      <div id="site-subtitle" class="font-italic">{{- site.tagline -}}</div>
+      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
     </div>
   </div>
 
@@ -45,7 +45,7 @@
         or item.name == page.tab_active
         or item.name == "Home" and page.layout == "home" %}active{% endif %}">
       <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-3 mr-3 unloaded"></i>
+        <i class="fa-fw {{ item.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         <span>{{ item.name | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
@@ -64,18 +64,27 @@
   <span class="icon-border"></span>
   {% endif %}
 
-  <a href="https://github.com/{{ site.github.username }}" target="_blank">
+  {% for entry in site.data.contact %}
-    <i class="fab fa-github-alt"></i>
+    {% capture url %}
-  </a>
+      {%- if entry.type == 'github' -%}
-  <a href="https://twitter.com/{{ site.twitter.username }}" target="_blank">
+        https://github.com/{{ site.github.username }}
-    <i class="fab fa-twitter"></i>
+      {%- elsif entry.type == 'twitter' -%}
-  </a>
+        https://twitter.com/{{ site.twitter.username }}
-  {% assign email = site.social.email | split: '@' %}
+      {%- elsif entry.type == 'email' -%}
-  <a href="javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))">
+        {% assign email = site.social.email | split: '@' %}
-    <i class="fas fa-envelope"></i>
+        javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
-  </a>
+      {%- elsif entry.type == 'rss' -%}
-  <a href="{{ site.baseurl }}/feed.xml" target="_blank">
+        {{ "/feed.xml" | relative_url }}
-    <i class="fas fa-rss"></i>
+      {%- else -%}
-  </a>
+        {{ entry.url }}
+      {%- endif -%}
+    {% endcapture %}
+
+    {% if url != '' %}
+    <a href="{{ url }}" {% unless entry.noblank %}target="_blank"{% endunless %}>
+      <i class="{{ entry.icon }}"></i>
+    </a>
+    {% endif %}
+  {% endfor %}
 
 </div>

_includes/timeago.html

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

_includes/trending-tags.html

@@ -1,27 +1,31 @@
-<!--
+{% comment %}
   The trending tags list
   v2.0
   https://github.com/cotes2020/jekyll-theme-chirpy
   © 2019 Cotes Chung
   MIT Licensed
--->
+{% endcomment %}
 
 {% assign MAX = 10 %}
 
 {% capture tags_array %}
   {% for tag in site.tags %}
-    {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
+    {{ tag[1] | size }}::{{ tag[0] | replace: ' ', '-' }}
   {% endfor %}
 {% endcapture %}
 
-{% assign trends = tags_array | split: " " | sort | reverse %}
+{% assign all_tags = tags_array | split: " " | sort | reverse %}
 {% assign count = 0 %}
 
-{% for trend in trends %}
+{% assign trending_tags = "" | split: "" %}
+
+{% for iter in all_tags %}
   {% assign count = count | plus: 1 %}
-  {% assign tag = trend | split: ":" | last  %}
+  {% assign tag = iter | split: "::" | last  %}
-  <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase }}/">{{ tag | replace: '-', ' ' }}</a>
+
+  {% assign trending_tags = trending_tags | push: tag %}
+
   {% if count >= MAX %}
     {% break %}
   {% endif %}
-{% endfor %}
+{% endfor %}

_includes/update-list.html

@@ -0,0 +1,26 @@
+{% comment %}
+  Get the last 5 posts from lastmod list.
+  v2.2
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+{% endcomment %}
+
+{% assign MAX_SIZE = 5 %}
+
+{% assign all_list = "" | split: "" %}
+
+{% for entry in site.data.updates %}
+  {% capture elem %}
+    {{- entry.lastmod -}}::{{- entry.filename -}}
+  {% endcapture %}
+  {% assign all_list = all_list | push: elem %}
+{% 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 %}

_layouts/category.html

@@ -16,9 +16,9 @@ layout: page
   <ul class="post-content pl-0">
     {% for post in site.categories[page.category] %}
     <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: site.data.date_format.post }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -9,35 +9,42 @@ layout: compress
 
 <!DOCTYPE html>
 
+{% if site.lang %}
+  {% assign lang = site.lang | split: "_" | first %}
+{% else %}
+  {% assign lang = 'en' %}
+{% endif %}
+
 {% capture prefer_mode %}
   {% if site.theme_mode != "dual" %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="en" {{ prefer_mode }} >
+<html lang="{{ lang }}" {{ prefer_mode }} >
 
   {% include head.html %}
 
   <body data-spy="scroll" data-target="#toc">
+
     <div id="sidebar" class="d-flex flex-column">
       {% include sidebar.html %}
     </div>
+
+    {% include topbar.html %}
+
     <div id="main-wrapper">
-      {% include topbar.html %}
       <div id="main">
 
-        {% capture _content %}
+        {% include refactor-content.html content=content %}
-          {{ content }}
-        {% endcapture %}
-
-        {% include fixlinenos.html %}
-        {{ _content }}
 
         {% include footer.html %}
+
       </div>
+
       {% include search-results.html %}
-    </div>
+
+    </div> <!-- #main-wrapper -->
 
     <div id="mask"></div>
 
@@ -45,12 +52,8 @@ layout: compress
       <i class="fas fa-angle-up"></i>
     </a>
 
-    {% if jekyll.environment == 'production' %}
-      {% include google-analytics.html %}
-    {% endif %}
-
     {% include search-loader.html %}
 
   </body>
 
-</html>
+</html>

_layouts/home.html

@@ -7,26 +7,67 @@ layout: page
 # MIT Licensed
 ---
 
+
+{% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true"  %}
+{% assign posts = "" | split: "" %}
+
+<!-- Get pinned posts -->
+
+{% 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>
+    <div class="d-flex justify-content-between pr-xl-2">
-      <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
-    </h1>
+      {% if post.pin == true %}
+        <i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
+        title="Pinned"></i>
+      {% endif %}
+    </div>
     <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 }}
       </p>
     </div>
 
-    <div class="post-meta text-muted pt-1">
+    <div class="post-meta text-muted">
       <!-- posted date -->
       <i class="far fa-clock fa-fw"></i>
-      <span class="timeago" data-toggle="tooltip" data-placement="bottom"
+      {% include timeago.html date=post.date tooltip=true %}
-        title="{{ post.date | date: site.data.date_format.tooltip }}">
+
-      {{ post.date | date: site.data.date_format.post }}
-      <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
-      </span>
       <!-- page views -->
       {% if site.google_analytics.pv.enabled %}
       <i class="far fa-eye fa-fw"></i>
@@ -36,7 +77,9 @@ layout: page
       {% endif %}
     </div>
   </div> <!-- .post-review -->
-  {% endfor %}
+
+{% endfor %}
+
 </div> <!-- #post-list -->
 
 {% if paginator.total_pages > 0 %}

_layouts/page.html

@@ -9,7 +9,7 @@ layout: default
 
 <div class="row">
   <div class="col-12 col-lg-11 col-xl-8">
-    <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3 mb-md-4">
+    <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 mb-md-4">
     {% if page.dynamic_title %}
       <h1 class="dynamic-title">{{ page.title }}</h1>
       <div class="post-content">

_layouts/post.html

@@ -16,39 +16,63 @@ layout: default
       <h1 data-toc-skip>{{ page.title }}</h1>
 
       <div class="post-meta text-muted d-flex flex-column">
-        <!-- Published Date and Categoreis -->
+        <!-- Published date and author -->
         <div>
-          <span class="timeago" data-toggle="tooltip" data-placement="bottom"
+          Posted
-           title="{{ page.date | date: site.data.date_format.tooltip }}">
+          {% include timeago.html date=page.date tooltip=true %}
-            {{ page.date | date: site.data.date_format.post }}
+          by
-            <i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
+          <span class="author">
+          {% if page.author %}
+            {{ page.author }}
+          {% else %}
+            {{ site.author }}
+          {% endif %}
           </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>
 
+        <!-- lastmod -->
+        {%- capture filename -%}
+          {{ page.url | split: "/" | last }}
+        {%- endcapture -%}
+
+        {% for item in site.data.updates %}
+          {% assign encode_filename = item.filename | url_encode %}
+          {% if filename == encode_filename %}
+            {% assign lastmod = item.lastmod %}
+            {% break %}
+          {% endif %}
+        {% endfor %}
+
+        {% if lastmod %}
+        <div>
+          Updated
+          {% include timeago.html date=lastmod class="lastmod" tooltip=true %}
+        </div>
+        {% endif %}
+
         <!-- page views -->
         {% if site.google_analytics.pv.enabled %}
         <div>
-          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span> views
+          <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
+          views
         </div>
         {% endif %}
 
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+
+        {%- capture img_placehodler -%}
+          data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
+        {% endcapture%}
+
         {% if page.image %}
-        <img src="{{ page.image }}">
+          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
         {% endif %}
-        <!-- Add lozad class into image tags. see: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+
+        <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
         {% if content contains '<img src=' %}
-          {% capture loading %}
+          {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
-           {{ "/assets/img/commons/loading.png" | relative_url }}
-          {% endcapture %}
-          {% assign replacement = '<img class="lozad" src=' | append: loading | append: ' data-src=' %}
           {{ content | replace: '<img src=', replacement }}
         {% else %}
           {{ content }}
@@ -57,22 +81,21 @@ layout: default
 
       <div class="post-tail-wrapper text-muted">
 
-        <!-- lastmod -->
+        <!-- categories -->
-        {% if page.seo.date_modified > page.date %}
+        {% if page.categories.size > 0 %}
-        <div>
+        <div class="post-meta mb-3">
-          Updated
+          <i class="far fa-folder-open fa-fw mr-1"></i>
-          <span class="timeago lastmod"
+          {% for category in page.categories %}
-            data-toggle="tooltip" data-placement="top"
+            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
-             title="{{ page.seo.date_modified | date: site.data.date_format.tooltip }}">
+            {%- unless forloop.last -%}, {%- endunless -%}
-            {{ page.seo.date_modified | date: site.data.date_format.post }}
+          {% endfor %}
-            <i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
-          </span>
         </div>
         {% endif %}
 
-        <!-- Tags -->
+        <!-- tags -->
         {% if page.tags.size > 0 %}
-        <div class="pt-3">
+        <div class="post-tags">
+          <i class="fa fa-tags fa-fw mr-1"></i>
           {% for tag in page.tags %}
           <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
             class="post-tag no-text-decoration" >
@@ -83,19 +106,12 @@ layout: default
         {% endif %}
 
         <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center pt-5 pb-2">
+          d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
-
+          {% if site.data.rights.license %}
-          {% if site.data.right.license %}
           <div class="license-wrapper">
-            <span class="license-text ml-1 mr-1">
+            This post is licensed under
-              {{ site.data.right.license.prompt }}
+            <a href="{{ site.data.rights.license.link }}">{{ site.data.rights.license.name }}</a>
-              <a href="{{ site.data.right.license.link }}">
+            by the author.
-                {{ site.data.right.license.name }}
-                {% for icon in site.data.right.license.icons %}
-                <i class="{{ icon }}"></i>
-                {% endfor %}
-              </a>
-            </span>
           </div>
           {% endif %}
 
@@ -107,6 +123,7 @@ layout: default
 
     </div> <!-- .post -->
 
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
@@ -114,21 +131,20 @@ layout: default
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% include related-posts.html %}
 
-      {% include post-nav.html %}
+    {% include post-nav.html %}
 
-      {% if site.disqus.comments and page.comments %}
+    {% if site.disqus.comments and page.comments %}
-        {% include disqus.html %}
+      {% include disqus.html %}
-      {% endif %}
+    {% endif %}
 
-      {% include related-posts.html %}
+    </div> <!-- #post-extend-wrapper -->
 
-    </div> <!-- .pl-1 pr-1 -->
+  </div> <!-- .col-* -->
-
-  </div> <!-- #post-extend-wrapper -->
 
 </div> <!-- .row -->
 

_layouts/tag.html

@@ -16,9 +16,9 @@ layout: page
   <ul class="post-content pl-0">
     {% for post in site.tags[page.tag] %}
     <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: site.data.date_format.post }}</span>
+      <span class="text-muted small">{{ post.date | date: site.data.date_format.post.long }}</span>
     </li>
     {% endfor %}
   </ul>

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

@@ -1,24 +1,29 @@
 ---
-title: "Text and Typography"
+title: Text and Typography
+author: Cotes Chung
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
+math: true
+image: /assets/img/sample/devices-mockup.png
 ---
 
-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
 
 <h2 data-toc-skip>H2</h2>
 
 <h3 data-toc-skip>H3</h3>
 
-#### H4
+<h4>H4</h4>
 
-***
+---
 
 ## Paragraph
 
@@ -34,21 +39,37 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
+## List
+
+### Ordered list
+
+1. first item
+2. second item
+3. third item
+
+### Unordered list
+
+- item 1
+	- sub item 1
+	- sub item 2
+
+- item 2
+
 ## Block Quote
 
 > This line to shows the Block Quote.
 
 ## Tables
 
-|Company|Contact|Country|
+| Company                      | contact          | Country |
-|:---|:--|---:|
+|:-----------------------------|:-----------------|--------:|
-|Alfreds Futterkiste | Maria Anders | Germany
+| Alfreds Futterkiste          | Maria Anders     | Germany |
-|Island Trading | Helen Bennett | UK
+| Island Trading               | Helen Bennett    | UK      |
-|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
+| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
 
 ## Link
 
-[http://127.0.0.1:4000](http://127.0.0.1:4000)
+<http://127.0.0.1:4000>
 
 
 ## Footnote
@@ -56,15 +77,47 @@ Fluttering and dancing in the breeze.
 Click the hook will locate the footnote[^footnote].
 
 
-## Image
+## Images
 
-![Desktop View]({{ "/assets/img/sample/mockup.png" | relative_url }})
+By default, the image is centered and the image caption can be displayed at the bottom:
 
+![Desktop View](/assets/img/sample/mockup.png)
+_Full screen width and center alignment_
+
+You can change the size of the picture:
+
+![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+_400px image width_
+
+In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
+
+- Normal position
+  
+  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
+
+- Float to the left
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
+
+- Float to the right
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+  "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
 ## Inline code
 
 This is an example of `Inline Code`.
 
+## 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} $$
 
 ## Code Snippet
 

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

@@ -1,5 +1,6 @@
 ---
-title: "Writing a New Post"
+title: Writing a New Post
+author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
@@ -7,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named with the format `YYYY-MM-DD-title.md` then put it into `_post` of the root directory.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
 
 ## Front Matter
 
@@ -24,33 +25,37 @@ 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.
 
-- **Timezone of date**
+### Timezone of date
 
-    In order to accurately record the release date of a post, you should not only setup the `timezone` of `_config.yml` but also provide the the post's timezone in field `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
+In order to accurately record the release date of a post, you should not only setup the `timezone` of `_config.yml` but also provide the the post's timezone in field `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 `tags` can be zero to infinity.
+The `categories` of each post is designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity.
 
-    The list of posts belonging to the same category/tag is recorded on a separate page. The number of such *category*/*tag* type pages is equal to the number of `categories`/`tags` for all posts, they must match perfectly. 
+The list of posts belonging to the same *category*/*tag* is recorded on a separate page. At the same time, the number of these *category*/*tag* type pages is equal to the number of `categories` / `tags` elements for all posts, which means that the two number must be exactly the same.
+
+For instance, let's say there is a post with front matter:
 
-    let's say there is a post with front matter:
 ```yaml
 categories: [Animal, Insect]
 tags: bee
 ```
 
-    then we should have two *category* type pages placed in folder `categories` of root and one *tag* type page placed in folder `tags`  of root:
+Then we should have two *category* type pages placed in folder `categories` of root and one *tag* type page placed in folder `tags`  of root:
-```terminal
+
-jekyll-theme-chirpy
+```sh
+.
 ├── categories
-│   ├── animal.html
+│   ├── animal.html         # a category type page
-│   └── tutorial.html
+│   └── insect.html
-└── tags
+├── tags
-    └── bee.html
+│   └── bee.html            # a tag type page
+...
 ```
     
-    and the content of a *category* type page is
+and the content of a *category* type page is
+
 ```yaml
 ---
 layout: category
@@ -59,7 +64,8 @@ category: CATEGORY_NAME     # e.g. Insect
 ---
 ```
 
-    the content of a *tag* type page is
+the content of a *tag* type page is
+
 ```yaml
 ---
 layout: tag
@@ -68,24 +74,27 @@ tag: TAG_NAME               # e.g. bee
 ---
 ```
 
-    With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/*tag* type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them(i.e. when you click on the missing `category` or `tag` link from a post or somewhere, it will complain to you '404'). The good news is that we got a lovely script tool `_scripts/py/pages_generator.py` to finish the boring task. Basically we will use it via `tools/init.sh` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#option-1-built-by-github-pages" | relative_url }}).
+With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/*tag* type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them, i.e., when you click on the missing `category` or `tag` link from a post or somewhere, the browser will complain to you "404 Not Found". The good news is we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring tasks. Basically we will use it through `run.sh`, `build.sh` or `deploy.sh` that placed in `tools/` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#deployment" | relative_url }}).
+
+## Last modified date
+
+The last modified date of a post is obtained according to the post's latest git commit date, and the modified date of all posts are designed to be stored in the file `_data/updates.yml`. Then contents of that file may be as follows:
 
-- **Last modified date**
-    
-    The last modified date of the posts is recorded as `seo.date_modified`, for example:
 ```yaml
----
+-
-seo:
+  filename: getting-started             # the post filename without date and extension
-    date_modified: 2020-01-04 17:05:41 +0800
+  lastmod: 2020-04-13 00:38:56 +0800    # the post last modified date
----
+-
+  ... 
 ```
 
-    This date is equal to the lastest git-commit date of the post file and can be automatically generated by the tool script `_scripts/py/update_posts_lastmod.py`. Similar to the other script `pages_generator.py` mentioned above, it is also be called from `tools/init.sh`, so it doesn't have to be used separately.
+You can choose to create this file manually, But the better approach is to let it be automatically generated by a script tool, and `_scripts/sh/dump_lastmod.sh` was born for this! Similar to the other script (`create_pages.sh`) mentioned above, it is also be called from the other superior tools, so it doesn't have to be used separately.
-    
+
+When some posts have been modified since their published date and also the file `_data/updates.yml` was created correctly, a list with the label **Recent Updates** will be displayed in the right panel of the desktop view, which records the five most recently modified posts.
 
 ## Table of Contents
 
-By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml` and set the value of variable `toc` to `false`. If you want to turn off TOC for specific post, add the following to post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
 
 ```yaml
 ---
@@ -105,6 +114,36 @@ comments: false
 ```
 
 
+## Mathematics
+
+For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+
+```yaml
+---
+math: true
+---
+```
+
+## Preview Image
+
+If you want to add an image to the top of the post contents, specify the url for the image by:
+
+```yaml
+---
+image: /path/to/image-file
+---
+```
+
+## 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
+---
+```
+
 ## Code Block
 
 Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
@@ -115,7 +154,7 @@ This is a common code snippet, without syntax highlight and line number.
 
 ## Specific Language
 
-Using <code class="highlighter-rouge">```Language</code> you will get code snippets with line Numbers and syntax highlight.
+Using <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 !
 
@@ -128,7 +167,7 @@ items:
       quantity:  4
 ```
 
-#### Liquid codes
+### Liquid Codes
 
 If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
 
@@ -141,5 +180,6 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 {% endraw %}
 
 ## Learn More
+
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
 

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

@@ -1,192 +1,151 @@
 ---
 title: Getting Started
+author: Cotes Chung
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
+pin: true
 ---
 
-## Preparation
 
-Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installtion of basic environment (Ruby, RubyGem, Bundler and Jekyll). In order to use the script tools to save time, 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/).
+## Installation
 
-In addition, if your machine is running Debian or macOS, make sure you have the [GNU coreutils](https://www.gnu.org/software/coreutils/) installed. Otherwise, get it by:
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, rename the repository to `USERNAME.github.io` (where `USERNAME` is your GitHub username), and then open terminal and clone the fork to local by:
 
-* Debian
+```terminal
-
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
-```console
-$ sudo apt-get install coreutils
 ```
 
-* macOS
+### Setting up the local envrionment
 
-```console
+If you would like to run or build the project on your local machine, please follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems` and `Bundler`. 
-$ brew install coreutils
-```
 
-
+Before running or building for the first time, please complete the installation of the Jekyll plugins. Go to the root directory of project and run:
-## Install Jekyll Plugins
-
-Go to the root of repo and run:
 
 ```terminal
 $ bundle install
 ```
 
-`bundle` will install all the dependent Jekyll Plugins listed in file `Gemfile` automatically.
+`bundle` will automatically install all the dependencies specified by `Gemfile`.
 
+In order to generate some extra files (_categories_, _tags_ and _last modified list_), we need to use some tool scripts. And they require dependency package [yq](https://github.com/mikefarah/yq#install) to be installed. What's more, if your machine is running Debian or macOS, you also need to install [GNU coreutils](https://www.gnu.org/software/coreutils/).
 
-## File Structure
+- on Debian:
 
-The main files and related brief introductions are listed below.
+  ```console
+  $ sudo apt-get install coreutils
+  ```
 
-```sh
+- on macOS:
-jekyll-theme-chirpy/
+
-├── _data
+  ```console
-├── _includes      
+  $ brew install coreutils
-├── _layouts
+  ```
-├── _posts          # posts stay here
+
-├── _scripts
+### Setting up Docker environment (optional)
-├── .travis.yml     # remove it
+
-├── .github         # remove this, too
+If you're a loyal fan of [**Docker**](https://www.docker.com/) or just too lazy to install the packages mentioned in [_Setting up the local envrionment_](#setting-up-the-local-envrionment), please make sure you have **Docker Engine** installed and running, and then get Docker image `jekyll/jekyll` from Docker Hub by the following command:
-├── assets      
+
-├── tabs
+```console
-│   └── about.md    # the ABOUT page
+$ docker pull jekyll/jekyll:latest
-├── .gitignore
-├── 404.html
-├── Gemfile
-├── LICENSE
-├── README.md
-├── _config.yml     # configuration file
-├── tools           # script tools
-├── feed.xml
-├── index.html
-├── robots.txt
-└── sitemap.xml
 ```
 
+## Usage
 
-As mentioned above, some files or directories should be removed from your repo:
+Running [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) requires some extra files, which cannot be generated by Jekyll native commands, so please strictly follow the methods mentioned below to run or deploy your website.
 
-- .travis.yml
+### Initialization
-- .github
 
-
+Go to the root directory of the project and start initialization:
-## Configuration
-
-Basically, go to `_config.yml` and customize the variables as needed, some of them are typical options:
-
-* `url`
-    
-    Set to your website url and there should be no slash symbol at the tail. Format: `<protocol>://<domain>`.
-
-
-* `avatar`
-    
-    It defines the image file location of avatar. The sample image is `/assets/img/sample/avatar.jpg`, and should be replaced by your own one(a square image). Notice that a huge image file will increase the load time of your site, so keep your avatar image size as samll as possible(may be *<https://tinypng.com/>* will help).
-
-* `timezone`
-
-    To ensure that the posts' release date matches the city you live in, please modify the field `timezone` correctly. A list of all available values can be found on [TimezoneConverter](http://www.timezoneconverter.com/cgi-bin/findzone/findzone) or [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-
-* `theme_mode`
-  
-    There are three options for the theme color scheme:
-    
-    - **dual**  - The default color scheme will follow the system settings, but if the system does not support dark mode, or the browser does not support `Media Queries Level 5`, the theme will be displayed as `light` mode by default. Anyway, the bottom left corner of the Sidebar will provide a button for users to switch color schemes.
-
-    - **dark**  - Always show dark mode.
-    - **light** - Always show light mode.
-
-
-##  Run Locally
-
-You may want to preview the site before publishing, so just run the script tool:
-
-```terminal
-$ bash tools/run.sh
-```
-
-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 file `_config.yml` has been set to `https://<username>.github.io`(or the custom domain, if you have. e.g. `https://yourdomain.com`). What's more, if you prefer to the [Project site](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites), change `baseurl` of file `_config.yml` to your project name, starting with a slash. e.g. `/project`.
-
-
-### Option 1: Built by GitHub Pages
-
-By deploying the site in this way, you're allowed to push the source code directly to the remote.
-
-> **Note**: If you want to use any third-party Jekyll plugins that not in [this list](https://pages.github.com/versions/), stop reading the current approach and go to [*Option 2: Build locally*](#option-2-build-locally).
-
-**1**. Rename the repository to:
-
-|Site Type | Repo's Name|
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
-
-**2**. Commit the changes of the repo first, then run the initialization script:
 
 ```console
 $ bash tools/init.sh
 ```
 
-> Please note that the *Recent Update* list requires the latest git-log date of posts, thus make sure the changes in `_posts` have been committed before running this command.
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
-it will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit. Its output is similar to the following log:
+What it does is:
+
+1. Remove some files or directories from your repository:
+
+    - `.travis.yml`
+    - files under `_posts`
+    - folder `docs`
+
+2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. 
+
+3. Automatically create a commit to save the changes.
+
+### Configuration
+
+Generally, go to `_config.yml` and configure the variables as needed. Some of them are typical options:
+
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
+
+### Run Locally
+
+You may want to preview the site contents before publishing, so just run it by:
 
 ```terminal
-[INFO] Success to update lastmod for 4 post(s).
+$ bash tools/run.sh
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[Automation] Updated the Categories, Tags, Lastmod for post(s).
- 11 files changed, 46 insertions(+), 3 deletions(-)
- ...
-Updated the Categories, Tags, Lastmod for post(s).
 ```
 
+Then open a browser and visit to <http://localhost:4000>.
 
-**3**. Push the changes to `origin/master` then go to GitHub website and enable GitHub Pages service for the repo.
+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.
 
-**4**. Check it out:
+### Run on Docker
 
-|Site Type | Site URL |
+Run the site on Docker with the following command:
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
 
+```terminal
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    bash tools/run.sh --docker
+```
 
-### Option 2: Build Locally
+Please note that on Docker containers, you'll lose the real-time refresh feature.
 
-For security reasons, GitHub Pages runs on `safe` mode, which means the third-party Jekyll plugins or custom scripts won't work. If you want to use any another plugins that not in the [whitelist](https://pages.github.com/versions/), **you have to generate the site locally rather than on GitHub Pages**.
+### Deployment
 
-**1**. Browse to GitHub website, create a brand new repo named: 
+Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
-|Site Type | Repo's Name|
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
-|:---|:---|
-|User or Organization | `<username>.github.io`|
-|Project| any one except `<username>.github.io`, let's say `project`|
 
-and clone it.
+#### Deploy on GitHub Pages
 
-**2**. In the root of the source project, build your site by:
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
+
+1. Push any commit to `origin/master` to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files.
+
+2. Browse to your repository on GitHub and choose the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_:
+    ![gh-pages-sources](/assets/img/sample/gh-pages-sources.png){: width="650" class="normal"}
+
+3. Visit your website at the address indicated by GitHub.
+
+#### Deploy on Other Platforms
+
+On platforms other than GitHub, we cannot enjoy the convenience of **GitHub Actions**. Therefore, we should build the site locally (or on some other 3rd-party CI platform) and then put the site files on the server.
+
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/build.sh -d /path/to/local/project/
+$ bash tools/build.sh
 ```
 
-The generated static files will be placed in the root of `/path/to/local/project`. Commit and push the changes to the `master` branch on GitHub.
+> **Note**: The output path can be specified with the option `-d`.
 
-**3**. Go to GitHub website and enable Pages service for the new repository.
+Or, build the site with Docker by:
 
-**4**. Visit at:
+```terminal
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    bash tools/build.sh --docker
+```
 
-|Site Type | Site URL |
+Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.
-|:---|:---|
-|User or Organization | `https://<username>.github.io/`|
-|Project| `https://<username>.github.io/project/`|
-
-and enjoy!

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

@@ -1,5 +1,6 @@
 ---
-title: "Customize the Favicon"
+title: Customize the Favicon
+author: Cotes Chung
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]
@@ -8,13 +9,13 @@ 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.
 
-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.
+With a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
 
-![upload-image]({{ "/assets/img/sample/upload-image.png" | relative_url }})
+![upload-image](/assets/img/sample/upload-image.png)
 
 Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
 
-![download-icons]({{ "/assets/img/sample/download-icons.png" | relative_url }})
+![download-icons](/assets/img/sample/download-icons.png){: width="600"}
 
 Download the generated package, unzip and delete the following two from the extracted files:
 

_scripts/py/init_all.py

@@ -1,18 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-"""
-Automatic invokes all initial scripts for project.
-v2.0
-https://github.com/cotes2020/jekyll-theme-chirpy
-© 2018-2019 Cotes Chung
-Licensed under MIT
-"""
-
-import update_posts_lastmod
-import pages_generator
-
-
-update_posts_lastmod
-
-pages_generator

_scripts/py/pages_generator.py

@@ -1,205 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-'''
-Generates HTML pages for Categories and Tags in posts.
-
-Dependencies:
-  - git
-  - ruamel.yaml
-
-v2.0
-https://github.com/cotes2020/jekyll-theme-chirpy
-© 2018-2019 Cotes Chung
-MIT License
-'''
-
-
-import os
-import shutil
-import sys
-import subprocess
-
-from ruamel.yaml import YAML
-from utils.common import get_yaml
-from utils.common import get_makrdown_files
-from utils.common import check_py_version
-
-
-DRAFTS_DIR = '_drafts'
-POSTS_DIR = ['_posts']
-
-CATEGORIES_DIR = 'categories'
-CATEGORY_LAYOUT = 'category'
-
-TAG_DIR = 'tags'
-TAG_LAYOUT = 'tag'
-
-LEVEL = 3  # Tree level for current script file.
-
-
-def help():
-    print("Usage: "
-          "   python pages_generator.py [Option]\n\n"
-          "Options:\n"
-          "   -d, --drafts         Enable drafts\n"
-          "   -v, --verbose        Print verbose logs\n")
-
-
-def get_path(dir):
-    path = os.path.abspath(__file__)
-    count = LEVEL
-    r_index = len(path)
-    while r_index > 0:
-        r_index -= 1
-        if (path[r_index] == '/' or path[r_index] == '\\'):
-            count -= 1
-            if count == 0:
-                return path[:r_index + 1] + dir
-
-
-def get_categories():
-    all_categories = []
-    yaml = YAML()
-
-    for dir in POSTS_DIR:
-        path = get_path(dir)
-        posts = get_makrdown_files(path)
-
-        for file in posts:
-
-            meta = yaml.load(get_yaml(file)[0])
-
-            if 'category' in meta:
-                if type(meta['category']) == list:
-                    err_msg = (
-                        "[Error] File {} 'category' type"
-                        " can not be LIST!").format(file)
-                    raise Exception(err_msg)
-                else:
-                    if meta['category'] not in all_categories:
-                        all_categories.append(meta['category'])
-            else:
-                if 'categories' in meta:
-                    if type(meta['categories']) == str:
-                        error_msg = (
-                            "[Error] File {} 'categories' type"
-                            " can not be STR!").format(file)
-                        raise Exception(error_msg)
-
-                    for ctg in meta['categories']:
-                        if ctg not in all_categories:
-                            all_categories.append(ctg)
-                else:
-                    err_msg = (
-                        "[Error] File:{} at least "
-                        "have one category.").format(file)
-                    print(err_msg)
-
-    return all_categories
-
-
-def generate_category_pages(is_verbose):
-    categories = get_categories()
-
-    if len(categories) <= 0:
-        return
-
-    path = get_path(CATEGORIES_DIR)
-
-    if os.path.exists(path):
-        shutil.rmtree(path)
-
-    os.makedirs(path)
-
-    for category in categories:
-        new_page = path + '/' + category.replace(' ', '-').lower() + '.html'
-        with open(new_page, 'w+', encoding='utf-8') as html:
-            html.write("---\n")
-            html.write("layout: {}\n".format(CATEGORY_LAYOUT))
-            html.write("title: {}\n".format(category))
-            html.write("category: {}\n".format(category))
-            html.write("---")
-
-            if is_verbose:
-                print("[INFO] Created page: " + new_page)
-
-    change = subprocess.getoutput("git status categories -s")
-    if change:
-        print("[INFO] Succeed! {} category-pages created."
-              .format(len(categories)))
-
-
-def get_all_tags():
-    all_tags = []
-    yaml = YAML()
-
-    for dir in POSTS_DIR:
-        path = get_path(dir)
-        posts = get_makrdown_files(path)
-
-        for file in posts:
-            meta = yaml.load(get_yaml(file)[0])
-
-            if 'tags' in meta:
-                for tag in meta['tags']:
-                    if tag not in all_tags:
-                        all_tags.append(tag)
-            else:
-                raise Exception("Didn't find 'tags' in \
-                  post '{}' !".format(file))
-
-    return all_tags
-
-
-def generate_tag_pages(is_verbose):
-    all_tags = get_all_tags()
-
-    if len(all_tags) <= 0:
-        return
-
-    tag_path = get_path(TAG_DIR)
-
-    if os.path.exists(tag_path):
-        shutil.rmtree(tag_path)
-
-    os.makedirs(tag_path)
-
-    for tag in all_tags:
-        tag_page = tag_path + '/' + tag.replace(' ', '-').lower() + '.html'
-        with open(tag_page, 'w+', encoding='utf-8') as html:
-            html.write("---\n")
-            html.write("layout: {}\n".format(TAG_LAYOUT))
-            html.write("title: {}\n".format(tag))
-            html.write("tag: {}\n".format(tag))
-            html.write("---")
-
-            if is_verbose:
-                print("[INFO] Created page: " + tag_page)
-
-    change = subprocess.getoutput("git status tags -s")
-    if change:
-        print("[INFO] Succeed! {} tag-pages created.".format(len(all_tags)))
-
-
-def main():
-    check_py_version()
-
-    is_verbose = False
-
-    if len(sys.argv) > 1:
-        for arg in sys.argv:
-            if arg != sys.argv[0]:
-                if arg == '-d' or arg == '--drafts':
-                    POSTS_DIR.insert(0, DRAFTS_DIR)
-                elif arg == '-v' or arg == '--verbose':
-                    is_verbose = True
-                else:
-                    help()
-                    return
-
-    generate_category_pages(is_verbose)
-    generate_tag_pages(is_verbose)
-
-
-main()

_scripts/py/requirements.txt

@@ -1,2 +0,0 @@
-ruamel.yaml==0.16.5
-ruamel.yaml.clib==0.1.2

_scripts/py/update_posts_lastmod.py

@@ -1,174 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-"""
-Update (or create if not existed) field 'seo.date_modified'
-in posts' Front Matter by their latest git commit date.
-
-Dependencies:
-  - git
-  - ruamel.yaml
-
-v2.0
-https://github.com/cotes2020/jekyll-theme-chirpy
-© 2018-2019 Cotes Chung
-Licensed under MIT
-"""
-
-import sys
-import os
-import getopt
-import subprocess
-import shutil
-import datetime
-import time
-
-from enum import Enum
-from ruamel.yaml import YAML
-
-from utils.common import get_yaml
-from utils.common import get_makrdown_files
-from utils.common import check_py_version
-
-
-Date = Enum('Date', ('GIT', 'FS'))
-
-POSTS_PATH = '_posts'
-
-
-def help():
-    print("Usage: "
-          "   python update_posts_lastmod.py [options]\n"
-          "Options:\n"
-          "   -f, --file  <file path>        Read a file.\n"
-          "   -d, --dir   <directory path>   Read from a directory.\n"
-          "   -h, --help                     Print help information\n"
-          "   -v, --verbose                  Print verbose logs\n"
-          "   -t, --datetime  < git | fs >   Chose post's datetime source, "
-          "'git' for git-log, 'fs' for filesystem, default to 'git'.\n")
-
-
-def update_lastmod(posts, verbose, date):
-    count = 0
-    yaml = YAML()
-
-    for post in posts:
-
-        lastmod = ''
-
-        if date == Date.GIT:
-            git_log_count = subprocess.getoutput(
-                "git log --pretty=%ad \"{}\" | wc -l".format(post))
-
-            if git_log_count == "1":
-                continue
-
-            git_lastmod = subprocess.getoutput(
-                "git log -1 --pretty=%ad --date=iso \"{}\"".format(post))
-
-            if not git_lastmod:
-                continue
-
-            lates_commit = subprocess.check_output(
-                ['git', 'log', '-1', '--pretty=%B', post]).decode('utf-8')
-
-            if "[Automation]" in lates_commit and "Lastmod" in lates_commit:
-                continue
-
-            lastmod = git_lastmod
-
-        elif date == Date.FS:
-            t = os.path.getmtime(post)
-            dt = datetime.datetime.fromtimestamp(t)
-            lastmod = dt.strftime('%F %T') + time.strftime(' %z')
-
-        frontmatter, line_num = get_yaml(post)
-        meta = yaml.load(frontmatter)
-
-        if 'seo' in meta:
-            if ('date_modified' in meta['seo'] and
-                    meta['seo']['date_modified'] == lastmod):
-                continue
-            else:
-                meta['seo']['date_modified'] = lastmod
-        else:
-            meta.insert(line_num, 'seo', dict(date_modified=lastmod))
-
-        output = 'new.md'
-        if os.path.isfile(output):
-            os.remove(output)
-
-        with open(output, 'w', encoding='utf-8') as new, \
-                open(post, 'r', encoding='utf-8') as old:
-            new.write("---\n")
-            yaml.dump(meta, new)
-            new.write("---\n")
-            line_num += 2
-
-            lines = old.readlines()
-
-            for line in lines:
-                if line_num > 0:
-                    line_num -= 1
-                    continue
-                else:
-                    new.write(line)
-
-        shutil.move(output, post)
-        count += 1
-
-        if verbose:
-            print("[INFO] update 'lastmod' for:" + post)
-
-    if count > 0:
-        print("[INFO] Success to update lastmod for {} post(s).".format(count))
-
-
-def main(argv):
-    check_py_version()
-
-    specific = False
-    posts = []
-    verbose = False
-    date = Date.GIT
-
-    try:
-        opts, args = getopt.getopt(
-            argv, "hf:d:vt:",
-            ["file=", "dir=", "help", "verbose", "datetime="])
-    except getopt.GetoptError:
-        help()
-        sys.exit(2)
-
-    for opt, arg in opts:
-        if opt == '-h':
-            help()
-            sys.exit()
-
-        elif opt == '-f' or opt == '--file':
-            posts.append(arg)
-            specific = True
-
-        elif opt == '-d' or opt == '--dir':
-            posts = get_makrdown_files(arg)
-            specific = True
-
-        elif opt == '-v' or opt == '--verbose':
-            verbose = True
-
-        elif opt == '-t' or opt == '--datetime':
-            if arg == 'git':
-                date = Date.GIT
-            elif arg == 'fs':
-                date = Date.FS
-            else:
-                help()
-                sys.exit(2)
-
-    if not specific:
-        posts = get_makrdown_files(POSTS_PATH)
-
-    update_lastmod(posts, verbose, date)
-
-
-main(sys.argv[1:])

_scripts/py/utils/common.py

@@ -1,57 +0,0 @@
-#!/usr/bin/env python
-# -*- coding: utf-8 -*-
-
-'''
-Common functions to other scripts.
-
-v2.0
-https://github.com/cotes2020/jekyll-theme-chirpy
-© 2018-2019 Cotes Chung
-MIT License
-'''
-
-import sys
-import os
-import glob
-
-
-def get_yaml(path):
-    """
-    Return the Yaml block of a post and the linenumbers of it.
-    """
-    end = False
-    yaml = ""
-    num = 0
-
-    with open(path, 'r', encoding='utf-8') as f:
-        for line in f.readlines():
-            if line.strip() == '---':
-                if end:
-                    break
-                else:
-                    end = True
-                    continue
-            else:
-                num += 1
-
-            yaml += line
-
-    return yaml, num
-
-
-def get_makrdown_files(path):
-    MD_EXTENSIONS = ["md", "markdown", "markdn", "mdown"]
-    ret_files = []
-
-    for extension in MD_EXTENSIONS:
-        ret_files.extend(glob.glob(os.path.join(path, "*." + extension)))
-
-    return ret_files
-
-
-def check_py_version():
-    if not sys.version_info.major == 3 and sys.version_info.minor >= 5:
-        print("WARNING: This script requires Python 3.5 or higher, "
-              "however you are using Python {}.{}."
-              .format(sys.version_info.major, sys.version_info.minor))
-        sys.exit(1)

_scripts/sh/create_pages.sh

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

_scripts/sh/dump_lastmod.sh

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

_scripts/sh/sync_monitor.sh

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

app.js

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

assets/css/_addon/fonts.scss

@@ -1,312 +1,7 @@
 /*
  * The field 'font-display' is added for Google-fonts.
  *
- * See https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900|Oswald|Lato
+ * See: <https://fonts.google.com/>
- *
  */
-/* latin-ext */
+
-@font-face {
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752HT8Ghe4.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fj8Ghe4.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmhduz8A.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwkxduz8A.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmxduz8A.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlBduz8A.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmBduz8A.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwmRduz8A.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdu.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}

assets/css/_addon/main.scss

@@ -1,6 +1,4 @@
----
+/*
----
-/*!
 * The main styles.
 * v2.0
 * https://github.com/cotes2020/jekyll-theme-chirpy
@@ -53,15 +51,9 @@ html[mode=dark] {
 }
 
 html, body {
-  height: 100%;
   font-size: 16px;
 }
 
-/* Solved jumping scrollbar */
-html {
-  overflow-y: scroll;
-}
-
 body {
   line-height: 1.75rem;
   background: var(--body-bg);
@@ -72,10 +64,10 @@ body {
 
 /*--- sidebar layout ---*/
 
-$tab-height: 3.3rem;
-$tab-cursor-height: 1.6rem;
 $tab-count: {{ site.data.tabs | size }};
 
+$sidebar-display: "sidebar-display";
+
 #sidebar {
   @include pl-pr(0);
   position: fixed;
@@ -85,15 +77,35 @@ $tab-count: {{ site.data.tabs | size }};
   overflow-y: auto;
   width: $sidebar-width-medium;
   z-index: 99;
-  -webkit-transition: transform 0.4s ease;
-  transition: transform 0.4s ease;
-  background: rgb(42, 30, 107);
   background: var(--sidebar-bg);
   a {
-    @include sidebar-icon;
+    @include sidebar-links;
   }
+
+  .site-title {
+    text-align: center;
+    a {
+      font-weight: 900;
+      font-size: 1.5rem;
+      letter-spacing: .5px;
+      &:hover {
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .site-subtitle {
+    font-size: 95%;
+    text-align: center;
+    color: #828282;
+    line-height: 1.2rem;
+    word-spacing: 1px;
+    margin: .5rem 1.5rem 2rem 1.5rem;
+  }
+
   .sidebar-bottom {
-    .icon-border+a { // the icon behide mode-toggle
+    .icon-border + a { // the icon behide mode-toggle
       margin-left: .1rem;
     }
   }
@@ -172,13 +184,13 @@ $tab-count: {{ site.data.tabs | size }};
       margin-bottom: .5rem; // icons may have multi lines
     }
 
-    a:hover, #mode-toggle-wrapper>i:hover {
+    a:hover, #mode-toggle-wrapper > i:hover {
       color: #fff;
     }
 
     #mode-toggle-wrapper {
       i {
-        @include sidebar-icon;
+        @include sidebar-links;
         margin-right: 0;
         font-size: 1.05rem;
         text-align: center;
@@ -198,7 +210,7 @@ $tab-count: {{ site.data.tabs | size }};
 } // #sidebar
 
 @media (hover: hover) {
-  #sidebar ul>li:last-child::after {
+  #sidebar ul > li:last-child::after {
     -webkit-transition: top .5s ease;
     -moz-transition: top .5s ease;
     -o-transition: top .5s ease;
@@ -229,18 +241,17 @@ $tab-count: {{ site.data.tabs | size }};
     transition: border-color 0.35s ease-in-out;
   }
 
-  &:hover>a {
+  &:hover > a {
     border-color: #fff;
   }
 
   img {
     width: 100%;
     height: 100%;
-    background-size: cover;
+    -webkit-transition: transform .5s;
-    background-repeat: no-repeat;
+    -moz-transition: transform .5s;
-    -webkit-transition: all .5s !important;
+    transition: transform .5s;
-    -moz-transition: all .5s !important;
+
-    transition: all .5s !important;
     &:hover {
       -ms-transform: scale(1.2);
       -moz-transform: scale(1.2);
@@ -250,33 +261,6 @@ $tab-count: {{ site.data.tabs | size }};
   }
 } // #avatar
 
-#site-title {
-  text-align: center;
-  a {
-    color: #b6b6b6;
-    font-weight: 900;
-    font-size: 1.5rem;
-    letter-spacing: .5px;
-    &:hover {
-      color: #fff;
-      text-decoration: none;
-    }
-  }
-}
-
-#site-subtitle {
-  font-size: 95%;
-  text-align: center;
-  color: #828282;
-  line-height: 1.2rem;
-  word-spacing: 1px;
-  margin: .5rem 1.5rem 2rem 1.5rem;
-}
-
-.sidebar-expand {
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2), 6px 0 20px 0 rgba(0, 0, 0, 0.19) !important;
-}
-
 #search-result-wrapper {
   display: none;
   position: fixed;
@@ -337,7 +321,6 @@ $tab-count: {{ site.data.tabs | size }};
   border: 1px solid var(--search-wrapper-bg);
   background: var(--search-wrapper-bg);
   padding: 0 .5rem;
-  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
   i {
     z-index: 2;
     font-size: .9rem;
@@ -398,14 +381,15 @@ $tab-count: {{ site.data.tabs | size }};
   a {
     @extend %link-color;
     @extend %no-bottom-border;
+    @extend %heading;
     font-size: 1.4rem;
-    font-weight: 400;
     line-height: 2.5rem;
     &:hover {
       @extend %link-hover;
     }
   }
   >div {
+    max-width: 100%;
     &:not(:last-child) {
       margin-bottom: 1rem;
     }
@@ -447,10 +431,8 @@ $tab-count: {{ site.data.tabs | size }};
   left: 0;
   height: 100%;
   width: 100%;
-  background: var(--mask-bg);
-  opacity: 0.5;
   z-index: 1;
-  @at-root .sidebar-expand~& {
+  @at-root [#{$sidebar-display}] & {
     display: block!important;
   }
 }
@@ -460,15 +442,12 @@ $tab-count: {{ site.data.tabs | size }};
 #main-wrapper {
   background-color: var(--main-wrapper-bg);
   position: relative;
-  min-height: 100%;
+  min-height: 100vh;
   padding-bottom: $footer-height;
   @include pl-pr(0);
-  margin-left: 260px;
-  transition: transform 0.4s ease;
-  -webkit-transition: transform 0.4s ease;
 }
 
-#main>div.row:first-child>div {
+#main > div.row:first-child > div {
   &:nth-child(1), &:nth-child(2) {
     margin-top: $topbar-height; /* same as the height of topbar */
   }
@@ -481,11 +460,6 @@ $tab-count: {{ site.data.tabs | size }};
 #post-wrapper {
   min-height: calc(100vh - #{$topbar-height}
     - #{$footer-height} - #{$post-extend-min-height})!important;
-  .post-content {
-    a:hover {
-      @extend %link-hover;
-    }
-  }
 }
 
 #topbar-wrapper.row,
@@ -513,6 +487,7 @@ footer {
     }
   }
   a {
+    color: var(--footer-link);
     &:link {
       @include no-text-decoration;
     }
@@ -521,14 +496,8 @@ footer {
       @include no-text-decoration;
     }
   }
-  .footer-left a {
-    @extend %footer-content;
-  }
   .footer-right {
     text-align: right;
-    a {
-      @extend %footer-content;
-    }
   }
 }
 
@@ -540,7 +509,6 @@ footer {
   margin-right: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 4rem;
-  color: #6c757d;
   &:only-child {
     position: -webkit-sticky; /* Safari */
     position: sticky;
@@ -561,8 +529,7 @@ footer {
     margin-top: 0;
     margin-bottom: 0;
     letter-spacing: -0.02em;
-    font-size: 1rem;
+    @include label(inherit, 600);
-    font-family: 'Oswald', sans-serif;
   }
   .post-content {
     font-size: .9rem;
@@ -571,7 +538,7 @@ footer {
 
 
 #access-tags {
-  >div.post-content>div {
+  >div.post-content > div {
     max-width: 80%;
   }
   .post-tag {
@@ -641,29 +608,35 @@ footer {
 /*--- Typography ---*/
 
 h1 {
+  @extend %heading;
   font-size: 1.8rem;
-  font-weight: 400;
 }
 
 h2 {
+  @extend %heading;
   @extend %section;
   @extend %anchor;
-  font-size: 1.35rem;
+  font-size: 1.4rem;
 }
 
 h3 {
+  @extend %heading;
   @extend %section;
   @extend %anchor;
   font-size: 1.25rem;
 }
 
 h4 {
+  @extend %heading;
   @extend %section;
   @extend %anchor;
   font-size: 1.15rem;
 }
 
 h5 {
+  @extend %heading;
+  @extend %section;
+  @extend %anchor;
   font-size: 1.1rem;
 }
 
@@ -683,7 +656,11 @@ kbd {
 }
 
 sup {
-  @extend %anchor;
+  z-index: 1;
+  &:target {
+    @extend %anchor;
+    z-index: 0;
+  }
 }
 
 .footnotes ol {
@@ -697,7 +674,7 @@ sup {
     &:not(:last-child) {
       margin-bottom: -.8rem;
     }
-    &:target>p {
+    &:target > p {
       background-color: var(--footnote-target-bg);
       width: fit-content;
       -webkit-transition: background-color 1.5s ease-in-out;
@@ -714,7 +691,7 @@ sup {
     -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
-  @at-root sup:target>a#{&} {
+  @at-root sup:target > a#{&} {
     background-color: var(--footnote-target-bg);
     padding: 0 2px;
   }
@@ -752,15 +729,17 @@ a {
       @extend %no-bottom-border;
     }
   }
-  .license-wrapper .license-text &:hover {
-    @extend %link-hover;
-  }
 
 } // a
 
+img {
+  max-width: 100%;
+}
+
 .post {
   h1 {
     margin-top: 3rem;
+    margin-bottom: 1rem;
   }
   em { /* MarkDown italic */
     padding-right: .2rem;
@@ -774,41 +753,41 @@ a {
 
 
 /*--- Begin of Markdown table style ---*/
+div.post-content .table-wrapper {
+  overflow-x: auto;
 
-div.post-content {
+  >table {
-  >table, li>table {
     min-width: 60%;
-    border-collapse: collapse;
+    overflow-x: auto;
     border-spacing: 0;
     margin-bottom: 1.5rem;
+
+    thead {
+      border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+      th {
+        @extend %table-cell;
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(2n) {
+          background-color: var(--tb-even-bg);
+        }
+        &:nth-child(2n + 1) {
+          background-color: var(--tb-odd-bg);
+        }
+        & {
+          border-bottom: 1px solid var(--tb-border-color);
+        }
+        td {
+          @extend %table-cell;
+        }
+      }
+    }
   }
 }
 
-table {
-  thead {
-    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-    +tbody tr {
-      &:nth-child(2n) {
-        background-color: var(--tb-even-bg);
-      }
-      &:last-child:nth-child(2n) {
-        border-bottom: solid 1px var(--tb-even-border-color);
-      }
-      &:nth-child(2n + 1) {
-        background-color: var(--tb-odd-bg);
-      }
-    }
-    th {
-      @extend %table-cell;
-    }
-  }
-
-  tbody td {
-    @extend %table-cell;
-  }
-
-} // table
-
 
 /*--- post ---*/
 
@@ -836,16 +815,61 @@ table {
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  a {
+
-    @extend %link-color;
+  @mixin img($caption: false) {
-    @extend %link-underline;
+    >img:not([style]) {
-    &:hover {
+      margin: .5rem 0;
-      @extend %link-hover;
+
+      &:not(.normal):not(.left):not(.right) {
+        @include align-center;
+
+        @if $caption {
+          @include img-caption;
+        }
+      }
+
+      &.left {
+        float: left;
+        margin: .75rem 1rem 1rem 0;
+      }
+
+      &.right {
+        float: right;
+        margin: .75rem 0 1rem 1rem;
+      }
+
     }
   }
+
+  @mixin img-caption {
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
+    }
+  }
+
+  a {
+    &:not(.img-hyperlink) {
+      @extend %link-color;
+      @extend %link-underline;
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+    &.img-hyperlink {
+      @include img;
+      @include img-caption;
+    }
+  }
+
   p {
     font-size: 1.08rem;
-  }
+    @include img(true);
+  }// p
 }
 
 .tag:hover {
@@ -857,13 +881,14 @@ table {
   min-width: 2rem;
   text-align: center;
   background: var(--tag-bg);
-  border-radius: .34rem;
+  border-radius: .3rem;
   padding: 0 .4rem;
-  color: #818182;
+  color: inherit;
-  line-height: 1.6rem;
+  line-height: 1.3rem;
-  &:not(:first-child) {
+  &:not(:last-child) {
-    margin-left: .2rem;
+    margin-right: .2rem;
   }
+
   &:hover {
     @extend %tag-hover;
     border-bottom: none;
@@ -875,7 +900,7 @@ table {
 /* --- buttons --- */
 .btn-lang {
   border: 1px solid !important;
-  padding: 0 3px 1px 3px;
+  padding: 1px 3px;
   border-radius: 3px;
   color: var(--link-color);
   &:focus {
@@ -904,11 +929,6 @@ table {
   visibility: hidden !important;
 }
 
-.no-scroll {
-  position: fixed;
-  width: 100%;
-}
-
 .flex-grow-1 {
   -ms-flex-positive: 1!important;
   flex-grow: 1!important;
@@ -946,6 +966,7 @@ table {
   box-shadow: none;
   border-color: var(--input-focus-border-color) !important;
   background: center !important;
+  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
 }
 
 /*--- Responsive Design ---*/
@@ -954,7 +975,7 @@ table {
 
   $footer-height: 6rem; // overwrite
 
-  #main>div.row:first-child>div:first-child {
+  #main > div.row:first-child > div:first-child {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
@@ -967,17 +988,17 @@ table {
     }
   }
 
-  #avatar>a {
+  #avatar > a {
     width: 5rem;
     height: 5rem;
   }
 
-  #site-subtitle {
+  .site-subtitle {
     @include ml-mr(1.8rem);
   }
 
   /* table text in small screens */
-  div>table, p~table {
+  div > table, p ~ table {
     width: 100%;
     table-layout: fixed;
     word-wrap: break-word;
@@ -1005,62 +1026,38 @@ table {
 
 }
 
-/* Sidebar is visibal */
-@media all and (min-width: 831px) {
 
-  #profile-wrapper {
+/* Hide Sidebar and TOC */
-    margin-top: 3rem;
-  }
-
-  #search-wrapper {
-    width: 22%;
-    min-width: 150px;
-  }
-
-  /* button 'back-to-Top' position */
-  #back-to-top {
-    bottom: 5.5rem;
-    right: 1.2rem;
-  }
-
-  .topbar-up {
-    box-shadow: none !important;
-  }
-
-  #topbar-title {
-    text-align: left;
-  }
-
-  footer>div.d-flex {
-    width: 92%;
-  }
-
-}
-
-/* iPad 9.7" horizontal */
-@media all and (min-width: 992px) and (max-width: 1024px) {
-  #main-wrapper .col-lg-11 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 96%;
-    flex: 0 0 96%;
-    max-width: 96%;
-  }
-}
-
-
-/* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
+  %slide {
+    -webkit-transition: transform 0.4s ease;
+    transition: transform 0.4s ease;
+  }
 
-  .sidebar-expand {
+
-    transform: translateX(0) !important;
+  html, body {
-    ~#main-wrapper {
+    overflow-x: hidden;
-      transform: translateX(#{$sidebar-width-medium}) !important;
+  }
+
+  [#{$sidebar-display}] {
+
+    #sidebar {
+      transform: translateX(0);
     }
+
+    #topbar-wrapper,
+    #main-wrapper {
+      transform: translateX(#{$sidebar-width-medium});
+    }
+
   }
 
   #sidebar {
+    @extend %slide;
+
     transform: translateX(-#{$sidebar-width-medium}); // hide
     -webkit-transform: translateX(-#{$sidebar-width-medium});
+
     .cursor {
       -webkit-transition: none;
       -moz-transition: none;
@@ -1068,8 +1065,13 @@ table {
     }
   }
 
+  #topbar-wrapper {
+    @extend %slide;
+  }
+
   #main-wrapper {
-    margin-left: 0;
+    @extend %slide;
+    padding-top: $topbar-height;
   }
 
   #search-result-wrapper {
@@ -1089,8 +1091,6 @@ table {
   }
 
   #topbar-wrapper {
-    position: -webkit-sticky;
-    position: sticky;
     left: 0;
   }
 
@@ -1098,8 +1098,8 @@ table {
     top: 0 !important;
   }
 
-  #main>div.row:first-child>div:nth-child(1),
+  #main > div.row:first-child > div:nth-child(1),
-  #main>div.row:first-child>div:nth-child(2) {
+  #main > div.row:first-child > div:nth-child(2) {
     margin-top: 0;
   }
 
@@ -1110,7 +1110,7 @@ table {
   }
 
   #search-wrapper {
-    &.loaded~a {
+    &.loaded ~ a {
       margin-right: 1rem;
     }
     .fa-times-circle {
@@ -1138,11 +1138,11 @@ table {
     justify-content: center!important;
   }
 
-  sup {
+  sup:target {
     padding-top: 3.4rem;
   }
 
-  .footnotes ol>li {
+  .footnotes ol > li {
     padding-top: 3.5rem;
     margin-top: -4.3rem;
     &:first-child {
@@ -1153,12 +1153,63 @@ table {
 
 
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer>.d-flex>div {
+  footer>.d-flex > div {
     width: 312px;
   }
 }
 
 
+/* Sidebar visible */
+@media all and (min-width: 831px) {
+
+  /* Solved jumping scrollbar */
+  html {
+    overflow-y: scroll;
+  }
+
+  #main-wrapper {
+    margin-left: $sidebar-width-medium;
+  }
+
+  #profile-wrapper {
+    margin-top: 3rem;
+  }
+
+  #search-wrapper {
+    width: 22%;
+    min-width: 150px;
+  }
+
+  /* button 'back-to-Top' position */
+  #back-to-top {
+    bottom: 5.5rem;
+    right: 1.2rem;
+  }
+
+  .topbar-up {
+    box-shadow: none !important;
+  }
+
+  #topbar-title {
+    text-align: left;
+  }
+
+  footer > div.d-flex {
+    width: 92%;
+  }
+
+}
+
+/* iPad 9.7" horizontal */
+@media all and (min-width: 992px) and (max-width: 1024px) {
+  #main-wrapper .col-lg-11 {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 96%;
+    flex: 0 0 96%;
+    max-width: 96%;
+  }
+}
+
 /* Compact icons in sidebar & TOC hidden */
 @media all and (min-width: 832px) and (max-width: 1199px) {
 
@@ -1180,12 +1231,16 @@ table {
     width: calc(100% - 210px);
   }
 
-  #site-title {
+  #search-results > div {
+    max-width: 700px;
+  }
+
+  .site-title {
     font-size: 1.3rem;
     margin-left: 0!important;
   }
 
-  #site-subtitle {
+  .site-subtitle {
     font-size: 90%;
     @include ml-mr(1rem);
   }
@@ -1214,15 +1269,11 @@ table {
     padding: 0;
   }
 
-  #main>div.row {
+  #main > div.row {
     -webkit-box-pack: center!important;
     -ms-flex-pack: center!important;
     justify-content: center!important;
   }
-
-  #search-results>div {
-    max-width: 700px;
-  }
 }
 
 
@@ -1230,7 +1281,7 @@ table {
 
 @media all and (min-width: 1200px) {
 
-  #main>div.row>div.col-xl-8 {
+  #main > div.row > div.col-xl-8 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 75%;
     flex: 0 0 75%;
@@ -1261,7 +1312,7 @@ table {
     width: calc(100% - 260px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 46%;
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1279,7 +1330,7 @@ table {
     font-size: 1.03rem;
   }
 
-  footer>div.d-felx {
+  footer > div.d-felx {
     width: 85%;
   }
 
@@ -1287,7 +1338,7 @@ table {
 
 @media all and (min-width: 1400px) {
 
-  #main>div.row {
+  #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width}) / 2);
     >div.col-xl-8 {
       max-width: 850px;
@@ -1319,7 +1370,7 @@ table {
     padding-left: 0;
   }
 
-  #main>div.row>div.col-xl-8 {
+  #main > div.row > div.col-xl-8 {
     padding-left: 0;
     >div:first-child {
       padding-left: .55rem !important;
@@ -1348,57 +1399,55 @@ table {
   }
 
   #profile-wrapper {
-    margin-top: 4rem;
+    margin: 4rem 2rem 3rem 4rem;
-    margin-bottom: 3rem;
-    padding-left: 18%;
     -ms-flex-direction: column!important;
-  }
 
-  #avatar {
+    #avatar {
-    -webkit-box-pack: normal !important;
+      -webkit-box-pack: normal !important;
-    -ms-flex-pack: normal !important;
+      -ms-flex-pack: normal !important;
-    justify-content: normal !important;
+      justify-content: normal !important;
-    >a {
+      >a {
-      width: 6.2rem;
+        width: 6.2rem;
-      height: 6.2rem;
+        height: 6.2rem;
+      }
     }
-  }
 
-  .profile-text {
+    .profile-text {
-    padding-left: .5rem;
+      margin-left: .5rem;
-    /* .d-flex */
+      /* .d-flex */
-    display: -webkit-box!important;
+      display: -webkit-box!important;
-    display: -ms-flexbox!important;
+      display: -ms-flexbox!important;
-    display: flex!important;
+      display: flex!important;
-    /* .flex-wrap */
+      /* .flex-wrap */
-    -ms-flex-wrap: wrap!important;
+      -ms-flex-wrap: wrap!important;
-    flex-wrap: wrap!important;
+      flex-wrap: wrap!important;
-    /* .align-content-center */
+      /* .align-content-center */
-    -ms-flex-line-pack: center!important;
+      -ms-flex-line-pack: center!important;
-    align-content: center!important;
+      align-content: center!important;
-  }
+      >div {
-
+        text-align: left !important;
-  #site-title a {
+        width: 100%;
-    font-size: 1.7rem;
+      }
-    letter-spacing: 1px;
+    }
-  }
-
-  .profile-text>div {
-    text-align: left !important;
-    width: 100%;
-  }
-
-  #site-subtitle {
-    word-spacing: 0;
-    padding-right: 3rem;
-    margin: .3rem 0 0 0;
   }
 
   #sidebar {
     width: $sidebar-width-large;
+
+    .site-title a {
+      font-size: 1.7rem;
+      letter-spacing: 1px;
+      margin: 0;
+    }
+
+    .site-subtitle {
+      word-spacing: 0;
+      margin: .3rem 0 0 0;
+    }
+
     ul {
-      margin-left: 5%;
+      margin-left: 3%;
-      >li>a {
+      >li > a {
         padding-left: 2.5rem;
         -webkit-box-pack: start!important;
         -ms-flex-pack: start!important;
@@ -1453,11 +1502,9 @@ table {
           margin-left: 0;
         }
       }
-
     } // .sidebar-bottom
   } // #sidebar
-
+  footer > div.d-flex {
-  footer>div.d-flex {
     width: 87%;
     max-width: 1140px;
   }
@@ -1471,13 +1518,18 @@ table {
 
 } // min-width: 1650px
 
+
 @media all and (min-width: 1700px) {
   #topbar-wrapper {
     padding-right: calc(100% - #{$sidebar-width-large}
      - (1920px - #{$sidebar-width-large}) ) /* 100% - 350px - (1920px - 350px); */
   }
 
-  #main>div.row {
+  #topbar {
+    max-width: calc(#{$main-content-max-width} + 20px)
+  }
+
+  #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
   }
 
@@ -1497,7 +1549,7 @@ table {
 }
 
 @media (min-width: 1920px) {
-  #main>div.row {
+  #main > div.row {
     padding-left: 190px;
   }
 

assets/css/_addon/module.scss

@@ -7,7 +7,7 @@
 * MIT Licensed
 */
 
-/*---------- scss placeholder ---------*/
+/* ---------- scss placeholder --------- */
 
 %tag-hover {
   background: var(--tag-hover);
@@ -15,12 +15,12 @@
 }
 
 %table-cell {
-  padding: .35rem .8rem;
+  padding: 0.4rem 1rem;
   font-size: 95%;
 }
 
 %link-hover {
-  color: #d2603a!important;
+  color: #d2603a !important;
   border-bottom: 1px solid #d2603a;
   text-decoration: none;
 }
@@ -37,6 +37,11 @@
   border-bottom: none;
 }
 
+%heading {
+  font-weight: 400;
+  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+}
+
 %section {
   #post-wrapper & {
     line-height: 1.2;
@@ -45,30 +50,21 @@
 }
 
 %anchor {
-  #post-wrapper &,
+  padding-top: 3.5rem;
-  #page & {
+  margin-top: -2.5rem;
-    padding-top: 3.5rem;
-    margin-top: -2.5rem;
-  }
 }
 
-%footer-content {
+/* ---------- scss mixin --------- */
-  font-weight: 600;
-  color: var(---footer-link);
-}
-
-
-/*---------- scss mixin ---------*/
 
 @mixin no-text-decoration {
   text-decoration: none;
 }
 
-@mixin sidebar-icon {
+@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
-  color: rgba(255, 255, 255, 0.5);
+  color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 .25rem;
+  margin: 0 0.25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -91,3 +87,22 @@
 @mixin input-placeholder {
   opacity: 0.6;
 }
+
+@mixin semi-bold {
+  font-weight: 600;
+}
+
+@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
+  color: $color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}

assets/css/_addon/syntax.scss

@@ -1,5 +1,3 @@
----
----
 /*
 * The syntax highlight.
 * v2.0
@@ -11,14 +9,8 @@
 @import "_colors/light-syntax";
 @import "_colors/dark-syntax";
 
-
+html:not([mode]),
-@mixin highlight-box-shadow($val) {
+html[mode=light] {
-  -moz-box-shadow: $val;
-  -webkit-box-shadow: $val;
-  box-shadow: $val;
-}
-
-html:not([mode]), html[mode=light] {
   @include light-syntax;
 }
 
@@ -27,7 +19,8 @@ html[mode=dark] {
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
+  html:not([mode]),
+  html[mode=dark] {
     @include dark-syntax;
   }
 
@@ -36,9 +29,9 @@ html[mode=dark] {
   }
 }
 
-/*-- Codes Snippet --*/
+/* -- Codes Snippet -- */
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
@@ -46,25 +39,38 @@ html[mode=dark] {
   border-radius: 5px;
 }
 
-.highlighter-rouge {
+%code-snippet-padding {
-  background: var(--highlight-bg-color);
+  padding: 0.8rem 1rem;
+}
+
+$code-font-size: 0.85rem;
+
+div > pre {
+  @extend %code-snippet-bg;
   @extend %code-snippet-radius;
+  @extend %code-snippet-padding;
+}
+
+.highlighter-rouge {
+  @extend %code-snippet-bg;
+  @extend %code-snippet-radius;
+
   color: var(--highlighter-rouge-color);
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
   @extend %code-snippet-radius;
-  background: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
 
   @at-root figure#{&} {
-    background: var(--highlight-bg-color);
+    @extend %code-snippet-bg;
   }
+
   overflow: auto;
-  @include highlight-box-shadow(inset 0 0 2px #c2c6cc);
   .lineno {
-    margin: .8rem 0rem;
+    margin: 0.8rem 0;
-    padding: 0 .5rem;
+    padding: 0 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -76,6 +82,12 @@ html[mode=dark] {
     -o-user-select: none;
     user-select: none;
   }
+  pre {
+    margin-bottom: 0;
+    font-size: $code-font-size;
+    line-height: 1.4rem;
+    word-wrap: normal; /* Fixed Safari overflow-x */
+  }
   table {
     padding: 0;
     border: 0;
@@ -88,14 +100,6 @@ html[mode=dark] {
     padding: 0;
     border: 0;
   }
-  pre {
-    margin-bottom: 0;
-    font-size: .85rem;
-    line-height: 1.4rem;
-    word-wrap: normal;
-    /* Fixed Safari overflow-x */
-  }
-
 } //.highlight
 
 code {
@@ -103,18 +107,27 @@ code {
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
+
   &.highlighter-rouge {
-    padding: 2px 4px;
+    font-size: $code-font-size;
-    margin: 0 .3rem;
+    padding: 3px 5px;
+    margin: 0 0.15rem;
     border-radius: 4px;
-    border: 1px solid var(--code-highlighter-rouge);
+    background-color: var(--inline-code-bg);
   }
-  @at-root a>&.highlighter-rouge {
+
+  @at-root a > &.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
+    color: inherit;
   }
-  @at-root a:hover>&.highlighter-rouge {
+
+  @at-root a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
+
+  blockquote &.highlighter-rouge {
+    color: inherit;
+  }
 }
 
 td.rouge-code {
@@ -122,16 +135,17 @@ td.rouge-code {
   padding-right: 1rem;
 }
 
-/* Hide line numbers for defualt, console, and terminal code snippets */
+/* Hide line numbers for default, console, and terminal code snippets */
 div {
   &[class^='highlighter-rouge'],
+  &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
   &.language-terminal.highlighter-rouge {
     pre.lineno {
       display: none;
     }
     td.rouge-code {
-      padding: .8rem 1rem;
+      @extend %code-snippet-padding;
     }
   }
 }

assets/css/_addon/variables.scss

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

assets/css/_colors/dark-syntax.scss

@@ -7,87 +7,82 @@
 */
 
 @mixin dark-syntax {
+  /* -----  My styles ------ */
+  --highlight-bg-color: #272822;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --highlight-lineno-border-color: #3c4042;
+  --inline-code-bg: var(--highlight-bg-color);
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #818c96; } /* override Bootstrap */
+  kbd { background-color: black; }
+
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   .highlight pre { background-color: #272822; }
   .highlight .hll { background-color: #272822; }
-  .highlight .c { color: #75715e } /* Comment */
+  .highlight .c { color: #75715e; } /* Comment */
-  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+  .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
-  .highlight .k { color: #66d9ef } /* Keyword */
+  .highlight .k { color: #66d9ef; } /* Keyword */
-  .highlight .l { color: #ae81ff } /* Literal */
+  .highlight .l { color: #ae81ff; } /* Literal */
-  .highlight .n { color: #f8f8f2 } /* Name */
+  .highlight .n { color: #f8f8f2; } /* Name */
-  .highlight .o { color: #f92672 } /* Operator */
+  .highlight .o { color: #f92672; } /* Operator */
-  .highlight .p { color: #f8f8f2 } /* Punctuation */
+  .highlight .p { color: #f8f8f2; } /* Punctuation */
-  .highlight .cm { color: #75715e } /* Comment.Multiline */
+  .highlight .cm { color: #75715e; } /* Comment.Multiline */
-  .highlight .cp { color: #75715e } /* Comment.Preproc */
+  .highlight .cp { color: #75715e; } /* Comment.Preproc */
-  .highlight .c1 { color: #75715e } /* Comment.Single */
+  .highlight .c1 { color: #75715e; } /* Comment.Single */
-  .highlight .cs { color: #75715e } /* Comment.Special */
+  .highlight .cs { color: #75715e; } /* Comment.Special */
-  .highlight .ge { font-style: italic } /* Generic.Emph */
+  .highlight .ge { font-style: italic; } /* Generic.Emph */
-  .highlight .gs { font-weight: bold } /* Generic.Strong */
+  .highlight .gs { font-weight: bold; } /* Generic.Strong */
-  .highlight .kc { color: #66d9ef } /* Keyword.Constant */
+  .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
-  .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+  .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */
-  .highlight .kn { color: #f92672 } /* Keyword.Namespace */
+  .highlight .kn { color: #f92672; } /* Keyword.Namespace */
-  .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+  .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
-  .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+  .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
-  .highlight .kt { color: #66d9ef } /* Keyword.Type */
+  .highlight .kt { color: #66d9ef; } /* Keyword.Type */
-  .highlight .ld { color: #e6db74 } /* Literal.Date */
+  .highlight .ld { color: #e6db74; } /* Literal.Date */
-  .highlight .m { color: #ae81ff } /* Literal.Number */
+  .highlight .m { color: #ae81ff; } /* Literal.Number */
-  .highlight .s { color: #e6db74 } /* Literal.String */
+  .highlight .s { color: #e6db74; } /* Literal.String */
-  .highlight .na { color: #a6e22e } /* Name.Attribute */
+  .highlight .na { color: #a6e22e; } /* Name.Attribute */
-  .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+  .highlight .nb { color: #f8f8f2; } /* Name.Builtin */
-  .highlight .nc { color: #a6e22e } /* Name.Class */
+  .highlight .nc { color: #a6e22e; } /* Name.Class */
-  .highlight .no { color: #66d9ef } /* Name.Constant */
+  .highlight .no { color: #66d9ef; } /* Name.Constant */
-  .highlight .nd { color: #a6e22e } /* Name.Decorator */
+  .highlight .nd { color: #a6e22e; } /* Name.Decorator */
-  .highlight .ni { color: #f8f8f2 } /* Name.Entity */
+  .highlight .ni { color: #f8f8f2; } /* Name.Entity */
-  .highlight .ne { color: #a6e22e } /* Name.Exception */
+  .highlight .ne { color: #a6e22e; } /* Name.Exception */
-  .highlight .nf { color: #a6e22e } /* Name.Function */
+  .highlight .nf { color: #a6e22e; } /* Name.Function */
-  .highlight .nl { color: #f8f8f2 } /* Name.Label */
+  .highlight .nl { color: #f8f8f2; } /* Name.Label */
-  .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+  .highlight .nn { color: #f8f8f2; } /* Name.Namespace */
-  .highlight .nx { color: #a6e22e } /* Name.Other */
+  .highlight .nx { color: #a6e22e; } /* Name.Other */
-  .highlight .py { color: #f8f8f2 } /* Name.Property */
+  .highlight .py { color: #f8f8f2; } /* Name.Property */
-  .highlight .nt { color: #f92672 } /* Name.Tag */
+  .highlight .nt { color: #f92672; } /* Name.Tag */
-  .highlight .nv { color: #f8f8f2 } /* Name.Variable */
+  .highlight .nv { color: #f8f8f2; } /* Name.Variable */
-  .highlight .ow { color: #f92672 } /* Operator.Word */
+  .highlight .ow { color: #f92672; } /* Operator.Word */
-  .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+  .highlight .w { color: #f8f8f2; } /* Text.Whitespace */
-  .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+  .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
-  .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+  .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
-  .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+  .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
-  .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+  .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
-  .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+  .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
-  .highlight .sc { color: #e6db74 } /* Literal.String.Char */
+  .highlight .sc { color: #e6db74; } /* Literal.String.Char */
-  .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+  .highlight .sd { color: #e6db74; } /* Literal.String.Doc */
-  .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+  .highlight .s2 { color: #e6db74; } /* Literal.String.Double */
-  .highlight .se { color: #ae81ff } /* Literal.String.Escape */
+  .highlight .se { color: #ae81ff; } /* Literal.String.Escape */
-  .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+  .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
-  .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+  .highlight .si { color: #e6db74; } /* Literal.String.Interpol */
-  .highlight .sx { color: #e6db74 } /* Literal.String.Other */
+  .highlight .sx { color: #e6db74; } /* Literal.String.Other */
-  .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+  .highlight .sr { color: #e6db74; } /* Literal.String.Regex */
-  .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+  .highlight .s1 { color: #e6db74; } /* Literal.String.Single */
-  .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+  .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */
-  .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+  .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
-  .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+  .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
-  .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+  .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
-  .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+  .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
-  .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+  .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
-
-  .highlight .gh { } /* Generic Heading & Diff Header */
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-  .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+  .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
-  .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+  .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
-
+}
-
-  /*-----  My styles ------*/
-
-  --code-highlighter-rouge: #272822;
-  --highlight-bg-color: #272822;
-  --highlighter-rouge-color: #de6b18;
-
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #3c4042;
-
-  .highlight {
-    @include highlight-box-shadow(none);
-    .gp { color: #818c96; }
-  }
-  pre { color: #818c96 } /* override Bootstrap */
-  kbd { background-color: black; }
-}

assets/css/_colors/dark-typography.scss

@@ -23,18 +23,15 @@
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);
   --main-border-color: rgb(44, 45, 45);
-  --button-bg: rgb(39, 40, 33);
+  --button-bg: rgb(39, 40, 43);
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
-
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --btn-box-shadow: var(--main-wrapper-bg);
-
-  --card-bg: rgb(39, 40, 33);
   --card-header-bg: rgb(51, 50, 50);
-  --label-relate-post: rgb(164, 175, 181);
+  --label-color: rgb(108, 117, 125);
 
   /* Sidebar */
   --nav-cursor-color: rgb(183, 182, 182);
@@ -46,6 +43,7 @@
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
+  --btn-paginator-hover-color: rgb(64, 65, 66);
   --btn-active-bg: rgba(28, 52, 94, 1);
   --btn-active-border-color: rgb(66, 94, 138);
   --btn-text-color: var(--text-color);
@@ -56,22 +54,21 @@
   --toc-highlight: rgb(116, 178, 243);
   --tag-bg: rgb(41, 40, 40);
   --tag-hover: rgb(43, 56, 62);
-  --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
+  --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
-  --tb-even-border-color: var(--tb-odd-bg);
+  --tb-border-color: var(--tb-odd-bg);
-  --tb-even-border-color: var(--tb-odd-bg);
   --footnote-target-bg: rgb(63, 81, 181);
   --btn-share-color: #6c757d;
   --btn-share-hover-color: #bfc1ca;
   --relate-post-date: var(--text-muted-color);
-  --card-border-color: var(--main-wrapper-bg);
+  --card-bg: rgb(39, 40, 43);
+  --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-wrapper-bg);
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
   --search-tag-bg: var(--tag-bg);
-
   --dash-color: rgb(63, 65, 68);
 
   /* categories */
@@ -84,8 +81,11 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
-  ---footer-link: rgb(146, 146, 146);
+  --footer-link: rgb(171, 171, 171);
 
+  .post-content img {
+    filter: brightness(90%);
+  }
 
   hr {
     border-color: var(--main-border-color);
@@ -95,10 +95,10 @@
   nav[data-toggle=toc] .nav-link.active,
   nav[data-toggle=toc] .nav-link.active:focus,
   nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav>li>a:focus,
+  nav[data-toggle=toc] .nav > li > a:focus,
-  nav[data-toggle=toc] .nav>li>a:hover {
+  nav[data-toggle=toc] .nav > li > a:hover {
-    color: var(--toc-highlight)!important;
+    color: var(--toc-highlight) !important;
-    border-left-color: var(--toc-highlight)!important;
+    border-left-color: var(--toc-highlight) !important;
   }
 
   /* categories */
@@ -123,8 +123,13 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image: linear-gradient(to left,
+    background-image: linear-gradient(
-      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30));
   }
 
 } // dark-scheme

assets/css/_colors/light-syntax.scss

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

assets/css/_colors/light-typography.scss

@@ -7,118 +7,70 @@
 */
 
 @mixin light-scheme {
-
+  /* Common */
   --body-bg: #fafafa;
-
   --mask-bg: #c1c3c5;
-
   --main-wrapper-bg: white;
-
   --main-border-color: #f3f3f3;
-
   --btn-border-color: #e9ecef;
-
+  --text-color: #333333;
-  --text-color: #343a40;
-
   --blockquote-border-color: #eee;
-
   --blockquote-text-color: #9a9a9a;
-
   --link-color: #2a408e;
-
   --link-underline-color: #dee2e6;
-
   --text-muted-color: gray;
-
+  --tb-odd-bg: #fbfcfd;
-  --tb-odd-bg: #f8f9fa;
+  --tb-border-color: #eaeaea;
-
-  --tb-even-border-color: rgba(210, 215, 217, 0.75);
-
   --button-bg: #fff;
-
   --btn-backtotop-color: #686868;
-
   --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
-
   --btn-box-shadow: #eaeaea;
 
   /* Sidebar */
-
   --sidebar-bg: radial-gradient(
-    circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
+    circle,
-
+    rgba(42, 30, 107, 1) 0%,
+    rgba(35, 37, 46, 1) 100%);
   --nav-cursor-color: #fcfcfc;
 
   /* Topbar */
-
   --topbar-wrapper-bg: white;
-
   --topbar-text-color: rgb(78, 78, 78);
-
-  --search-wrapper-bg: #fff;
-
   --search-wrapper-bg: #f5f5f5;
-
   --search-tag-bg: #f8f9fa;
-
   --search-icon-color: #c2c6cc;
-
   --input-focus-border-color: var(--btn-border-color);
 
-  /* Home */
+  /* Home page */
-
   --post-list-text-color: dimgray;
-
   --btn-patinator-text-color: #555555;
-
+  --btn-paginator-hover-color: #e9ecef;
   --btn-active-bg: #2a408e;
-
   --btn-active-border-color: #007bff;
-
   --btn-text-color: #f8f8f8;
-
   --btn-paginator-border-color: #f1f1f1;
-
   --btn-paginator-shadow: #4b92d2;
 
   /* Posts */
-
   --btn-share-hover-color: var(--link-color);
-
   --card-border-color: #f1f1f1;
-
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
-
+  --label-color: #808080;
-  --label-relate-post: #353a3d;
+  --relate-post-date: rgba(30, 55, 70, 0.4);
-
-  --relate-post-date: rgba(30, 55, 70, .4);
-
   --tag-bg: rgba(0, 0, 0, 0.075);
-
   --tag-border: #dee2e6;
-
   --tag-shadow: var(--btn-border-color);
-
   --tag-hover: rgb(222, 226, 230);
-
   --categories-hover-bg: var(--btn-border-color);
-
   --dash-color: silver;
 
-
   /* Archive */
-
   --timeline-color: rgba(0, 0, 0, 0.075);
-
   --timeline-node-bg: #c2c6cc;
-
   --timeline-year-dot-color: #ffffff;
 
   /* Footer */
-
   --footer-bg-color: #ffffff;
-
   --footnote-target-bg: lightcyan;
-
+  --footer-link: #424242;
-  ---footer-link: inherit;
+} // light-scheme
-}

assets/css/archives.scss

@@ -1,12 +1,13 @@
 ---
+# Style for Archives
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
+
-  Style for Archives
+
-  v2.0
+{% include_relative _addon/main.scss %}
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
-*/
 
 %date-timeline {
   content: "";
@@ -18,6 +19,10 @@
   background-color: var(--timeline-color);
 }
 
+%date-font {
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
 #archives {
   letter-spacing: 0.03rem;
   li {
@@ -37,7 +42,7 @@
 
   span.lead {
     font-size: 1.5rem;
-    font-family: 'Oswald', sans-serif;
+    @extend %date-font;
     position: relative;
     left: 8px;
 
@@ -75,7 +80,7 @@
     &.month {
       width: 1.4rem;
       text-align: center;
-      font-family: 'Oswald', sans-serif;
+      @extend %date-font;
       ~a::before {
         /* A dot for Month and Day */
         content: "";
@@ -96,7 +101,7 @@
     }
     &.day {
       font-size: 85%;
-      font-family: sans-serif;
+      font-family: 'Lato', sans-serif;
       text-align: center;
       margin-right: -2px;
       width: 1.2rem;

assets/css/categories.scss

@@ -1,12 +1,13 @@
 ---
+# Style for Tab Categories
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
+
-  Style for Tab Categories
+
-  v2.0
+{% include_relative _addon/main.scss %}
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
-*/
 
 %category-icon-color {
   color: gray;

assets/css/category-tag.scss

@@ -1,13 +1,13 @@
 ---
+# Style for page Category and Tag
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
+
-  Style for page Category and Tag
+
-  v2.0
+{% include_relative _addon/main.scss %}
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
-*/
-@import "_addon/module";
 
 #page-category, #page-tag {
   ul>li {

assets/css/home.scss

@@ -1,101 +1,111 @@
 ---
+# Style for Homepage
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
-  Style for Homepage
-  v2.0
-  https://github.com/cotes2020/jekyll-theme-chirpy
-  © 2019 Cotes Chung
-  MIT License
-*/
 
+{% include_relative _addon/main.scss %}
 
 #post-list {
   margin-top: 1rem;
   padding-right: .5rem;
-  .post-meta {
+
-    i:not(:first-child) { // post-meta icons on HOME
+  .post-preview {
-      margin-left: 1.5rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--main-border-color);
+
+    h1 {
+      font-size: 1.4rem;
+      margin: 0;
+      ~i { // pinned icon
+        font-size: .86rem;
+      }
     }
-  }
+
-}
+    .post-meta {
+      i {
+        font-size: .73rem;
+        &:not(:first-child) { // post-meta icons on the homepage
+          margin-left: 1.5rem;
+        }
+      }
+    }
+
+    .post-content {
+      margin-top: .6rem;
+      margin-bottom: .6rem;
+      color: var(--post-list-text-color);
+      >p {
+        /* Make preview shorter on the homepage */
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+  } // .post-preview
+
+} // #post-list
 
 .pagination {
   font-size: 1rem;
   a:hover {
     text-decoration: none;
   }
-}
 
-.post-preview {
+  .page-item {
-  padding-top: 1.5rem;
+    .page-link {
-  padding-bottom: 1rem;
+      color: var(--btn-patinator-text-color);
-  border-bottom: 1px solid var(--main-border-color);
+      width: 2.5rem;
-  >h1 {
+      height: 2.5rem;
-    font-size: 1.4rem;
+      padding: 0;
-    margin: 0;
+      text-align: center;
-  }
-  i.far { /* fontawesome icons */
-    font-size: 86%;
-  }
-  .post-content {
-    margin-top: .6rem;
-    margin-bottom: .6rem;
-    color: var(--post-list-text-color);
-    >p { /* Make preview shorter in Home page*/
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
       display: -webkit-box;
-      -webkit-line-clamp: 2;
+      display: flex;
-      -webkit-box-orient: vertical;
+      -webkit-box-pack: center;
-    }
+      justify-content: center;
-  }
+      -webkit-box-align: center;
-}
+      align-items: center;
-
+      border-radius: 50%;
-.page-item {
+      border: 1px solid var(--btn-paginator-border-color);
-  .page-link {
+      font-family: 'Lato', sans-serif;
-    color: var(--btn-patinator-text-color);
-    width: 2.5rem;
-    height: 2.5rem;
-    padding: 0;
-    text-align: center;
-    display: -webkit-box;
-    display: flex;
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    align-items: center;
-    border-radius: 50%;
-    border: 1px solid var(--btn-paginator-border-color);
-    font-family: 'Lato', sans-serif;
-    background-color: var(--button-bg);
-  }
-  &.active {
-    .page-link {
-      background-color: var(--btn-active-bg);
-      border-color: var(--btn-active-border-color);
-      box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
-      color: var(--btn-text-color);
-    }
-  }
-  &.disabled {
-    cursor: not-allowed;
-    .page-link {
-      color: rgba(108, 117, 125, 0.57);
-      border-color: var(--btn-paginator-border-color);
       background-color: var(--button-bg);
+      &:hover {
+        background-color: var(--btn-paginator-hover-color)
+      }
     }
-  }
+    &.active {
-  &:first-child .page-link,
+      .page-link {
-  &:last-child .page-link {
+        background-color: var(--btn-active-bg);
-    border-radius: 50%;
+        border-color: var(--btn-active-border-color);
-  }
+        box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
-  &:not(:last-child) {
+        color: var(--btn-text-color);
-    margin-right: 0.6rem;
+      }
-  }
+    }
-
+    &.disabled {
-} // .page-item
+      cursor: not-allowed;
+      .page-link {
+        color: rgba(108, 117, 125, 0.57);
+        border-color: var(--btn-paginator-border-color);
+        background-color: var(--button-bg);
+      }
+    }
+    &:first-child .page-link,
+    &:last-child .page-link {
+      border-radius: 50%;
+    }
+    &:not(:last-child) {
+      margin-right: 0.7rem;
+    }
+  } // .page-item
 
+} // .pagination
 
 @media all and (max-width: 576px) {
   #post-list .post-meta>span i:not(:first-child) {
@@ -112,14 +122,19 @@
 
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
-  .pagination {
+
-    font-size: .85rem;
+  #post-list {
+    margin-top: 1.5rem;
   }
 
-  .page-item .page-link {
+  .pagination {
-    width: 2.2rem;
+    font-size: .85rem;
-    height: 2.2rem;
+    .page-item .page-link {
+      width: 2.2rem;
+      height: 2.2rem;
+    }
   }
+
 }
 
 /* Pannel hidden */

assets/css/page.scss

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

assets/css/post.scss

@@ -1,13 +1,14 @@
 ---
+# Post-specific style
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2019 Cotes Chung
+# MIT License
 ---
-/*!
+
-  Post-specific style
+
-  v2.0
+{% include_relative _addon/main.scss %}
-  https://github.com/cotes2020/jekyll-theme-chirpy
+{% include_relative _addon/syntax.scss %}
-  © 2019 Cotes Chung
-  MIT License
-*/
-@import "_addon/variables";
 
 $prompt-older: "{{ site.data.label.post.button.previous }}";
 $prompt-newer: "{{ site.data.label.post.button.next }}";
@@ -26,28 +27,41 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.post img {
+.post-content {
-  margin-top: .5rem;
+  > ol, > ul, > dl {
-  margin-bottom: 1.5rem;
+    padding-left: 2rem;
-  max-width: 100%;
+    li+li {
-  height: auto;
+      margin-top: 0.3rem;
-  // filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
+    }
-  position: relative;
+  }
-  left: 50%;
+  li {
-  -webkit-transform: translateX(-50%);
+    > ol, > ul, > dl { // sub list
-  -ms-transform: translateX(-50%);
+      padding-left: 2rem;
-  transform: translateX(-50%);
+    }
+    > p {
+      margin: 1rem 0 0.8rem;
+    }
+  }
+  .post-preview-img {
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+    @include align-center;
+  }
 }
 
 .post-tail-wrapper {
-  margin-top: 5rem;
+  margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
 
+.post-tags {
+  line-height: 2rem;
+}
+
 .post-navigation {
   padding-top: 3rem;
-  padding-bottom: 2rem;
+  padding-bottom: 4rem;
 
   .btn {
     @include btn-post-nav;
@@ -118,6 +132,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 #toc-wrapper {
+  margin-top: 7rem;
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
   position: sticky;
@@ -128,9 +143,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     top: 6rem;
   }
   >h3 {
-    font-size: 1rem;
+    @include label(inherit, 600);
-    font-family: 'Oswald', sans-serif;
-    color: gray;
   }
 }
 
@@ -145,9 +158,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #related-posts {
   >h3 {
-    color: gray;
+    @include label(1.1rem, 600);
-    font-size: 1.1rem;
-    font-family: 'Oswald', sans-serif;
   }
   .card {
     border: 1px solid var(--card-border-color);
@@ -157,7 +168,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     -moz-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
     h3 {
-      color: var(--label-relate-post);
+      color: var(--text-color);
     }
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
@@ -203,6 +214,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #post-extend-wrapper {
   min-height: 2rem;
+  #disqus_thread {
+    margin-bottom: 2rem;
+  }
 }
 
 .post-tail-bottom a {
@@ -260,7 +274,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 
 .share-label {
-  font-family: 'Oswald', sans-serif;
+  @include label(inherit, 400, inherit);
   &::after {
     content: ":";
   }
@@ -268,8 +282,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 .license-wrapper {
   line-height: 1.2rem;
-  .license-text>a {
+  >a {
     font-weight: 600;
+    &:hover {
+      @extend %link-hover;
+    }
   }
   i {
     font-weight: 400;
@@ -282,10 +299,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 @media all and (max-width: 576px) {
   .post-tail-bottom {
-    -ms-flex-wrap: wrap!important;
+    -ms-flex-wrap: wrap-reverse!important;
-    flex-wrap: wrap!important;
+    flex-wrap: wrap-reverse!important;
     >div:first-child {
-      margin-bottom: 1rem;
+      width: 100%;
+      margin-top: 1rem;
     }
   }
 }
@@ -324,47 +342,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  .post img {
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-
   .post-navigation {
     padding-left: 0;
     padding-right: 0;
     margin-left: -.5rem;
     margin-right: -.5rem;
   }
-
-}
-
-/*
-  The following resposive design aim to
-  make #post-extend-wrapper margin-right same as pannel's width
-*/
-@media all and (min-width: 1200px) {
-  #post-extend-wrapper {
-    margin-right: 25%;
-  }
-}
-
-@media all and (min-width: 1460px) {
-  #post-extend-wrapper {
-    margin-right: 300px;
-  }
-}
-
-@media all and (min-width: 1650px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 10 + 300px);
-  }
-}
-
-@media all and (min-width: 1700px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 8 + 300px);
-  }
 }

assets/css/tags.scss

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

assets/data/pv-data.json

@@ -1,13 +0,0 @@
----
-layout: compress
----
-
-const proxyData = '{"url": "{{ site.google_analytics.pv.proxy_endpoint }}"}';
-
-{%- capture pv_data -%}
-  {%- if site.google_analytics.pv.cache and site.google_analytics.pv.enabled -%}
-    {% include_relative pageviews.json %}
-  {%- endif -%}
-{%- endcapture -%}
-
-const pageviews = '{{ pv_data }}';

assets/img/favicons/manifest.json

@@ -1,51 +1,58 @@
 ---
 layout: compress
-
+#
 # A part of the Favicons
-# v2.0
+# Chirpy v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
 # © 2019 Cotes Chung
 # MIT License
 ---
 
+{% assign icon_url = "/assets/img/favicons" | relative_url %}
+
 {
- "name": "App",
+  "name": "{{ site.title }}",
- "icons": [
+  "short_name": "{{ site.title }}",
-  {
+  "description": "{{ site.description }}",
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-36x36.png",
+  "icons": [
-   "sizes": "36x36",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-36x36.png",
-   "density": "0.75"
+      "sizes": "36x36",
-  },
+      "type": "image/png",
-  {
+      "density": "0.75"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-48x48.png",
+    },
-   "sizes": "48x48",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-48x48.png",
-   "density": "1.0"
+      "sizes": "48x48",
-  },
+      "type": "image/png",
-  {
+      "density": "1.0"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-72x72.png",
+    },
-   "sizes": "72x72",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-72x72.png",
-   "density": "1.5"
+      "sizes": "72x72",
-  },
+      "type": "image/png",
-  {
+      "density": "1.5"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-96x96.png",
+    },
-   "sizes": "96x96",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-96x96.png",
-   "density": "2.0"
+      "sizes": "96x96",
-  },
+      "type": "image/png",
-  {
+      "density": "2.0"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-144x144.png",
+    },
-   "sizes": "144x144",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-144x144.png",
-   "density": "3.0"
+      "sizes": "144x144",
-  },
+      "type": "image/png",
-  {
+      "density": "3.0"
-   "src": "{{ site.baseurl }}\/assets\/img\/favicons\/android-icon-192x192.png",
+    },
-   "sizes": "192x192",
+    {
-   "type": "image\/png",
+      "src": "{{ icon_url }}/android-icon-192x192.png",
-   "density": "4.0"
+      "sizes": "192x192",
-  }
+      "type": "image/png",
- ]
+      "density": "4.0"
-}
+    }],
+    "start_url": "{{ '/index.html' | relative_url }}",
+    "display": "fullscreen",
+    "theme_color": "#2a1e6b",
+    "background_color": "white"
+}

assets/js/_commons.js

@@ -0,0 +1,21 @@
+/*!
+  Aggregation of common JS.
+  Chirpy@2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+*/
+
+{% include_relative _commons/back-to-top.js %}
+
+{% include_relative _commons/search-display.js %}
+
+{% include_relative _commons/sidebar.js %}
+
+{% include_relative _commons/topbar-switch.js %}
+
+{% include_relative _commons/topbar-title.js %}
+
+{% include_relative _commons/copy-link.js %}
+
+{% include_relative _utils/tooltip-loader.js %}

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

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

assets/js/_commons/copy-link.js

@@ -0,0 +1,22 @@
+/*
+ * Copy current page url to clipboard.
+ * v2.1
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2020 Cotes Chung
+ * MIT License
+ */
+
+function copyLink(url) {
+  if (!url || 0 === url.length) {
+    url = window.location.href;
+  }
+  
+  var $temp = $("<input>");
+  $("body").append($temp);
+  $temp.val(url).select();
+  document.execCommand("copy");
+  $temp.remove();
+
+  alert("Link copied successfully!");
+
+}

assets/js/_commons/search-display.js

@@ -0,0 +1,155 @@
+/*
+* This script make #search-result-wrapper switch to unloaded or shown automatically.
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT License
+*/
+
+$(function() {
+
+  var btnSbTrigger = $("#sidebar-trigger");
+  var btnSearchTrigger = $("#search-trigger");
+  var btnCancel = $("#search-cancel");
+  var btnClear = $("#search-cleaner");
+
+  var main = $("#main");
+  var topbarTitle = $("#topbar-title");
+  var searchWrapper = $("#search-wrapper");
+  var resultWrapper = $("#search-result-wrapper");
+  var results = $("#search-results");
+  var input = $("#search-input");
+  var hints = $("#search-hints");
+
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
+  var scrollBlocker = (function() {
+    var offset = 0;
+    return {
+      block() {
+        offset = $(window).scrollTop();
+      },
+      release() {
+        $("html,body").scrollTop(offset);
+      },
+      getOffset() {
+        return offset;
+      }
+    };
+  }());
+
+  var 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");
+      }
+    };
+  }());
+
+  var resultSwitch = (function() {
+    var visable = false;
+
+    return {
+      on() {
+        if (!visable) {
+          resultWrapper.removeClass("unloaded");
+          main.addClass("hidden");
+
+          visable = true;
+          scrollBlocker.block();
+        }
+      },
+      off() {
+        if (visable) {
+          results.empty();
+          if (hints.hasClass("unloaded")) {
+            hints.removeClass("unloaded");
+          }
+          resultWrapper.addClass("unloaded");
+          btnClear.removeClass("visable");
+          main.removeClass("hidden");
+
+          input.val("");
+          visable = false;
+
+          scrollBlocker.release();
+        }
+      },
+      isVisable() {
+        return visable;
+      }
+    };
+
+  }());
+
+
+  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("keyup", function(e) {
+    if (e.keyCode === 8 && input.val() === "") {
+      if (!isMobileView()) {
+        resultSwitch.off();
+      } else {
+        hints.removeClass("unloaded");
+      }
+    } else {
+      if (input.val() !== "") {
+        resultSwitch.on();
+
+        if (!btnClear.hasClass("visible")) {
+          btnClear.addClass("visable");
+        }
+
+        if (isMobileView()) {
+          hints.addClass("unloaded");
+        }
+      }
+    }
+  });
+
+  btnClear.on("click", function() {
+    input.val("");
+    if (isMobileView()) {
+      hints.removeClass("unloaded");
+      results.empty();
+    } else {
+      resultSwitch.off();
+    }
+    input.focus();
+    btnClear.removeClass("visable");
+  });
+
+});

assets/js/_commons/sidebar.js

@@ -0,0 +1,34 @@
+/**
+ * Expand or close the sidebar in mobile screens.
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2018-2019 Cotes Chung
+ * MIT License
+ */
+
+$(function() {
+
+  var sidebarUtil = (function() {
+    const ATTR_DISPLAY = "sidebar-display";
+    var isExpanded = false;
+    var 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);
+
+});

assets/js/_commons/topbar-switch.js

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

assets/js/_commons/topbar-title.js

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

assets/js/_home-post.js

@@ -0,0 +1,22 @@
+/*!
+  JS group for layout Home or Post
+  Chirpy v2.3
+  https://github.com/cotes2020/jekyll-theme-chirpy
+  © 2020 Cotes Chung
+  MIT License
+*/
+
+{% include_relative _commons.js %}
+
+{% include_relative _utils/timeago.js %}
+
+
+{% if site.google_analytics.pv.enabled %}
+
+  {% include_relative _pv-config.js %}
+
+  {% include_relative _utils/pageviews.js %}
+
+  {% include_relative lib/_countUp.min.js %}
+
+{% endif %}

assets/js/_pv-config.js

@@ -0,0 +1,14 @@
+/*!
+  PV configuration and Javascript conversion.
+*/
+
+const proxyEndpoint = "{{ site.google_analytics.pv.proxy_endpoint }}";
+
+
+{% if site.google_analytics.pv.cache and site.google_analytics.pv.enabled %}
+  {% assign enabled = true %}
+{% else %}
+  {% assign enabled = false %}
+{% endif %}
+
+const pvCacheEnabled = {{ enabled }};

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

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

assets/js/_src/_commons/copy-link.js

@@ -1,20 +0,0 @@
-/*
-* Copy current page url to clipboard.
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT License
-*/
-
-function copyLink(url) {
-  if (!url || 0 === url.length)
-  url = window.location.href;
-  var $temp = $("<input>");
-
-  $("body").append($temp);
-  $temp.val(url).select();
-  document.execCommand("copy");
-  $temp.remove();
-
-  alert("Link copied successfully!");
-}

assets/js/_src/_commons/search-display.js

@@ -1,156 +0,0 @@
-/*
-* This script make #search-result-wrapper switch to unloaded or shown automatically.
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT License
-*/
-
-$(function() {
-
-  var btnSbTrigger = $('#sidebar-trigger');
-  var btnSearchTrigger = $('#search-trigger');
-  var btnCancel = $('#search-cancel');
-  var btnClear = $('#search-cleaner');
-
-  var main = $('#main');
-  var topbarTitle = $('#topbar-title');
-  var searchWrapper = $('#search-wrapper');
-  var resultWrapper = $('#search-result-wrapper');
-  var results = $('#search-results');
-  var input = $('#search-input');
-  var hints = $('#search-hints');
-
-
-  /*--- Actions in small screens (Sidebar unloaded) ---*/
-
-  var scrollBlocker = (function() {
-    var offset = 0;
-    return {
-      block: function() {
-        offset = $(window).scrollTop();
-        $('body').addClass('no-scroll');
-      },
-      release: function() {
-        $('body').removeClass('no-scroll');
-        $('html,body').scrollTop(offset);
-      },
-      getOffset: function() {
-        return offset;
-      }
-    }
-  })();
-
-  var mobileSearchBar = (function() {
-    return {
-      on: function() {
-        btnSbTrigger.addClass('unloaded');
-        topbarTitle.addClass('unloaded');
-        btnSearchTrigger.addClass('unloaded');
-        searchWrapper.addClass('d-flex');
-        btnCancel.addClass('loaded');
-      },
-      off: function() {
-        btnCancel.removeClass('loaded');
-        searchWrapper.removeClass('d-flex');
-        btnSbTrigger.removeClass('unloaded');
-        topbarTitle.removeClass('unloaded');
-        btnSearchTrigger.removeClass('unloaded');
-      }
-    }
-  })();
-
-  var resultSwitch = (function() {
-    var visable = false;
-
-    return {
-      on: function() {
-        if (!visable) {
-          resultWrapper.removeClass('unloaded');
-          main.addClass('hidden');
-
-          visable = true;
-          scrollBlocker.block();
-        }
-      },
-      off: function() {
-        if (visable) {
-          results.empty();
-          if (hints.hasClass('unloaded')) {
-            hints.removeClass('unloaded');
-          }
-          resultWrapper.addClass('unloaded');
-          btnClear.removeClass('visable');
-          main.removeClass('hidden');
-
-          input.val('');
-          visable = false;
-
-          scrollBlocker.release();
-        }
-      },
-      isVisable: function() {
-        return visable;
-      }
-    }
-  })();
-
-
-  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('keyup', function(e) {
-    if (e.keyCode == 8 && input.val() == '') {
-      if (!isMobileView()) {
-        resultSwitch.off();
-      } else {
-        hints.removeClass('unloaded');
-      }
-    } else {
-      if (input.val() != '') {
-        resultSwitch.on();
-
-        if (!btnClear.hasClass('visible')) {
-          btnClear.addClass('visable');
-        }
-
-        if (isMobileView()) {
-          hints.addClass('unloaded');
-        }
-      }
-    }
-  });
-
-  btnClear.on('click', function() {
-    input.val('');
-    if (isMobileView()) {
-      hints.removeClass('unloaded');
-      results.empty();
-    } else {
-      resultSwitch.off();
-    }
-    input.focus();
-    btnClear.removeClass('visable');
-  });
-
-});

assets/js/_src/_commons/sidebar.js

@@ -1,56 +0,0 @@
-/**
- * Expand or close the sidebar in mobile screens.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
- */
-$(function(){
-
-  var isExpanded = false;
-
-  $("#sidebar-trigger").click(function() {
-    if (isExpanded == false) {
-      $("#sidebar").addClass("sidebar-expand");
-      openModal();
-      isExpanded = true;
-    }
-  });
-
-  $("#mask").click(function() {
-    $("#sidebar").removeClass("sidebar-expand");
-    closeModal();
-    isExpanded = false;
-  });
-
-  /**
-  * ModalHelper helpers resolve the modal scrolling issue on mobile devices
-  * https://github.com/twbs/bootstrap/issues/15852
-  * requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
-  */
-  var ModalHelper = (function(bodyCls) {
-    var scrollTop;
-    return {
-      afterOpen: function() {
-        scrollTop = document.scrollingElement.scrollTop;
-        document.body.classList.add(bodyCls);
-        document.body.style.top = -scrollTop + 'px';
-      },
-      beforeClose: function() {
-        document.body.classList.remove(bodyCls);
-        // scrollTop lost after set position:fixed, restore it back.
-        document.scrollingElement.scrollTop = scrollTop;
-        document.body.style.top = '';
-      }
-    };
-  })('no-scroll');
-
-  function openModal() {
-    ModalHelper.afterOpen();
-  }
-
-  function closeModal() {
-    ModalHelper.beforeClose();
-  }
-
-});

assets/js/_src/_commons/topbar-switch.js

@@ -1,66 +0,0 @@
-/*
- * Hide Header on scroll down
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
- */
-$(function() {
-
-  var didScroll;
-  var lastScrollTop = 0;
-  var delta = 5;
-  var topbarHeight = $('#topbar-wrapper').outerHeight();
-
-  $(window).scroll(function(event) {
-    if ($("#topbar-title").is(":hidden")) { // Not in small screens
-      didScroll = true;
-    }
-  });
-
-  setInterval(function() {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
-
-  function hasScrolled() {
-    var st = $(this).scrollTop();
-
-    // Make sure they scroll more than delta
-    if (Math.abs(lastScrollTop - st) <= delta)
-      return;
-
-    if (st > lastScrollTop && st > topbarHeight) {
-      // Scroll Down
-      $('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
-
-      if ( $('#toc-wrapper').length > 0) {
-        $('#toc-wrapper').removeClass('topbar-down');
-      }
-
-      if ( $('.access').length > 0) {
-        $('.access').removeClass('topbar-down');
-      }
-
-      if ($('#search-input').is(':focus')) {
-        $('#search-input').blur(); // remove focus
-      }
-
-    } else {
-      // Scroll Up
-      if (st + $(window).height() < $(document).height()) {
-        $('#topbar-wrapper').removeClass('topbar-up').addClass('topbar-down');
-        if ( $('#toc-wrapper').length > 0) {
-          $('#toc-wrapper').addClass('topbar-down');
-        }
-        if ( $('.access').length > 0) {
-          $('.access').addClass('topbar-down');
-        }
-      }
-    }
-
-    lastScrollTop = st;
-  }
-});

assets/js/_src/_commons/topbar-title.js

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

assets/js/_src/category-collapse.js

@@ -1,33 +0,0 @@
-/*
- * Tab 'Categories' expand/close effect.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
- */
-
-$(function() {
-  var child_prefix = "l_";
-  var parent_prefix = "h_";
-
-  // close up top-category
-  $(".collapse").on("hide.bs.collapse", function() { // Bootstrap collapse events.
-    var parent_id = parent_prefix + $(this).attr('id').substring(child_prefix.length);
-    if (parent_id) {
-      $("#" + parent_id + " .far.fa-folder-open").attr("class", "far fa-folder fa-fw");
-      $("#" + parent_id + " i.fas").addClass("rotate");
-      $("#" + parent_id).removeClass("hide-border-bottom");
-    }
-  });
-
-  // expand the top category
-  $(".collapse").on("show.bs.collapse", function() {
-    var parent_id = parent_prefix + $(this).attr('id').substring(child_prefix.length);
-    if (parent_id) {
-      $("#" + parent_id + " .far.fa-folder").attr("class", "far fa-folder-open fa-fw");
-      $("#" + parent_id + " i.fas").removeClass("rotate");
-      $("#" + parent_id).addClass("hide-border-bottom");
-    }
-  });
-
-});

assets/js/_src/pageviews.js

@@ -1,224 +0,0 @@
-/**
- * Count pageviews form GA or local cache file.
- *
- * Dependences:
- *   - jQuery
- *   - countUp.js <https://github.com/inorganik/countUp.js>
- *
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2018-2019 Cotes Chung
- * MIT License
- */
-
-function countUp(min, max, destId) {
-  if (min < max) {
-    var numAnim = new CountUp(destId, min, max);
-    if (!numAnim.error) {
-      numAnim.start();
-    } else {
-      console.error(numAnim.error);
-    }
-  }
-}
-
-
-function countPV(path, rows) {
-  /* path permalink looks like: '/posts/post-title/' */
-  var fileName = path.replace(/\/posts\//g, '').replace(/\//g, '.html'); /* e.g. post-title.html */
-  var count = 0;
-
-  var _v2_url = path.replace(/posts\//g, ''); /* the v2.0+ blog permalink: "/post-title/" */
-
-  for (var i = 0; i < rows.length; ++i) {
-    var gaPath = rows[i][0];
-    if (gaPath == path ||
-      gaPath == _v2_url ||
-      gaPath.concat('/') == _v2_url ||
-      gaPath.slice(gaPath.lastIndexOf('/') + 1) === fileName) { // old permalink record
-      count += parseInt(rows[i][1]);
-    }
-  }
-
-  return count;
-}
-
-
-function tacklePV(rows, path, elem, hasInit) {
-  var count = countPV(path, rows);
-  count = (count == 0 ? 1 : count);
-
-  if (!hasInit) {
-    elem.text(new Intl.NumberFormat().format(count));
-  } else {
-    var initCount = parseInt(elem.text().replace(/,/g, ''));
-    if (count > initCount) {
-      countUp(initCount, count, elem.attr('id'));
-    }
-  }
-}
-
-
-function displayPageviews(data) {
-  if (data === undefined) {
-    return;
-  }
-
-  var hasInit = getInitStatus();
-  var rows = data.rows;
-
-  if ($("#post-list").length > 0) { // the Home page
-    $(".post-preview").each(function() {
-      var path = $(this).children("h1").children("a").attr("href");
-      tacklePV(rows, path, $(this).find('.pageviews'), hasInit);
-    });
-
-  } else if ($(".post").length > 0) { // the post
-    var path = window.location.pathname;
-    tacklePV(rows, path, $('#pv'), hasInit);
-  }
-}
-
-
-var getInitStatus = (function() {
-  var hasInit = false;
-  return function() {
-    let ret = hasInit;
-    if (!hasInit) {
-      hasInit = true;
-    }
-    return ret;
-  }
-})();
-
-
-var PvCache = (function() {
-  const KEY_PV = "pv";
-  const KEY_CREATION = "pv-created-date";
-  const KEY_PV_TYPE = "pv-type";
-
-  var PvType = {
-    ORIGIN: "origin",
-    PROXY: "proxy"
-  };
-
-  function get(key) {
-    return localStorage.getItem(key);
-  }
-
-  function set(key, val) {
-    localStorage.setItem(key, val);
-  }
-
-  return {
-    getData: function() {
-      return JSON.parse(localStorage.getItem(KEY_PV) );
-    },
-    saveOriginCache: function(pv) {
-      set(KEY_PV, pv);
-      set(KEY_PV_TYPE, PvType.ORIGIN );
-      set(KEY_CREATION, new Date().toJSON() );
-    },
-    saveProxyCache: function(pv) {
-      set(KEY_PV, pv);
-      set(KEY_PV_TYPE, PvType.PROXY );
-      set(KEY_CREATION, new Date().toJSON() );
-    },
-    isOriginCache: function() {
-      return get(KEY_PV_TYPE) == PvType.ORIGIN;
-    },
-    isProxyCache: function() {
-      return get(KEY_PV_TYPE) == PvType.PROXY;
-    },
-    isExpired: function() {
-      if (PvCache.isOriginCache() ) {
-        let date = new Date(get(KEY_CREATION));
-        date.setDate(date.getDate() + 1); // fetch origin-data every day
-        return Date.now() >= date.getTime();
-
-      } else if (PvCache.isProxyCache() ) {
-        let date = new Date(get(KEY_CREATION) );
-        date.setHours(date.getHours() + 1); // proxy-data is updated every hour
-        return Date.now() >= date.getTime();
-      }
-      return false;
-    },
-    getAllPagevies: function() {
-      return PvCache.getData().totalsForAllResults["ga:pageviews"];
-    },
-    newerThan: function(pv) {
-      return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
-    }
-  };
-
-})(); // PvCache
-
-
-function fetchOriginPageviews(pvData) {
-  if (pvData === undefined) {
-    return;
-  }
-  displayPageviews(pvData);
-  PvCache.saveOriginCache(JSON.stringify(pvData));
-}
-
-
-function fetchProxyPageviews() {
-  let proxy = JSON.parse(proxyData); // see file '/assets/data/pv-data.json'
-  $.ajax({
-    type: 'GET',
-    url: proxy.url,
-    dataType: 'jsonp',
-    jsonpCallback: "displayPageviews",
-    success: function(data, textStatus, jqXHR) {
-      PvCache.saveProxyCache(JSON.stringify(data));
-    },
-    error: function(jqXHR, textStatus, errorThrown) {
-      console.log("Failed to load pageviews from proxy server: " + errorThrown);
-    }
-  });
-}
-
-
-$(function() {
-
-  if ($('.pageviews').length > 0) {
-
-    let originPvData = pageviews ? JSON.parse(pageviews) : undefined;
-    let cache = PvCache.getData();
-
-    if (cache) {
-      if (PvCache.isExpired()) {
-        if (PvCache.isProxyCache() ) {
-          if (originPvData) {
-            if (PvCache.newerThan(originPvData)) {
-              displayPageviews(cache);
-            } else {
-              fetchOriginPageviews(originPvData);
-            }
-          }
-
-          fetchProxyPageviews();
-
-        } else if (PvCache.isOriginCache() ) {
-          fetchOriginPageviews(originPvData);
-          fetchProxyPageviews();
-        }
-
-      } else { // still valid
-        displayPageviews(cache);
-
-        if (PvCache.isOriginCache() ) {
-          fetchProxyPageviews();
-        }
-
-      }
-
-    } else {
-      fetchOriginPageviews(originPvData);
-      fetchProxyPageviews();
-    }
-
-  }
-
-});

assets/js/_src/timeago.js

@@ -1,78 +0,0 @@
-/*
- * Caculate the Timeago
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2019 Cotes Chung
- * MIT Licensed
- */
-
-$(function() {
-
-  function timeago(date, isLastmod) {
-    var now = new Date();
-    var past = new Date(date);
-    var seconds = Math.floor((now - past) / 1000);
-
-    var year = Math.floor(seconds / 31536000);
-    if (year >= 1) {
-      return year + " year" + (year > 1 ? "s" : "") + " ago";
-    }
-
-    var month = Math.floor(seconds / 2592000);
-    if (month >= 1) {
-      return month + " month" + (month > 1 ? "s" : "") + " ago";
-    }
-
-    var week = Math.floor(seconds / 604800);
-    if (week >= 1) {
-      return week + " week" + (week > 1 ? "s" : "") + " ago";
-    }
-
-    var day = Math.floor(seconds / 86400);
-    if (day >= 1) {
-      return day + " day" + (day > 1 ? "s" : "") + " ago";
-    }
-
-    var hour = Math.floor(seconds / 3600);
-    if (hour >= 1) {
-      return hour + " hour" + (hour > 1 ? "s" : "") + " ago";
-    }
-
-    var minute = Math.floor(seconds / 60);
-    if (minute >= 1) {
-      return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
-    }
-
-    return (isLastmod? "just" : "Just") + " now";
-  }
-
-
-  function updateTimeago() {
-    $(".timeago").each(function() {
-      if ($(this).children("i").length > 0) {
-        var isLastmod = $(this).hasClass('lastmod');
-        var node = $(this).children("i");
-        var date = node.text();   /* ISO Dates: 'YYYY-MM-DDTHH:MM:SSZ' */
-        $(this).text(timeago(date, isLastmod));
-        $(this).append(node);
-      }
-    });
-
-    if (vote == 0 && intervalId != undefined) {
-      clearInterval(intervalId);  /* stop interval */
-    }
-    return vote;
-  }
-
-
-  var vote = $(".timeago").length;
-  if (vote == 0) {
-    return;
-  }
-
-  if (updateTimeago() > 0) {      /* run immediately */
-    vote = $(".timeago").length;  /* resume */
-    var intervalId = setInterval(updateTimeago, 60000); /* loop every minutes */
-  }
-
-});

assets/js/_utils/category-collapse.js

@@ -0,0 +1,33 @@
+/*
+ * Tab 'Categories' expand/close effect.
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2018-2019 Cotes Chung
+ * MIT License
+ */
+
+$(function() {
+  var childPrefix = "l_";
+  var parentPrefix = "h_";
+
+  /* close up top-category */
+  $(".collapse").on("hide.bs.collapse", function() { /* Bootstrap collapse events. */
+    var 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() {
+    var 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");
+    }
+  });
+
+});

assets/js/_utils/img-hyperlink.js

@@ -0,0 +1,16 @@
+/*
+ * Find out the <a> tag contains an image and mark it.
+ *
+ * v2.5.1
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2020 Cotes Chung
+ * MIT Licensed
+ */
+
+$(function() {
+
+  var MARK="img-hyperlink";
+
+  $("a:has(img)").addClass(MARK);
+  
+});

assets/js/_utils/pageviews.js

@@ -0,0 +1,225 @@
+/**
+ * Count pageviews form GA or local cache file.
+ *
+ * Dependences:
+ *   - jQuery
+ *   - countUp.js <https://github.com/inorganik/countUp.js>
+ *
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2018-2019 Cotes Chung
+ * MIT License
+ */
+
+var getInitStatus = (function () {
+  var hasInit = false;
+  return () => {
+    let ret = hasInit;
+    if (!hasInit) {
+      hasInit = true;
+    }
+    return ret;
+  };
+}());
+
+
+var PvCache = (function () {
+  const KEY_PV = "pv";
+  const KEY_CREATION = "pv_created_date";
+  const KEY_PV_SRC = "pv_source";
+
+  var Source = {
+    ORIGIN: "origin",
+    PROXY: "proxy"
+  };
+
+  function get(key) {
+    return localStorage.getItem(key);
+  }
+
+  function set(key, val) {
+    localStorage.setItem(key, val);
+  }
+
+  return {
+    getData() {
+      return JSON.parse(localStorage.getItem(KEY_PV) );
+    },
+    saveOriginCache(pv) {
+      set(KEY_PV, pv);
+      set(KEY_PV_SRC, Source.ORIGIN );
+      set(KEY_CREATION, new Date().toJSON() );
+    },
+    saveProxyCache(pv) {
+      set(KEY_PV, pv);
+      set(KEY_PV_SRC, Source.PROXY );
+      set(KEY_CREATION, new Date().toJSON() );
+    },
+    isFromOrigin() {
+      return get(KEY_PV_SRC) === Source.ORIGIN;
+    },
+    isFromProxy() {
+      return get(KEY_PV_SRC) === Source.PROXY;
+    },
+    isExpired() {
+      if (PvCache.isFromOrigin() ) {
+        let date = new Date(get(KEY_CREATION));
+        date.setDate(date.getDate() + 1); /* update origin records every day */
+        return Date.now() >= date.getTime();
+
+      } else if (PvCache.isFromProxy() ) {
+        let date = new Date(get(KEY_CREATION) );
+        date.setHours(date.getHours() + 1); /* update proxy records per hour */
+        return Date.now() >= date.getTime();
+      }
+      return false;
+    },
+    getAllPagevies() {
+      return PvCache.getData().totalsForAllResults["ga:pageviews"];
+    },
+    newerThan(pv) {
+      return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
+    },
+    inspectKeys() {
+      if (localStorage.getItem(KEY_PV) === null
+        || localStorage.getItem(KEY_PV_SRC) === null
+        || localStorage.getItem(KEY_CREATION) === null) {
+        localStorage.clear();
+      }
+    }
+  };
+
+}()); /* PvCache */
+
+function countUp(min, max, destId) {
+  if (min < max) {
+    var numAnim = new CountUp(destId, min, max);
+    if (!numAnim.error) {
+      numAnim.start();
+    } else {
+      console.error(numAnim.error);
+    }
+  }
+}
+
+
+function countPV(path, rows) {
+  var count = 0;
+
+  if (typeof rows !== "undefined" ) {
+    for (var i = 0; i < rows.length; ++i) {
+      var 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) {
+  var count = countPV(path, rows);
+  count = (count === 0 ? 1 : count);
+
+  if (!hasInit) {
+    elem.text(new Intl.NumberFormat().format(count));
+  } else {
+    var initCount = parseInt(elem.text().replace(/,/g, ""), 10);
+    if (count > initCount) {
+      countUp(initCount, count, elem.attr("id"));
+    }
+  }
+}
+
+
+function displayPageviews(data) {
+  if (typeof data === "undefined") {
+    return;
+  }
+
+  var hasInit = getInitStatus();
+  var rows = data.rows; /* could be undefined */
+
+  if ($("#post-list").length > 0) { /* the Home page */
+    $(".post-preview").each(function() {
+      var path = $(this).children("div").children("h1").children("a").attr("href");
+      tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
+    });
+
+  } else if ($(".post").length > 0) { /* the post */
+    var path = window.location.pathname;
+    tacklePV(rows, path, $("#pv"), hasInit);
+  }
+}
+
+
+function fetchProxyPageviews() {
+  $.ajax({
+    type: "GET",
+    url: proxyEndpoint, /* see: /assets/js/_pv-config.js */
+    dataType: "jsonp",
+    jsonpCallback: "displayPageviews",
+    success: (data, textStatus, jqXHR) => {
+      PvCache.saveProxyCache(JSON.stringify(data));
+    },
+    error: (jqXHR, textStatus, errorThrown) => {
+      console.log("Failed to load pageviews from proxy server: " + errorThrown);
+    }
+  });
+}
+
+
+function fetchPageviews(fetchOrigin = true, filterOrigin = false) {
+  /* pvCacheEnabled › see: /assets/js/_pv-config.js */
+  if (pvCacheEnabled && fetchOrigin) {
+    fetch("/assets/js/data/pageviews.json")
+      .then((response) => response.json())
+      .then((data) => {
+        if (filterOrigin) {
+          if (PvCache.newerThan(data)) {
+            return;
+          }
+        }
+        displayPageviews(data);
+        PvCache.saveOriginCache(JSON.stringify(data));
+      })
+      .then(() => fetchProxyPageviews());
+
+  } else {
+    fetchProxyPageviews();
+  }
+
+}
+
+
+$(function() {
+
+  if ($(".pageviews").length > 0) {
+
+    PvCache.inspectKeys();
+    let cache = PvCache.getData();
+
+    if (cache) {
+      displayPageviews(cache);
+
+      if (PvCache.isExpired()) {
+        fetchPageviews(true, PvCache.isFromProxy());
+
+      } else {
+
+        if (PvCache.isFromOrigin()) {
+          fetchPageviews(false);
+        }
+
+      }
+
+    } else {
+      fetchPageviews();
+    }
+
+  }
+
+});

assets/js/_utils/timeago.js

@@ -0,0 +1,83 @@
+/*
+ * Caculate the Timeago
+ * v2.0
+ * https://github.com/cotes2020/jekyll-theme-chirpy
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+
+$(function() {
+
+  var toRefresh = $(".timeago").length;
+
+  var intervalId = void 0;
+
+  function timeago(iso, isLastmod) {
+    let now = new Date();
+    let past = new Date(iso);
+
+    if (past.getFullYear() !== now.getFullYear()) {
+      toRefresh -= 1;
+      return past.toLocaleString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    }
+
+    if (past.getMonth() !== now.getMonth()) {
+      toRefresh -= 1;
+      return past.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
+    }
+
+    let seconds = Math.floor((now - past) / 1000);
+
+    let day = Math.floor(seconds / 86400);
+    if (day >= 1) {
+      toRefresh -= 1;
+      return day + " day" + (day > 1 ? "s" : "") + " ago";
+    }
+
+    let hour = Math.floor(seconds / 3600);
+    if (hour >= 1) {
+      return hour + " hour" + (hour > 1 ? "s" : "") + " ago";
+    }
+
+    let minute = Math.floor(seconds / 60);
+    if (minute >= 1) {
+      return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
+    }
+
+    return (isLastmod ? "just" : "Just") + " now";
+  }
+
+  function updateTimeago() {
+    $(".timeago").each(function() {
+      if ($(this).children("i").length > 0) {
+        var basic = $(this).text();
+        var isLastmod = $(this).hasClass("lastmod");
+        var node = $(this).children("i");
+        var date = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
+        $(this).text(timeago(date, isLastmod));
+        $(this).append(node);
+      }
+    });
+
+    if (toRefresh === 0 && typeof intervalId !== "undefined") {
+      clearInterval(intervalId); /* stop interval */
+    }
+    return toRefresh;
+  }
+
+  if (toRefresh === 0) {
+    return;
+  }
+
+  if (updateTimeago() > 0) { /* run immediately */
+    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
+  }
+
+});