chore(release): 6.2.2

Fixes #1224

.github/CONTRIBUTING.md

@@ -1,55 +0,0 @@
-# How to Contribute
-
-:tada: We really appreciate you taking the time to improve this project! :tada:
-
-To ensure that the blog design is not confusing, this project does not accept
-suggestions for design changes, such as color scheme, fonts, typography, etc.
-If your request is about an enhancement, it is recommended to first submit a
-[Feature Request][pr-issue] issue to discuss whether your idea fits the project.
-
-Basically, you can follow these steps to complete the contribution.
-
-1. Fork this project on GitHub and clone it locally.
-2. Create a new branch from the default branch and give it a descriptive name
-   (format: `feature/<add-new-feat>` or `fix/<fix-a-bug>`).
-3. After completing development, create a [Conventional Commit][cc] with git.
-  (See also: ["Verify the commits"](#verify-the-commits))
-4. Create a [Pull Request][gh-pr].
-
-## Make sure you can pass the CI tests
-
-This project has [CI][ci] turned on. In order for your [PR][gh-pr] to pass the test,
-please read the following.
-
-### Check the core functionality
-  
-```console
-bash ./tools/test
-```
-
-### Check the SASS syntax style
-
-```console
-npm test
-```
-
-### Verify the commits
-
-Before you create a git commit, please complete the following setup.
-
-Install `commitlint` & `husky`:
-
-```console
-npm i -g @commitlint/{cli,config-conventional} husky
-```
-
-And then enable `husky`:
-
-```console
-husky install
-```
-
-[pr-issue]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?labels=enhancement&template=feature_request.md
-[gh-pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
-[cc]: https://www.conventionalcommits.org/
-[ci]: https://en.wikipedia.org/wiki/Continuous_integration

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,14 +3,7 @@ name: Bug Report
 about: Create a report to help us improve
 ---
 
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Make sure the bug is found in the latest code of the `master` branch.
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
+> **Tips**: Remember, contributions to this repository should follow the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
 
 ## Describe the bug
 

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Ask the community for help
+    url: https://github.com/cotes2020/jekyll-theme-chirpy/discussions
+    about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,14 +4,7 @@ about: Suggest an idea for this project
 labels: enhancement
 ---
 
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Make sure the request is based on the latest code in the `master` branch.
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
+> **Tips**: Remember, contributions to this repository should follow the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
 
 ## Is your feature request related to a problem? Please describe
 

.github/ISSUE_TEMPLATE/help_wanted.md

@@ -1,28 +0,0 @@
----
-name: Help Wanted
-about: Need help that is not covered in the tutorial
-labels: 'help wanted'
----
-
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow].
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
-[forum]: https://talk.jekyllrb.com/
-[stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll
-
-## Description
-
-<!-- Please describe your need in detail. -->
-
-## Operations you have already tried
-
-<!-- Describe the effort you went through. -->
-
-## Logs/Screenshots
-
-<!-- If applicable, add logs/screenshots to help explain your problem. -->

.github/ISSUE_TEMPLATE/question.md

@@ -1,20 +0,0 @@
----
-name: Question
-about: Issues that differ from other templates
-labels: question
----
-
-**NOTE:** Before you start, the following should be completed.
-
-- Read [Wiki][wiki] to understand the usage and the correct effect of functional design.
-- Make sure no [similar issue(including closed ones)][issues] exists.
-- Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow].
-
-[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
-[forum]: https://talk.jekyllrb.com/
-[stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll
-
-## Description
-
-<!-- Please describe your question in detail. -->

.github/SECURITY.md

@@ -1,12 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-| Version | Supported          |
-|---------| ------------------ |
-| 5.x     | :white_check_mark: |
-| < 5.0.0 | :x:                |
-
-## Reporting a Vulnerability
-
-If you find a vulnerability, please report it to `cotes.chung@gmail.com`. We will try our best to respond within a week. Thank you for your time!

.github/dependabot.yml

@@ -0,0 +1,26 @@
+version: 2
+updates:
+  - package-ecosystem: "bundler"
+    directory: "/"
+    versioning-strategy: increase
+    groups:
+      bundler:
+        dependency-type: "production"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    versioning-strategy: increase
+    groups:
+      npm:
+        dependency-type: "development"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    groups:
+      gh-actions:
+        update-types:
+          - "major"
+    schedule:
+      interval: "weekly"

.github/stale.yml

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

.github/workflows/cd.yml

@@ -1,7 +1,10 @@
 name: CD
 on:
   push:
-    branches: [production, docs]
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+"
+    branches:
+      - docs
 
 jobs:
   launch:

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ on:
       - ".github/**"
       - "!.github/workflows/ci.yml"
       - ".gitignore"
+      - "docs/**"
       - "README.md"
       - "LICENSE"
   pull_request:
@@ -24,7 +25,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # for posts's lastmod
 

.github/workflows/codeql.yml

@@ -25,7 +25,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/commitlint.yml

@@ -5,7 +5,7 @@ jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: wagoid/commitlint-github-action@v5

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

@@ -28,7 +28,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # submodules: true
@@ -42,7 +42,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3   # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
+          ruby-version: 3
           bundler-cache: true
 
       - name: Build site
@@ -52,7 +52,9 @@ jobs:
 
       - name: Test site
         run: |
-          bundle exec htmlproofer _site --disable-external --check-html --allow_hash_href
+          bundle exec htmlproofer _site \
+            \-\-disable-external=true \
+            \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
         uses: actions/upload-pages-artifact@v1
@@ -68,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2

.github/workflows/stale.yml

@@ -0,0 +1,30 @@
+name: "Close stale issues and PRs"
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # every day at 00:00 UTC
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-stale: 30
+          days-before-close: 1
+          stale-issue-label: stale
+          exempt-issue-labels: pending
+          stale-issue-message: >
+            This issue has been automatically marked as stale because it has not had recent activity.
+            It will be closed if no further activity occurs.
+            Thank you for your contributions.
+          stale-pr-label: stale
+          exempt-pr-labels: pending
+          stale-pr-message: >
+            This PR has been automatically marked as stale because it has not had recent activity.
+            It will be closed if no further activity occurs.
+            Thank you for your contributions.

.github/workflows/style-lint.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
         uses: actions/setup-node@v3

.stylelintrc.json

@@ -17,6 +17,7 @@
       "always",
       { "ignore": ["after-comment", "first-nested", "inside-block"] }
     ],
-    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }]
+    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }],
+    "media-feature-range-notation": "prefix"
   }
 }

CHANGELOG.md

@@ -2,8 +2,55 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [6.0.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.0.1) (2023-05-19)
+## [6.2.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.1...v6.2.2) (2023-09-10)
 
+### Bug Fixes
+
+* **sidebar:** contact icons not stacking ([#1224](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1224)) ([273b389](https://github.com/cotes2020/jekyll-theme-chirpy/commit/273b389c512f13693ed6cdf57d256ac21deae97c))
+
+## [6.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.0...v6.2.1) (2023-09-10)
+
+### Bug Fixes
+
+* **pwa:** installation failure caused by outdated cache entries ([4da7406](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4da7406dfea112a4a2b1db5615ecf2672be6694f))
+
+## [6.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.1.0...v6.2.0) (2023-09-10)
+
+### Features
+
+* **layout:** center the footer ([41b8f9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41b8f9f519e5f5f69e9a123b38b06bade2271a82))
+* **posts:** render heading 4 in TOC ([#1023](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1023)) ([229c2a2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/229c2a2e2b109fc2eca85be548f1dd97234e44c4))
+* **ui:** redesign the pagination button on home page ([62bcd60](https://github.com/cotes2020/jekyll-theme-chirpy/commit/62bcd601fcadc602c81672b1d4b937231396c3c0))
+* **ui:** update the twitter icon ([#1221](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1221)) ([aff7566](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aff75667749769644f990d3dc9b0720c7d96d14d))
+
+### Improvements
+
+* **core:** speed up the Jekyll build times ([#1163](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1163)) ([0d4103d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0d4103d47bc9cff93918bb09a2957737cc3c9fe0))
+* refactor using semantic HTML ([#1207](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1207)) ([505e314](https://github.com/cotes2020/jekyll-theme-chirpy/commit/505e314a3142c332e39365fbe2dac23df1bf0abe)), closes [#1196](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1196)
+* **ui:** improve code snippet design ([4f86b04](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4f86b04a8487ebbf4a6d0d70b0c3ece79e9269f3))
+* **ui:** improve web accessibility ([#447](https://github.com/cotes2020/jekyll-theme-chirpy/issues/447)) ([37c9764](https://github.com/cotes2020/jekyll-theme-chirpy/commit/37c976499ead51c1d88e8e8213366240a72adebc))
+
+## [6.1.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.1.0) (2023-07-02)
+
+### Features
+
+* **i18n:** add Thai locale file ([#1087](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1087)) ([a60e907](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a60e90791d24811caff78e21c71dc85d6a729438))
+
+### Bug Fixes
+
+* missing xml escape for `alt` of preview image ([#1113](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1113)) ([8b0fbf5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8b0fbf5a834276f273274e4d614edd71e339cbb0))
+* the cached image is covered by shimmer ([#1100](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1100)) ([df8ff54](https://github.com/cotes2020/jekyll-theme-chirpy/commit/df8ff546ec1c8d21a3d25e0124665001fcf756f3))
+* **ui:** min-height of `page` layout exceeds the mobile screen ([73af591](https://github.com/cotes2020/jekyll-theme-chirpy/commit/73af59194ab935d38b89d298fea0e96e13be7cb7))
+* **webfont:** resume semi-bold of font family `Source Sans Pro` ([c4da99c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c4da99c7ea5d6e32b1f1b815d7d8d6ae7b0f55de))
+
+### Improvements
+
+* **build:** use `jekyll-include-cache` plugin to reduce build time ([#1098](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1098)) ([4fe145e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4fe145e9809ee1b370d9891135939534751462d0)), closes [#1094](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1094)
+* CJK characters of the "Search Cancel" button will wrap ([#1105](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1105)) ([b6d1992](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b6d1992f85ec543220e826087dcc89870e7e2c00))
+* **ui:** avoid blank space at the bottom of the homepage preview image ([ce2f6f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ce2f6f5abef7a8b874e08d1f18c1fd002650dbf1))
+* **ui:** improve hover color of sidebar nav items in light mode ([728094d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/728094d1ba67a1e7c0a11e1c6c69bf87af9a767b))
+
+## [6.0.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.0.1) (2023-05-19)
 
 ### Bug Fixes
 
@@ -14,7 +61,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [6.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.1...v6.0.0) (2023-05-16)
 
-
 ### ⚠ BREAKING CHANGES
 
 * rename assets origin configuration files
@@ -32,18 +78,15 @@ All notable changes to this project will be documented in this file. See [standa
 * **ui:** redesign the sidebar ([83bbe4a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83bbe4ac939edfd1706e68c080562e3462f83519))
 * **ui:** show preview image in home page ([97b8dfe](https://github.com/cotes2020/jekyll-theme-chirpy/commit/97b8dfeed6ce7677f6472e28dc3b03f3c2968b12))
 
-
 ### Bug Fixes
 
 * parameter parsing error in image URL ([#1022](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1022)) ([ee88cec](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ee88cec270ea5938f98913a3edf28a684cfbd6c0))
 * **rss:** double quotes in the post title will break the XML structure ([#965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/965)) ([1719d81](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1719d81d00b32b107c35b3903089be84a9b28a6c))
 
-
 ### refactor
 
 * rename assets origin configuration files ([c283e77](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c283e7782fa9562d82d9855fd280a573fd58c75f))
 
-
 ### Improvements
 
 * **assets:** reduce HTTP requests to CDN ([9d97120](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9d971201978e993a9af337d9cd5396a1ea225f00))
@@ -63,7 +106,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.6.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.0...v5.6.1) (2023-03-30)
 
-
 ### Bug Fixes
 
 * **deps:** `tocbot` has no initialization detection ([#957](https://github.com/cotes2020/jekyll-theme-chirpy/issues/957)) ([8225174](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8225174cb5e02fda7b3cc548ec821c876b0a5139))
@@ -72,14 +114,12 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.6.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.2...v5.6.0) (2023-03-17)
 
-
 ### Features
 
 * change TOC plugin to `tocbot` ([#774](https://github.com/cotes2020/jekyll-theme-chirpy/issues/774)) ([02b7bd5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/02b7bd5095a2affe5b4c5ed7b5b182baaf642ff3))
 * **i18n:** add Greek Language Support. ([#903](https://github.com/cotes2020/jekyll-theme-chirpy/issues/903)) ([712a9b2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/712a9b22401ce591cf4c0bb03fbdd1693fee30bb))
 * **ux:** turn home page posts into clickable cards ([#895](https://github.com/cotes2020/jekyll-theme-chirpy/issues/895)) ([b85f633](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b85f6330dea666350631c4461b742cdb54c5f052))
 
-
 ### Bug Fixes
 
 * css selector string escaping vulnerability ([#888](https://github.com/cotes2020/jekyll-theme-chirpy/issues/888)) ([5c6ec9d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5c6ec9d06b6571e2c0efe6652078442dca8af477))
@@ -89,21 +129,18 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.1...v5.5.2) (2023-01-30)
 
-
 ### Bug Fixes
 
 * position of prompt icon is incorrect in paragraph on mobile ([5df953f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5df953f6c877e2aa3f1f4981c97a0b8007abe6d4))
 
 ## [5.5.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.0...v5.5.1) (2023-01-29)
 
-
 ### Bug Fixes
 
 * the icon position of the prompts in the list is incorrect ([0c9558d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c9558de8a01e9ab795778f351a8bbf4d6b21763))
 
 ## [5.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.4.0...v5.5.0) (2023-01-29)
 
-
 ### Features
 
 * **i18n:** add Arabic translation ([#857](https://github.com/cotes2020/jekyll-theme-chirpy/issues/857)) ([765af53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/765af53b77e5c63804784d5728f5970ae274c2c7))
@@ -111,7 +148,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **i18n:** add Finnish translations ([#843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/843)) ([d6d0318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d6d03183eaf94b44e037cc48b6e1c47cee183f6e))
 * **i18n:** add Italian translation ([#850](https://github.com/cotes2020/jekyll-theme-chirpy/issues/850)) ([9a011e1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9a011e14d66195d8b2fb9ec62f3e60a3e56cd032))
 
-
 ### Bug Fixes
 
 *  copy command line incomplete(`.gp` part) ([41ed331](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41ed33145639415148aec8e85edc7a6fd0de0ca3))
@@ -121,7 +157,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
 
-
 ### Features
 
 * add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
@@ -131,7 +166,6 @@ All notable changes to this project will be documented in this file. See [standa
 * support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
 * support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
 
-
 ### Bug Fixes
 
 * `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
@@ -139,14 +173,12 @@ All notable changes to this project will be documented in this file. See [standa
 * refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
 * spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
 
-
 ### Improvements
 
 * **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
 
 ## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)
 
-
 ### Bug Fixes
 
 * `mermaid` occasionally fails to initialize ([#536](https://github.com/cotes2020/jekyll-theme-chirpy/issues/536)) ([48f14e3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae))
@@ -156,14 +188,12 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.0...v5.3.1) (2022-10-25)
 
-
 ### Bug Fixes
 
 * 404 page missing title in tablet/desktop view ([5511b28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5511b2883fd5a395fddfb642588d00c122f18da7))
 * prompt content overflows horizontally ([#705](https://github.com/cotes2020/jekyll-theme-chirpy/issues/705)) ([fb13e32](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fb13e3219b5eca0d2e4f86a1ecabfab75240369f))
 * **tools:** multiple configuration files will fail the test ([80cb0b3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/80cb0b371754e96772a7907877a8ce196398ba3d))
 
-
 ### Improvements
 
 * **layout:** improve the min-height of main content ([#674](https://github.com/cotes2020/jekyll-theme-chirpy/issues/674)) ([49bb93c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/49bb93cc0c89ad9cfaad5edcf9cb28c3d5134575))
@@ -181,7 +211,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.1...v5.3.0) (2022-09-23)
 
-
 ### Features
 
 * add multiple authors to a post ([#677](https://github.com/cotes2020/jekyll-theme-chirpy/issues/677)) ([f1d9e99](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f1d9e99bc02d3cd0a6b0cd1beac545f0cc7a24f8)), closes [#675](https://github.com/cotes2020/jekyll-theme-chirpy/issues/675)
@@ -190,7 +219,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **i18n:** add Hungarian locale file ([#597](https://github.com/cotes2020/jekyll-theme-chirpy/issues/597), [#598](https://github.com/cotes2020/jekyll-theme-chirpy/issues/598)) ([b032977](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0329775fc24d0323e5cc04cda46ece8b4531802))
 * **i18n:** add Turkish language ([#631](https://github.com/cotes2020/jekyll-theme-chirpy/issues/631)) ([ad137fa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ad137fa2945b1870b9c1dd5e9212a5f4af7c3580))
 
-
 ### Bug Fixes
 
 * add missing color to linkedin icon for share list ([#683](https://github.com/cotes2020/jekyll-theme-chirpy/issues/683)) ([0dcd39d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0dcd39d491c9c49e4acf7f75f83fe6e1d1839e37))
@@ -201,7 +229,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.0...v5.2.1) (2022-06-17)
 
-
 ### Bug Fixes
 
 * exclude CHANGELOG from output ([971fe03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/971fe03ec329ae49e7d60fe3af6101cfbd1acd6c))
@@ -209,7 +236,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [5.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.1.0...v5.2.0) (2022-06-09)
 
-
 ### Features
 
 * add es-ES support to locales ([#533](https://github.com/cotes2020/jekyll-theme-chirpy/issues/533)) ([efe75ad](https://github.com/cotes2020/jekyll-theme-chirpy/commit/efe75adf2784956afb7a0b67f6634b146d9cb03b))
@@ -220,7 +246,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **PWA:** add Service Worker update notification ([d127183](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d127183b9774f6321e409acdb66bf8a85d8814be))
 * support showing description of preview image ([2bd6efa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bd6efa95a174ac44e30a3af1e57e6f40d6e0e3a))
 
-
 ### Bug Fixes
 
 * alt is not a valid attribute for 'a' tag ([58928db](https://github.com/cotes2020/jekyll-theme-chirpy/commit/58928dbc9068db4e4cda4371eeae1865920dce6a))
@@ -240,7 +265,6 @@ All notable changes to this project will be documented in this file. See [standa
 * use `jsonify` to generate valid json ([#521](https://github.com/cotes2020/jekyll-theme-chirpy/issues/521)) ([dd9d5a7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/dd9d5a7207b746342d07176d8969dc4f2c380bf2))
 * when the `site.img_cdn` is set to the local path, the preview-image path loses the `baseurl` ([9cefe58](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9cefe58993d9ea3a3a28424e7ffd8e0911567c5c))
 
-
 ### Improvements
 
 * avoid post pageviews from shifting while loading ([135a16f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/135a16f13ee783d9308669ff9a824847a73c951c))

Gemfile

@@ -5,7 +5,7 @@ source "https://rubygems.org"
 gemspec
 
 group :test do
-  gem "html-proofer", "~> 3.18"
+  gem "html-proofer", "~> 4.4"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

README.md

@@ -4,10 +4,10 @@
 
   A minimal, responsive and feature-rich Jekyll theme for technical writing.
 
-  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)](https://rubygems.org/gems/jekyll-theme-chirpy)
-  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml)
-  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)](https://www.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade)
-  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
+  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)][gem] 
+  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg?branch=master&event=push)][ci] 
+  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)][codacy] 
+  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)][license] 
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
   [**Live Demo →**][demo]
@@ -26,21 +26,21 @@
 
   - Dark / Light Theme Mode
   - Localized UI language
-  - Pinned Posts
+  - Pinned Posts on Home Page
   - Hierarchical Categories
   - Trending Tags
   - Table of Contents
-  - Last Modified Date of Posts
+  - Last Modified Date
   - Syntax Highlighting
   - Mathematical Expressions
-  - Mermaid Diagram & Flowchart
+  - Mermaid Diagrams & Flowcharts
   - Dark / Light Mode Images
   - Embed Videos
   - Disqus / Utterances / Giscus Comments
-  - Search
+  - Built-in Search
   - Atom Feeds
+  - PWA
   - Google Analytics
-  - Page Views Reporting
   - SEO & Performance Optimization
 
   </p>
@@ -48,13 +48,11 @@
 
 ## Documentation
 
-To explore usage, development, and upgrade guide of the project, please refer to
-the [Wiki][wiki].
+To explore usage, development, and upgrade guide of the project, please refer to the [**Wiki**][wiki].
 
 ## Contributing
 
-Welcome to report bugs, help improve the code or submit new features.
-For more information, please see the ["Contributing Guidelines"][contribute-guide].
+Contributions (Issues/PRs/Discussions) are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. For details, see the "[Contributing Guidelines][contribute-guide]".
 
 ## Credits
 
@@ -62,34 +60,36 @@ This theme is mainly built with [Jekyll][jekyllrb] ecosystem,
 [Bootstrap][bootstrap], [Font Awesome][icons] and some other [wonderful tools][lib].
 The avatar and favicon design come from [Clipart Max][image].
 
-Thanks to all the [contributors][contributors]. Also, folks who submitted issues
-or unmerged PRs should not be forgotten. Because they reported bugs, shared ideas,
-or inspired me to write more readable documentation.
+Many thanks to the [contributors][contributors] who participated in the development
+and to the folks who reported bugs or shared ideas.
 
-Last but not least, thanks to [JetBrains][jetbrains] for providing the
-_Open Source Development_ license.
+Last but not least, thanks to [JetBrains][jetbrains] for providing the _Open Source License_.
 
 ## Sponsoring
 
 If you'd like to sponsor this project, the following options are available.
 
-[![Ko-fi](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ff5f5f?logo=ko-fi&logoColor=white)](https://ko-fi.com/coteschung)
-[![Wechat Pay](https://img.shields.io/badge/-Tip%20Me%20on%20WeChat-brightgreen?logo=wechat&logoColor=white)][donation]
-[![Alipay](https://img.shields.io/badge/-Tip%20Me%20on%20Alipay-blue?logo=alipay&logoColor=white)][donation]
+[![Ko-fi](https://img.shields.io/badge/Support_Me_on_Ko--fi-ff5e5b?logo=ko-fi&logoColor=white)][ko-fi]&nbsp;
+[![Wechat Pay](https://img.shields.io/badge/Tip_Me_on_WeChat-brightgreen?logo=wechat&logoColor=white)][donation]&nbsp;
+[![Alipay](https://img.shields.io/badge/Tip_Me_on_Alipay-blue?logo=alipay&logoColor=white)][donation]
 
 ## License
 
-This work is published under [MIT][mit] License.
+This work is published under [MIT License][license].
 
+[gem]: https://rubygems.org/gems/jekyll-theme-chirpy
+[ci]: https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml?query=event%3Apush+branch%3Amaster
+[codacy]: https://app.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade
+[license]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE
 [jekyllrb]: https://jekyllrb.com/
 [bootstrap]: https://getbootstrap.com/
 [icons]: https://fontawesome.com/
 [image]: https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/
 [demo]: https://cotes2020.github.io/chirpy-demo/
 [wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
-[contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/CONTRIBUTING.md
+[contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md
 [contributors]: https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors
 [lib]: https://github.com/cotes2020/chirpy-static-assets
 [jetbrains]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
+[ko-fi]: https://ko-fi.com/coteschung/
 [donation]: https://sponsor.cotes.page/
-[mit]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE

_config.yml

@@ -12,7 +12,7 @@ baseurl: ""
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
+# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker
 timezone: Asia/Shanghai
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
@@ -54,10 +54,6 @@ google_site_verification: # fill in to your verification string
 
 google_analytics:
   id: # fill in your Google Analytics ID
-  # Google Analytics pageviews report settings
-  pv:
-    proxy_endpoint: # fill in the Google Analytics superProxy endpoint of Google App Engine
-    cache_path: # the local PV cache data, friendly to visitors from GFW region
 
 # Prefer color scheme setting.
 #
@@ -181,12 +177,12 @@ compress_html:
 exclude:
   - "*.gem"
   - "*.gemspec"
+  - docs
   - tools
   - README.md
   - CHANGELOG.md
   - LICENSE
   - rollup.config.js
-  - node_modules
   - package*.json
 
 jekyll-archives:

_data/contact.yml

@@ -4,7 +4,7 @@
   icon: "fab fa-github"
 
 - type: twitter
-  icon: "fab fa-twitter"
+  icon: "fa-brands fa-x-twitter"
 
 - type: email
   icon: "fas fa-envelope"

_data/locales/th.yml

@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: โพสต์
+  category: หมวดหมู่
+  tag: แท็ก
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: หน้าแรก
+  categories: หมวดหมู่
+  tags: แท็ก
+  archives: คลังเก็บ
+  about: เกี่ยวกับ
+
+# the text displayed in the search bar & search results
+search:
+  hint: ค้นหา
+  cancel: ยกเลิก
+  no_results: โอ๊ะ! ไม่พบผลลัพธ์
+
+panel:
+  lastmod: อัปเดตล่าสุด
+  trending_tags: แท็กยอดนิยม
+  toc: เนื้อหา
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: โพสต์นี้อยู่ภายใต้การอนุญาต :LICENSE_NAME โดยผู้เขียน
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: สงวนลิขสิทธิ์เป็นบางส่วน
+  verbose: >-
+    เว้นแต่ว่าจะระบุเป็นอย่างอื่น โพสต์บนเว็บไซต์นี้อยู่ภายใต้
+    สัญญาอนุญาตครีเอทีฟคอมมอนส์แบบ 4.0 นานาชาติ (CC BY 4.0) โดยผู้เขียน
+
+meta: กำลังใช้ธีมของ :PLATFORM ชื่อ :THEME
+
+not_found:
+  statment: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
+
+notification:
+  update_found: มีเวอร์ชันใหม่ของเนื้อหา
+  update: อัปเดต
+
+# ----- Posts related labels -----
+
+post:
+  written_by: โดย
+  posted: โพสต์เมื่อ
+  updated: อัปเดตเมื่อ
+  words: คำ
+  pageview_measure: ครั้ง
+  read_time:
+    unit: นาที
+    prompt: อ่าน
+  relate_posts: อ่านต่อ
+  share: แชร์
+  button:
+    next: ใหม่กว่า
+    previous: เก่ากว่า
+    copy_code:
+      succeed: คัดลอกแล้ว!
+    share_link:
+      title: คัดลอกลิงก์
+      succeed: คัดลอกลิงก์เรียบร้อยแล้ว!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: หมวดหมู่
+    plural: หมวดหมู่
+  post_measure:
+    singular: โพสต์
+    plural: โพสต์

_data/locales/tr-TR.yml

@@ -23,7 +23,7 @@ search:
   no_results: Hop! Öyle bir şey bulamadım.
 
 panel:
-  lastmod: Yeni Güncellendi
+  lastmod: Son Güncellenenler
   trending_tags: Yükselen Etiketler
   toc: İçindekiler
 
@@ -38,7 +38,7 @@ copyright:
   brief: Bazı hakları saklıdır.
   verbose: >-
     Aksi belirtilmediği sürece, bu sitedeki gönderiler Creative Commons Atıf 4.0 Uluslararası (CC BY 4.0) Lisansı altındadır.
-    Kısaca sayfa linkini de vererek paylaşabilir veya düzenleyip paylaşabilirsin.
+    Kısaca sayfa linkini vererek değiştirebilir / paylaşabilirsiniz.
 
 meta: :PLATFORM ve :THEME teması
 
@@ -53,8 +53,8 @@ notification:
 
 post:
   written_by: Yazan
-  posted: Gönderilme Tarihi
-  updated: Güncellenme Tarihi
+  posted: Gönderim
+  updated: Güncelleme
   words: sözcük
   pageview_measure: görüntülenme
   read_time:

_data/origin/basic.yml

@@ -31,9 +31,6 @@ dayjs:
     relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
     localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
 
-countup:
-  js: /assets/lib/countup.js/countUp.min.js
-
 magnific-popup:
   css: /assets/lib/magnific-popup/magnific-popup.css
   js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js

_data/origin/cors.yml

@@ -11,39 +11,36 @@ cdns:
 
 # fonts
 
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
 
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.1/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.1/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.min.js
-
-countup:
-  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/localizedFormat.min.js
 
 magnific-popup:
   css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css

_data/share.yml

@@ -3,7 +3,7 @@
 
 platforms:
   - type: Twitter
-    icon: "fab fa-twitter"
+    icon: "fa-brands fa-square-x-twitter"
     link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
 
   - type: Facebook

_includes/comments/disqus.html

@@ -1,5 +1,6 @@
 <!-- The Disqus lazy loading. -->
-<div id="disqus_thread" class="pt-2 pb-2">
+
+<div id="disqus_thread" class="mb-5">
   <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
 </div>
 

_includes/datetime.html

@@ -3,12 +3,13 @@
   See: ${JS_ROOT}/utils/locale-dateime.js
 -->
 
-{% assign wrap_elem = include.wrap | default: 'em' %}
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
 {% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
 
-<{{ wrap_elem }}
-  class="{% if include.class %}{{ include.class }}{% endif %}"
+<time
+  {% if include.class %}
+    class="{{ include.class }}"
+  {% endif %}
   data-ts="{{ include.date | date: '%s' }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
@@ -16,4 +17,4 @@
   {% endif %}
 >
   {{ include.date | date: df_strftime }}
-</{{ wrap_elem }}>
+</time>

_includes/footer.html

@@ -1,23 +1,15 @@
 <!-- The Footer -->
 
-<footer>
-  <div class="container px-lg-4">
-    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
+<footer
+  aria-label="Site Info"
+  class="
+    d-flex flex-column justify-content-center text-muted
+    flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
+  "
+>
   <p>
-        {%- capture _platform -%}
-          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {%- endcapture -%}
-
-        {%- capture _theme -%}
-          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-        {%- endcapture -%}
-
-        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
-      </p>
-
-      <p>
-        {{- '©' }}
-        {{ 'now' | date: '%Y' }}
+    {{ '©' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
     <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
     {% if site.data.locales[include.lang].copyright.brief %}
       <span
@@ -29,6 +21,16 @@
       </span>
     {% endif %}
   </p>
-    </div>
-  </div>
+
+  <p>
+    {%- capture _platform -%}
+      <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+    {%- endcapture -%}
+
+    {%- capture _theme -%}
+      <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+    {%- endcapture -%}
+
+    {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+  </p>
 </footer>

_includes/head.html

@@ -11,16 +11,6 @@
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
   >
 
-  {% if page.layout == 'home' or page.layout == 'post' %}
-    {% if site.google_analytics.pv.proxy_endpoint %}
-      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
-    {% endif %}
-
-    {% if site.google_analytics.pv.cache_path %}
-      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
-    {% endif %}
-  {% endif %}
-
   {% capture seo_tags %}
     {% seo title=false %}
   {% endcapture %}
@@ -55,7 +45,7 @@
     {{ site.title }}
   </title>
 
-  {% include favicons.html %}
+  {% include_cached favicons.html %}
 
   {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
     <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
@@ -76,17 +66,6 @@
 
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-
-    {% if site.google_analytics.pv.proxy_endpoint %}
-      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
-        | replace: 'https://', ''
-        | split: '/'
-        | first
-        | prepend: 'https://'
-      %}
-      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ proxy_url }}">
-    {% endif %}
   {% endif %}
 
   <!-- Bootstrap -->
@@ -95,7 +74,7 @@
   <!-- Font Awesome -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
 
   {% if site.toc and page.toc %}
     <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">

_includes/js-selector.html

@@ -11,13 +11,6 @@
 
 <!-- layout specified -->
 
-{% if page.layout == 'post' %}
-  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-    <!-- pv-report needs countup.js -->
-    {% assign urls = urls | append: ',' | append: site.data.origin[type].countup.js %}
-  {% endif %}
-{% endif %}
-
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
   {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
 

_includes/notification.html

@@ -0,0 +1,24 @@
+<aside
+  id="notification"
+  class="toast"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-bs-animation="true"
+  data-bs-autohide="false"
+>
+  <div class="toast-header">
+    <button
+      type="button"
+      class="btn-close ms-auto"
+      data-bs-dismiss="toast"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="toast-body text-center pt-0">
+    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
+    <button type="button" class="btn btn-primary" aria-label="Update">
+      {{ site.data.locales[include.lang].notification.update }}
+    </button>
+  </div>
+</aside>

_includes/post-nav.html

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

_includes/post-paginator.html

@@ -1,6 +1,7 @@
 <!-- The paginator for post list on HomgPage. -->
 
-<ul class="pagination align-items-center mt-4 mb-1 ps-lg-2">
+<nav aria-label="Page Navigation">
+  <ul class="pagination align-items-center mt-4 mb-0">
     <!-- left arrow -->
     {% if paginator.previous_page %}
       {% assign prev_url = paginator.previous_page_path | relative_url %}
@@ -9,7 +10,7 @@
     {% endif %}
 
     <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
-    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
+      <a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
         <i class="fas fa-angle-left"></i>
       </a>
     </li>
@@ -45,7 +46,7 @@
         <!-- show number -->
         <li class="page-item {% if i == paginator.page %} active{% endif %}">
           <a
-          class="page-link btn-box-shadow"
+            class="page-link"
             href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
           >
             {{- i -}}
@@ -55,12 +56,12 @@
         <!-- hide number -->
         {% if i < pre and left_ellipsis == false %}
           <li class="page-item disabled">
-          <span class="page-link btn-box-shadow">...</span>
+            <span class="page-link">...</span>
           </li>
           {% assign left_ellipsis = true %}
         {% elsif i > next and right_ellipsis == false %}
           <li class="page-item disabled">
-          <span class="page-link btn-box-shadow">...</span>
+            <span class="page-link">...</span>
           </li>
           {% assign right_ellipsis = true %}
         {% endif %}
@@ -81,9 +82,10 @@
     {% endif %}
 
     <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
-    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
+      <a class="page-link" href="{{ next_url }}" aria-label="next-page">
         <i class="fas fa-angle-right"></i>
       </a>
     </li>
-</ul>
+  </ul>
+</nav>
 <!-- .pagination -->

_includes/post-sharing.html

@@ -1,6 +1,6 @@
 <!-- Post sharing snippet -->
 
-<div class="share-wrapper">
+<div class="share-wrapper d-flex align-items-center">
   <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
@@ -22,14 +22,16 @@
       </a>
     {% endfor %}
 
-    <i
+    <button
       id="copy-link"
-      class="fa-fw fas fa-link small"
+      aria-label="Copy link"
+      class="btn small"
       data-bs-toggle="tooltip"
       data-bs-placement="top"
       title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
       data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
     >
-    </i>
+      <i class="fa-fw fas fa-link pe-none"></i>
+    </button>
   </span>
 </div>

_includes/related-posts.html

@@ -1,7 +1,4 @@
-<!--
-  Recommend the other 3 posts according to the tags and categories of the current post,
-  if the number is not enough, use the other latest posts to supplement.
--->
+<!-- Recommend the other 3 posts according to the tags and categories of the current post. -->
 
 <!-- The total size of related posts -->
 {% assign TOTAL_SIZE = 3 %}
@@ -14,11 +11,21 @@
 
 {% assign SEPARATOR = ':' %}
 
+{% assign match_posts = '' | split: '' %}
+
+{% for category in page.categories %}
+  {% assign match_posts = match_posts | push: site.categories[category] | uniq %}
+{% endfor %}
+
+{% for tag in page.tags %}
+  {% assign match_posts = match_posts | push: site.tags[tag] | uniq %}
+{% endfor %}
+
+{% assign last_index = match_posts.size | minus: 1 %}
 {% assign score_list = '' | split: '' %}
-{% assign last_index = site.posts.size | minus: 1 %}
 
 {% for i in (0..last_index) %}
-  {% assign post = site.posts[i] %}
+  {% assign post = match_posts[i] %}
 
   {% if post.url == page.url %}
     {% continue %}
@@ -54,39 +61,25 @@
   {% endfor %}
 {% endif %}
 
-<!-- Fill with the other newlest posts -->
-{% assign less = TOTAL_SIZE | minus: index_list.size %}
+{% assign relate_posts = '' | split: '' %}
 
-{% if less > 0 %}
-  {% for i in (0..last_index) %}
-    {% assign post = site.posts[i] %}
-    {% if post.url != page.url %}
-      {% capture cur_index %}{{ i }}{% endcapture %}
-      {% unless index_list contains cur_index %}
-        {% assign index_list = index_list | push: cur_index %}
-        {% assign less = less | minus: 1 %}
-        {% if less <= 0 %}
-          {% break %}
-        {% endif %}
-      {% endunless %}
-    {% endif %}
-  {% endfor %}
-{% endif %}
+{% for index in index_list %}
+  {% assign i = index | to_integer %}
+  {% assign relate_posts = relate_posts | push: match_posts[i] %}
+{% endfor %}
 
-{% if index_list.size > 0 %}
-  <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
-      {{ site.data.locales[include.lang].post.relate_posts }}
+{% if relate_posts.size > 0 %}
+  <aside id="related-posts" aria-labelledby="related-label">
+    <h3 class="mb-4" id="related-label">
+      {{- site.data.locales[include.lang].post.relate_posts -}}
     </h3>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
-      {% for entry in index_list %}
-        {% assign index = entry | plus: 0 %}
-        {% assign post = site.posts[index] %}
-        <div class="col">
-          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
+    <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+      {% for post in relate_posts %}
+        <article class="col">
+          <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
             <div class="card-body">
               {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted small">
                 <p>
                   {% include no-linenos.html content=post.content %}
@@ -95,10 +88,9 @@
               </div>
             </div>
           </a>
-        </div>
+        </article>
       {% endfor %}
-    </div>
-    <!-- .card-deck -->
-  </div>
+    </nav>
+  </aside>
   <!-- #related-posts -->
 {% endif %}

_includes/search-loader.html

@@ -4,14 +4,16 @@
 -->
 
 {% capture result_elem %}
-<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
-  <a href="{url}">{title}</a>
+  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
+    <header>
+      <h2><a href="{url}">{title}</a></h2>
       <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
         {categories}
         {tags}
       </div>
+    </header>
     <p>{snippet}</p>
-</div>
+  </article>
 {% endcapture %}
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}

_includes/search-results.html

@@ -1,9 +1,9 @@
 <!-- The Search results -->
 
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-11 post-content">
+  <div class="col-11 content">
     <div id="search-hints">
-      {% include trending-tags.html %}
+      {% include_cached trending-tags.html %}
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/sidebar.html

@@ -1,7 +1,7 @@
 <!-- The Side Bar -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper">
+<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
+  <header class="profile-wrapper">
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {% if site.avatar != empty and site.avatar %}
         {% capture avatar_url %}
@@ -17,14 +17,15 @@
       {% endif %}
     </a>
 
-    <div class="site-title">
+    <h1 class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </div>
-    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
-  </div>
+    </h1>
+    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
+  </header>
   <!-- .profile-wrapper -->
 
-  <ul class="nav flex-column flex-grow-1 w-100 ps-0">
+  <nav class="flex-column flex-grow-1 w-100 ps-0">
+    <ul class="nav">
       <!-- home -->
       <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
         <a href="{{ '/' | relative_url }}" class="nav-link">
@@ -45,11 +46,11 @@
         <!-- .nav-item -->
       {% endfor %}
     </ul>
-  <!-- ul.nav.flex-column -->
+  </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -100,5 +101,5 @@
     {% endfor %}
   </div>
   <!-- .sidebar-bottom -->
-</div>
+</aside>
 <!-- #sidebar -->

_includes/toc.html

@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <div id="toc-wrapper" class="ps-0 pe-4 mb-5">
-    <div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
+  <section id="toc-wrapper" class="ps-0 pe-4 mb-5">
+    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
-  </div>
+  </section>
 {% endif %}

_includes/topbar.html

@@ -1,11 +1,11 @@
 <!-- The Top Bar -->
 
-<div id="topbar-wrapper">
+<header id="topbar-wrapper" aria-label="Top Bar">
   <div
     id="topbar"
-    class="container d-flex align-items-center justify-content-between h-100"
+    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
   >
-    <span id="breadcrumb">
+    <nav id="breadcrumb" aria-label="Breadcrumb">
       {% assign paths = page.url | split: '/' %}
 
       {% if paths.size == 0 or page.layout == 'home' %}
@@ -37,10 +37,12 @@
           {% endif %}
         {% endfor %}
       {% endif %}
-    </span>
+    </nav>
     <!-- endof #breadcrumb -->
 
-    <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
@@ -53,8 +55,11 @@
       {% endif %}
     </div>
 
-    <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrapper" class="align-items-center">
+    <button type="button" id="search-trigger" class="btn btn-link">
+      <i class="fas fa-search fa-fw"></i>
+    </button>
+
+    <search class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"
@@ -64,7 +69,9 @@
         autocomplete="off"
         placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
       >
-    </span>
-    <span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- site.data.locales[include.lang].search.cancel -}}
+    </button>
   </div>
-</div>
+</header>

_includes/trending-tags.html

@@ -34,13 +34,13 @@
 {% endfor %}
 
 {% if trending_tags.size > 0 %}
-  <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
+  <section>
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
     <div class="d-flex flex-wrap mt-3 mb-1 me-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
         <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
     </div>
-  </div>
+  </section>
 {% endif %}

_includes/update-list.html

@@ -22,9 +22,9 @@
 {% endfor %}
 
 {% if update_list.size > 0 %}
-  <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
-    <ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
+  <section id="access-lastmod">
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
+    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}
@@ -34,6 +34,6 @@
         </li>
       {% endfor %}
     </ul>
-  </div>
+  </section>
   <!-- #access-lastmod -->
 {% endif %}

_javascript/_copyright

@@ -1,3 +1 @@
-Chirpy v<%= pkg.version %> (<%= pkg.homepage %>)
-© 2019 <%= pkg.author %>
-<%= pkg.license %> Licensed
+Chirpy v<%= pkg.version %> | © 2019 <%= pkg.author %> | <%= pkg.license %> Licensed | <%= pkg.homepage %>

_javascript/modules/components/back-to-top.js

@@ -3,15 +3,18 @@
  */
 
 export function back2top() {
-  $(window).on('scroll', () => {
-    if ($(window).scrollTop() > 50) {
-      $('#back-to-top').fadeIn();
+  const $window = $(window);
+  const $btn = $('#back-to-top');
+
+  $window.on('scroll', () => {
+    if ($window.scrollTop() > 50) {
+      $btn.fadeIn();
     } else {
-      $('#back-to-top').fadeOut();
+      $btn.fadeOut();
     }
   });
 
-  $('#back-to-top').on('click', () => {
-    window.scrollTo(0, 0);
+  $btn.on('click', () => {
+    $window.scrollTop(0);
   });
 }

_javascript/modules/components/clipboard.js

@@ -99,7 +99,9 @@ export function initClipboard() {
 
   /* --- Post link sharing --- */
 
-  $('#copy-link').on('click', (e) => {
+  const btnCopyLink = $('#copy-link');
+
+  btnCopyLink.on('click', (e) => {
     let target = $(e.target);
 
     if (isLocked(target)) {
@@ -120,4 +122,10 @@ export function initClipboard() {
       }, TIMEOUT);
     });
   });
+
+  btnCopyLink.on('mouseleave', function (e) {
+    const target = $(e.target);
+    target.tooltip('hide');
+    console.log('mouse leave...');
+  });
 }

_javascript/modules/components/img-lazyload.js

@@ -2,14 +2,26 @@
  * Set up image lazy-load
  */
 
+function stopShimmer($node) {
+  $node.parent().removeClass('shimmer');
+}
+
 export function imgLazy() {
-  if ($('#core-wrapper img[data-src]') <= 0) {
+  const $images = $('main img[data-src]');
+
+  if ($images.length <= 0) {
     return;
   }
 
   /* Stop shimmer when image loaded */
   document.addEventListener('lazyloaded', function (e) {
-    const $img = $(e.target);
-    $img.parent().removeClass('shimmer');
+    stopShimmer($(e.target));
+  });
+
+  /* Stop shimmer from cached images */
+  $images.each(function () {
+    if ($(this).hasClass('ls-is-cached')) {
+      stopShimmer($(this));
+    }
   });
 }

_javascript/modules/components/pageviews.js

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

_javascript/modules/components/search-display.js

@@ -4,9 +4,9 @@
 const $btnSbTrigger = $('#sidebar-trigger');
 const $btnSearchTrigger = $('#search-trigger');
 const $btnCancel = $('#search-cancel');
-const $content = $('#main>.row');
+const $content = $('#main-wrapper>.container>.row');
 const $topbarTitle = $('#topbar-title');
-const $searchWrapper = $('#search-wrapper');
+const $search = $('search');
 const $resultWrapper = $('#search-result-wrapper');
 const $results = $('#search-results');
 const $input = $('#search-input');
@@ -39,13 +39,13 @@ class MobileSearchBar {
     $btnSbTrigger.addClass(C_UNLOADED);
     $topbarTitle.addClass(C_UNLOADED);
     $btnSearchTrigger.addClass(C_UNLOADED);
-    $searchWrapper.addClass(C_FLEX);
+    $search.addClass(C_FLEX);
     $btnCancel.addClass(C_LOADED);
   }
 
   static off() {
     $btnCancel.removeClass(C_LOADED);
-    $searchWrapper.removeClass(C_FLEX);
+    $search.removeClass(C_FLEX);
     $btnSbTrigger.removeClass(C_UNLOADED);
     $topbarTitle.removeClass(C_UNLOADED);
     $btnSearchTrigger.removeClass(C_UNLOADED);
@@ -55,7 +55,7 @@ class MobileSearchBar {
 class ResultSwitch {
   static on() {
     if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main) unloaded.
+      // the block method must be called before $(#main-wrapper>.container) unloaded.
       ScrollBlocker.on();
       $resultWrapper.removeClass(C_UNLOADED);
       $content.addClass(C_UNLOADED);
@@ -72,7 +72,7 @@ class ResultSwitch {
       $resultWrapper.addClass(C_UNLOADED);
       $content.removeClass(C_UNLOADED);
 
-      // now the release method must be called after $(#main) display
+      // now the release method must be called after $(#main-wrapper>.container) display
       ScrollBlocker.off();
 
       $input.val('');
@@ -98,11 +98,11 @@ export function displaySearch() {
   });
 
   $input.on('focus', function () {
-    $searchWrapper.addClass(C_FOCUS);
+    $search.addClass(C_FOCUS);
   });
 
   $input.on('focusout', function () {
-    $searchWrapper.removeClass(C_FOCUS);
+    $search.removeClass(C_FOCUS);
   });
 
   $input.on('input', () => {

_javascript/modules/components/toc.js

@@ -1,11 +1,11 @@
 export function toc() {
-  if (document.querySelector('#core-wrapper h2,#core-wrapper h3')) {
+  if (document.querySelector('main h2')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
       tocSelector: '#toc',
-      contentSelector: '.post-content',
+      contentSelector: '.content',
       ignoreSelector: '[data-toc-skip]',
-      headingSelector: 'h2, h3',
+      headingSelector: 'h2, h3, h4',
       orderedList: false,
       scrollSmooth: false
     });

_javascript/modules/plugins.js

@@ -3,5 +3,4 @@ export { initClipboard } from './components/clipboard';
 export { imgLazy } from './components/img-lazyload';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
-export { initPageviews } from './components/pageviews';
 export { toc } from './components/toc';

_javascript/post.js

@@ -4,7 +4,6 @@ import {
   imgPopup,
   initLocaleDatetime,
   initClipboard,
-  initPageviews,
   toc
 } from './modules/plugins';
 
@@ -16,4 +15,3 @@ imgPopup();
 initLocaleDatetime();
 initClipboard();
 toc();
-initPageviews();

_layouts/archives.html

@@ -9,20 +9,21 @@ layout: page
 {% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
 
 <div id="archives" class="pl-xl-3">
-
-{% for post in site.posts %}
-  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+  {% for post in site.posts %}
+    {% assign cur_year = post.date | date: '%Y' %}
 
     {% if cur_year != last_year %}
       {% unless forloop.first %}</ul>{% endunless %}
-    <div class="year lead">{{ cur_year }}</div>
-    <ul class="list-unstyled">
+
+      <time class="year lead d-block">{{ cur_year }}</time>
+      {{ '<ul class="list-unstyled">' }}
+
       {% assign last_year = cur_year %}
     {% endif %}
 
     <li>
       {% assign ts = post.date | date: '%s' %}
-    <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
+      <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
       <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
         {{ post.date | date: df_strftime_m }}
       </span>
@@ -30,7 +31,5 @@ layout: page
     </li>
 
     {% if forloop.last %}</ul>{% endif %}
-
-{% endfor %}
-
+  {% endfor %}
 </div>

_layouts/category.html

@@ -12,12 +12,12 @@ layout: page
     <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
 
-  <ul class="post-content ps-0">
+  <ul class="content ps-0">
     {% for post in page.posts %}
       <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
-        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
       </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -15,6 +15,10 @@ layout: compress
   {% endif %}
 {% endcapture %}
 
+{% if layout.tail_includes %}
+  {% assign has_tail = true %}
+{% endif %}
+
 <!-- `site.alt_lang` can specify a language different from the UI -->
 <html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
@@ -23,54 +27,69 @@ layout: compress
     {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container px-xxl-5">
+      <div class="container px-xxl-5">
         {% include topbar.html lang=lang %}
+
+        <div class="row">
+          <main
+            aria-label="Main Content"
+            class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
+          >
             {{ content }}
-        {% include search-results.html lang=lang %}
+          </main>
+
+          <!-- panel -->
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
+            <div class="access">
+              {% include_cached update-list.html lang=lang %}
+              {% include_cached trending-tags.html lang=lang %}
+            </div>
+
+            {% for _include in layout.panel_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
+          </aside>
+        </div>
+
+        <div class="row">
+          <!-- tail -->
+          <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% if has_tail %}
+              {% for _include in layout.tail_includes %}
+                {% assign _include_path = _include | append: '.html' %}
+                {% include {{ _include_path }} lang=lang %}
+              {% endfor %}
+            {% endif %}
+
+            {% include_cached footer.html lang=lang %}
           </div>
         </div>
 
-    {% include footer.html lang=lang %}
+        {% include_cached search-results.html lang=lang %}
+      </div>
+
+      <aside aria-label="Scroll to Top">
+        <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
+          <i class="fas fa-angle-up"></i>
+        </button>
+      </aside>
+    </div>
 
     <div id="mask"></div>
 
-    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
-      <i class="fas fa-angle-up"></i>
-    </a>
-
     {% if site.pwa.enabled %}
-      <div
-        id="notification"
-        class="toast"
-        role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
-        data-bs-animation="true"
-        data-bs-autohide="false"
-      >
-        <div class="toast-header">
-          <button
-            type="button"
-            class="btn-close ms-auto"
-            data-bs-dismiss="toast"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="toast-body text-center pt-0">
-          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
-          <button type="button" class="btn btn-primary" aria-label="Update">
-            {{ site.data.locales[lang].notification.update }}
-          </button>
-        </div>
-      </div>
+      {% include_cached notification.html lang=lang %}
     {% endif %}
 
+    <!-- JavaScripts -->
+
     {% include js-selector.html %}
 
     {% if page.mermaid %}
       {% include mermaid.html %}
     {% endif %}
 
-    {% include search-loader.html %}
+    {% include_cached search-loader.html %}
   </body>
 </html>

_layouts/home.html

@@ -1,6 +1,5 @@
 ---
-layout: page
-refactor: true
+layout: default
 ---
 
 {% include lang.html %}
@@ -40,10 +39,10 @@ refactor: true
   {% endfor %}
 {% endif %}
 
-<div id="post-list">
+{% capture content %}
   {% for post in posts %}
-    <a href="{{ post.url | relative_url }}" class="card-wrapper">
-      <div class="card post-preview flex-md-row-reverse">
+    <article class="card-wrapper">
+      <a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
         {% if post.image %}
           {% if post.image.lqip %}
             {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
@@ -54,17 +53,15 @@ refactor: true
             {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
           {% endunless %}
 
-          {% assign alt = post.image.alt | default: 'Preview Image' %}
+          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
 
-          <img src="{{ src }}" w="15" h="8" alt="{{ alt }}" {{ lqip }}>
+          <img src="{{ src }}" w="17" h="10" alt="{{ alt }}" {{ lqip }}>
         {% endif %}
 
         <div class="card-body d-flex flex-column">
-          <h1 class="card-title my-2 mt-md-0">
-            {{ post.title }}
-          </h1>
+          <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
-          <div class="card-text post-content mt-0 mb-2">
+          <div class="card-text content mt-0 mb-2">
             <p>
               {% include no-linenos.html content=post.content %}
               {{ content | markdownify | strip_html | truncate: 200 | escape }}
@@ -99,9 +96,13 @@ refactor: true
           <!-- .post-meta -->
         </div>
         <!-- .card-body -->
-      </div>
       </a>
+    </article>
   {% endfor %}
+{% endcapture %}
+
+<div id="post-list" class="flex-grow-1 pe-xl-2">
+  {% include refactor-content.html content=content lang=lang %}
 </div>
 <!-- #post-list -->
 

_layouts/page.html

@@ -2,67 +2,25 @@
 layout: default
 ---
 
-{% include lang.html %}
-{% include origin-type.html %}
-
-{% if layout.tail_includes %}
-  {% assign has_tail = true %}
-{% endif %}
-
-<div class="row{% unless has_tail %} mb-5{% endunless %}">
-  <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
-    {% capture padding %}
-      {% unless page.layout == 'home' %}px-1{% endunless %}
-    {% endcapture %}
-
-    <div class="post {{ padding | strip }} px-md-2">
-      {% capture _content %}
+{% capture _content %}
   {% if layout.refactor or page.layout == 'page' %}
     {% include refactor-content.html content=content lang=lang %}
   {% else %}
     {{ content }}
   {% endif %}
-    {% endcapture %}
+{% endcapture %}
 
+<article class="px-1">
   {% if page.layout == 'page' or page.collection == 'tabs' %}
     {% assign tab_key = page.title | downcase %}
     {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
     <h1 class="dynamic-title">
       {{ title }}
     </h1>
-        <div class="post-content">
+    <div class="content">
       {{ _content }}
     </div>
   {% else %}
     {{ _content }}
   {% endif %}
-    </div>
-  </div>
-  <!-- #core-wrapper -->
-
-  <!-- panel -->
-  <div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
-    <div class="access">
-      {% include update-list.html lang=lang %}
-      {% include trending-tags.html lang=lang %}
-    </div>
-
-    {% for _include in layout.panel_includes %}
-      {% assign _include_path = _include | append: '.html' %}
-      {% include {{ _include_path }} lang=lang %}
-    {% endfor %}
-  </div>
-</div>
-
-<!-- tail -->
-{% if has_tail %}
-  <div class="row">
-    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
-      {% for _include in layout.tail_includes %}
-        {% assign _include_path = _include | append: '.html' %}
-        {% include {{ _include_path }} lang=lang %}
-      {% endfor %}
-    </div>
-  </div>
-{% endif %}
+</article>

_layouts/post.html

@@ -11,9 +11,10 @@ tail_includes:
 
 {% include lang.html %}
 
-<h1 data-toc-skip>{{ page.title }}</h1>
+<header>
+  <h1 data-toc-skip>{{ page.title }}</h1>
 
-<div class="post-meta text-muted">
+  <div class="post-meta text-muted">
     <!-- published date -->
     <span>
       {{ site.data.locales[lang].post.posted }}
@@ -31,7 +32,7 @@ tail_includes:
     {% if page.image %}
       {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
       {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-    {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
+      {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
 
       {% capture lqip %}
       {% if page.image.lqip %}
@@ -62,7 +63,7 @@ tail_includes:
           {% if authors %}
             {% for author in authors %}
               <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
-          {% unless forloop.last %}</em>, <em>{% endunless %}
+              {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
             {% endfor %}
           {% else %}
             <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
@@ -70,38 +71,26 @@ tail_includes:
         </em>
       </span>
 
-    <div>
-      <!-- page views -->
-      {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-      <span>
-        <em id="pv" class="pageviews">
-          <i class="fas fa-spinner fa-spin fa-fw"></i>
-        </em>
-        {{ site.data.locales[lang].post.pageview_measure }}
-      </span>
-      {% endif %}
-
       <!-- read time -->
       {% include read-time.html content=content prompt=true lang=lang %}
     </div>
+    <!-- .d-flex -->
+  </div>
+  <!-- .post-meta -->
+</header>
 
-  </div> <!-- .d-flex -->
-
-</div> <!-- .post-meta -->
-
-<div class="post-content">
+<div class="content">
   {{ content }}
 </div>
 
 <div class="post-tail-wrapper text-muted">
-
   <!-- categories -->
   {% if page.categories.size > 0 %}
     <div class="post-meta mb-3">
       <i class="far fa-folder-open fa-fw me-1"></i>
       {% for category in page.categories %}
-      <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
-      {%- unless forloop.last -%}, {%- endunless -%}
+        <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
+        {%- unless forloop.last -%},{%- endunless -%}
       {% endfor %}
     </div>
   {% endif %}
@@ -111,20 +100,24 @@ tail_includes:
     <div class="post-tags">
       <i class="fa fa-tags fa-fw me-1"></i>
       {% for tag in page.tags %}
-      <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
-          class="post-tag no-text-decoration" >
+        <a
+          href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
+          class="post-tag no-text-decoration"
+        >
           {{- tag -}}
         </a>
       {% endfor %}
     </div>
   {% endif %}
 
-  <div class="post-tail-bottom
-    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
+  <div
+    class="
+      post-tail-bottom
+      d-flex justify-content-between align-items-center mt-5 pb-2
+    "
+  >
     <div class="license-wrapper">
-
       {% if site.data.locales[lang].copyright.license.template %}
-
         {% capture _replacement %}
         <a href="{{ site.data.locales[lang].copyright.license.link }}">
           {{ site.data.locales[lang].copyright.license.name }}
@@ -132,12 +125,11 @@ tail_includes:
         {% endcapture %}
 
         {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
-
       {% endif %}
     </div>
 
     {% include post-sharing.html lang=lang %}
-
-  </div><!-- .post-tail-bottom -->
-
-</div><!-- div.post-tail-wrapper -->
+  </div>
+  <!-- .post-tail-bottom -->
+</div>
+<!-- div.post-tail-wrapper -->

_layouts/tag.html

@@ -11,12 +11,12 @@ layout: page
     {{ page.title }}
     <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
-  <ul class="post-content ps-0">
+  <ul class="content ps-0">
     {% for post in page.posts %}
       <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
-        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
       </li>
     {% endfor %}
   </ul>

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

@@ -23,7 +23,7 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 <h3 data-toc-skip>H3 - heading</h3>
 
-<h4>H4 - heading</h4>
+<h4 data-toc-skip>H4 - heading</h4>
 
 ## Paragraph
 

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

@@ -5,6 +5,7 @@ date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 pin: true
+img_path: '/posts/20180809'
 ---
 
 ## Prerequisites
@@ -63,6 +64,10 @@ Update the variables of `_config.yml`{: .filepath} as needed. Some of them are t
 - `timezone`
 - `lang`
 
+### Social Contact Options
+
+Social contact options are displayed at the bottom of the sidebar. You can turn on/off the specified contacts in file `_data/contact.yml`{: .filepath }.
+
 ### Customizing Stylesheet
 
 If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
@@ -114,6 +119,8 @@ There are a few things to get ready for.
 Next, configure the _Pages_ service.
 
 1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.  
+![Build source](pages-source-light.png){: .light .border .normal w='375' h='140' }
+![Build source](pages-source-dark.png){: .dark .normal w='375' h='140' }
 
 2. Push any commits to GitHub to trigger the _Actions_ workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site will be deployed automatically.
 

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

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

_sass/addon/commons.scss

@@ -175,17 +175,13 @@ kbd {
 footer {
   font-size: 0.8rem;
   background-color: var(--main-bg);
-
-  div.d-flex {
   height: $footer-height;
-    line-height: 1.2rem;
-    padding-bottom: 1rem;
   border-top: 1px solid var(--main-border-color);
-    flex-wrap: wrap;
-  }
+
+  @extend %text-color;
 
   a {
-    @extend %text-color;
+    @extend %text-highlight;
 
     &:hover {
       @extend %link-hover;
@@ -193,7 +189,7 @@ footer {
   }
 
   p {
-    width: 100%;
+    line-height: 1.75;
     text-align: center;
     margin-bottom: 0;
   }
@@ -220,7 +216,7 @@ i {
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
@@ -229,7 +225,7 @@ i {
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
 }
@@ -237,13 +233,15 @@ i {
 #panel-wrapper {
   /* the headings */
   .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
     @include label(inherit);
   }
 
   .post-tag {
     line-height: 1.05rem;
     font-size: 0.85rem;
-    border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
@@ -280,16 +278,6 @@ i {
       margin-top: 0;
       margin-bottom: 0;
     }
-
-    /* [scroll-focus] added by `smooth-scroll.js` */
-    &:target:not([scroll-focus]),
-    &[scroll-focus='true'] > p {
-      background-color: var(--footnote-target-bg);
-      width: -moz-fit-content;
-      width: -webkit-fit-content;
-      width: fit-content;
-      transition: background-color 1.5s ease-in-out;
-    }
   }
 }
 
@@ -301,12 +289,6 @@ i {
     border-bottom-style: none !important;
     transition: background-color 1.5s ease-in-out;
   }
-
-  /* [scroll-focus] added by `smooth-scroll.js` */
-  @at-root sup:target:not([scroll-focus]),
-    sup[scroll-focus='true'] > a#{&} {
-    background-color: var(--footnote-target-bg);
-  }
 }
 
 .reversefootnote {
@@ -388,7 +370,10 @@ i {
   }
 }
 
-.post {
+main {
+  line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
+
   h1 {
     margin-top: 2rem;
     margin-bottom: 1.5rem;
@@ -402,10 +387,14 @@ i {
       }
     }
   }
-}
 
-.pageviews .fa-spinner {
-  font-size: 80%;
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-meta {
@@ -422,7 +411,7 @@ i {
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
@@ -504,7 +493,7 @@ i {
   ::marker {
     color: var(--text-muted-color);
   }
-} /* .post-content */
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -514,9 +503,10 @@ i {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--btn-border-color);
   padding: 0 0.4rem;
-  color: inherit;
+  color: var(--text-muted-color);
   line-height: 1.3rem;
 
   &:not(:last-child) {
@@ -622,7 +612,7 @@ i {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
+  box-shadow: var(--card-shadow);
 }
 
 /* overwrite bootstrap muted */
@@ -714,6 +704,7 @@ $btn-mb: 0.5rem;
   width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
@@ -761,23 +752,25 @@ $btn-mb: 0.5rem;
   }
 
   .site-title {
+    font-family: inherit;
     font-weight: 900;
     font-size: 1.75rem;
     line-height: 1.2;
     letter-spacing: 0.25px;
-    color: rgba(134, 133, 133, 0.99);
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
       @extend %sidebar-link-hover;
+
+      color: var(--site-title-color);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: var(--sidebar-muted-color);
+    color: var(--site-subtitle-color);
     margin-top: 0.25rem;
     word-spacing: 1px;
     -webkit-user-select: none;
@@ -837,8 +830,8 @@ $btn-mb: 0.5rem;
   }
 
   .sidebar-bottom {
-    @include pl-pr(2rem);
-
+    padding-left: 2rem;
+    padding-right: 1rem;
     margin-bottom: 1.5rem;
 
     %button {
@@ -852,6 +845,7 @@ $btn-mb: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
+      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
 
       &:hover {
         background-color: var(--sidebar-hover-bg);
@@ -885,7 +879,7 @@ $btn-mb: 0.5rem;
       @extend %no-cursor;
       @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
 
-      background-color: var(--sidebar-muted-color);
+      background-color: var(--sidebar-btn-color);
       content: '';
       width: $btn-border-width;
       height: $btn-border-width;
@@ -915,7 +909,7 @@ $btn-mb: 0.5rem;
   width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
@@ -928,14 +922,13 @@ $btn-mb: 0.5rem;
 }
 
 #topbar {
-  /* icons */
-  i {
+  button i {
     color: #999999;
   }
 
   #breadcrumb {
     font-size: 1rem;
-    color: gray;
+    color: var(--text-muted-color);
     padding-left: 0.5rem;
 
     a:hover {
@@ -953,16 +946,51 @@ $btn-mb: 0.5rem;
   }
 } /* #topbar */
 
-#sidebar-trigger,
-#search-trigger {
-  display: none;
+::-webkit-input-placeholder {
+  @include placeholder;
 }
 
-#search-wrapper {
+::-moz-placeholder {
+  @include placeholder;
+}
+
+:-ms-input-placeholder {
+  @include placeholder;
+}
+
+::-ms-input-placeholder {
+  @include placeholder;
+}
+
+::placeholder {
+  @include placeholder;
+}
+
+:focus::-webkit-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-moz-placeholder {
+  @include placeholder-focus;
+}
+
+:focus:-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::placeholder {
+  @include placeholder-focus;
+}
+
+search {
   display: flex;
   width: 100%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-border-color);
+  border: 1px solid var(--search-border-color);
   background: var(--main-bg);
   padding: 0 0.5rem;
 
@@ -973,11 +1001,16 @@ $btn-mb: 0.5rem;
   }
 }
 
+#sidebar-trigger,
+#search-trigger {
+  display: none;
+}
+
 /* 'Cancel' link */
 #search-cancel {
   color: var(--link-color);
-  margin-left: 1rem;
   display: none;
+  white-space: nowrap;
 
   @extend %cursor-pointer;
 }
@@ -992,24 +1025,6 @@ $btn-mb: 0.5rem;
 
   &:focus {
     box-shadow: none;
-
-    &.form-control {
-      &::-moz-placeholder {
-        @include input-placeholder;
-      }
-      &::-webkit-input-placeholder {
-        @include input-placeholder;
-      }
-      &:-ms-input-placeholder {
-        @include input-placeholder;
-      }
-      &::-ms-input-placeholder {
-        @include input-placeholder;
-      }
-      &::placeholder {
-        @include input-placeholder;
-      }
-    }
   }
 }
 
@@ -1055,7 +1070,7 @@ $btn-mb: 0.5rem;
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
@@ -1093,18 +1108,6 @@ $btn-mb: 0.5rem;
   white-space: nowrap;
 }
 
-#core-wrapper {
-  line-height: 1.75;
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
@@ -1121,15 +1124,13 @@ $btn-mb: 0.5rem;
 /* --- main wrapper --- */
 
 #main-wrapper {
-  background-color: var(--main-bg);
   position: relative;
-  min-height: calc(100vh - $footer-height-mobile);
 
   @include pl-pr(0);
 }
 
 #topbar-wrapper.row,
-#main > .row,
+#main-wrapper > .container > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
@@ -1137,19 +1138,17 @@ $btn-mb: 0.5rem;
 /* --- button back-to-top --- */
 
 #back-to-top {
-  $size: 3rem;
-
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
   right: 1rem;
-  bottom: 2rem;
+  bottom: calc($footer-height-large - $back2top-size / 2);
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
-  width: $size;
-  height: $size;
+  width: $back2top-size;
+  height: $back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: transform 0.2s ease-out;
@@ -1161,7 +1160,7 @@ $btn-mb: 0.5rem;
   }
 
   i {
-    line-height: $size;
+    line-height: $back2top-size;
     position: relative;
     bottom: 2px;
   }
@@ -1227,18 +1226,10 @@ $btn-mb: 0.5rem;
 */
 
 @media all and (max-width: 576px) {
-  #main-wrapper {
-    min-height: calc(100vh - #{$footer-height-mobile});
-  }
-
-  #core-wrapper {
-    min-height: calc(
-      100vh - #{$topbar-height} - #{$footer-height-mobile}
-    ) !important;
-
-    .post-content {
+  main {
+    .content {
       > blockquote[class^='prompt-'] {
-        @include ml-mr(-1.25rem);
+        @include ml-mr(-1rem);
 
         border-radius: 0;
         max-width: none;
@@ -1261,7 +1252,7 @@ $btn-mb: 0.5rem;
     @extend %full-width;
   }
 
-  #main {
+  #main-wrapper > .container {
     @extend %full-width;
     @include pl-pr(0);
   }
@@ -1279,21 +1270,15 @@ $btn-mb: 0.5rem;
     }
   }
 
-  html,
-  body {
-    overflow-x: hidden;
+  main {
+    min-height: calc(100vh - $topbar-height - $footer-height-large);
   }
 
   footer {
     @include slide;
 
-    height: $footer-height-mobile;
-
-    div.d-flex {
+    height: $footer-height-large;
     padding: 1.5rem 0;
-      line-height: 1.65;
-      flex-wrap: wrap;
-    }
   }
 
   [#{$sidebar-display}] {
@@ -1301,8 +1286,7 @@ $btn-mb: 0.5rem;
       transform: translateX(0);
     }
 
-    #main-wrapper,
-    footer {
+    #main-wrapper {
       transform: translateX(#{$sidebar-width});
     }
 
@@ -1323,8 +1307,7 @@ $btn-mb: 0.5rem;
   }
 
   #topbar,
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: 100%;
   }
 
@@ -1333,7 +1316,7 @@ $btn-mb: 0.5rem;
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
@@ -1343,7 +1326,7 @@ $btn-mb: 0.5rem;
     left: 0;
   }
 
-  #core-wrapper,
+  main,
   #panel-wrapper {
     margin-top: 0;
   }
@@ -1354,7 +1337,7 @@ $btn-mb: 0.5rem;
     display: block;
   }
 
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
@@ -1365,19 +1348,12 @@ $btn-mb: 0.5rem;
   h1.dynamic-title {
     display: none;
 
-    ~ .post-content {
+    ~ .content {
       margin-top: 2.5rem;
     }
   }
 } /* max-width: 849px */
 
-/* Phone & Pad */
-@media all and (min-width: 577px) and (max-width: 1199px) {
-  footer .d-flex > div {
-    width: 312px;
-  }
-}
-
 /* Sidebar is visible */
 @media all and (min-width: 850px) {
   /* Solved jumping scrollbar */
@@ -1385,26 +1361,8 @@ $btn-mb: 0.5rem;
     overflow-y: scroll;
   }
 
-  #main-wrapper,
-  footer {
-    margin-left: $sidebar-width;
-  }
-
   #main-wrapper {
-    min-height: calc(100vh - $footer-height);
-  }
-
-  footer {
-    p {
-      width: auto;
-      &:last-child {
-        &::before {
-          content: '-';
-          margin: 0 0.75rem;
-          opacity: 0.8;
-        }
-      }
-    }
+    margin-left: $sidebar-width;
   }
 
   #sidebar {
@@ -1417,7 +1375,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #search-wrapper {
+  search {
     max-width: $search-max-width;
   }
 
@@ -1426,20 +1384,20 @@ $btn-mb: 0.5rem;
     justify-content: start !important;
   }
 
-  .post {
+  main {
     h1 {
       margin-top: 3rem;
     }
   }
 
-  div.post-content .table-wrapper > table {
+  div.content .table-wrapper > table {
     min-width: 70%;
   }
 
   /* button 'back-to-Top' position */
   #back-to-top {
-    bottom: 5.5rem;
     right: 5%;
+    bottom: calc($footer-height - $back2top-size / 2);
   }
 
   #topbar-title {
@@ -1449,7 +1407,7 @@ $btn-mb: 0.5rem;
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
-  #main .col-lg-11 {
+  #main-wrapper > .container .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1476,7 +1434,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #main > div.row {
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
@@ -1484,11 +1442,7 @@ $btn-mb: 0.5rem;
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #back-to-top {
-    bottom: 6.5rem;
-  }
-
-  #search-wrapper {
+  search {
     margin-right: 4rem;
   }
 
@@ -1496,8 +1450,8 @@ $btn-mb: 0.5rem;
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1513,15 +1467,9 @@ $btn-mb: 0.5rem;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
-
-  footer {
-    div.d-felx {
-      width: 85%;
-    }
-  }
 }
 
 @media all and (min-width: 1400px) {
@@ -1533,8 +1481,7 @@ $btn-mb: 0.5rem;
 @media all and (min-width: 1650px) {
   $icon-gap: 1rem;
 
-  #main-wrapper,
-  footer {
+  #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
@@ -1542,20 +1489,19 @@ $btn-mb: 0.5rem;
     left: $sidebar-width-large;
   }
 
-  #search-wrapper {
+  search {
     margin-right: calc(
       #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: $main-content-max-width;
     padding-left: 1.75rem !important;
     padding-right: 1.75rem !important;
   }
 
-  #core-wrapper,
+  main.col-12,
   #tail-wrapper {
     padding-right: 4.5rem !important;
   }

_sass/addon/module.scss

@@ -11,7 +11,7 @@
 }
 
 %section {
-  #core-wrapper & {
+  main & {
     margin-top: 2.5rem;
     margin-bottom: 1.25rem;
 
@@ -107,7 +107,7 @@
 }
 
 %sidebar-links {
-  color: rgba(117, 117, 117, 0.9);
+  color: var(--sidebar-muted-color);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -122,6 +122,11 @@
   -webkit-box-orient: vertical;
 }
 
+%text-highlight {
+  color: inherit;
+  font-weight: 600;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {
@@ -144,7 +149,11 @@
   padding-right: $val;
 }
 
-@mixin input-placeholder {
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
   opacity: 0.6;
 }
 

_sass/addon/syntax.scss

@@ -2,8 +2,8 @@
 * The syntax highlight.
 */
 
-@import 'colors/light-syntax';
-@import 'colors/dark-syntax';
+@import 'colors/syntax-light';
+@import 'colors/syntax-dark';
 
 html {
   @media (prefers-color-scheme: light) {
@@ -55,8 +55,7 @@ html {
   }
 
   overflow: auto;
-  padding-top: 0.5rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
 
   pre {
     margin-bottom: 0;
@@ -66,15 +65,25 @@ html {
   }
 
   table {
-    td pre {
+    td {
+      &:first-child {
+        display: inline-block;
+        margin-left: 1rem;
+        margin-right: 0.75rem;
+      }
+
+      &:last-child {
+        padding-right: 2rem !important;
+      }
+
+      pre {
         overflow: visible; /* Fixed iOS safari overflow-x */
         word-break: normal; /* Fixed iOS safari linenos code break */
       }
     }
+  }
 
   .lineno {
-    padding-right: 0.5rem;
-    min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
     -webkit-user-select: none;
@@ -89,6 +98,7 @@ code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
+  color: var(--code-color);
 
   &.highlighter-rouge {
     font-size: $code-font-size;
@@ -139,11 +149,16 @@ div[class^='language-'] {
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
-  .post-content > & {
-    @include ml-mr(-1.25rem);
+  .content > & {
+    @include ml-mr(-1rem);
 
     border-radius: 0;
   }
+
+  .highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -152,12 +167,13 @@ div {
   &.language-plaintext,
   &.language-console,
   &.language-terminal {
-    pre.lineno {
+    td:first-child {
+      padding: 0 !important;
+      margin-right: 0;
+
+      .lineno {
         display: none;
       }
-
-    td.rouge-code {
-      padding-left: 1.5rem;
     }
   }
 }
@@ -165,21 +181,21 @@ div {
 .code-header {
   @extend %no-cursor;
 
-  $code-header-height: 2.25rem;
-
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
-  margin-left: 1rem;
+  margin-left: 0.75rem;
   margin-right: 0.5rem;
 
   /* the label block */
   span {
+    line-height: $code-header-height;
+
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.5rem;
+      width: $code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -242,7 +258,7 @@ div {
 
 @media all and (min-width: 576px) {
   div[class^='language-'] {
-    .post-content > & {
+    .content > & {
       @include ml-mr(0);
 
       border-radius: $base-radius;
@@ -251,19 +267,25 @@ div {
     .code-header {
       @include ml-mr(0);
 
-      &::before {
-        $dot-size: 0.75rem;
-        $dot-margin: 0.5rem;
+      $dot-margin: calc($code-header-height / 2);
 
+      &::before {
         content: '';
         display: inline-block;
-        margin-left: 1rem;
-        width: $dot-size;
-        height: $dot-size;
+        margin-left: $dot-margin;
+        width: $code-dot-size;
+        height: $code-dot-size;
         border-radius: 50%;
         background-color: var(--code-header-muted-color);
-        box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
-          ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
+        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          ($code-dot-size + $code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
+      }
+
+      span {
+        // center the text of label
+        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
       }
     }
   }

_sass/addon/variables.scss

@@ -10,18 +10,23 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-$search-max-width: 210px !default;
+$search-max-width: 200px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default; /* screen width: < 850px */
+$footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
-$base-radius: 0.5rem;
+$base-radius: 0.5rem !default;
+$back2top-size: 2.75rem !default;
 
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
+$code-header-height: 2.25rem !default;
+$code-dot-size: 0.75rem !default;
+$code-dot-gap: 0.5rem !default;
+$code-icon-width: 1.75rem !default;
 
 /* fonts */
 
-$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
-$font-family-heading: Lato, 'Microsoft Yahei', sans-serif;
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;

_sass/colors/dark-syntax.scss

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

_sass/colors/light-syntax.scss

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

_sass/colors/syntax-dark.scss

@@ -0,0 +1,138 @@
+/*
+ * The syntax dark mode styles.
+ */
+
+@mixin dark-syntax {
+  --language-border-color: #2d2d2d;
+  --highlight-bg-color: #151515;
+  --highlighter-rouge-color: #c9def1;
+  --highlight-lineno-color: #808080;
+  --inline-code-bg: #323238;
+  --code-color: #b0b0b0;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: #353535;
+  --code-header-icon-color: #565656;
+  --clipboard-checked-color: #2bcc2b;
+  --filepath-text-color: #cacaca;
+
+  .highlight .gp {
+    color: #87939d;
+  }
+
+  /* --- Syntax highlight theme from `rougify style base16.dark` --- */
+
+  .highlight table td {
+    padding: 5px;
+  }
+  .highlight table pre {
+    margin: 0;
+  }
+  .highlight,
+  .highlight .w {
+    color: #d0d0d0;
+    background-color: #151515;
+  }
+  .highlight .err {
+    color: #151515;
+    background-color: #ac4142;
+  }
+  .highlight .c,
+  .highlight .ch,
+  .highlight .cd,
+  .highlight .cm,
+  .highlight .cpf,
+  .highlight .c1,
+  .highlight .cs {
+    color: #848484;
+  }
+  .highlight .cp {
+    color: #f4bf75;
+  }
+  .highlight .nt {
+    color: #f4bf75;
+  }
+  .highlight .o,
+  .highlight .ow {
+    color: #d0d0d0;
+  }
+  .highlight .p,
+  .highlight .pi {
+    color: #d0d0d0;
+  }
+  .highlight .gi {
+    color: #90a959;
+  }
+  .highlight .gd {
+    color: #f08a8b;
+    background-color: #320000;
+  }
+  .highlight .gh {
+    color: #6a9fb5;
+    background-color: #151515;
+    font-weight: bold;
+  }
+  .highlight .k,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kv {
+    color: #aa759f;
+  }
+  .highlight .kc {
+    color: #d28445;
+  }
+  .highlight .kt {
+    color: #d28445;
+  }
+  .highlight .kd {
+    color: #d28445;
+  }
+  .highlight .s,
+  .highlight .sb,
+  .highlight .sc,
+  .highlight .dl,
+  .highlight .sd,
+  .highlight .s2,
+  .highlight .sh,
+  .highlight .sx,
+  .highlight .s1 {
+    color: #90a959;
+  }
+  .highlight .sa {
+    color: #aa759f;
+  }
+  .highlight .sr {
+    color: #75b5aa;
+  }
+  .highlight .si {
+    color: #b76d45;
+  }
+  .highlight .se {
+    color: #b76d45;
+  }
+  .highlight .nn {
+    color: #f4bf75;
+  }
+  .highlight .nc {
+    color: #f4bf75;
+  }
+  .highlight .no {
+    color: #f4bf75;
+  }
+  .highlight .na {
+    color: #6a9fb5;
+  }
+  .highlight .m,
+  .highlight .mb,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .il,
+  .highlight .mo,
+  .highlight .mx {
+    color: #90a959;
+  }
+  .highlight .ss {
+    color: #90a959;
+  }
+}

_sass/colors/syntax-light.scss

@@ -0,0 +1,179 @@
+/*
+ * The syntax light mode code snippet colors.
+ */
+
+@mixin light-syntax {
+  /* --- custom light colors --- */
+  --language-border-color: #ececec;
+  --highlight-bg-color: #f6f8fa;
+  --highlighter-rouge-color: #3f596f;
+  --highlight-lineno-color: #9e9e9e;
+  --inline-code-bg: #f6f6f7;
+  --code-color: #3a3a3a;
+  --code-header-text-color: #a3a3a3;
+  --code-header-muted-color: #e5e5e5;
+  --code-header-icon-color: #c9c8c8;
+  --clipboard-checked-color: #43c743;
+
+  [class^='prompt-'] {
+    --inline-code-bg: #fbfafa;
+  }
+
+  /* --- Syntax highlight theme from `rougify style github` --- */
+
+  .highlight table td {
+    padding: 5px;
+  }
+  .highlight table pre {
+    margin: 0;
+  }
+  .highlight,
+  .highlight .w {
+    color: #24292f;
+    background-color: #f6f8fa;
+  }
+  .highlight .k,
+  .highlight .kd,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kt,
+  .highlight .kv {
+    color: #cf222e;
+  }
+  .highlight .gr {
+    color: #f6f8fa;
+  }
+  .highlight .gd {
+    color: #82071e;
+    background-color: #ffebe9;
+  }
+  .highlight .nb {
+    color: #953800;
+  }
+  .highlight .nc {
+    color: #953800;
+  }
+  .highlight .no {
+    color: #953800;
+  }
+  .highlight .nn {
+    color: #953800;
+  }
+  .highlight .sr {
+    color: #116329;
+  }
+  .highlight .na {
+    color: #116329;
+  }
+  .highlight .nt {
+    color: #116329;
+  }
+  .highlight .gi {
+    color: #116329;
+    background-color: #dafbe1;
+  }
+  .highlight .kc {
+    color: #0550ae;
+  }
+  .highlight .l,
+  .highlight .ld,
+  .highlight .m,
+  .highlight .mb,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .il,
+  .highlight .mo,
+  .highlight .mx {
+    color: #0550ae;
+  }
+  .highlight .sb {
+    color: #0550ae;
+  }
+  .highlight .bp {
+    color: #0550ae;
+  }
+  .highlight .ne {
+    color: #0550ae;
+  }
+  .highlight .nl {
+    color: #0550ae;
+  }
+  .highlight .py {
+    color: #0550ae;
+  }
+  .highlight .nv,
+  .highlight .vc,
+  .highlight .vg,
+  .highlight .vi,
+  .highlight .vm {
+    color: #0550ae;
+  }
+  .highlight .o,
+  .highlight .ow {
+    color: #0550ae;
+  }
+  .highlight .gh {
+    color: #0550ae;
+    font-weight: bold;
+  }
+  .highlight .gu {
+    color: #0550ae;
+    font-weight: bold;
+  }
+  .highlight .s,
+  .highlight .sa,
+  .highlight .sc,
+  .highlight .dl,
+  .highlight .sd,
+  .highlight .s2,
+  .highlight .se,
+  .highlight .sh,
+  .highlight .sx,
+  .highlight .s1,
+  .highlight .ss {
+    color: #0a3069;
+  }
+  .highlight .nd {
+    color: #8250df;
+  }
+  .highlight .nf,
+  .highlight .fm {
+    color: #8250df;
+  }
+  .highlight .err {
+    color: #f6f8fa;
+    background-color: #82071e;
+  }
+  .highlight .c,
+  .highlight .ch,
+  .highlight .cd,
+  .highlight .cm,
+  .highlight .cp,
+  .highlight .cpf,
+  .highlight .c1,
+  .highlight .cs {
+    color: #68717a;
+  }
+  .highlight .gl {
+    color: #68717a;
+  }
+  .highlight .gt {
+    color: #68717a;
+  }
+  .highlight .ni {
+    color: #24292f;
+  }
+  .highlight .si {
+    color: #24292f;
+  }
+  .highlight .ge {
+    color: #24292f;
+    font-style: italic;
+  }
+  .highlight .gs {
+    color: #24292f;
+    font-weight: bold;
+  }
+} /* light-syntax */

_sass/colors/typography-dark.scss

@@ -10,19 +10,19 @@
 
   /* Common color */
   --text-color: rgb(175, 176, 177);
-  --text-muted-color: rgb(107, 116, 124);
+  --text-muted-color: #868686;
   --heading-color: #cccccc;
+  --label-color: #a7a7a7;
   --blockquote-border-color: rgb(66, 66, 66);
-  --blockquote-text-color: rgb(117, 117, 117);
+  --blockquote-text-color: #868686;
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);
-  --button-bg: rgb(39, 40, 43);
-  --btn-border-color: rgb(63, 65, 68);
+  --button-bg: #1e1e1e;
+  --btn-border-color: #2e2f31;
   --btn-backtotop-color: var(--text-color);
-  --btn-backtotop-border-color: var(--btn-border-color);
+  --btn-backtotop-border-color: #212122;
   --btn-box-shadow: var(--main-bg);
-  --card-header-bg: rgb(48, 48, 48);
-  --label-color: rgb(108, 117, 125);
+  --card-header-bg: #292929;
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
   --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
@@ -34,39 +34,38 @@
   );
 
   /* Sidebar */
-  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
-  --sidebar-muted-color: #6d6c6b;
+  --site-title-color: #717070;
+  --site-subtitle-color: #868686;
+  --sidebar-bg: #1e1e1e;
+  --sidebar-border-color: #292929;
+  --sidebar-muted-color: #868686;
   --sidebar-active-color: rgb(255, 255, 255, 0.95);
-  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
-  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-hover-bg: #262626;
+  --sidebar-btn-bg: #232328;
   --sidebar-btn-color: #787878;
   --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
   --topbar-bg: rgb(27, 27, 30, 0.64);
   --topbar-text-color: var(--text-color);
-  --search-wrapper-border-color: rgb(55, 55, 55);
+  --search-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
-  --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-paginator-border-color: var(--btn-border-color);
-  --btn-text-color: var(--text-color);
+  --btn-paginator-hover-color: #2e2e2e;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
-  --tag-bg: rgb(41, 40, 40);
   --tag-hover: rgb(43, 56, 62);
-  --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */
+  --tb-odd-bg: #252526; /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
   --tb-border-color: var(--tb-odd-bg);
   --footnote-target-bg: rgb(63, 81, 181);
   --btn-share-color: #6c757d;
   --btn-share-hover-color: #bfc1ca;
-  --relate-post-date: var(--text-muted-color);
   --card-bg: #1e1e1e;
   --card-hovor-bg: #464d51;
   --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
@@ -87,8 +86,8 @@
   /* tags */
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
-  --search-tag-bg: var(--tag-bg);
   --dash-color: rgb(63, 65, 68);
+  --search-tag-bg: #292828;
 
   /* categories */
   --categories-border: rgb(64, 66, 69, 0.5);

_sass/colors/typography-light.scss

@@ -10,11 +10,12 @@
 
   /* Common color */
   --text-color: #34343c;
-  --text-muted-color: #8e8e8e;
-  --heading-color: black;
+  --text-muted-color: #757575;
+  --heading-color: #2a2a2a;
+  --label-color: #585858;
   --blockquote-border-color: #eeeeee;
-  --blockquote-text-color: #9a9a9a;
-  --link-color: #0153ab;
+  --blockquote-text-color: #757575;
+  --link-color: #0056b2;
   --link-underline-color: #dee2e6;
   --button-bg: #ffffff;
   --btn-border-color: #e9ecef;
@@ -36,10 +37,13 @@
   );
 
   /* Sidebar */
+  --site-title-color: rgb(113, 113, 113);
+  --site-subtitle-color: #717171;
   --sidebar-bg: #f6f8fa;
-  --sidebar-muted-color: #a2a19f;
+  --sidebar-border-color: #efefef;
+  --sidebar-muted-color: #545454;
   --sidebar-active-color: #1d1d1d;
-  --sidebar-hover-bg: rgb(227, 227, 227, 0.64);
+  --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
   --sidebar-btn-bg: white;
   --sidebar-btn-color: #8e8e8e;
   --avatar-border-color: white;
@@ -47,8 +51,7 @@
   /* Topbar */
   --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --search-wrapper-border-color: rgb(240, 240, 240);
-  --search-tag-bg: #f8f9fa;
+  --search-border-color: rgb(240, 240, 240);
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: #b8b8b8;
 
@@ -56,23 +59,15 @@
   --post-list-text-color: dimgray;
   --btn-patinator-text-color: #555555;
   --btn-paginator-hover-color: var(--sidebar-bg);
-  --btn-paginator-border-color: var(--sidebar-bg);
-  --btn-text-color: #676666;
 
   /* Posts */
-  --toc-highlight: #563d7c;
+  --toc-highlight: #0550ae;
   --btn-share-hover-color: var(--link-color);
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
   --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
     rgba(211, 209, 209, 0.15) 0 0 0 1px;
-  --label-color: #616161;
-  --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
-  --tag-bg: rgba(0, 0, 0, 0.075);
-  --tag-border: #dee2e6;
-  --tag-shadow: var(--btn-border-color);
-  --tag-hover: rgb(222, 226, 230);
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
@@ -89,6 +84,12 @@
   --prompt-danger-bg: rgb(248, 215, 218, 0.56);
   --prompt-danger-icon-color: #df3c30;
 
+  /* Tags */
+  --tag-border: #dee2e6;
+  --tag-shadow: var(--btn-border-color);
+  --tag-hover: rgb(222, 226, 230);
+  --search-tag-bg: #f8f9fa;
+
   [class^='prompt-'] {
     --link-underline-color: rgb(219, 216, 216);
   }

_sass/layout/category-tag.scss

@@ -32,11 +32,6 @@
 
       font-size: 1.1rem;
     }
-
-    /* post's date */
-    > span:last-child {
-      white-space: nowrap;
-    }
   }
 }
 

_sass/layout/home.scss

@@ -5,7 +5,7 @@
 #post-list {
   margin-top: 2rem;
 
-  a.card-wrapper {
+  .card-wrapper {
     display: block;
 
     &:hover {
@@ -44,6 +44,7 @@
       .card-title {
         @extend %text-clip;
 
+        color: var(--heading-color) !important;
         font-size: 1.25rem;
       }
 
@@ -51,7 +52,7 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text.post-content {
+      .card-text.content {
         @extend %muted;
 
         p {
@@ -89,8 +90,9 @@
 } /* #post-list */
 
 .pagination {
-  color: var(--btn-patinator-text-color);
+  color: var(--text-color);
   font-family: Lato, sans-serif;
+  justify-content: space-evenly;
 
   a:hover {
     text-decoration: none;
@@ -98,26 +100,27 @@
 
   .page-item {
     .page-link {
-      color: inherit;
-      width: 2.5rem;
-      height: 2.5rem;
-      padding: 0;
+      color: var(--btn-patinator-text-color);
+      padding: 0 0.6rem;
       display: -webkit-box;
       -webkit-box-pack: center;
       -webkit-box-align: center;
-      border-radius: 50%;
-      border: 1px solid var(--btn-paginator-border-color);
-      background-color: var(--button-bg);
-
-      &:hover {
-        background-color: var(--btn-paginator-hover-color);
-      }
+      border-radius: 0.5rem;
+      border: 0;
+      background-color: inherit;
     }
 
     &.active {
       .page-link {
         background-color: var(--btn-paginator-hover-color);
-        color: var(--btn-text-color);
+      }
+    }
+
+    &:not(.active) {
+      .page-link {
+        &:hover {
+          box-shadow: inset var(--btn-border-color) 0 0 0 1px;
+        }
       }
     }
 
@@ -126,15 +129,8 @@
 
       .page-link {
         color: rgba(108, 117, 125, 0.57);
-        border-color: var(--btn-paginator-border-color);
-        background-color: var(--button-bg);
       }
     }
-
-    &:first-child .page-link,
-    &:last-child .page-link {
-      border-radius: 50%;
-    }
   } /* .page-item */
 } /* .pagination */
 
@@ -148,7 +144,7 @@
     .card {
       .preview-img {
         width: 20rem;
-        height: 11.5rem; // can hold 2 lines each for title and content
+        height: 11.55rem; // can hold 2 lines each for title and content
       }
 
       .card-body {
@@ -175,8 +171,6 @@
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
-    justify-content: space-evenly;
-
     .page-item {
       &:not(:first-child):not(:last-child) {
         display: none;
@@ -193,16 +187,12 @@
 
   .pagination {
     font-size: 0.85rem;
+    justify-content: center;
 
     .page-item {
       &:not(:last-child) {
         margin-right: 0.7rem;
       }
-
-      .page-link {
-        width: 2rem;
-        height: 2rem;
-      }
     }
 
     .page-index {
@@ -210,10 +200,3 @@
     }
   } /* .pagination */
 }
-
-/* Panel is visible */
-@media all and (min-width: 1200px) {
-  #post-list {
-    padding-right: 0.5rem;
-  }
-}

_sass/layout/post.scss

@@ -47,15 +47,18 @@
 }
 
 h1 + .post-meta {
-  span + span::before {
+  > span + span::before {
     @include dot;
   }
 
-  em {
-    @extend %text-color;
+  em,
+  time {
+    color: var(--text-color);
+  }
 
+  em {
     a {
-      @extend %text-color;
+      color: inherit;
     }
   }
 }
@@ -73,7 +76,7 @@ h1 + .post-meta {
     line-height: 1.2rem;
 
     > a {
-      color: var(--text-color);
+      @extend %text-highlight;
 
       &:hover {
         @extend %link-hover;
@@ -99,52 +102,47 @@ h1 + .post-meta {
     .share-icons {
       font-size: 1.2rem;
 
-      > i {
+      > * {
+        margin-left: 0.25rem;
+
+        &:hover {
+          i {
+            @extend %btn-share-hovor;
+          }
+        }
+      }
+
+      button {
         position: relative;
-        bottom: 1px;
+        bottom: 2px;
+        padding: 0;
 
         @extend %cursor-pointer;
-
-        &:hover {
-          @extend %btn-share-hovor;
-        }
       }
 
-      a {
-        &:not(:last-child) {
-          margin-right: 0.25rem;
-        }
-
-        &:hover {
+      a :hover {
         text-decoration: none;
-
-          > i {
-            @extend %btn-share-hovor;
-          }
-        }
       }
 
-      .fab {
-        &.fa-twitter {
-          @include btn-sharing-color(rgba(29, 161, 242, 1));
+      .fa-square-x-twitter {
+        @include btn-sharing-color(black);
       }
 
-        &.fa-facebook-square {
+      .fa-facebook-square {
         @include btn-sharing-color(rgb(66, 95, 156));
       }
 
-        &.fa-telegram {
+      .fa-telegram {
         @include btn-sharing-color(rgb(39, 159, 217));
       }
 
-        &.fa-linkedin {
+      .fa-linkedin {
         @include btn-sharing-color(rgb(0, 119, 181));
       }
 
-        &.fa-weibo {
+      .fa-weibo {
         @include btn-sharing-color(rgb(229, 20, 43));
       }
-      }
     } /* .share-icons */
 
     .fas.fa-link {
@@ -157,8 +155,6 @@ h1 + .post-meta {
   line-height: 2rem;
 
   .post-tag {
-    background: var(--tag-bg);
-
     &:hover {
       @extend %link-hover;
       @extend %tag-hover;
@@ -168,9 +164,6 @@ h1 + .post-meta {
 }
 
 .post-navigation {
-  padding-top: 3rem;
-  padding-bottom: 4rem;
-
   .btn {
     @extend %btn-post-nav;
 
@@ -201,7 +194,7 @@ h1 + .post-meta {
       color: var(--text-muted-color);
       font-size: 0.65rem;
       text-transform: uppercase;
-      content: attr(prompt);
+      content: attr(aria-label);
     }
 
     &:first-child {
@@ -317,9 +310,7 @@ h1 + .post-meta {
     }
 
     ul {
-      a {
-        padding-left: 2rem;
-      }
+      padding-left: 0.75rem;
     }
   }
 }
@@ -331,10 +322,10 @@ h1 + .post-meta {
     @include label(1.1rem, 600);
   }
 
-  em {
+  time {
     @extend %normal-font-style;
 
-    color: var(--relate-post-date);
+    color: var(--text-muted-color);
   }
 
   p {
@@ -358,8 +349,12 @@ h1 + .post-meta {
 #tail-wrapper {
   min-height: 2rem;
 
-  > div:last-of-type {
-    margin-bottom: 2rem;
+  > *:not(:last-child) {
+    margin-top: 3rem;
+  }
+
+  > *:nth-last-child(2) {
+    margin-bottom: 3rem;
   }
 
   /* stylelint-disable-next-line selector-id-pattern */
@@ -396,7 +391,7 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 768px) {
-  .post-content > p > img {
+  .content > p > img {
     max-width: calc(100% + 1rem);
   }
 }

_sass/main.scss

@@ -1,11 +1,5 @@
-/*!
- * Chirpy v6.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
- * © 2019 Cotes Chung
- * MIT Licensed
- */
-
-@import 'colors/light-typography';
-@import 'colors/dark-typography';
+@import 'colors/typography-light';
+@import 'colors/typography-dark';
 @import 'addon/variables';
 @import 'variables-hook';
 @import 'addon/module';

assets/404.html

@@ -11,6 +11,4 @@ redirect_from:
 
 {% include lang.html %}
 
-<div class="lead">
-  <p>{{ site.data.locales[lang].not_found.statment }}</p>
-</div>
+<p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>

assets/css/jekyll-theme-chirpy.scss

@@ -1,6 +1,6 @@
 ---
 ---
 
-@import '{{ site.theme }}';
+@import 'main';
 
 /* append your custom style below */

assets/js/data/swcache.js

@@ -1,12 +1,11 @@
 ---
 layout: compress
-
 # The list to be cached by PWA
 ---
 
 const resource = [
   /* --- CSS --- */
-    '{{ "/assets/css/style.css" | relative_url }}',
+  '{{ "/assets/css/:THEME.css" | replace: ':THEME', site.theme | relative_url }}',
 
   /* --- PWA --- */
   '{{ "/app.js" | relative_url }}',
@@ -47,8 +46,4 @@ const allowedDomains = [
 ];
 
 /* Requests that include the following path will be banned */
-const denyUrls = [
-    {% if site.google_analytics.pv.cache_path %}
-        '{{ site.google_analytics.pv.cache_path | absolute_url }}'
-    {% endif %}
-];
+const denyUrls = [];

assets/js/pwa/sw.js

@@ -28,19 +28,19 @@ function isExcluded(url) {
   return false;
 }
 
-self.addEventListener('install', event => {
+self.addEventListener('install', (event) => {
   event.waitUntil(
-        caches.open(cacheName).then(cache => {
+    caches.open(cacheName).then((cache) => {
       return cache.addAll(resource);
     })
   );
 });
 
-self.addEventListener('activate', event => {
+self.addEventListener('activate', (event) => {
   event.waitUntil(
-        caches.keys().then(keyList => {
+    caches.keys().then((keyList) => {
       return Promise.all(
-                keyList.map(key => {
+        keyList.map((key) => {
           if (key !== cacheName) {
             return caches.delete(key);
           }
@@ -56,28 +56,28 @@ self.addEventListener('message', (event) => {
   }
 });
 
-self.addEventListener('fetch', event => {
+self.addEventListener('fetch', (event) => {
   event.respondWith(
-        caches.match(event.request).then(response => {
+    caches.match(event.request).then((response) => {
       if (response) {
         return response;
       }
 
-            return fetch(event.request).then(response => {
+      return fetch(event.request).then((response) => {
         const url = event.request.url;
 
-                if (event.request.method !== 'GET' ||
+        if (
+          event.request.method !== 'GET' ||
           !verifyDomain(url) ||
-                    isExcluded(url)) {
+          isExcluded(url)
+        ) {
           return response;
         }
 
-                /*
-                  see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
-                */
+        /* see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests> */
         let responseToCache = response.clone();
 
-                caches.open(cacheName).then(cache => {
+        caches.open(cacheName).then((cache) => {
           /* console.log('[sw] Caching new resource: ' + event.request.url); */
           cache.put(event.request, responseToCache);
         });
@@ -87,4 +87,3 @@ self.addEventListener('fetch', event => {
     })
   );
 });
-

docs/CONTRIBUTING.md

@@ -0,0 +1,104 @@
+# Contributing Guidelines
+
+:tada: _First of all, thank you for considering contributing to this project!_ :tada:
+
+There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug
+reports and feature requests or writing code which can be incorporated into Chirpy itself.
+
+## In This Article
+
+- [General Rules](#general-rules)
+- [Questions and Requests for Help](#questions-and-requests-for-help)
+- [File a Bug Report](#file-a-bug-report)
+- [Suggest a New Feature](#suggest-a-new-feature)
+- [Contributing Code and Documentation Changes](#contributing-code-and-documentation-changes)
+- [Helpful Resources](#helpful-resources)
+
+## General Rules
+
+All contributions should be based on the following rules:
+
+- You should read through the [Wiki][wiki] to understand the project features and how to use it properly. This is to
+respect the time of the project's developers and
+maintainers, and to save their energy for other problems that really need to be resolved.
+
+- Use the [latest release version][latest-ver]. If your contribution involves code/documentation changes, update to the
+latest version of the default (`master`) branch.
+
+- Avoid making duplicate contributions by searching for existing [Issues][issues] / [Discussioins][discus] /
+[Pull Requests][pr], but don't leave any unhelpful comments such as "I have the same problem". Prefer using
+[reactions][gh-reactions] if you simply want to "+1" an existing issue.
+
+- DO NOT email or tweet the
+project developers and maintainers directly, everything about Chirpy should be left in GitHub.
+
+**Tips**: If you're new to open source, see "[How To Ask Questions The Smart Way][ext-reading]".
+
+## Questions and Requests for Help
+
+We expect every reasonable question you ask to be answered appropriately. If you want a quick and timely response,
+please ask questions at [Jekyll Talk][jekyll-talk] and [StackOverflow][stack-overflow], where there are tons of
+enthusiastic geeks who will positively answer your challenging questions.
+
+If you can't get an answer in any of the above ways, then create a new [discussion][discus]. As long as it is not a
+duplicate and [RTFM][rtfm] / [STFW][stfw] issue, we will respond as soon as possible.
+
+## File a Bug Report
+
+A great way to contribute to the project is to send a detailed issue when you encounter a problem. We always appreciate
+a well-written, thorough bug report.
+
+1. Please figure out why the bug occurred, or locate the module in the project that caused this bug. Otherwise, there is
+a high probability that you are using/setting it incorrectly.
+
+2. If the issue is caused by you modifying the project code or some configuration of Jekyll, then please DO NOT
+report such "bugs".
+Chirpy is an open-source project, but that doesn't mean we will maintain other specific forks (such as yours).
+You can learn about Jekyll and modern Web development to solve problems caused by custom modifications.
+
+3. Make good use of your browser's incognito mode to troubleshoot if the problem is caused by caching.
+
+4. As a last option, you can create a new [Bug Report][new-issue] follow the template to describe the details.
+If possible, providing a demo that reproduces the error will help us troubleshoot faster.
+
+## Suggest a New Feature
+
+Feature requests are welcome! While we will consider all requests, we cannot guarantee your request will be accepted.
+
+We want to avoid chaos in the UI design, so we won't accept requests for changes like color schemes, font families,
+typography, and so on. **Do not open a duplicate feature request.** Search for existing feature requests first. If you
+find your feature (or one very similar) previously requested, comment on that issue.
+
+If accepted, we cannot make any commitments regarding the timeline for implementation and release. However, you are
+welcome to submit a pull request to help!
+
+## Contributing Code and Documentation Changes
+
+In short, you can follow these steps to complete the contribution.
+
+1. Fork this project on GitHub and clone your repository locally.
+2. Setting up the [development & test environments][dev-env].
+3. Create a new branch from the default branch and give it a descriptive name (e.g. `add-a-new-feat` or `fix-a-bug`).
+When development is complete, create a [Conventional Commit][cc] with Git.
+4. Create a new [Pull Request][gh-pr].
+
+## Helpful Resources
+
+- [Code of conduct](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CODE_OF_CONDUCT.md)
+- [Security policy](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/SECURITY.md)
+
+[latest-ver]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/latest
+[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
+[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
+[pr]: https://github.com/cotes2020/jekyll-theme-chirpy/pulls
+[discus]: https://github.com/cotes2020/jekyll-theme-chirpy/discussions
+[ext-reading]: http://www.catb.org/~esr/faqs/smart-questions.html
+[jekyll-talk]: https://talk.jekyllrb.com/
+[stack-overflow]: https://stackoverflow.com/questions/tagged/jekyll
+[rtfm]: https://en.wikipedia.org/wiki/RTFM
+[stfw]: https://www.webster-dictionary.org/definition/STFW
+[gh-reactions]: https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/
+[new-issue]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new/choose
+[dev-env]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Development-&-Test-Environments
+[cc]: https://www.conventionalcommits.org/
+[gh-pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests

docs/SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version   | Supported |
+|:----------|:---------:|
+| `6.x`     |     ✓     |
+| < `6.0.0` |     ✗     |
+
+## Reporting a Vulnerability
+
+If you find a vulnerability, please report it to `cotes.chung@gmail.com`.
+We will try our best to respond within a week. Thank you for your time!

jekyll-theme-chirpy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "6.0.1"
+  spec.version       = "6.2.2"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 
@@ -11,7 +11,7 @@ Gem::Specification.new do |spec|
   spec.license       = "MIT"
 
   spec.files         = `git ls-files -z`.split("\x0").select { |f|
-    f.match(%r!^((_(includes|layouts|sass|data)|assets)\/|README|LICENSE)!i)
+    f.match(%r!^((_(includes|layouts|sass|(data\/(locales|origin)))|assets)\/|README|LICENSE)!i)
   }
 
   spec.metadata = {
@@ -31,5 +31,6 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"
   spec.add_runtime_dependency "jekyll-archives", "~> 2.2"
   spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4"
+  spec.add_runtime_dependency "jekyll-include-cache", "~> 0.2"
 
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "6.0.1",
+  "version": "6.2.2",
   "description": "A minimal, responsive and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
@@ -21,15 +21,15 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.22.17",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.22.15",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-terser": "^0.4.0",
-    "rimraf": "^4.4.1",
-    "rollup": "^3.20.2",
-    "rollup-plugin-license": "^3.0.1",
-    "stylelint": "^15.3.0",
-    "stylelint-config-standard-scss": "^7.0.1"
+    "@rollup/plugin-terser": "^0.4.3",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.29.0",
+    "rollup-plugin-license": "^3.1.0",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard-scss": "^11.0.0"
   }
 }

tools/init

@@ -17,7 +17,7 @@ _no_gh=false
 help() {
   echo "Usage:"
   echo
-  echo "   bash /path/to/init.sh [options]"
+  echo "   bash /path/to/init [options]"
   echo
   echo "Options:"
   echo "     --no-gh              Do not deploy to Github."

tools/release

@@ -15,23 +15,21 @@
 set -eu
 
 opt_pre=false # preview mode option
-opt_skip_ver=false # option for skip versioning
 
 working_branch="$(git branch --show-current)"
 
+# AKA the default branch, main/master branch
 STAGING_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
 
 PROD_BRANCH="production"
 
 GEM_SPEC="jekyll-theme-chirpy.gemspec"
-
 NODE_CONFIG="package.json"
 
 JS_DIST="assets/js/dist"
 BACKUP_PATH="$(mktemp -d)"
 
 FILES=(
-  "_sass/jekyll-theme-chirpy.scss"
   "$GEM_SPEC"
   "$NODE_CONFIG"
 )
@@ -48,24 +46,33 @@ help() {
   echo
   echo "Usage:"
   echo
-  echo "   bash ./tools/release.sh [options]"
+  echo "   bash ./tools/release [options]"
   echo
   echo "Options:"
-  echo "     -k, --skip-versioning    Skip the step of generating the version number."
   echo "     -p, --preview            Enable preview mode, only package, and will not modify the branches"
   echo "     -h, --help               Print this information."
 }
 
+_check_cli() {
+  for i in "${!TOOLS[@]}"; do
+    cli="${TOOLS[$i]}"
+    if ! command -v "$cli" &>/dev/null; then
+      echo "> Command '$cli' not found!"
+      exit 1
+    fi
+  done
+}
+
 _check_git() {
   # ensure nothing is uncommitted
   if [[ -n $(git status . -s) ]]; then
-    echo "Abort: Commit the staged files first, and then run this tool again."
+    echo "> Abort: Commit the staged files first, and then run this tool again."
     exit 1
   fi
 
-  # ensure the working branch is the main/patch branch
+  # ensure the working branch is the default/patch branch
   if [[ $working_branch != "$STAGING_BRANCH" && $working_branch != hotfix/* ]]; then
-    echo "Abort: Please run on the main branch or patch branches."
+    echo "> Abort: Please run on the $STAGING_BRANCH branch or a patch branche."
     exit 1
   fi
 }
@@ -74,18 +81,7 @@ _check_src() {
   for i in "${!FILES[@]}"; do
     _src="${FILES[$i]}"
     if [[ ! -f $_src && ! -d $_src ]]; then
-      echo -e "Error: Missing file \"$_src\"!\n"
-      exit 1
-    fi
-  done
-
-}
-
-_check_command() {
-  for i in "${!TOOLS[@]}"; do
-    cli="${TOOLS[$i]}"
-    if ! command -v "$cli" &>/dev/null; then
-      echo "Command '$cli' not found!"
+      echo -e "> Error: Missing file \"$_src\"!\n"
       exit 1
     fi
   done
@@ -98,120 +94,99 @@ _check_node_packages() {
 }
 
 check() {
-  _check_command
+  _check_cli
   _check_git
   _check_src
   _check_node_packages
 }
 
-_bump_files() {
-  for i in "${!FILES[@]}"; do
-    if [[ ${FILES[$i]} == "$NODE_CONFIG" ]]; then
-      continue
-    fi
-
-    sed -i "s/v[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/v$1/" "${FILES[$i]}"
-  done
-
-  npm run build
-}
-
-_bump_gemspec() {
-  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$1/" "$GEM_SPEC"
-}
-
-# 1. Bump latest version number to the following files:
-#
-#   - _sass/jekyll-theme-chirpy.scss
-#   - _javascript/copyright
-#   - assets/js/dist/*.js (will be built by gulp later)
-#   - jekyll-theme-chirpy.gemspec
-#
-# 2. Create a commit to save the changes.
-bump() {
-  _bump_files "$1"
-  _bump_gemspec "$1"
-
-  if [[ $opt_pre = false && -n $(git status . -s) ]]; then
-    git add .
-    git commit -m "chore(release): $1"
-  fi
-}
-
-## Remove unnecessary theme settings
-cleanup_config() {
-  cp _config.yml _config.yml.bak
-  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
-}
-
-resume_config() {
-  mv _config.yml.bak _config.yml
-}
-
-# build a gem package
-build_gem() {
-  echo -e "Build the gem package for v$_version\n"
-  cleanup_config
-  rm -f ./*.gem
-  git add "$JS_DIST" -f # add JS dist to gem
-  gem build "$GEM_SPEC"
-  cp "$JS_DIST"/* "$BACKUP_PATH"
-  git restore --staged "$JS_DIST" # resume the git status
-  resume_config
-}
-
-# Update the git branch graph, tag, and then build the gem package.
-release() {
-  _version="$1" # X.Y.Z
-
-  git checkout "$PROD_BRANCH"
-  git merge --no-ff --no-edit "$working_branch"
-
-  # Create a new tag on working branch
-  echo -e "Create tag v$_version\n"
-  git tag "v$_version"
-
-  # Merge from patch branch to the staging branch
-  if [[ $working_branch == hotfix/* ]]; then
-    git checkout "$STAGING_BRANCH"
-    git merge --no-ff --no-edit "$working_branch"
-    git branch -D "$working_branch"
-  fi
-}
-
-main() {
-  if [[ $opt_skip_ver = false ]]; then
-    check
-
-    # auto-generate a new version number to the file 'package.json'
+# auto-generate a new version number to the file 'package.json' and
+bump_node() {
   if $opt_pre; then
     standard-version --prerelease rc
   else
     standard-version
   fi
-  fi
 
-  # Change heading of Patch version to level 2 (a bug from `standard-version`)
+  # Change heading of Patch version to heading level 2 (a bug from `standard-version`)
   sed -i "s/^### \[/## \[/g" CHANGELOG.md
+  # Replace multiple empty lines with a single empty line
+  sed -i "/^$/N;/^\n$/D" CHANGELOG.md
+}
 
-  _version="$(grep '"version":' "$NODE_CONFIG" | sed 's/.*: "//;s/".*//')"
+## Bump new version to gem config file
+bump_gem() {
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$1/" "$GEM_SPEC"
+}
 
-  echo -e "Bump version number to $_version\n"
-  bump "$_version"
+# Update the git branches, create a new tag, and then build the gem package.
+release() {
+  _version="$1" # X.Y.Z
+  _latest_commit="$(git rev-parse HEAD)"
 
-  build_gem
+  # Create a new tag on production branch
+  echo -e "> Create tag v$_version\n"
+  git tag "v$_version"
 
-  if [[ $opt_pre = true ]]; then
-    # Undo all changes on Git
-    git reset --hard && git clean -fd
-  else
-    release "$_version"
+  git checkout "$STAGING_BRANCH"
+
+  if [[ $working_branch == hotfix/* ]]; then
+    git merge --no-ff --no-edit "$working_branch"
+    # delete the patch branch
+    git branch -D "$working_branch"
   fi
 
+  # cherry-pick the latest commit from production branch to default branch
+  git cherry-pick "$_latest_commit"
+
+}
+
+## Build a gem package
+build_gem() {
+  # Remove unnecessary theme settings
+  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+  rm -f ./*.gem
+
+  npm run build
+  git add "$JS_DIST" -f # add JS dist to gem
+  gem build "$GEM_SPEC"
+  cp "$JS_DIST"/* "$BACKUP_PATH"
+
+  # Resume the settings
+  git reset
+  git checkout .
+
   # restore the dist files for future development
   mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
 }
 
+main() {
+  check
+
+  if [[ $opt_pre = false ]]; then
+    git checkout "$PROD_BRANCH"
+    git merge --no-ff --no-edit "$working_branch"
+  fi
+
+  bump_node
+
+  _version="$(grep '"version":' "$NODE_CONFIG" | sed 's/.*: "//;s/".*//')"
+
+  bump_gem "$_version"
+
+  echo -e "> Build the gem package for v$_version\n"
+
+  if [[ $opt_pre = false ]]; then
+    echo -e "> Bumped version number to $_version\n"
+    git add .
+    git commit -m "chore(release): $_version"
+
+    release "$_version"
+  fi
+
+  build_gem
+}
+
 while (($#)); do
   opt="$1"
   case $opt in
@@ -219,10 +194,6 @@ while (($#)); do
     opt_pre=true
     shift
     ;;
-  -k | --skip-versioning)
-    opt_skip_ver=true
-    shift
-    ;;
   -h | --help)
     help
     exit 0

tools/test

@@ -19,7 +19,7 @@ help() {
   echo
   echo "Usage:"
   echo
-  echo "   bash ./tools/test.sh [options]"
+  echo "   bash ./tools/test [options]"
   echo
   echo "Options:"
   echo '     -c, --config   "<config_a[,config_b[...]]>"    Specify config file(s)'
@@ -62,9 +62,8 @@ main() {
 
   # test
   bundle exec htmlproofer "$SITE_DIR" \
-    --disable-external \
-    --check-html \
-    --allow_hash_href
+    --disable-external=true \
+    --ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 }
 
 while (($#)); do