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

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

.github/CONTRIBUTING.md

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -11,7 +11,7 @@ labels: enhancement
 - [ ] I have read the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md).
 - [ ] There are no similar request on existing issues (including closed ones).
 - [ ] I have read the [project progress](https://github.com/cotes2020/jekyll-theme-chirpy/projects) and know the current progress of the project.
-- [ ] I was in the `develop` branch of the latest code.
+- [ ] I was in the `master` branch of the latest code.
 
 
 ## Is your feature request related to a problem? Please describe

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,7 +16,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
 
-## How has this been tested?
+## How has this been tested
 
 <!-- 
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
@@ -25,16 +25,15 @@ Please describe the tests that you ran to verify your changes. Provide instructi
 - [ ] 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**
+### Test Configuration
 
-* Browerser type & version:
-* Operating system:
-* Bundler version:
-* Ruby version:
-* Jekyll version:
+- Browerser type & version:
+- Operating system:
+- Bundler version:
+- Ruby version:
+- Jekyll version:
 
-
-## Checklist:
+### Checklist
 <!-- Select checkboxes by change the "[ ]" to "[x]" -->
 - [ ] My code follows the [Google style guidelines](https://google.github.io/styleguide/)
 - [ ] I have performed a self-review of my own code

.github/workflows/ci.yml

@@ -1,8 +1,8 @@
 name: 'Continuous Integration'
 on:
   push:
-    branches:
-      - '*'
+    branches-ignore:
+      - 'production'
     tags-ignore:
       - '*'
     paths-ignore:
@@ -29,6 +29,20 @@ jobs:
         with:
           ruby-version: '2.6.x'
 
+      - name: Install tools (for Ubuntu)
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CC86BB64
+          sudo add-apt-repository ppa:rmescandon/yq
+          sudo apt update
+          sudo apt install yq -y
+
+      - name: Install tools (for macOS)
+        if: matrix.os == 'macos-latest'
+        run: |
+          brew install coreutils
+          brew install yq
+
       - name: Checkout
         uses: actions/checkout@v2
         with:
@@ -43,11 +57,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-gems-
 
-      - name: Install GNU-Coreutils(for macOS)
-        if: runner.os == 'macOS'
-        run: |
-          brew install coreutils
-
       - name: Bundle config
         run: |
           bundle config path vendor/bundle

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

@@ -4,18 +4,29 @@ on:
     branches:
       - master
     paths-ignore:
-      - '.gitignore'
-      - 'README.md'
-      - 'LICENSE'
+      - .gitignore
+      - README.md
+      - LICENSE
 
 jobs:
-  build-n-test:
+  continuous-delivery:
+
     runs-on: ubuntu-latest
 
+    env:
+      GEMS_PATH: /tmp/bundle
+
     steps:
       - uses: actions/setup-ruby@v1
         with:
-          ruby-version: '2.6.x'
+          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
@@ -26,14 +37,14 @@ jobs:
         id: bundle-cache
         uses: actions/cache@v1
         with:
-          path: vendor/bundle
+          path: ${{ env.GEMS_PATH }}
           key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 
       - name: Bundle config
         run: |
-          bundle config path vendor/bundle
+          bundle config path ${{ env.GEMS_PATH }}
 
       - name: Bundle Install
         if: steps.bundle-cache.outputs.cache-hit != 'true'
@@ -45,54 +56,25 @@ jobs:
         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 -b ""
+          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
-
-  deploy:
-    needs: build-n-test
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/setup-ruby@v1
-        with:
-          ruby-version: '2.6.x'
-
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Bundle Caching
-        id: bundle-cache
-        uses: actions/cache@v1
-        with:
-          path: vendor/bundle
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
-
-      - name: Bundle config
-        run: |
-          bundle config path vendor/bundle
-
-      - name: Bundle Install
-        if: steps.bundle-cache.outputs.cache-hit != 'true'
-        run: |
-          bundle install
-
-      - name: Bundle Install locally
-        if: steps.bundle-cache.outputs.cache-hit == 'true'
-        run: |
-          bundle install --local
-
-      - name: Build site
-        run: |
-          bash tools/build.sh
+          bash tools/test.sh "$SPEC_TEST"
 
       - name: Deploy
         run: |

.travis.yml

@@ -12,8 +12,11 @@ install:
 
 addons:
   apt:
+    sources:
+      - sourceline: "ppa:rmescandon/yq"
     packages:
       - libcurl4-openssl-dev # required to avoid SSL error (for htmlproofer)
+      - yq
 
 script:
   - >-
@@ -23,7 +26,7 @@ script:
   - bash _cibuild.sh
 
 branches:
-  only: master
+  only: production
 
 git:
   depth: false # for posts lastmod

README.md

@@ -3,6 +3,7 @@
 🌏 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)
 
@@ -12,38 +13,37 @@ A minimal, sidebar, responsive web design Jekyll theme, focusing on text present
 
 ## Table of Contents
 
-* [Features](#features)
-* [Installation](#installation)
-* [Usage](#usage)
-* [Contributing](#contributing)
-* [Credits](#credits)
-* [Support](#support)
-* [License](#license)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [Credits](#credits)
+- [Support](#support)
+- [License](#license)
 
 ## Features
 
-* Pinned Posts
-* Configurable theme mode
-* Double-level Categories
-* Last modified date for posts
-* Table of Contents
-* Automatically recommend related posts
-* Syntax highlighting
-* Mathematical expressions
-* Search
-* Atom Feeds
-* Disqus Comments
-* Google Analytics
-* GA Pageviews reporting (Advanced)
-* SEO and Performance Optimization
-
+- 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
 
 ## Installation
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, and clone the fork to local 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:
 
 ```terminal
-$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
 ### Setting up the local envrionment
@@ -58,20 +58,27 @@ $ bundle install
 
 `bundle` will automatically install all the dependencies specified by `Gemfile`.
 
-What's more, in order to generate some extra files (*categories*, *tags* and *last modified list*), we need to use some tool scripts. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+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/).
 
-* Debian
+- on Debian:
 
   ```console
   $ sudo apt-get install coreutils
   ```
 
-* macOS
+- 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
 
@@ -85,28 +92,28 @@ Go to the root directory of the project and start initialization:
 $ bash tools/init.sh
 ```
 
-> If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
 What it does is:
 
 1. Remove some files or directories from your repository:
-    - `.travis.yml`
-    - everything under `.github/`
-    - files under `_posts/`
-    - folder `docs/` 
 
-2. Unless the option `--no-gh` was enabled, setup the GitHub action workflow by renaming `pages-deploy.yml.hook` of directory `.github/workflows/` to `pages-deploy.yml`.
+    - `.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`
 
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
 ### Run Locally
 
@@ -120,56 +127,58 @@ Then open a browser and visit to <http://localhost:4000>.
 
 Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
 
+### Run on Docker
+
+Run the site on Docker with the following command:
+
+```terminal
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    bash tools/run.sh --docker
+```
+
+Please note that on Docker containers, you'll lose the real-time refresh feature.
+
 ### Deployment
 
 Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
-Assuming you have already gone through the [initialization](#initialization), you can now choose any of the following methods to deploy your website.
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
 
 #### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts to generate additional page files. Therefore, we can use GitHub Actions to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using 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, a new remote branch called `gh-pages` will appear, which is used to store the built site files.
+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. Unless you prefer to project sites, rename your repository to `<username>.github.io` on GitHub.
+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)
 
-3. Choose branch `gh-pages` as your GitHub Pages source.
-
-4. Visit your website at the address indicated by GitHub.
+3. Visit your website at the address indicated by GitHub.
 
 #### Deploy on Other Platforms
 
-On platforms other than GitHub, e.g. GitLab, we cannot enjoy the convenience of **GitHub Actions**. However, we have a tool to make up for this shortcoming.
+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.
 
-Commit the changes of your repository first, then run the publish script:
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/publish.sh
+$ bash tools/build.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**: The output path can be specified with the option `-d`.
 
-It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, then push to `origin/master`. Its output is similar to the following log:
+Or, build the site with Docker by:
 
 ```terminal
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[INFO] Published successfully!
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    bash tools/build.sh --docker
 ```
 
-Lastly, enable the pages service according to the instructions of the platform you choose.
-
-#### Deploy on Private Server
-
-In the root of the source project, build your site by:
-
-```console
-$ bash tools/build.sh -d /path/to/site/
-```
-
-The generated site files will be placed in the root of `/path/to/site/`. Now you should upload those files to your web server, such as Nginx.
+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.
 
 ### Documentation
 
@@ -179,19 +188,16 @@ For more details and the better reading experience, please check out the [tutori
 
 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).
 
 :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.
 
-
 ## License
 
 This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License.

_config.yml

@@ -168,10 +168,8 @@ sass:
 
 compress_html:
   clippings: all
-  comments: ["<!-- ", " -->"]
-  endings: [html, head, body, dt, dd, rt, rp,
-            optgroup, option, colgroup, caption,
-            thead, tbody, tfoot, tr, td, th]
+  comments: all
+  endings: all
   profile: false
   blanklines: false
   ignore:

_includes/fixlinenos.html

@@ -1,12 +0,0 @@
-<!--
-  Fixed kramdown code highlight rendering:
-  https://github.com/penibelst/jekyll-compress-html/issues/101
-  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
--->
-{% if include.content contains '<pre class="highlight">' %}
-  {% assign content = include.content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign content = content | replace: '</code></pre>', '</code>' %}
-  {{ content }}
-{% else %}
-  {{ include.content }}
-{% endif %}

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

_includes/js-selector.html

@@ -35,7 +35,11 @@
 {% endif %}
 
 
-<!-- PWA -->
 {% if jekyll.environment == 'production' %}
+
+  {% include google-analytics.html %}
+
+  <!-- PWA -->
   <script src="{{ '/app.js' | relative_url }}" defer></script>
+
 {% endif %}

_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 }}

_layouts/default.html

@@ -36,7 +36,7 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% include fixlinenos.html content=content %}
+        {% include refactor-content.html content=content %}
 
         {% include footer.html %}
 
@@ -52,10 +52,6 @@ layout: compress
       <i class="fas fa-angle-up"></i>
     </a>
 
-    {% if jekyll.environment == 'production' %}
-      {% include google-analytics.html %}
-    {% endif %}
-
     {% include search-loader.html %}
 
   </body>

_layouts/home.html

@@ -9,7 +9,7 @@ layout: page
 
 
 {% assign pinned = site.posts | where_exp: "item", "item.pin == true"  %}
-{% assign default = site.posts | where_exp: "item", "item.pin == nil "  %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true"  %}
 {% assign posts = "" | split: "" %}
 
 <!-- Get pinned posts -->
@@ -51,7 +51,7 @@ layout: page
   <div class="post-preview">
     <div class="d-flex justify-content-between pr-xl-2">
       <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
-      {% if post.pin %}
+      {% 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 %}

_layouts/post.html

@@ -61,12 +61,19 @@ layout: default
       </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 %}
+
         <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
         {% if content contains '<img src=' %}
-          {{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }}
+          {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
+          {{ content | replace: '<img src=', replacement }}
         {% else %}
           {{ content }}
         {% endif %}

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

@@ -5,22 +5,25 @@ 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 here.
+This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
+
 
 ## Titles
 
-***
+---
+
 # H1
 
 <h2 data-toc-skip>H2</h2>
 
 <h3 data-toc-skip>H3</h3>
 
-#### H4
+<h4>H4</h4>
 
-***
+---
 
 ## Paragraph
 
@@ -36,17 +39,33 @@ 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|
-|:---|:--|---:|
-|Alfreds Futterkiste | Maria Anders | Germany
-|Island Trading | Helen Bennett | UK
-|Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy
+| Company                      | contact          | Country |
+|:-----------------------------|:-----------------|--------:|
+| Alfreds Futterkiste          | Maria Anders     | Germany |
+| Island Trading               | Helen Bennett    | UK      |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
 
 ## Link
 
@@ -58,10 +77,33 @@ 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
 

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

@@ -8,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. The `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_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
 
@@ -33,7 +33,7 @@ In order to accurately record the release date of a post, you should not only se
 
 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. 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.
+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:
 
@@ -42,7 +42,7 @@ 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:
 
 ```sh
 .
@@ -54,7 +54,7 @@ Then we should have two _category_ type pages placed in folder `categories` of r
 ...
 ```
     
-and the content of a _category_ type page is
+and the content of a *category* type page is
 
 ```yaml
 ---
@@ -64,7 +64,7 @@ category: CATEGORY_NAME     # e.g. Insect
 ---
 ```
 
-the content of a _tag_ type page is
+the content of a *tag* type page is
 
 ```yaml
 ---
@@ -74,7 +74,7 @@ tag: TAG_NAME               # e.g. bee
 ---
 ```
 
-With the increasing number of posts, the number of categories and tags will increase several times!  If we still manually create these *category*/_tag_ type files, it will obviously be a super time-consuming job, and it is very likely to miss some of them, i.e., when you click on the missing `category` or `tag` link from a post or somewhere, the browser will complain to you "404 Not Found". The good news is we got a lovely script tool `_scripts/sh/create_pages.sh` to finish the boring tasks. Basically we will use it via `run.sh`, `build.sh`, `deploy.sh` or `publish.sh` that placed in `tools/` instead of running it separately. Check out its use case [here]({{ "/posts/getting-started/#deployment" | 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
 
@@ -124,6 +124,15 @@ 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
 
@@ -135,7 +144,6 @@ pin: true
 ---
 ```
 
-
 ## Code Block
 
 Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
@@ -146,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 !
 
@@ -159,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%}` .
 
@@ -171,7 +179,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

@@ -10,10 +10,10 @@ pin: true
 
 ## Installation
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) on GitHub, and clone the fork to local 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:
 
 ```terminal
-$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
 ### Setting up the local envrionment
@@ -28,20 +28,27 @@ $ bundle install
 
 `bundle` will automatically install all the dependencies specified by `Gemfile`.
 
-What's more, in order to generate some extra files (*categories*, *tags* and *last modified list*), we need to use some tool scripts. If your machine is running Debian or macOS, make sure that [GNU coreutils](https://www.gnu.org/software/coreutils/) is installed. Otherwise, install by:
+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/).
 
-* Debian
+- on Debian:
 
   ```console
   $ sudo apt-get install coreutils
   ```
 
-* macOS
+- 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
 
@@ -55,28 +62,28 @@ Go to the root directory of the project and start initialization:
 $ bash tools/init.sh
 ```
 
-> If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
+> **Note**: If you not intend to deploy it on GitHub Pages, append parameter option `--no-gh` at the end of the above command.
 
 What it does is:
 
 1. Remove some files or directories from your repository:
-    - `.travis.yml`
-    - everything under `.github/`
-    - files under `_posts/`
-    - folder `docs/` 
 
-2. Unless the option `--no-gh` was enabled, setup the GitHub action workflow by renaming `pages-deploy.yml.hook` of directory `.github/workflows/` to `pages-deploy.yml`.
+    - `.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`
 
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
 ### Run Locally
 
@@ -90,53 +97,55 @@ Then open a browser and visit to <http://localhost:4000>.
 
 Few days later, you may find that the file changes does not refresh in real time by using `run.sh`. Don't worry, the advanced option `-r` (or `--realtime`) will solve this problem, but it requires [**fswatch**](http://emcrisostomo.github.io/fswatch/) to be installed on your machine.
 
+### Run on Docker
+
+Run the site on Docker with the following command:
+
+```terminal
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    -p 4000:4000 jekyll/jekyll \
+    bash tools/run.sh --docker
+```
+
+Please note that on Docker containers, you'll lose the real-time refresh feature.
+
 ### Deployment
 
 Before the deployment begins, checkout the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [_project site_](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base url on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starting with a slash. For example, `/project`.
 
-Assuming you have already gone through the [initialization](#initialization), you can now choose any of the following methods to deploy your website.
+Assuming you have already gone through the [initialization](#initialization), you can now choose ONE of the following methods to deploy your website.
 
 #### Deploy on GitHub Pages
 
-For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using tool scripts to generate additional page files. Therefore, we can use GitHub Actions to build the site, store the built site files on a new branch, and use that branch as the source of the Pages service.
+For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using 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, a new remote branch called `gh-pages` will appear, which is used to store the built site files.
+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. Unless you prefer to project sites, rename your repository to `<username>.github.io` on GitHub.
+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. Choose branch `gh-pages` as your GitHub Pages source.
-
-4. Visit your website at the address indicated by GitHub.
+3. Visit your website at the address indicated by GitHub.
 
 #### Deploy on Other Platforms
 
-On platforms other than GitHub, e.g. GitLab, we cannot enjoy the convenience of **GitHub Actions**. However, we have a tool to make up for this shortcoming.
+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.
 
-Commit the changes of your repository first, then run the publish script:
+Go to the root of the source project, build your site by:
 
 ```console
-$ bash tools/publish.sh
+$ bash tools/build.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**: The output path can be specified with the option `-d`.
 
-It will automatically generates the *Latest Modified Date* and *Categories / Tags* page for the posts and submit a commit, then push to `origin/master`. Its output is similar to the following log:
+Or, build the site with Docker by:
 
 ```terminal
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[INFO] Published successfully!
+$ docker run --rm -it \
+    --volume="$PWD:/srv/jekyll" \
+    jekyll/jekyll \
+    bash tools/build.sh --docker
 ```
 
-Lastly, enable the pages service according to the instructions of the platform you choose.
-
-#### Deploy on Private Server
-
-In the root of the source project, build your site by:
-
-```console
-$ bash tools/build.sh -d /path/to/site/
-```
-
-The generated site files will be placed in the root of `/path/to/site/`. Now you should upload those files to your web server, such as Nginx.
+Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server.

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

@@ -11,11 +11,11 @@ In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image fi
 
 With a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.
 
-![upload-image]({{ "/assets/img/sample/upload-image.png" | relative_url }})
+![upload-image](/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/sh/create_pages.sh

@@ -1,4 +1,4 @@
-#!/usr/local/bin/bash
+#!/usr/bin/env bash
 #
 # Create HTML pages for Categories and Tags in posts.
 #
@@ -18,31 +18,34 @@ 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
+  local _endline="$(grep -n "\-\-\-" "$1" | cut -d: -f 1 | sed -n '2p')"
+  head -"$_endline" "$1"
 }
 
-
 read_categories() {
-  local _yaml=$(_read_yaml $1)
-  local _categories=$(echo "$_yaml" | grep "^categories:")
-  local _category=$(echo "$_yaml" | grep "^category:")
+  local _yaml="$(_read_yaml "$1")"
+  local _categories="$(echo "$_yaml" | yq r - "categories.*")"
+  local _category="$(echo "$_yaml" | yq r - "category")"
 
-  if [[ ! -z "$_categories" ]]; then
-    echo "$_categories" | sed "s/categories: *//;s/\[//;s/\].*//;s/, */,/g;s/\"//g;s/'//g"
-  elif [[ ! -z "_category" ]]; then
-    echo "$_category" | sed "s/category: *//;s/\[//;s/\].*//;s/, */,/g;s/\"//g;s/'//g"
+  if [[ -n $_categories ]]; then
+    echo "$_categories"
+  elif [[ -n $_category ]]; then
+    echo "$_category"
   fi
 }
 
-
 read_tags() {
-  local _yaml=$(_read_yaml $1)
-  echo "$_yaml" | grep "^tags:" | sed "s/tags: *//;s/\[//;s/\].*//;s/, */,/g;s/\"//g;s/'//g"
-}
+  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() {
 
@@ -61,44 +64,41 @@ init() {
   mkdir categories tags
 }
 
-
 create_category() {
-  if [[ ! -z $1 ]]; then
+  if [[ -n $1 ]]; then
     local _name=$1
-    local _filepath="categories/$(echo $_name | sed 's/ /-/g' | awk '{print tolower($0)}').html"
+    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
+      echo "---" > "$_filepath"
+      echo "layout: category" >> "$_filepath"
+      echo "title: $_name" >> "$_filepath"
+      echo "category: $_name" >> "$_filepath"
+      echo "---" >> "$_filepath"
 
-      ((category_count=category_count+1))
+      ((category_count = category_count + 1))
     fi
   fi
 }
 
-
 create_tag() {
-  if [[ ! -z $1 ]]; then
+  if [[ -n $1 ]]; then
     local _name=$1
-    local _filepath="tags/$( echo $_name | sed "s/ /-/g;s/'//g" | awk '{print tolower($0)}' ).html"
+    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
+      echo "---" > "$_filepath"
+      echo "layout: tag" >> "$_filepath"
+      echo "title: $_name" >> "$_filepath"
+      echo "tag: $_name" >> "$_filepath"
+      echo "---" >> "$_filepath"
 
-      ((tag_count=tag_count+1))
+      ((tag_count = tag_count + 1))
     fi
   fi
 }
 
-
 #########################################
 # Create HTML pages for Categories/Tags.
 # Arguments:
@@ -106,28 +106,27 @@ create_tag() {
 #   $2 - type specified option
 #########################################
 create_pages() {
-  if [[ ! -z $1 ]]; then
+  if [[ -n $1 ]]; then
     # split string to array
     IFS_BAK=$IFS
-    IFS=','
+    IFS=$'\n'
     local _string=$1
 
     case $2 in
 
       $TYPE_CATEGORY)
-        for i in ${_string#,}; do
-          create_category $i
+        for i in $_string; do
+          create_category "$i"
         done
         ;;
 
       $TYPE_TAG)
-        for i in ${_string#,}; do
-          create_tag $i
+        for i in $_string; do
+          create_tag "$i"
         done
         ;;
 
-      *)
-        ;;
+      *) ;;
 
     esac
 
@@ -136,13 +135,11 @@ create_pages() {
 
 }
 
-
 main() {
 
   init
 
-  for _file in $(find "_posts" -type f \( -iname \*.md -o -iname \*.markdown \))
-  do
+  for _file in $(find "_posts" -type f \( -iname \*.md -o -iname \*.markdown \)); do
     local _categories=$(read_categories "$_file")
     local _tags=$(read_tags "$_file")
 

_scripts/sh/dump_lastmod.sh

@@ -17,7 +17,6 @@ POST_DIR=_posts
 OUTPUT_DIR=_data
 OUTPUT_FILE=updates.yml
 
-
 _init() {
 
   if [[ ! -d "$OUTPUT_DIR" ]]; then
@@ -33,10 +32,9 @@ _init() {
   fi
 }
 
-
 _has_changed() {
-  local _log_count=`git log --pretty=%ad $1 | wc -l | sed 's/ *//'`
-  _log_count=$(($_log_count + 0))
+  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
@@ -45,7 +43,6 @@ _has_changed() {
   return 1 # false
 }
 
-
 ###################################
 # Storage the posts' lastmod.
 #
@@ -56,7 +53,7 @@ _has_changed() {
 #     the file '_data/updates.yml'
 ###################################
 _dump() {
-  local _lasmod="`git log -1 --pretty=%ad --date=iso $2`"
+  local _lasmod="$(git log -1 --pretty=%ad --date=iso "$2")"
 
   if [[ ! -f "$OUTPUT_DIR/$OUTPUT_FILE" ]]; then
     touch "$OUTPUT_DIR/$OUTPUT_FILE"
@@ -67,20 +64,18 @@ _dump() {
   echo "  lastmod: '$_lasmod'" >> "$OUTPUT_DIR/$OUTPUT_FILE"
 }
 
-
 main() {
 
   _init
 
   local _count=0
 
-  for _file in $(find ${POST_DIR} -type f \( -iname \*.md -o -iname \*.markdown \))
-  do
-    _filename=$(basename $_file | sed 's/[0-9]\([0-9]*-\)//g;s/\..*//' ) # remove date and extension
+  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))
+      ((_count = _count + 1))
     fi
 
   done
@@ -90,5 +85,4 @@ main() {
   fi
 }
 
-
 main

_scripts/sh/sync_monitor.sh

@@ -15,24 +15,23 @@ 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
-  cp $1 $dest
+if [[ -f $1 ]]; then
+  cp "$1" "$dest"
 fi
 
 if [[ $related_dir == "_posts" ]]; then
-  bash $3/_scripts/sh/create_pages.sh
-  bash $3/_scripts/sh/dump_lastmod.sh
+  bash "$3"/_scripts/sh/create_pages.sh
+  bash "$3"/_scripts/sh/dump_lastmod.sh
 fi

assets/css/_addon/fonts.scss

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

assets/css/_addon/main.scss

@@ -85,7 +85,6 @@ $sidebar-display: "sidebar-display";
   .site-title {
     text-align: center;
     a {
-      // color: var(--site-title-color);
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: .5px;
@@ -106,7 +105,7 @@ $sidebar-display: "sidebar-display";
   }
 
   .sidebar-bottom {
-    .icon-border+a { // the icon behide mode-toggle
+    .icon-border + a { // the icon behide mode-toggle
       margin-left: .1rem;
     }
   }
@@ -185,7 +184,7 @@ $sidebar-display: "sidebar-display";
       margin-bottom: .5rem; // icons may have multi lines
     }
 
-    a:hover, #mode-toggle-wrapper>i:hover {
+    a:hover, #mode-toggle-wrapper > i:hover {
       color: #fff;
     }
 
@@ -211,7 +210,7 @@ $sidebar-display: "sidebar-display";
 } // #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;
@@ -242,7 +241,7 @@ $sidebar-display: "sidebar-display";
     transition: border-color 0.35s ease-in-out;
   }
 
-  &:hover>a {
+  &:hover > a {
     border-color: #fff;
   }
 
@@ -448,7 +447,7 @@ $sidebar-display: "sidebar-display";
   @include pl-pr(0);
 }
 
-#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 */
   }
@@ -461,11 +460,6 @@ $sidebar-display: "sidebar-display";
 #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,
@@ -544,7 +538,7 @@ footer {
 
 
 #access-tags {
-  >div.post-content>div {
+  >div.post-content > div {
     max-width: 80%;
   }
   .post-tag {
@@ -662,7 +656,11 @@ kbd {
 }
 
 sup {
+  z-index: 1;
+  &:target {
     @extend %anchor;
+    z-index: 0;
+  }
 }
 
 .footnotes ol {
@@ -676,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;
@@ -693,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;
   }
@@ -734,9 +732,14 @@ a {
 
 } // a
 
+img {
+  max-width: 100%;
+}
+
 .post {
   h1 {
     margin-top: 3rem;
+    margin-bottom: 1rem;
   }
   em { /* MarkDown italic */
     padding-right: .2rem;
@@ -750,22 +753,24 @@ a {
 
 
 /*--- Begin of Markdown table style ---*/
-
-div.post-content {
-  >table, li>table {
-    min-width: 60%;
-    display: block;
+div.post-content .table-wrapper {
+  overflow-x: auto;
+
+  >table {
+    min-width: 60%;
     overflow-x: auto;
-    border-collapse: collapse;
     border-spacing: 0;
     margin-bottom: 1.5rem;
-  }
-}
 
-table {
     thead {
       border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-    +tbody tr {
+      th {
+        @extend %table-cell;
+      }
+    }
+
+    tbody {
+      tr {
         &:nth-child(2n) {
           background-color: var(--tb-even-bg);
         }
@@ -775,17 +780,13 @@ table {
         & {
           border-bottom: 1px solid var(--tb-border-color);
         }
-    }
-    th {
+        td {
           @extend %table-cell;
         }
       }
-
-  tbody td {
-    @extend %table-cell;
     }
-
-} // table
+  }
+}
 
 
 /*--- post ---*/
@@ -814,16 +815,61 @@ table {
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
+
+  @mixin img($caption: false) {
+    >img:not([style]) {
+      margin: .5rem 0;
+
+      &: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 {
@@ -929,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});
   }
 
@@ -942,7 +988,7 @@ table {
     }
   }
 
-  #avatar>a {
+  #avatar > a {
     width: 5rem;
     height: 5rem;
   }
@@ -952,7 +998,7 @@ table {
   }
 
   /* table text in small screens */
-  div>table, p~table {
+  div > table, p ~ table {
     width: 100%;
     table-layout: fixed;
     word-wrap: break-word;
@@ -1052,8 +1098,8 @@ table {
     top: 0 !important;
   }
 
-  #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(1),
+  #main > div.row:first-child > div:nth-child(2) {
     margin-top: 0;
   }
 
@@ -1064,7 +1110,7 @@ table {
   }
 
   #search-wrapper {
-    &.loaded~a {
+    &.loaded ~ a {
       margin-right: 1rem;
     }
     .fa-times-circle {
@@ -1092,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 {
@@ -1107,7 +1153,7 @@ table {
 
 
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer>.d-flex>div {
+  footer>.d-flex > div {
     width: 312px;
   }
 }
@@ -1148,7 +1194,7 @@ table {
     text-align: left;
   }
 
-  footer>div.d-flex {
+  footer > div.d-flex {
     width: 92%;
   }
 
@@ -1185,7 +1231,7 @@ table {
     width: calc(100% - 210px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 700px;
   }
 
@@ -1223,7 +1269,7 @@ table {
     padding: 0;
   }
 
-  #main>div.row {
+  #main > div.row {
     -webkit-box-pack: center!important;
     -ms-flex-pack: center!important;
     justify-content: center!important;
@@ -1235,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%;
@@ -1266,7 +1312,7 @@ table {
     width: calc(100% - 260px);
   }
 
-  #search-results>div {
+  #search-results > div {
     max-width: 46%;
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1284,7 +1330,7 @@ table {
     font-size: 1.03rem;
   }
 
-  footer>div.d-felx {
+  footer > div.d-felx {
     width: 85%;
   }
 
@@ -1292,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;
@@ -1324,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;
@@ -1401,7 +1447,7 @@ table {
 
     ul {
       margin-left: 3%;
-      >li>a {
+      >li > a {
         padding-left: 2.5rem;
         -webkit-box-pack: start!important;
         -ms-flex-pack: start!important;
@@ -1458,7 +1504,7 @@ table {
       }
     } // .sidebar-bottom
   } // #sidebar
-  footer>div.d-flex {
+  footer > div.d-flex {
     width: 87%;
     max-width: 1140px;
   }
@@ -1483,7 +1529,7 @@ table {
     max-width: calc(#{$main-content-max-width} + 20px)
   }
 
-  #main>div.row {
+  #main > div.row {
     padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
   }
 
@@ -1503,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;
 }
@@ -54,7 +54,7 @@
   margin-top: -2.5rem;
 }
 
-/*---------- scss mixin ---------*/
+/* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
@@ -64,7 +64,7 @@
   color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 .25rem;
+  margin: 0 0.25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -98,3 +98,11 @@
   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

@@ -9,8 +9,8 @@
 @import "_colors/light-syntax";
 @import "_colors/dark-syntax";
 
-
-html:not([mode]), html[mode=light] {
+html:not([mode]),
+html[mode=light] {
   @include light-syntax;
 }
 
@@ -19,7 +19,8 @@ html[mode=dark] {
 }
 
 @media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
+  html:not([mode]),
+  html[mode=dark] {
     @include dark-syntax;
   }
 
@@ -28,9 +29,9 @@ html[mode=dark] {
   }
 }
 
-/*-- Codes Snippet --*/
+/* -- Codes Snippet -- */
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
@@ -38,23 +39,38 @@ html[mode=dark] {
   border-radius: 5px;
 }
 
-.highlighter-rouge {
-  background-color: var(--highlight-bg-color);
+%code-snippet-padding {
+  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;
   .lineno {
-    margin: .8rem 0rem;
-    padding: 0 .5rem;
+    margin: 0.8rem 0;
+    padding: 0 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -66,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;
@@ -78,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 {
@@ -93,19 +107,24 @@ code {
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
+
   &.highlighter-rouge {
+    font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 .15rem;
+    margin: 0 0.15rem;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
-  @at-root a>&.highlighter-rouge {
+
+  @at-root a > &.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
     color: inherit;
   }
-  @at-root a:hover>&.highlighter-rouge {
+
+  @at-root a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
+
   blockquote &.highlighter-rouge {
     color: inherit;
   }
@@ -126,7 +145,7 @@ div {
       display: none;
     }
     td.rouge-code {
-      padding: .8rem 1rem;
+      @extend %code-snippet-padding;
     }
   }
 }

assets/css/_addon/variables.scss

@@ -7,7 +7,7 @@
 * MIT Licensed
 */
 
-/*--- ↓ width and height ----*/
+/* --- ↓ width and height ---- */
 
 $tab-height: 3.3rem;
 $tab-cursor-height: 1.6rem;

assets/css/_colors/dark-syntax.scss

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

assets/css/_colors/dark-typography.scss

@@ -26,12 +26,10 @@
   --button-bg: rgb(39, 40, 43);
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
-
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --btn-box-shadow: var(--main-wrapper-bg);
-
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
 
@@ -71,7 +69,6 @@
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
   --search-tag-bg: var(--tag-bg);
-
   --dash-color: rgb(63, 65, 68);
 
   /* categories */
@@ -84,7 +81,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
-  --footer-link: rgb(171 171 171);
+  --footer-link: rgb(171, 171, 171);
 
   .post-content img {
     filter: brightness(90%);
@@ -98,10 +95,10 @@
   nav[data-toggle=toc] .nav-link.active,
   nav[data-toggle=toc] .nav-link.active:focus,
   nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav>li>a:focus,
-  nav[data-toggle=toc] .nav>li>a:hover {
-    color: var(--toc-highlight)!important;
-    border-left-color: var(--toc-highlight)!important;
+  nav[data-toggle=toc] .nav > li > a:focus,
+  nav[data-toggle=toc] .nav > li > a:hover {
+    color: var(--toc-highlight) !important;
+    border-left-color: var(--toc-highlight) !important;
   }
 
   /* categories */
@@ -126,8 +123,13 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image: linear-gradient(to left,
-      rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
+    background-image: linear-gradient(
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30));
   }
 
 } // dark-scheme

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

assets/css/_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;
-
   --blockquote-border-color: #eee;
-
   --blockquote-text-color: #9a9a9a;
-
   --link-color: #2a408e;
-
   --link-underline-color: #dee2e6;
-
   --text-muted-color: gray;
-
   --tb-odd-bg: #fbfcfd;
-
   --tb-border-color: #eaeaea;
-
   --button-bg: #fff;
-
   --btn-backtotop-color: #686868;
-
   --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
-
   --btn-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: #f5f5f5;
-
   --search-tag-bg: #f8f9fa;
-
   --search-icon-color: #c2c6cc;
-
   --input-focus-border-color: var(--btn-border-color);
 
   /* Home page */
-
   --post-list-text-color: dimgray;
-
   --btn-patinator-text-color: #555555;
-
   --btn-paginator-hover-color: #e9ecef;
-
   --btn-active-bg: #2a408e;
-
   --btn-active-border-color: #007bff;
-
   --btn-text-color: #f8f8f8;
-
   --btn-paginator-border-color: #f1f1f1;
-
   --btn-paginator-shadow: #4b92d2;
 
   /* Posts */
-
   --btn-share-hover-color: var(--link-color);
-
   --card-border-color: #f1f1f1;
-
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
-
   --label-color: #808080;
-
-  --relate-post-date: rgba(30, 55, 70, .4);
-
+  --relate-post-date: rgba(30, 55, 70, 0.4);
   --tag-bg: rgba(0, 0, 0, 0.075);
-
   --tag-border: #dee2e6;
-
   --tag-shadow: var(--btn-border-color);
-
   --tag-hover: rgb(222, 226, 230);
-
   --categories-hover-bg: var(--btn-border-color);
-
   --dash-color: silver;
 
-
   /* Archive */
-
   --timeline-color: rgba(0, 0, 0, 0.075);
-
   --timeline-node-bg: #c2c6cc;
-
   --timeline-year-dot-color: #ffffff;
 
   /* Footer */
-
   --footer-bg-color: #ffffff;
-
   --footnote-target-bg: lightcyan;
-
   --footer-link: #424242;
-}
+} // light-scheme

assets/css/post.scss

@@ -27,16 +27,25 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.post {
-  img {
-    max-width: 100%;
-    margin-top: .5rem;
-    margin-bottom: 1.5rem;
-    position: relative;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
+.post-content {
+  > ol, > ul, > dl {
+    padding-left: 2rem;
+    li+li {
+      margin-top: 0.3rem;
+    }
+  }
+  li {
+    > ol, > ul, > dl { // sub list
+      padding-left: 2rem;
+    }
+    > p {
+      margin: 1rem 0 0.8rem;
+    }
+  }
+  .post-preview-img {
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+    @include align-center;
   }
 }
 
@@ -333,19 +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;
   }
-
 }

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

@@ -3,16 +3,16 @@ 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();
+      && $("#sidebar-trigger").css("display") === "none") {
+    $("#back-to-top").fadeIn();
   } else {
-    $('#back-to-top').fadeOut();
+    $("#back-to-top").fadeOut();
   }
 });
 
 $(function() {
-  $('#back-to-top').click(function() {
-    $('body,html').animate({scrollTop: 0}, 800);
+  $("#back-to-top").click(function() {
+    $("body,html").animate({scrollTop: 0}, 800);
     return false;
   });
 });

assets/js/_commons/copy-link.js

@@ -1,20 +1,22 @@
 /*
-* Copy current page url to clipboard.
-* v2.1
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2020 Cotes Chung
-* MIT License
-*/
+ * 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)
+  if (!url || 0 === url.length) {
     url = window.location.href;
-  var $temp = $("<input>");
+  }
   
+  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

@@ -8,18 +8,18 @@
 
 $(function() {
 
-  var btnSbTrigger = $('#sidebar-trigger');
-  var btnSearchTrigger = $('#search-trigger');
-  var btnCancel = $('#search-cancel');
-  var btnClear = $('#search-cleaner');
+  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');
+  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) ---*/
@@ -27,75 +27,76 @@ $(function() {
   var scrollBlocker = (function() {
     var offset = 0;
     return {
-      block: function() {
+      block() {
         offset = $(window).scrollTop();
       },
-      release: function() {
-        $('html,body').scrollTop(offset);
+      release() {
+        $("html,body").scrollTop(offset);
       },
-      getOffset: function() {
+      getOffset() {
         return offset;
       }
-    }
-  })();
+    };
+  }());
 
   var mobileSearchBar = (function() {
     return {
-      on: function() {
-        btnSbTrigger.addClass('unloaded');
-        topbarTitle.addClass('unloaded');
-        btnSearchTrigger.addClass('unloaded');
-        searchWrapper.addClass('d-flex');
-        btnCancel.addClass('loaded');
+      on() {
+        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');
+      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: function() {
+      on() {
         if (!visable) {
-          resultWrapper.removeClass('unloaded');
-          main.addClass('hidden');
+          resultWrapper.removeClass("unloaded");
+          main.addClass("hidden");
 
           visable = true;
           scrollBlocker.block();
         }
       },
-      off: function() {
+      off() {
         if (visable) {
           results.empty();
-          if (hints.hasClass('unloaded')) {
-            hints.removeClass('unloaded');
+          if (hints.hasClass("unloaded")) {
+            hints.removeClass("unloaded");
           }
-          resultWrapper.addClass('unloaded');
-          btnClear.removeClass('visable');
-          main.removeClass('hidden');
+          resultWrapper.addClass("unloaded");
+          btnClear.removeClass("visable");
+          main.removeClass("hidden");
 
-          input.val('');
+          input.val("");
           visable = false;
 
           scrollBlocker.release();
         }
       },
-      isVisable: function() {
+      isVisable() {
         return visable;
       }
-    }
-  })();
+    };
+
+  }());
 
 
   function isMobileView() {
-    return btnCancel.hasClass('loaded');
+    return btnCancel.hasClass("loaded");
   }
 
   btnSearchTrigger.click(function() {
@@ -110,45 +111,45 @@ $(function() {
   });
 
   input.focus(function() {
-    searchWrapper.addClass('input-focus');
+    searchWrapper.addClass("input-focus");
   });
 
   input.focusout(function() {
-    searchWrapper.removeClass('input-focus');
+    searchWrapper.removeClass("input-focus");
   });
 
-  input.on('keyup', function(e) {
-    if (e.keyCode == 8 && input.val() == '') {
+  input.on("keyup", function(e) {
+    if (e.keyCode === 8 && input.val() === "") {
       if (!isMobileView()) {
         resultSwitch.off();
       } else {
-        hints.removeClass('unloaded');
+        hints.removeClass("unloaded");
       }
     } else {
-      if (input.val() != '') {
+      if (input.val() !== "") {
         resultSwitch.on();
 
-        if (!btnClear.hasClass('visible')) {
-          btnClear.addClass('visable');
+        if (!btnClear.hasClass("visible")) {
+          btnClear.addClass("visable");
         }
 
         if (isMobileView()) {
-          hints.addClass('unloaded');
+          hints.addClass("unloaded");
         }
       }
     }
   });
 
-  btnClear.on('click', function() {
-    input.val('');
+  btnClear.on("click", function() {
+    input.val("");
     if (isMobileView()) {
-      hints.removeClass('unloaded');
+      hints.removeClass("unloaded");
       results.empty();
     } else {
       resultSwitch.off();
     }
     input.focus();
-    btnClear.removeClass('visable');
+    btnClear.removeClass("visable");
   });
 
 });

assets/js/_commons/sidebar.js

@@ -11,24 +11,24 @@ $(function() {
   var sidebarUtil = (function() {
     const ATTR_DISPLAY = "sidebar-display";
     var isExpanded = false;
-    var body = $('body');
+    var body = $("body");
 
     return {
-      toggle: function() {
-        if (isExpanded == false) {
-          body.attr(ATTR_DISPLAY, '');
+      toggle() {
+        if (isExpanded === false) {
+          body.attr(ATTR_DISPLAY, "");
         } else {
           body.removeAttr(ATTR_DISPLAY);
         }
 
         isExpanded = !isExpanded;
       }
-    }
+    };
 
-  })();
+  }());
 
   $("#sidebar-trigger").click(sidebarUtil.toggle);
 
-  $('#mask').click(sidebarUtil.toggle);
+  $("#mask").click(sidebarUtil.toggle);
 
 });

assets/js/_commons/topbar-switch.js

@@ -11,7 +11,47 @@ $(function() {
   var didScroll;
   var lastScrollTop = 0;
   var delta = 5;
-  var topbarHeight = $('#topbar-wrapper').outerHeight();
+  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 */
@@ -26,42 +66,4 @@ $(function() {
     }
   }, 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/_commons/topbar-title.js

@@ -13,9 +13,9 @@ $(function() {
           $("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>' */
+    /* The title in Category or Tag page will be "<title> <count_of_posts>" */
     if (/\s/.test(title)) {
-      title = title.replace(/[0-9]/g, '').trim();
+      title = title.replace(/[0-9]/g, "").trim();
     }
   }
 
@@ -29,19 +29,19 @@ $(function() {
     }
 
     if ($(this).scrollTop() >= 95) {
-      if ($("#topbar-title").text() != title) {
+      if ($("#topbar-title").text() !== title) {
         $("#topbar-title").text(title);
       }
     } else {
-      if ($("#topbar-title").text() != DEFAULT) {
+      if ($("#topbar-title").text() !== DEFAULT) {
         $("#topbar-title").text(DEFAULT);
       }
     }
   });
 
   /* Click title remove hover effect. */
-  $('#topbar-title').click(function() {
-    $('body,html').animate({scrollTop: 0}, 800);
+  $("#topbar-title").click(function() {
+    $("body,html").animate({scrollTop: 0}, 800);
   });
 
 });

assets/js/_utils/category-collapse.js

@@ -7,26 +7,26 @@
  */
 
 $(function() {
-  var child_prefix = "l_";
-  var parent_prefix = "h_";
+  var childPrefix = "l_";
+  var parentPrefix = "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");
+    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 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");
+    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

@@ -11,84 +11,19 @@
  * 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) {
-  var count = 0;
-
-  if (rows !== undefined ) {
-    for (var i = 0; i < rows.length; ++i) {
-      var gaPath = rows[i][0];
-      if (gaPath == path) { /* path format see: site.permalink */
-        count += parseInt(rows[i][1]);
-        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, ''));
-    if (count > initCount) {
-      countUp(initCount, count, elem.attr('id'));
-    }
-  }
-}
-
-
-function displayPageviews(data) {
-  if (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);
-  }
-}
-
-
-var getInitStatus = (function() {
+var getInitStatus = (function () {
   var hasInit = false;
-  return function() {
+  return () => {
     let ret = hasInit;
     if (!hasInit) {
       hasInit = true;
     }
     return ret;
-  }
-})();
+  };
+}());
 
 
-var PvCache = (function() {
+var PvCache = (function () {
   const KEY_PV = "pv";
   const KEY_CREATION = "pv_created_date";
   const KEY_PV_SRC = "pv_source";
@@ -107,26 +42,26 @@ var PvCache = (function() {
   }
 
   return {
-    getData: function() {
+    getData() {
       return JSON.parse(localStorage.getItem(KEY_PV) );
     },
-    saveOriginCache: function(pv) {
+    saveOriginCache(pv) {
       set(KEY_PV, pv);
       set(KEY_PV_SRC, Source.ORIGIN );
       set(KEY_CREATION, new Date().toJSON() );
     },
-    saveProxyCache: function(pv) {
+    saveProxyCache(pv) {
       set(KEY_PV, pv);
       set(KEY_PV_SRC, Source.PROXY );
       set(KEY_CREATION, new Date().toJSON() );
     },
-    isFromOrigin: function() {
-      return get(KEY_PV_SRC) == Source.ORIGIN;
+    isFromOrigin() {
+      return get(KEY_PV_SRC) === Source.ORIGIN;
     },
-    isFromProxy: function() {
-      return get(KEY_PV_SRC) == Source.PROXY;
+    isFromProxy() {
+      return get(KEY_PV_SRC) === Source.PROXY;
     },
-    isExpired: function() {
+    isExpired() {
       if (PvCache.isFromOrigin() ) {
         let date = new Date(get(KEY_CREATION));
         date.setDate(date.getDate() + 1); /* update origin records every day */
@@ -139,30 +74,110 @@ var PvCache = (function() {
       }
       return false;
     },
-    getAllPagevies: function() {
+    getAllPagevies() {
       return PvCache.getData().totalsForAllResults["ga:pageviews"];
     },
-    newerThan: function(pv) {
+    newerThan(pv) {
       return PvCache.getAllPagevies() > pv.totalsForAllResults["ga:pageviews"];
     },
-    inspectKeys: function() {
-      if (localStorage.getItem(KEY_PV) == null
-        || localStorage.getItem(KEY_PV_SRC) == null
-        || localStorage.getItem(KEY_CREATION) == null) {
+    inspectKeys() {
+      if (localStorage.getItem(KEY_PV) === null
+        || localStorage.getItem(KEY_PV_SRC) === null
+        || localStorage.getItem(KEY_CREATION) === null) {
         localStorage.clear();
       }
     }
   };
 
-})(); /* PvCache */
+}()); /* 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 => {
+    fetch("/assets/js/data/pageviews.json")
+      .then((response) => response.json())
+      .then((data) => {
         if (filterOrigin) {
           if (PvCache.newerThan(data)) {
             return;
@@ -180,25 +195,9 @@ function fetchPageviews(fetchOrigin = true, filterOrigin = false) {
 }
 
 
-function fetchProxyPageviews() {
-  $.ajax({
-    type: 'GET',
-    url: proxyEndpoint, /* see: /assets/js/_pv-config.js */
-    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) {
+  if ($(".pageviews").length > 0) {
 
     PvCache.inspectKeys();
     let cache = PvCache.getData();

assets/js/_utils/timeago.js

@@ -8,24 +8,28 @@
 
 $(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()) {
+    if (past.getFullYear() !== now.getFullYear()) {
       toRefresh -= 1;
       return past.toLocaleString("en-US", {
-         year: 'numeric',
-         month: 'short',
-         day: 'numeric'
+        year: "numeric",
+        month: "short",
+        day: "numeric"
       });
     }
 
-    if (past.getMonth() != now.getMonth()) {
+    if (past.getMonth() !== now.getMonth()) {
       toRefresh -= 1;
       return past.toLocaleString("en-US", {
-         month: 'short',
-         day: 'numeric'
+        month: "short",
+        day: "numeric"
       });
     }
 
@@ -47,37 +51,33 @@ $(function() {
       return minute + " minute" + (minute > 1 ? "s" : "") + " ago";
     }
 
-    return (isLastmod? "just" : "Just") + " now";
+    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 isLastmod = $(this).hasClass("lastmod");
         var node = $(this).children("i");
-        var date = node.text();   /* ISO Date: 'YYYY-MM-DDTHH:MM:SSZ' */
+        var date = node.text(); /* ISO Date: "YYYY-MM-DDTHH:MM:SSZ" */
         $(this).text(timeago(date, isLastmod));
         $(this).append(node);
       }
     });
 
-    if (toRefresh == 0 && intervalId != undefined) {
+    if (toRefresh === 0 && typeof intervalId !== "undefined") {
       clearInterval(intervalId); /* stop interval */
     }
     return toRefresh;
   }
 
-
-  var toRefresh = $(".timeago").length;
-
-  if (toRefresh == 0) {
+  if (toRefresh === 0) {
     return;
   }
 
   if (updateTimeago() > 0) { /* run immediately */
-    var intervalId = setInterval(updateTimeago, 60000); /* run every minute */
+    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
   }
 
 });

assets/js/_utils/toc-filter.js

@@ -7,8 +7,8 @@
  */
 
 $(function() {
-  if ($("#post-wrapper .post-content h1").length == 0
-      && $("#post-wrapper .post-content h2").length == 0) {
+  if ($("#post-wrapper .post-content h1").length === 0
+      && $("#post-wrapper .post-content h2").length === 0) {
     $("#toc-wrapper").addClass("unloaded");
   }
 });

assets/js/_utils/tooltip-loader.js

@@ -6,5 +6,5 @@
  * MIT License
 */
 $(function () {
-  $('[data-toggle="tooltip"]').tooltip();
+  $("[data-toggle=\"tooltip\"]").tooltip();
 });

assets/js/post.min.js

@@ -13,3 +13,5 @@ layout: compress
 {% include_relative lib/_bootstrap-toc.min.js %}
 
 {% include_relative _utils/toc-filter.js %}
+
+{% include_relative _utils/img-hyperlink.js %}

docs/README_zh-CN.md

@@ -3,6 +3,7 @@
 🌏 [English](../README.md) • 简体中文
 
 [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
 [![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)
 
@@ -14,46 +15,44 @@
 
 ## 目录
 
-* [功能一览](#功能一览)
-* [安装](#安装)
-* [使用](#使用)
-* [参与贡献](#参与贡献)
-* [感谢](#感谢)
-* [赞助](#赞助)
-* [许可证书](#许可证书)
+- [功能一览](#功能一览)
+- [安装](#安装)
+- [使用](#使用)
+- [参与贡献](#参与贡献)
+- [感谢](#感谢)
+- [赞助](#赞助)
+- [许可证书](#许可证书)
 
 ## 功能一览
 
-* 文章置顶
-* 可配置的全局主题颜色
-* 文章最后修改日期
-* 文章目录
-* 自动推荐相关文章
-* 语法高亮
-* 二级目录
-* 数学表达式
-* 搜索
-* Atom 订阅
-* Disqus 评论
-* Google 分析
-* GA 浏览报告（高级功能）
-* SEO 优化
-* 网站性能优化
-
+- 文章置顶
+- 可配置的全局主题颜色
+- 文章最后修改日期
+- 文章目录
+- 自动推荐相关文章
+- 语法高亮
+- 二级目录
+- 数学表达式
+- 搜索
+- Atom 订阅
+- Disqus 评论
+- Google 分析
+- GA 浏览报告（高级功能）
+- SEO 优化
+- 网站性能优化
 
 ## 安装
 
-[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork)，然后克隆到本地：
+[Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork)，把仓库改名为 `USERNAME.github.io`（其中 `USERNAME` 是你的 GitHub 用户名）， 然后克隆到本地：
 
 ```terminal
-$ git clone git@github.com:<username>/jekyll-theme-chirpy -b master --single-branch
+$ git clone https://github.com/USERNAME/USERNAME.github.io.git -b master --single-branch
 ```
 
 ### 设置本地环境
 
 如果你想在本地运行或构建, 参考 [Jekyll Docs](https://jekyllrb.com/docs/installation/)安装 `Ruby`， `RubyGems` 和 `Bundler`。
 
-
 首次运行或构建时, 请先安装 Jekyll plugins。在项目根目录运行：
 
 ```terminal
@@ -62,21 +61,20 @@ $ bundle install
 
 `bundle` 会自动安装 `Gemfile` 内指定的依赖插件。
 
-另外，为了生成一些额外的文件（ Post 的分类、标签以及更新时间列表），需要用到一些脚本工具。如果你电脑的操作系统是 Debian 或者 macOS，请确保已经安装了[GNU coreutils](https://www.gnu.org/software/coreutils/)，否则，通过以下方式完成安装：
+为了生成一些额外的文件（Post 的 _分类_、_标签_ 以及 _更新时间列表_），需要用到一些脚本工具。而它们需要安装依赖包 [yq](https://github.com/mikefarah/yq#install)。另外，如果你电脑的操作系统是 Debian 或者 macOS，还需安装 [GNU coreutils](https://www.gnu.org/software/coreutils/)：
 
-* Debian
+- Debian
 
   ```console
   $ sudo apt-get install coreutils
   ```
 
-* macOS
+- macOS
 
   ```console
   $ brew install coreutils
   ```
 
-
 ## 使用
 
 运行 [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) 需要一些额外的文件, 它们不能通过 Jekyll 原生的命令生成，所以请严格依照下列说明去运行或部署此项目。
@@ -94,23 +92,23 @@ $ bash tools/init.sh
 上述脚本完成了以下工作:
 
 1. 从你的仓库中删除了:
+
 	- `.travis.yml`
-    - `.github` 下的文件和目录
 	- `_posts` 下的文件
 	- `docs` 目录
 
-2. 配置了 GitHub Actions：把 `.github/workflows/` 的文件 `pages-deploy.yml.hook` 重命名为 `pages-deploy.yml`。
+2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。
 
-3. 自动提交一个 Commit 以保存文件的更改。
+3. 自动提交一个 Commit 以保存上述文件的更改。
 
 ### 配置文件
 
 根据个人需要去修改 `_config.yml` 的变量，大部分都有注释介绍用法。典型的几个选项是：
 
-* `url`
-* `avatar`
-* `timezone`
-* `theme_mode`
+- `url`
+- `avatar`
+- `timezone`
+- `theme_mode`
 
 ### 本地运行
 
@@ -124,7 +122,6 @@ $ bash tools/run.sh
 
 如果你想在本地服务运行后，把修改源文件的更改实时刷新，可使用选项 `-r` (或 `--realtime`)，不过要先安装依赖 [**fswatch**](http://emcrisostomo.github.io/fswatch/) 。
 
-
 ### 部署
 
 部署开始前，把  `_config.yml` 的 `url` 改为 `https://<username>.github.io`(或者你的私有域名，如：`https://yourdomain.com`)。另外，如果你想使用 [Project 类型网站](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)，修改配置文件的 `baseurl` 为项目名称，以斜杠开头，如：`/project`。
@@ -135,40 +132,19 @@ $ bash tools/run.sh
 
 由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用脚本工具去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。
 
-1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
+1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。
 
-2. 除非你是使用 project 站点, 否则重命名你的仓库为 `<username>.github.io`。
+2. 回到 GitHub 上的仓库， 通过 _Settings_
+ → _Options_ → _GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site):
+    ![gh-pages-sources](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/gh-pages-sources.png)
 
-3. 选择分支 `gh-pages` 作为 GitHub Pages 的源.
-
-4. 按照 GitHub 指示的地址去访问你的网站。
+3. 按照 GitHub 指示的地址去访问你的网站。
 
 #### 部署到其他 Pages 平台
 
-在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。不过先别慌，可以通过工具来弥补这个遗憾。
+在 GitHub 之外的平台，例如 GitLab，就没法享受 **GitHub Actions** 的便利了。因此我们需要在本地构建站点（或者在其他第三方 CI 平台），然后推送站点文件到服务器上。
 
-先把本地仓库的 upstream 改为新平台的仓库地址，推送一发。以后每次更新内容后，提交 commit ，然后运行:
-
-```console
-$ bash tools/publish.sh
-```
-
->**注**: *最后更新* 列表根据文章的 git 修改记录生成，所以运行前先把 `_posts` 目录的修改提交。
-
-它会自动生成文章的 *最后修改日期* 和 *分类 / 标签* 页面，并自动提交一个 commit 并推送到 `origin/master` 。输出日志类似如下：
-
-```terminal
-[INFO] Success to update lastmod for 4 post(s).
-[INFO] Succeed! 3 category-pages created.
-[INFO] Succeed! 4 tag-pages created.
-[INFO] Published successfully!
-```
-
-最后，根据平台的说明文档为项目开启 Pages 服务。
-
-#### 部署到私人服务器
-
-在项目更目录，运行:
+在项目根目录，运行:
 
 ```console
 $ bash tools/build.sh -d /path/to/site/
@@ -180,23 +156,20 @@ $ bash tools/build.sh -d /path/to/site/
 
 若想要更多细节以及更佳的阅读体验，请参阅 [线上教程](https://chirpy.cotes.info/categories/tutorial/)。 与此同时，[Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki) 也有一份教程的拷贝。
 
-
 ## 参与贡献
 
 三人行必有我师，欢迎提报告 bug, 帮助改进代码质量，或者提交新功能。具体操作规则请参考 [贡献指南](../.github/CONTRIBUTING.md)，谢谢 🙏。
 
-## 感谢
+## 鸣谢
 
 这个主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息).
 
 :tada: 感谢所有参与代码贡献的小伙伴, 他们的 GayHub ID 在这个[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)。 另外, 提交过 issues(或者未被合并 PR) 的高富帅和白富美也不会被遗忘,他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。
 
-
 ## 赞助
 
 如果您喜欢这个主题或者它对您有帮助，请考虑打赏作者：在 [项目主页](https://github.com/cotes2020/jekyll-theme-chirpy) 点击按钮 <kbd>:heart: Sponsor</kbd> 选择适合的链接即可完成（国内一般选第二个链接，支付宝/微信赞助），您的打赏将会极大地鼓励作者，并帮助作者更好地维护项目！
 
-
 ## 许可证书
 
 本项目开源，基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。

tools/build.sh

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

tools/deploy.sh

@@ -7,37 +7,61 @@
 # © 2020 Cotes Chung
 # Published under MIT License
 
-
 set -eu
 
 PAGES_BRANCH="gh-pages"
 
 _no_branch=false
+_backup_dir="$(mktemp -d)"
 
-if [[ -z `git branch -av | grep $PAGES_BRANCH` ]]; then
+init() {
+  if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
     _no_branch=true
-  git checkout -b $PAGES_BRANCH
-else
-  git checkout $PAGES_BRANCH
-fi
+    git checkout -b "$PAGES_BRANCH"
+  else
+    git checkout "$PAGES_BRANCH"
+  fi
+}
 
-mv _site ../
-mv .git ../
+backup() {
+  mv _site/* "$_backup_dir"
+  mv .git "$_backup_dir"
 
-rm -rf * && rm -rf .[^.] .??*
+  # When adding custom domain from Github website,
+  # the CANME only exist on `gh-pages` branch
+  if [[ -f CNAME ]]; then
+    mv CNAME "$_backup_dir"
+  fi
+}
 
-mv ../_site/* .
-mv ../.git .
+flush() {
+  rm -rf ./*
+  rm -rf .[^.] .??*
 
-git config --global user.name "GitHub Actions"
-git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+  shopt -s dotglob nullglob
+  mv "$_backup_dir"/* .
+}
 
-git update-ref -d HEAD
-git add -A
-git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"
+deploy() {
+  git config --global user.name "GitHub Actions"
+  git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
 
-if [[ $_no_branch = true ]]; then
-  git push -u origin $PAGES_BRANCH
-else
+  git update-ref -d HEAD
+  git add -A
+  git commit -m "[Automation] Site update No.${GITHUB_RUN_NUMBER}"
+
+  if $_no_branch; then
+    git push -u origin "$PAGES_BRANCH"
+  else
     git push -f
-fi
+  fi
+}
+
+main() {
+  init
+  backup
+  flush
+  deploy
+}
+
+main

tools/init.sh

@@ -9,7 +9,6 @@
 
 set -eu
 
-
 ACTIONS_WORKFLOW=pages-deploy.yml
 
 help() {
@@ -25,25 +24,29 @@ help() {
 check_init() {
   local _has_inited=false
 
-  if [[ -d .github ]]; then
-    if [[ -f .github/workflows/$ACTIONS_WORKFLOW
-      && $(find .github/workflows/ -type f -name "*.yml" | wc -l) == 1 ]]; then
+  if [[ ! -d docs ]]; then
+    if [[ ! -d .github ]]; then
+      _has_inited=true # --no-gh
+    else
+      if [[ -f .github/workflows/$ACTIONS_WORKFLOW ]]; then
+        # on BSD, the `wc` could contains blank
+        local _count="$(find .github/workflows/ -type f -name "*.yml" | wc -l)"
+        if [[ ${_count//[[:blank:]]/} == 1 ]]; then
           _has_inited=true
         fi
-  else
-    _has_inited=true
+      fi
+    fi
   fi
 
-  if [[ $_has_inited = true ]]; then
+  if $_has_inited; then
     echo "Already initialized."
     exit 0
   fi
 }
 
-
 init_files() {
 
-  if [[ $_no_gh = true ]]; then
+  if $_no_gh; then
     rm -rf .github
   else
     mv .github/workflows/$ACTIONS_WORKFLOW.hook .
@@ -61,20 +64,18 @@ init_files() {
   echo "[INFO] Initialization successful!"
 }
 
-
 check_init
 
 _no_gh=false
 
-while (( $# ))
-do
+while (($#)); do
   opt="$1"
   case $opt in
     --no-gh)
       _no_gh=true
       shift
       ;;
-    -h|--help)
+    -h | --help)
       help
       exit 0
       ;;

tools/publish.sh

@@ -1,96 +0,0 @@
-#!/bin/bash
-#
-# Initial the Categories/Tags pages and Lastmod for posts and then push to remote
-#
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2019 Cotes Chung
-# Published under MIT License
-
-set -eu
-
-CATEGORIES=false
-TAGS=false
-LASTMOD=false
-
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-
-check_status() {
-  local _change=$(git status . -s)
-
-  if [[ ! -z ${_change} ]]; then
-    echo "Warning: Commit the following changes first:"
-    echo "$_change"
-    exit 1
-  fi
-}
-
-
-update_files() {
-  bash _scripts/sh/create_pages.sh
-  bash _scripts/sh/dump_lastmod.sh
-}
-
-
-commit() {
-  msg="Updated"
-
-  if [[ ! -z $(git status categories -s) ]]; then
-    git add categories/
-    msg+=" the Categories"
-    CATEGORIES=true
-  fi
-
-  if [[ ! -z $(git status tags -s) ]]; then
-    git add tags/
-    if [[ $CATEGORIES = true ]]; then
-      msg+=","
-    else
-      msg+=" the"
-    fi
-    msg+=" Tags"
-    TAGS=true
-  fi
-
-  if [[ ! -z $(git status _data -s) ]]; then
-    git add _data
-    if [[ $CATEGORIES = true || $TAGS = true ]]; then
-      msg+=","
-    else
-      msg+=" the"
-    fi
-    msg+=" Lastmod"
-    LASTMOD=true
-  fi
-
-  if [[ $CATEGORIES = true || $TAGS = true || $LASTMOD = true ]]; then
-    msg+=" for post(s)."
-    git commit -m "[Automation] $msg" -q
-  else
-    msg="Nothing changed."
-  fi
-
-}
-
-
-push() {
-  git push origin master -q
-  echo "[INFO] Published successfully!"
-}
-
-
-main() {
-
-  cd $WORK_DIR
-
-  check_status
-
-  update_files
-
-  commit
-
-  push
-}
-
-
-main

tools/pv.sh

@@ -15,12 +15,12 @@
 
 set -eu
 
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
-URL_FILE=${WORK_DIR}/_config.yml
-PV_CACHE=${WORK_DIR}/assets/js/data/pageviews.json
+WORK_DIR="$(dirname "$(dirname "$(realpath "$0")")")"
+URL_FILE="${WORK_DIR}/_config.yml"
+PV_CACHE="${WORK_DIR}/assets/js/data/pageviews.json"
 
-PROXY_URL=$(grep "proxy_endpoint:" $URL_FILE | sed "s/.*: '//g;s/'.*//")
+PROXY_URL="$(grep "proxy_endpoint:" "$URL_FILE" | sed "s/.*: '//g;s/'.*//")"
 
-wget $PROXY_URL -O $PV_CACHE
+wget "$PROXY_URL" -O "$PV_CACHE"
 
 echo "ls $PV_CACHE"

tools/run.sh

@@ -12,14 +12,16 @@
 
 set -eu
 
-WORK_DIR=$(dirname $(dirname $(realpath "$0")))
+WORK_DIR="$(dirname "$(dirname "$(realpath "$0")")")"
 
-CONTAINER=.container
+CONTAINER="${WORK_DIR}/.container"
 SYNC_TOOL=_scripts/sh/sync_monitor.sh
 
 cmd="bundle exec jekyll s"
-realtime=false
+JEKYLL_DOCKER_HOME="/srv/jekyll"
 
+realtime=false
+docker=false
 
 _help() {
   echo "Usage:"
@@ -33,34 +35,51 @@ _help() {
   echo "     -h, --help              Print the help information"
   echo "     -t, --trace             Show the full backtrace when an error occurs"
   echo "     -r, --realtime          Make the modified content updated in real time"
+  echo "         --docker            Run within docker"
 }
 
-
 _cleanup() {
-  if [[ -d _site || -d .jekyll-cache ]]; then
-    jekyll clean
-  fi
-
-  rm -rf ${WORK_DIR}/${CONTAINER}
+  rm -rf "$CONTAINER"
   ps aux | grep fswatch | awk '{print $2}' | xargs kill -9 > /dev/null 2>&1
 }
 
+_setup_docker() {
+  # docker image `jekyll/jekyll` based on Alpine Linux
+  echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories
+  ## CN Apline sources mirror
+  # sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
+  apk update
+  apk add yq
+}
 
 _init() {
+  cd "$WORK_DIR"
 
-  if [[ -d ${WORK_DIR}/${CONTAINER} ]]; then
-    rm -rf ${WORK_DIR}/${CONTAINER}
+  if [[ -f Gemfile.lock ]]; then
+    rm -f Gemfile.lock
   fi
 
-  temp=$(mktemp -d)
-  cp -r ${WORK_DIR}/* $temp
-  cp -r ${WORK_DIR}/.git $temp
-  mv $temp ${WORK_DIR}/${CONTAINER}
+  if [[ -d $CONTAINER ]]; then
+    rm -rf "$CONTAINER"
+  fi
+
+  mkdir "$CONTAINER"
+  cp -r ./* "$CONTAINER"
+  cp -r ./.git "$CONTAINER"
+
+  if $docker; then
+    local _image_user=$(stat -c "%U" "$JEKYLL_DOCKER_HOME"/.)
+
+    if [[ $_image_user != $(whoami) ]]; then
+      # under Docker for Linux
+      chown -R "$(stat -c "%U:%G" "$JEKYLL_DOCKER_HOME"/.)" "$CONTAINER"
+    fi
+
+  fi
 
   trap _cleanup INT
 }
 
-
 _check_unset() {
   if [[ -z ${1:+unset} ]]; then
     _help
@@ -68,52 +87,71 @@ _check_unset() {
   fi
 }
 
-
 _check_command() {
-  if [[ -z $(command -v $1) ]]; then
+  if [[ -z $(command -v "$1") ]]; then
     echo "Error: command '$1' not found !"
     echo "Hint: Get '$1' on <$2>"
     exit 1
   fi
 }
 
-
-main() {
-  _init
-
-  cd ${WORK_DIR}/${CONTAINER}
+_run() {
+  cd "$CONTAINER"
   bash _scripts/sh/create_pages.sh
   bash _scripts/sh/dump_lastmod.sh
 
-  if [[ $realtime = true ]]; then
-    fswatch -0 -e "\\$CONTAINER" -e "\.git" ${WORK_DIR} | xargs -0 -I {} bash ./${SYNC_TOOL} {} $WORK_DIR . &
+  if $realtime; then
+
+    exclude_regex="\/\..*"
+
+    if [[ $OSTYPE == "darwin"* ]]; then
+      exclude_regex="/\..*" # darwin gcc treat regex '/' as character '/'
+    fi
+
+    fswatch -e "$exclude_regex" -0 -r \
+      --event Created --event Removed \
+      --event Updated --event Renamed \
+      --event MovedFrom --event MovedTo \
+      "$WORK_DIR" | xargs -0 -I {} bash "./${SYNC_TOOL}" {} "$WORK_DIR" . &
+  fi
+
+  if $docker; then
+    cmd+=" -H 0.0.0.0"
+  else
+    cmd+=" -l -o"
   fi
 
   echo "\$ $cmd"
-  eval $cmd
+  eval "$cmd"
 }
 
+main() {
+  if $docker; then
+    _setup_docker
+  fi
 
-while (( $# ))
-do
+  _init
+  _run
+}
+
+while (($#)); do
   opt="$1"
   case $opt in
-    -H|--host)
-      _check_unset $2
+    -H | --host)
+      _check_unset "$2"
       cmd+=" -H $2"
       shift # past argument
       shift # past value
       ;;
-    -P|--port)
-      _check_unset $2
+    -P | --port)
+      _check_unset "$2"
       cmd+=" -P $2"
       shift
       shift
       ;;
-    -b|--baseurl)
-      _check_unset $2
-      if [[ $2 == \/* ]]
-      then
+    -b | --baseurl)
+      _check_unset "$2"
+      if [[ $2 == \/* ]]; then
         cmd+=" -b $2"
       else
         _help
@@ -122,16 +160,20 @@ do
       shift
       shift
       ;;
-    -t|--trace)
+    -t | --trace)
       cmd+=" -t"
       shift
       ;;
-    -r|--realtime)
-      _check_command fswatch 'http://emcrisostomo.github.io/fswatch/'
+    -r | --realtime)
+      _check_command fswatch "http://emcrisostomo.github.io/fswatch/"
       realtime=true
       shift
       ;;
-    -h|--help)
+    --docker)
+      docker=true
+      shift
+      ;;
+    -h | --help)
       _help
       exit 0
       ;;
@@ -143,5 +185,4 @@ do
   esac
 done
 
-
 main

tools/test.sh

@@ -4,7 +4,7 @@
 #
 # Requirement: https://github.com/gjtorikian/html-proofer
 #
-# Usage: bash /path/to/test.sh
+# Usage: bash /path/to/test.sh [indicated path]
 #
 # v2.0
 # https://github.com/cotes2020/jekyll-theme-chirpy
@@ -14,6 +14,10 @@
 DEST=_site
 URL_IGNORE=cdn.jsdelivr.net
 
+if [[ -n $1 && -d $1 ]]; then
+  DEST=$1
+fi
+
 bundle exec htmlproofer $DEST \
   --disable-external \
   --check-html \