chore(release): 7.0.0

## [7.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.5...v7.0.0) (2024-05-11)

### ⚠ BREAKING CHANGES

* optimize the resource hints (#1717)
* rename media-url file and related parameters (#1651)
* rename comment setting parameter (#1563)
* **analytics:** add post pageviews for GoatCounter (#1543)

### Features

* add cloudflare web analytics ([#1723](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1723)) ([c17fba4](c17fba44f5))
* add support for embed video files ([#1558](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1558)) ([9592146](9592146ca3))
* add support for giscus strict title matching ([#1614](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1614)) ([700fd5b](700fd5bad7))
* **analytics:** add post pageviews for GoatCounter ([#1543](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1543)) ([b641b3f](b641b3f1f2))
* **analytics:** add Umami and Matomo tracking codes ([#1658](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1658)) ([61bdca2](61bdca2db4))
* change site verification settings ([#1561](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1561)) ([e436387](e4363871b5))
* **deps:** move `MathJax` configuration to a separate file ([#1670](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1670)) ([44f552c](44f552cbce))
* display theme version in footer ([#1611](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1611)) ([8349314](834931486d))
* **i18n:** allow `page.lang` to override `site.lang` ([#1586](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1586)) ([547b95c](547b95cc7a))
* make post description customizable ([#1602](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1602)) ([f865336](f865336c89))
* **media:** support audio and video tag with multi sources ([#1618](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1618)) ([23be416](23be4162b3))

### Bug Fixes

* make TOC title and entries visible at the same time ([#1711](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1711)) ([e0950fc](e0950fc973))
* mode toggle not outlined when receiving keyboard focus ([#1690](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1690)) ([cd37f63](cd37f63a01))
* prevent footnote back arrow from becoming an emoji ([#1716](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1716)) ([8608147](8608147fb5))
* **pwa:** skip range requests in service worker ([#1672](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1672)) ([76d58fe](76d58fe0ff))
* search result prompt is empty ([#1583](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1583)) ([8a2afae](8a2afae6ca))
* use `https` for Weibo sharing URL ([#1612](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1612)) ([8e5fbb7](8e5fbb7a74))

### Improvements

* improve <hr> visibility in dark mode ([#1565](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1565)) ([4ddd5c4](4ddd5c4370))
* lean bootstrap javascript ([#1734](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1734)) ([ddb48ed](ddb48eda52))
* rename comment setting parameter ([#1563](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1563)) ([f8390d4](f8390d4384))
* replace jQuery with Vanilla JS ([#1681](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1681)) ([fe7afa3](fe7afa379f))
* simplify mode toggle script ([#1692](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1692)) ([d4a6d64](d4a6d640bd))
* tree shaking Bootstrap CSS ([#1736](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1736)) ([363a3d9](363a3d936b))

### Changes

* optimize the resource hints ([#1717](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1717)) ([dcb0add](dcb0add47b))
* rename media-url file and related parameters ([#1651](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1651)) ([9f8aeaa](9f8aeaadbf))

.browserslistrc

@@ -1,5 +0,0 @@
-# https://github.com/browserslist/browserslist#browserslistrc
-
-last 2 versions
-> 0.2%
-not dead

.commitlintrc.json

@@ -1,8 +0,0 @@
-{
-  "rules": {
-    "body-max-line-length": [
-      0,
-      "always"
-    ]
-  }
-}

.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/DISCUSSION_TEMPLATE/general.yml

@@ -0,0 +1,17 @@
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true

.github/DISCUSSION_TEMPLATE/ideas.yml

@@ -0,0 +1,7 @@
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true

.github/DISCUSSION_TEMPLATE/q-a.yml

@@ -0,0 +1,40 @@
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: dropdown
+    id: download
+    attributes:
+      label: How did you create the site?
+      options:
+        - Generated from `chirpy-starter`
+        - Built from `jekyll-theme-chirpy`
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe your need in detail.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Operations you have already tried
+      description: Describe the effort you went through.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Or logs? Anything that will give us more context about the issue you are encountering!

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,68 +0,0 @@
----
-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
-
-## Describe the bug
-
-<!-- A clear and concise description of what the bug is. -->
-
-## To Reproduce
-
-Steps to reproduce the behavior:
-<!--
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
--->
-
-## Expected behavior
-
-<!-- A clear and concise description of what you expected to happen. -->
-
-## Logs/Screenshots
-
-<!-- If applicable, add logs/screenshots to help explain your problem. -->
-
-## Environment
-
-| Command                           | Version |
-|-----------------------------------|---------|
-| `ruby -v`                         |         |
-| `gem -v`                          |         |
-| `bundle -v`                       |         |
-| `bundle exec jekyll -v`           |         |
-| `bundle info jekyll-theme-chirpy` |         |
-
-<!-- If necessary, uncomment and fill in the following list:
-
-### Desktop
-
-- OS: [e.g. macOS 10.15.6]
-- Browser: [e.g. Chrome 85.0.4183.83 (64-bit)]
-
--->
-
-<!-- If necessary, uncomment and fill in the following list:
-
-### Smartphone
-
-- Device: [e.g. iPhone 6]
-- OS: [e.g. iOS 13.6.1]
-- Browser: [e.g. Chrome 22]
-
--->
-
-## Additional context
-
-<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,64 @@
+name: Bug Report
+description: Create a report to help us improve
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: dropdown
+    id: download
+    attributes:
+      label: How did you create the site?
+      options:
+        - Generated from `chirpy-starter`
+        - Built from `jekyll-theme-chirpy`
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. In this environment...
+        2. With this config...
+        3. Run '...'
+        4. See error...
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Environment
+      value: |
+        - Ruby: <!-- run `ruby -v` -->
+        - Jekyll: <!-- run `bundle exec jekyll -v` -->
+        - Chirpy: <!-- run `bundle info jekyll-theme-chirpy` -->
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Or logs? Anything that will give us more context about the issue you are encountering!

.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

@@ -1,33 +0,0 @@
----
-name: Feature Request
-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
-
-## Is your feature request related to a problem? Please describe
-
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-
-## Describe the solution you'd like
-
-<!-- A clear and concise description of what you want to happen. -->
-
-
-## Describe alternatives you've considered
-
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-
-## Additional context
-
-<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,38 @@
+name: Feature Request
+description: Suggest an idea for this project
+labels:
+  - enhancement
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Is your feature request related to a problem? Please describe
+      description: A clear and concise description of what the problem is.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.

.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/PULL_REQUEST_TEMPLATE.md

@@ -1,29 +1,17 @@
-## Description
-
-<!--
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
--->
-
 ## Type of change
-
-<!--
-Please select the desired item checkbox and change it to "[x]", then delete options that are not relevant.
--->
+<!-- Please select the desired item checkbox and change it from `[ ]` to `[x]` and then delete the irrelevant options. -->
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Improvement (refactoring and improving code)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
 
-## Additional context
-
-<!-- e.g. Fixes #(issue) -->
-
-## How has this been tested
-
+## Description
 <!--
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+  Please include a summary of the change and which issue is fixed. 
+  Please also include relevant motivation and context. 
+  List any dependencies that are required for this change.
 -->
 
-- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
-- [ ] I have tested this feature in the browser
+## Additional context
+<!-- e.g. Fixes #(issue) -->

.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/codeql/codeql-config.yml

@@ -0,0 +1,2 @@
+paths-ignore:
+  - "assets/js"

.github/dependabot.yml

@@ -0,0 +1,25 @@
+version: 2
+updates:
+  - package-ecosystem: "bundler"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    versioning-strategy: increase
+    groups:
+      npm:
+        update-types:
+          - "major"
+          - "minor"
+          - "patch"
+    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,14 +1,37 @@
 name: CD
+
 on:
   push:
-    branches: [production, docs]
+    branches:
+      - production
+    tags-ignore:
+      - "**"
 
 jobs:
-  launch:
+  release:
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - run: |
-          curl -X POST -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
-            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
-            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
+      - uses: actions/checkout@v4
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.3
+          bundler-cache: true
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - run: npm install
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GEM_HOST_API_KEY: ${{ secrets.GEM_HOST_API_KEY }}
+
+  publish:
+    needs: release
+    uses: ./.github/workflows/publish.yml

.github/workflows/ci.yml

@@ -1,18 +1,16 @@
 name: "CI"
 on:
   push:
-    branches-ignore:
-      - "production"
-      - "docs"
+    branches:
+      - "master"
     paths-ignore:
       - ".github/**"
       - "!.github/workflows/ci.yml"
       - ".gitignore"
+      - "docs/**"
       - "README.md"
       - "LICENSE"
   pull_request:
-    paths:
-      - "**"
 
 jobs:
   build:
@@ -20,11 +18,11 @@ jobs:
 
     strategy:
       matrix:
-        ruby: [2.7, 3]
+        ruby: ["3.1", "3.2", "3.3"]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # for posts's lastmod
 
@@ -35,7 +33,9 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
 
       - name: Build Assets
         run: npm i && npm run build

.github/workflows/codeql.yml

@@ -2,11 +2,10 @@ name: "CodeQL"
 
 on:
   push:
-    paths: ["**.js"]
+    branches: ["master"]
+    paths: ["_javascript/**/*.js"]
   pull_request:
-    paths: ["**.js"]
-  schedule:
-    - cron: "0 0 * * 5"
+    paths: ["_javascript/**/*.js"]
 
 jobs:
   analyze:
@@ -25,20 +24,21 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: "${{ matrix.language }}"
+          config-file: .github/codeql/codeql-config.yml
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
         with:
           category: "/language:${{ matrix.language }}"

.github/workflows/commitlint.yml

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

.github/workflows/publish.yml

@@ -0,0 +1,17 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - docs
+  workflow_call:
+
+jobs:
+  launch:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          curl -X POST -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
+            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'

.github/workflows/stale.yml

@@ -0,0 +1,32 @@
+name: "Close stale issues and PRs"
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # every day at 00:00 UTC
+
+permissions:
+  issues: write
+  pull-requests: write
+
+env:
+  STALE_LABEL: stale
+  EXEMPT_LABELS: "pending,planning,in progress"
+  MESSAGE: >
+    This conversation 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.
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          # 60 days before marking issues/PRs stale
+          days-before-close: -1 # does not close automatically
+          stale-issue-label: ${{ env.STALE_LABEL }}
+          exempt-issue-labels: ${{ env.EXEMPT_LABELS }}
+          stale-issue-message: ${{ env.MESSAGE }}
+          stale-pr-label: ${{ env.STALE_LABEL }}
+          exempt-pr-labels: ${{ env.EXEMPT_LABELS }}
+          stale-pr-message: ${{ env.MESSAGE }}

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

@@ -28,7 +28,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # submodules: true
@@ -37,12 +37,12 @@ jobs:
 
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
 
       - 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.3
           bundler-cache: true
 
       - name: Build site
@@ -52,10 +52,12 @@ jobs:
 
       - name: Test site
         run: |
-          bundle exec htmlproofer _site --disable-external --check-html --allow_hash_href
+          bundle exec htmlproofer _site \
+            \-\-disable-external \
+            \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: "_site${{ steps.pages.outputs.base_path }}"
 
@@ -68,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

.github/workflows/style-lint.yml

@@ -2,14 +2,10 @@ name: "Style Lint"
 
 on:
   push:
-    branches-ignore:
-      - "production"
-      - "docs"
-    paths:
-      - "_sass/**/*.scss"
+    branches: ["master"]
+    paths: ["_sass/**/*.scss"]
   pull_request:
-    paths:
-      - "_sass/**/*.scss"
+    paths: ["_sass/**/*.scss"]
 
 jobs:
   stylelint:
@@ -17,9 +13,11 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
       - run: npm i
       - run: npm test

.gitignore

@@ -5,6 +5,7 @@ Gemfile.lock
 
 # Jekyll cache
 .jekyll-cache
+.jekyll-metadata
 _site
 
 # RubyGems
@@ -17,6 +18,9 @@ package-lock.json
 # IDE configurations
 .idea
 .vscode
+!.vscode/settings.json
+!.vscode/extensions.json
 
 # Misc
+_sass/dist
 assets/js/dist

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no -- commitlint -x $(npm root -g)/@commitlint/config-conventional --edit
+npx --no -- commitlint --edit ${1}

.markdownlint.json

@@ -0,0 +1,8 @@
+{
+  "commands-show-output": false,
+  "blanks-around-fences": false,
+  "line-length": false,
+  "no-inline-html": {
+    "allowed_elements": ["kbd", "sub"]
+  }
+}

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "trailingComma": "none"
-}

.stylelintrc.json

@@ -1,22 +0,0 @@
-{
-  "extends": "stylelint-config-standard-scss",
-  "rules": {
-    "no-descending-specificity": null,
-    "shorthand-property-no-redundant-values": null,
-    "at-rule-no-vendor-prefix": null,
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null,
-    "color-function-notation": "legacy",
-    "alpha-value-notation": "number",
-    "selector-not-notation": "simple",
-    "color-hex-length": "long",
-    "declaration-block-single-line-max-declarations": 3,
-    "scss/operator-no-newline-after": null,
-    "rule-empty-line-before": [
-      "always",
-      { "ignore": ["after-comment", "first-nested", "inside-block"] }
-    ],
-    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }]
-  }
-}

.versionrc.json

@@ -1,20 +0,0 @@
-{
-  "skip": {
-    "commit": true,
-    "tag": true
-  },
-  "types": [
-    {
-      "type": "feat",
-      "section": "Features"
-    },
-    {
-      "type": "fix",
-      "section": "Bug Fixes"
-    },
-    {
-      "type": "perf",
-      "section": "Improvements"
-    }
-  ]
-}

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    // Liquid tags auto-complete
+    "killalau.vscode-liquid-snippets",
+    // Liquid syntax highlighting and formatting
+    "Shopify.theme-check-vscode",
+    // Common formatter
+    "esbenp.prettier-vscode",
+    "foxundermoon.shell-format",
+    "stylelint.vscode-stylelint",
+    "yzhang.markdown-all-in-one"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,27 @@
+{
+  // Prettier
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "prettier.trailingComma": "none",
+  // Shopify Liquid
+  "files.associations": {
+    "*.html": "liquid"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
+  },
+  // Formatter
+  "[html][liquid]": {
+    "editor.defaultFormatter": "Shopify.theme-check-vscode"
+  },
+  "[shellscript]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  // Disable vscode built-in stylelint
+  "css.validate": false,
+  "scss.validate": false,
+  "less.validate": false,
+  // Stylint extension settings
+  "stylelint.snippet": ["css", "less", "postcss", "scss"],
+  "stylelint.validate": ["css", "less", "postcss", "scss"]
+}

Gemfile

@@ -5,24 +5,5 @@ source "https://rubygems.org"
 gemspec
 
 group :test do
-  gem "html-proofer", "~> 3.18"
-end
-
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
-platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", ">= 1", "< 3"
-  gem "tzinfo-data"
-end
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
-
-# Lock jekyll-sass-converter to 2.x on Linux-musl
-if RUBY_PLATFORM =~ /linux-musl/
-  gem "jekyll-sass-converter", "~> 2.0"
+  gem "html-proofer", "~> 5.0"
 end

README.md

@@ -1,16 +1,18 @@
+<!-- markdownlint-disable-next-line -->
 <div align="center">
 
+  <!-- markdownlint-disable-next-line -->
   # Chirpy Jekyll Theme
 
-  A minimal, responsive and feature-rich Jekyll theme for technical writing.
+  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&amp;utm_medium=referral&amp;utm_content=cotes2020/jekyll-theme-chirpy&amp;utm_campaign=Badge_Grade)
-  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE)
+  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)][gem]&nbsp;
+  [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg?branch=master&event=push)][ci]&nbsp;
+  [![Codacy Badge](https://app.codacy.com/project/badge/Grade/4e556876a3c54d5e8f2d2857c4f43894)][codacy]&nbsp;
+  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)][license]&nbsp;
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-  [**Live Demo →**][demo]
+  [**Live Demo** →][demo]
 
   [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)][demo]
 
@@ -18,78 +20,64 @@
 
 ## Features
 
-<details>
-  <summary>
-    <i>Click to view features</i>
-  </summary>
-  <p>
-
-  - Dark / Light Theme Mode
-  - Localized UI language
-  - Pinned Posts
-  - Hierarchical Categories
-  - Trending Tags
-  - Table of Contents
-  - Last Modified Date of Posts
-  - Syntax Highlighting
-  - Mathematical Expressions
-  - Mermaid Diagram & Flowchart
-  - Dark / Light Mode Images
-  - Embed Videos
-  - Disqus / Utterances / Giscus Comments
-  - Search
-  - Atom Feeds
-  - Google Analytics
-  - Page Views Reporting
-  - SEO & Performance Optimization
-
-  </p>
-</details>
+- Dark Theme
+- Localized UI language
+- Pinned Posts on Home Page
+- Hierarchical Categories
+- Trending Tags
+- Table of Contents
+- Last Modified Date
+- Syntax Highlighting
+- Mathematical Expressions
+- Mermaid Diagrams & Flowcharts
+- Dark Mode Images
+- Embed Media
+- Comment Systems
+- Built-in Search
+- Atom Feeds
+- PWA
+- Web Analytics
+- SEO & Performance Optimization
 
 ## Documentation
 
-To explore usage, development, and upgrade guide of the project, please refer to
-the [Wiki][wiki].
+To learn how to use, develop, and upgrade 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 (_pull requests_, _issues_, and _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
 
-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].
+### Contributors
 
-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.
+Thanks to [all the contributors][contributors] involved in the development of the project!
 
-Last but not least, thanks to [JetBrains][jetbrains] for providing the
-_Open Source Development_ license.
+[![all-contributors](https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16)][contributors]
+<sub> — Made with [contrib.rocks](https://contrib.rocks)</sub>
 
-## Sponsoring
+### Third-Party Assets
 
-If you'd like to sponsor this project, the following options are available.
+This project is built on the [Jekyll][jekyllrb] ecosystem and some [great libraries][lib], and is developed using [VS Code][vscode] as well as tools provided by [JetBrains][jetbrains] under a non-commercial open-source software license.
 
-[![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]
+The avatar and favicon for the project's website are from [ClipartMAX][clipartmax].
 
 ## License
 
-This work is published under [MIT][mit] License.
+This project 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/
+[clipartmax]: 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
+[vscode]: https://code.visualstudio.com/
 [jetbrains]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
-[donation]: https://sponsor.cotes.page/
-[mit]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE

_config.yml

@@ -3,16 +3,12 @@
 # Import the theme
 theme: jekyll-theme-chirpy
 
-# Change the following value to '/PROJECT_NAME' ONLY IF your site type is GitHub Pages Project sites
-# and doesn't have a custom domain.
-baseurl: ""
-
 # The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
 # If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# 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
@@ -25,7 +21,8 @@ tagline: A text-focused Jekyll theme # it will display as the sub-title
 description: >- # used by seo meta and the atom feed
   A minimal, responsive and feature-rich Jekyll theme for technical writing.
 
-# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
+# Fill in the protocol & hostname for your site.
+# e.g. 'https://username.github.io', note that it does not end with a '/'.
 url: ""
 
 github:
@@ -47,17 +44,36 @@ social:
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
-google_site_verification: # fill in to your verification string
+# Site Verification Settings
+webmaster_verifications:
+  google: # fill in your Google verification code
+  bing: # fill in your Bing verification code
+  alexa: # fill in your Alexa verification code
+  yandex: # fill in your Yandex verification code
+  baidu: # fill in your Baidu verification code
+  facebook: # fill in your Facebook verification code
 
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-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
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
+  umami:
+    id: # fill in your Umami ID
+    domain: # fill in your Umami domain
+  matomo:
+    id: # fill in your Matomo ID
+    domain: # fill in your Matomo domain
+  cloudflare:
+    id: # fill in your Cloudflare Web Analytics token
+
+# Pageviews settings
+pageviews:
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
@@ -70,24 +86,29 @@ google_analytics:
 #     light  - Use the light color scheme
 #     dark   - Use the dark color scheme
 #
-theme_mode: # [light|dark]
+theme_mode: # [light | dark]
 
-# The CDN endpoint for images.
+# The CDN endpoint for media resources.
 # Notice that once it is assigned, the CDN url
-# will be added to all image (site avatar & posts' images) paths starting with '/'
+# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: "https://chirpy-img.netlify.app"
+cdn: "https://chirpy-img.netlify.app"
 
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"
 
+# The URL of the site-wide social preview image used in SEO `og:image` meta tag.
+# It can be overridden by a customized `page.image` in front matter.
+social_preview_image: # string, local or CORS resources
+
 # boolean type, the global switch for TOC in posts.
 toc: true
 
 comments:
-  active: # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
-  # The active options are as follows:
+  # Global switch for the post comment system. Keeping it empty means disabled.
+  provider: # [disqus | utterances | giscus]
+  # The provider options are as follows:
   disqus:
     shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
   # utterances settings › https://utteranc.es/
@@ -101,6 +122,7 @@ comments:
     category:
     category_id:
     mapping: # optional, default to 'pathname'
+    strict: # optional, default to '0'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
@@ -111,16 +133,27 @@ assets:
     enabled: # boolean, keep empty means false
     # specify the Jekyll environment, empty means both
     # only works if `assets.self_host.enabled` is 'true'
-    env: # [development|production]
+    env: # [development | production]
 
 pwa:
-  enabled: true # the option for PWA feature
+  enabled: true # the option for PWA feature (installable)
+  cache:
+    enabled: true # the option for PWA offline cache
+    # Paths defined here will be excluded from the PWA cache.
+    # Usually its value is the `baseurl` of another website that
+    # shares the same domain name as the current website.
+    deny_paths:
+      # - "/example"  # URLs match `<SITE_URL>/example/*` will not be cached by the PWA
 
 paginate: 10
 
+# The base URL of your site
+baseurl: ""
+
 # ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
+  footnote_backlink: "&#8617;&#xfe0e;"
   syntax_highlighter: rouge
   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
     css_class: highlight
@@ -157,10 +190,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-  - scope:
-      path: assets/img/favicons
-    values:
-      swcache: true
   - scope:
       path: assets/js/dist
     values:
@@ -181,12 +210,11 @@ compress_html:
 exclude:
   - "*.gem"
   - "*.gemspec"
+  - docs
   - tools
   - README.md
-  - CHANGELOG.md
   - LICENSE
-  - rollup.config.js
-  - node_modules
+  - "*.config.js"
   - 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/de-DE.yml

@@ -58,7 +58,7 @@ post:
   pageview_measure: Aufrufe
   read_time:
     unit: Minuten
-    prompt: lesen
+    prompt: Lesezeit
   relate_posts: Weiterlesen
   share: Teilen
   button:
@@ -70,6 +70,13 @@ post:
       title: Link kopieren
       succeed: Link erfolgreich kopiert!
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%d.%m.%Y"
+    dayjs: "DD.MM.YYYY"
+    
 # categories page
 categories:
   category_measure:

_data/locales/en.yml

@@ -40,7 +40,7 @@ copyright:
     Except where otherwise noted, the blog posts on this site are licensed
     under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
 
-meta: Using the :PLATFORM theme :THEME
+meta: Using the :THEME theme for :PLATFORM.
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.

_data/locales/ru-RU.yml

@@ -3,14 +3,14 @@
 # ----- Commons label -----
 
 layout:
-  post: Публикация
+  post: Пост
   category: Категория
   tag: Тег
 
 # The tabs of sidebar
 tabs:
   # format: <filename_without_extension>: <value>
-  home: Домашняя страница
+  home: Главная
   categories: Категории
   tags: Теги
   archives: Архив
@@ -19,8 +19,8 @@ tabs:
 # the text displayed in the search bar & search results
 search:
   hint: поиск
-  cancel: Отменить
-  no_results: Ох! Ничего не найдено.
+  cancel: Отмена
+  no_results: Упс! Ничего не найдено.
 
 panel:
   lastmod: Недавно обновлено
@@ -30,48 +30,58 @@ panel:
 copyright:
   # Shown at the bottom of the post
   license:
-    template: Публикация защищена лицензией :LICENSE_NAME.
+    template: Авторский пост защищен лицензией :LICENSE_NAME.
     name: CC BY 4.0
     link: https://creativecommons.org/licenses/by/4.0/
 
   # Displayed in the footer
   brief: Некоторые права защищены.
   verbose: >-
-    Публикации на сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0),
-    если в тексте публикации не указано иное.
+    Если не указано иное, авторские посты на этом сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0).
 
-meta: Powered by :PLATFORM with :THEME theme
+meta: Использует тему :THEME для :PLATFORM
 
 not_found:
-  statment: Извините, эта ссылка указывает на ресурс который не существует.
+  statment: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
 
 notification:
   update_found: Доступна новая версия контента.
-  update: Обновлять
+  update: Обновить
 
 # ----- Posts related labels -----
 
 post:
   written_by: Автор
-  posted: Время публикации
+  posted: Опубликовано
   updated: Обновлено
   words: слов
   pageview_measure: просмотров
   read_time:
-    unit: минут
+    unit: мин.
     prompt: чтения
-  relate_posts: Вам также может быть интересно
+  relate_posts: Похожие посты
   share: Поделиться
   button:
-    next: Предыдущая публикация
-    previous: Следующая публикация
+    next: Следующий пост
+    previous: Предыдущий пост
     copy_code:
-      succeed: Скопировано успешно!
+      succeed: Скопировано!
     share_link:
       title: Скопировать ссылку
       succeed: Ссылка успешно скопирована!
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%d.%m.%Y"
+    dayjs: "DD.MM.YYYY"
+    
 # categories page
 categories:
-  category_measure: категории
-  post_measure: публикации
+  category_measure:
+    singular: категория
+    plural: категории
+  post_measure:
+    singular: пост
+    plural: посты

_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/media.yml

@@ -0,0 +1,18 @@
+- extension: mp3
+  mime_type: mpeg
+- extension: mov
+  mime_type: quicktime
+- extension: avi
+  mime_type: x-msvideo
+- extension: mkv
+  mime_type: x-matroska
+- extension: ogv
+  mime_type: ogg
+- extension: weba
+  mime_type: webm
+- extension: 3gp
+  mime_type: 3gpp
+- extension: 3g2
+  mime_type: 3gpp2
+- extension: mid
+  mime_type: midi

_data/origin/basic.yml

@@ -4,13 +4,6 @@ webfonts: /assets/lib/fonts/main.css
 
 # Libraries
 
-jquery:
-  js: /assets/lib/jquery/jquery.min.js
-
-bootstrap:
-  css: /assets/lib/bootstrap/bootstrap.min.css
-  js: /assets/lib/bootstrap/bootstrap.bundle.min.js
-
 toc:
   css: /assets/lib/tocbot/tocbot.min.css
   js: /assets/lib/tocbot/tocbot.min.js
@@ -31,21 +24,16 @@ 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
+glightbox:
+  css: /assets/lib/glightbox/glightbox.min.css
+  js: /assets/lib/glightbox/glightbox.min.js
 
-magnific-popup:
-  css: /assets/lib/magnific-popup/magnific-popup.css
-  js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
-
-lazysizes:
-  js: /assets/lib/lazysizes/lazysizes.min.js
+lazy-polyfill:
+  css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css
+  js: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.umd.min.js
 
 clipboard:
   js: /assets/lib/clipboard/clipboard.min.js
 
-polyfill:
-  js: /assets/lib/polyfill-v3-es6/polyfill.min.js
-
 mathjax:
   js: /assets/lib/mathjax/tex-chtml.js

_data/origin/cors.yml

@@ -1,62 +1,54 @@
-# CDNs
-
-cdns:
-  # Google Fonts
+# Resource Hints
+resource_hints:
   - url: https://fonts.googleapis.com
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
   - url: https://fonts.gstatic.com
-    args: crossorigin
-  - url: https://fonts.googleapis.com
-  # jsDelivr CDN
+    links:
+      - rel: preconnect
+        opts: [crossorigin]
+      - rel: dns-prefetch
   - url: https://cdn.jsdelivr.net
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
 
-# fonts
-
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap
+# Web Fonts
+webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&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
-
-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
-
 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.25.0/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/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.5.1/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.8.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
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/localizedFormat.min.js
 
-countup:
-  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
+glightbox:
+  css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js
 
-magnific-popup:
-  css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
-  js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
-
-lazysizes:
-  js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
+lazy-polyfill:
+  css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css
+  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js
 
 clipboard:
   js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
 
-polyfill:
-  js: https://polyfill.io/v3/polyfill.min.js?features=es6
-
 mathjax:
   js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js

_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
@@ -22,4 +22,17 @@ platforms:
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"
-  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #   link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #
+  # - type: Mastodon
+  #   icon: "fa-brands fa-mastodon"
+  #   # See: https://github.com/justinribeiro/share-to-mastodon#properties
+  #   instances:
+  #     - label: mastodon.social
+  #       link: "https://mastodon.social/"
+  #     - label: mastodon.online
+  #       link: "https://mastodon.online/"
+  #     - label: fosstodon.org
+  #       link: "https://fosstodon.org/"
+  #     - label: photog.social
+  #       link: "https://photog.social/"

_includes/analytics/cloudflare.html

@@ -0,0 +1,7 @@
+<!-- Cloudflare Web Analytics -->
+<script
+  defer
+  src="https://static.cloudflareinsights.com/beacon.min.js"
+  data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
+></script>
+<!-- End Cloudflare Web Analytics -->

_includes/analytics/goatcounter.html

@@ -0,0 +1,6 @@
+<!-- GoatCounter -->
+<script
+  async
+  src="https://gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
+></script>

_includes/analytics/google.html

@@ -0,0 +1,13 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function (event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.analytics.google.id }}');
+  });
+</script>

_includes/analytics/matomo.html

@@ -0,0 +1,14 @@
+<!-- Matomo -->
+<script type="text/javascript">
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//{{ site.analytics.matomo.domain }}/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', {{ site.analytics.matomo.id }}]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->

_includes/analytics/umami.html

@@ -0,0 +1,6 @@
+<!-- Umami -->
+<script
+  defer
+  src="{{ site.analytics.umami.domain }}/script.js"
+  data-website-id="{{ site.analytics.umami.id }}"
+></script>

_includes/comments.html

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

_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">
   <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
 </div>
 
@@ -9,7 +10,7 @@
     this.page.identifier = '{{ page.url }}';
   };
 
-  /* Lazy loading */
+  {%- comment -%} Lazy loading {%- endcomment -%}
   var disqus_observer = new IntersectionObserver(
     function (entries) {
       if (entries[0].isIntersecting) {
@@ -27,12 +28,12 @@
     { threshold: [0] }
   );
 
-  disqus_observer.observe(document.querySelector('#disqus_thread'));
+  disqus_observer.observe(document.getElementById('disqus_thread'));
 
-  /* Auto switch theme */
+  {%- comment -%} Auto switch theme {%- endcomment -%}
   function reloadDisqus() {
     if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-      /* Disqus hasn't been loaded */
+      {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
       }
@@ -43,7 +44,7 @@
     }
   }
 
-  if (document.querySelector('.mode-toggle')) {
+  if (document.getElementById('mode-toggle')) {
     window.addEventListener('message', reloadDisqus);
   }
 </script>

_includes/comments/giscus.html

@@ -2,7 +2,6 @@
 <script type="text/javascript">
   (function () {
     const origin = 'https://giscus.app';
-    const iframe = 'iframe.giscus-frame';
     const lightTheme = 'light';
     const darkTheme = 'dark_dimmed';
 
@@ -25,11 +24,13 @@
       'data-category': '{{ site.comments.giscus.category }}',
       'data-category-id': '{{ site.comments.giscus.category_id }}',
       'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
       'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
       'data-emit-metadata': '0',
       'data-theme': initTheme,
       'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
       'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      'data-loading': 'lazy',
       crossorigin: 'anonymous',
       async: ''
     };
@@ -46,7 +47,7 @@
         event.data &&
         event.data.direction === ModeToggle.ID
       ) {
-        /* global theme mode changed */
+        {%- comment -%} global theme mode changed {%- endcomment -%}
         const mode = event.data.message;
         const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
 
@@ -56,7 +57,7 @@
           }
         };
 
-        const giscus = document.querySelector(iframe).contentWindow;
+        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
         giscus.postMessage({ giscus: message }, origin);
       }
     });

_includes/comments/utterances.html

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

_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/embed/audio.html

@@ -0,0 +1,35 @@
+{% assign src = include.src | strip %}
+{% assign title = include.title | strip %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless src contains '://' %}
+  {%- capture src -%}
+    {% include media-url.html src=src %}
+  {%- endcapture -%}
+{% endunless %}
+
+<p>
+  <audio class="embed-audio" controls>
+    {% assign extension = src | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = src | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = src | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="audio/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the audio tag. Here is a
+    <a href="{{ src | strip }}">link to the audio file</a> instead.
+  </audio>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>

_includes/embed/bilibili.html

@@ -0,0 +1,9 @@
+<iframe
+  class="embed-video"
+  loading="lazy"
+  src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
+  scrolling="no"
+  frameborder="0"
+  framespacing="0"
+  allowfullscreen="true"
+></iframe>

_includes/embed/twitch.html

@@ -1,4 +1,8 @@
-<iframe class="embed-video twitch lazyload"
+<iframe
+  class="embed-video twitch"
+  loading="lazy"
   src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
-  frameborder="0" allowfullscreen="true"
-  scrolling="no"></iframe>
+  frameborder="0"
+  allowfullscreen="true"
+  scrolling="no"
+></iframe>

_includes/embed/video.html

@@ -0,0 +1,59 @@
+{% assign video_url = include.src %}
+{% assign title = include.title %}
+{% assign poster_url = include.poster %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless video_url contains '://' %}
+  {%- capture video_url -%}
+    {% include media-url.html src=video_url %}
+  {%- endcapture -%}
+{% endunless %}
+
+{% if poster_url %}
+  {% unless poster_url contains '://' %}
+    {%- capture poster_url -%}
+      {% include media-url.html src=poster_url subpath=page.media_subpath %}
+    {%- endcapture -%}
+  {% endunless %}
+  {% assign poster = 'poster="' | append: poster_url | append: '"' %}
+{% endif %}
+
+{% assign attributes = 'controls' %}
+
+{% if include.autoplay %}
+  {% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
+{% endif %}
+
+{% if include.loop %}
+  {% assign attributes = attributes | append: ' ' | append: 'loop' %}
+{% endif %}
+
+{% if include.muted %}
+  {% assign attributes = attributes | append: ' ' | append: 'muted' %}
+{% endif %}
+
+<p>
+  <video class="embed-video file" {{ poster }} {{ attributes }}>
+    {% assign extension = video_url | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = video_url | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = video_url | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="video/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the video tag. Here is a
+    <a href="{{ video_url | strip }}">link to the video file</a> instead.
+  </video>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>

_includes/embed/youtube.html

@@ -1,6 +1,9 @@
-<iframe class="embed-video youtube lazyload"
+<iframe
+  class="embed-video"
+  loading="lazy"
   src="https://www.youtube.com/embed/{{ include.id }}"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen></iframe>
+  allowfullscreen
+></iframe>

_includes/favicons.html

@@ -8,7 +8,9 @@
 <link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
-<link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+{% if site.pwa.enabled %}
+  <link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+{% endif %}
 <link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
 <meta name="apple-mobile-web-app-title" content="{{ site.title }}">
 <meta name="application-name" content="{{ site.title }}">

_includes/footer.html

@@ -1,34 +1,49 @@
 <!-- The Footer -->
 
-<footer>
-  <div class="container px-lg-4">
-    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
-      <p>
-        {%- capture _platform -%}
-          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {%- endcapture -%}
+<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>
+    {{- '©' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
 
-        {%- capture _theme -%}
-          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-        {%- endcapture -%}
+    {% if site.social.links %}
+      <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+    {% else %}
+      <em class="fst-normal">{{ site.social.name }}</em>.
+    {% endif %}
 
-        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
-      </p>
+    {% if site.data.locales[include.lang].copyright.brief %}
+      <span
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="{{ site.data.locales[include.lang].copyright.verbose }}"
+      >
+        {{- site.data.locales[include.lang].copyright.brief -}}
+      </span>
+    {% endif %}
+  </p>
 
-      <p>
-        {{- '©' }}
-        {{ 'now' | date: '%Y' }}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.locales[include.lang].copyright.brief %}
-          <span
-            data-bs-toggle="tooltip"
-            data-bs-placement="top"
-            title="{{ site.data.locales[include.lang].copyright.verbose }}"
-          >
-            {{- site.data.locales[include.lang].copyright.brief -}}
-          </span>
-        {% endif %}
-      </p>
-    </div>
-  </div>
+  <p>
+    {%- capture _platform -%}
+      <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+    {%- endcapture -%}
+
+    {%- capture _theme -%}
+      <a
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="v{{ theme.version }}"
+        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/google-analytics.html

@@ -1,14 +0,0 @@
-<!--
-  The GA snippet
--->
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-
-    gtag('js', new Date());
-    gtag('config', '{{ site.google_analytics.id }}');
-  });
-</script>

_includes/head.html

@@ -1,5 +1,3 @@
-<!-- The Head -->
-
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
@@ -11,39 +9,43 @@
     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 %}
+  {%- capture seo_tags -%}
     {% seo title=false %}
-  {% endcapture %}
+  {%- endcapture -%}
+
+  <!-- Setup Open Graph image -->
 
   {% if page.image %}
-    {% assign img = page.image.path | default: page.image %}
+    {% assign src = page.image.path | default: page.image %}
 
-    {% unless img contains '://' %}
-      {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
-      {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
+    {% unless src contains '://' %}
+      {%- capture img_url -%}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
+      {%- endcapture -%}
 
-      {% if site.img_cdn contains '//' %}
-        <!-- it's a cross-origin URL -->
-        {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
-      {% else %}
-        <!-- it's a local file path -->
-        {%- capture replacement -%}
-          "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
-        {%- endcapture -%}
-      {% endif %}
+      {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
+      {%- capture new_url -%}{{ img_url }}{%- endcapture -%}
 
-      {% assign seo_tags = seo_tags | replace: target, replacement %}
+      {% assign seo_tags = seo_tags | replace: old_url, new_url %}
     {% endunless %}
+
+  {% elsif site.social_preview_image %}
+    {%- capture img_url -%}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
+    {%- endcapture -%}
+
+    {%- capture og_image -%}
+      <meta property="og:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {%- capture twitter_image -%}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {% assign old_meta_clip = '<meta name="twitter:card" content="summary" />' %}
+    {% assign new_meta_clip = og_image | append: twitter_image %}
+    {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
   {% endif %}
 
   {{ seo_tags }}
@@ -55,55 +57,44 @@
     {{ 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">
-
-  {% else %}
-    {% for cdn in site.data.origin[type].cdns %}
-      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
-      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+  <!-- Resource Hints -->
+  {% unless site.assets.self_host.enabled %}
+    {% for hint in site.data.origin.cors.resource_hints %}
+      {% for link in hint.links %}
+        <link rel="{{ link.rel }}" href="{{ hint.url }}" {{ link.opts | join: ' ' }}>
+      {% endfor %}
     {% endfor %}
-
-    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
-  {% endif %}
-
-  <!-- GA -->
-  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
-
-    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
-    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-
-    {% if site.google_analytics.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 %}
+  {% endunless %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
+  {% unless jekyll.environment == 'production' %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  {% endunless %}
 
-  <!-- Font Awesome -->
+  <!-- Theme style -->
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+
+  <!-- Web Font -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
+
+  <!-- Font Awesome Icons -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
-  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+  <!-- 3rd-party Dependencies -->
 
   {% if site.toc and page.toc %}
     <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
+  {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+    <link rel="stylesheet" href="{{ site.data.origin[type]['lazy-polyfill'].css | relative_url }}">
+  {% endif %}
+
   {% if page.layout == 'page' or page.layout == 'post' %}
-    <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
+    <!-- Image Popup -->
+    <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->

_includes/js-selector.html

@@ -2,30 +2,20 @@
 
 <!-- commons -->
 
-{% assign urls = site.data.origin[type].jquery.js
-  | append: ','
-  | append: site.data.origin[type].bootstrap.js
-  | append: ','
-  | append: site.data.origin[type].search.js
-%}
+{% assign urls = site.data.origin[type].search.js %}
 
 <!-- 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 %}
+{% assign js_dist = '/assets/js/dist/' %}
 
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
-  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type]['lazy-polyfill'].js %}
 
   {% unless page.layout == 'home' %}
     <!-- image lazy-loading & popup & clipboard -->
     {% assign urls = urls
       | append: ','
-      | append: site.data.origin[type]['magnific-popup'].js
+      | append: site.data.origin[type].glightbox.js
       | append: ','
       | append: site.data.origin[type].clipboard.js
     %}
@@ -38,7 +28,7 @@
   or page.layout == 'category'
   or page.layout == 'tag'
 %}
-  {% assign locale = site.lang | split: '-' | first %}
+  {% assign locale = include.lang | split: '-' | first %}
 
   {% assign urls = urls
     | append: ','
@@ -72,42 +62,46 @@
     {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
-<script defer src="{{ script | relative_url }}"></script>
+{% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
+<script src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
-  <script>
-    /* see: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options> */
-    MathJax = {
-      tex: {
-        /* start/end delimiter pairs for in-line math */
-        inlineMath: [
-          ['$', '$'],
-          ['\\(', '\\)']
-        ],
-        /* start/end delimiter pairs for display math */
-        displayMath: [
-          ['$$', '$$'],
-          ['\\[', '\\]']
-        ]
-      }
-    };
-  </script>
-  <script src="{{ site.data.origin[type].polyfill.js | relative_url }}"></script>
+  <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
+  <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
+<!-- Pageviews -->
+{% if page.layout == 'post' %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
+      {% when 'goatcounter' %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
+        {% endif %}
+    {% endcase %}
+  {% endif %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% include mermaid.html %}
+{% endif %}
+
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
-    <script defer src="{{ '/app.js' | relative_url }}"></script>
-  {% else %}
-    <script defer src="{{ '/unregister.js' | relative_url }}"></script>
+    <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
   {% endif %}
 
-  <!-- GA -->
-  {% if site.google_analytics.id != empty and site.google_analytics.id %}
-    {% include google-analytics.html %}
-  {% endif %}
+  <!-- Web Analytics -->
+  {% for analytics in site.analytics %}
+    {% capture str %}{{ analytics }}{% endcapture %}
+    {% assign type = str | split: '{' | first %}
+    {% if site.analytics[type].id and site.analytics[type].id != empty %}
+      {% include analytics/{{ type }}.html %}
+    {% endif %}
+  {% endfor %}
 {% endif %}

_includes/lang.html

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

_includes/media-url.html

@@ -0,0 +1,37 @@
+{%- comment -%}
+  Generate media resource final URL based on `site.cdn`, `page.media_subpath`
+
+  Arguments:
+    src - required, basic media resources path
+    subpath - optional, relative path of media resources
+    absolute - optional, boolean, if true, generate absolute URL
+
+  Return:
+    media resources URL
+{%- endcomment -%}
+
+{% assign url = include.src %}
+
+{%- if url -%}
+  {% unless url contains ':' %}
+    {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
+    {% assign url = include.subpath | default: '' | append: '/' | append: url %}
+
+    {%- comment -%} Prepend CND URL {%- endcomment -%}
+    {% if site.cdn %}
+      {% assign url = site.cdn | append: '/' | append: url %}
+    {% endif %}
+
+    {% assign url = url | replace: '///', '/' | replace: '//', '/' | replace: ':/', '://' %}
+
+    {% unless url contains '://' %}
+      {% if include.absolute %}
+        {% assign url = site.url | append: site.baseurl | append: url %}
+      {% else %}
+        {% assign url = site.baseurl | append: url %}
+      {% endif %}
+    {% endunless %}
+  {% endunless %}
+{%- endif -%}
+
+{{- url -}}

_includes/mermaid.html

@@ -1,29 +1,33 @@
 <!-- mermaid-js loader -->
 <script type="text/javascript">
-  (function () {
-    function updateMermaid(event) {
-      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
-        const mode = event.data.message;
+  function updateMermaid(event) {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      const mode = event.data.message;
 
-        if (typeof mermaid === 'undefined') {
-          return;
-        }
-
-        let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
-        let config = { theme: expectedTheme };
-
-        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $('.mermaid').each(function () {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr('data-processed');
-          $(this).html(svgCode);
-        });
-
-        mermaid.initialize(config);
-        mermaid.init(undefined, '.mermaid');
+      if (typeof mermaid === 'undefined') {
+        return;
       }
-    }
 
+      let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
+      let config = { theme: expectedTheme };
+
+      {%- comment -%}
+        Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
+      {%- endcomment -%}
+      const mermaidList = document.getElementsByClassName('mermaid');
+
+      [...mermaidList].forEach((elem) => {
+        const svgCode = elem.previousSibling.children.item(0).innerHTML;
+        elem.innerHTML = svgCode;
+        elem.removeAttribute('data-processed');
+      });
+
+      mermaid.initialize(config);
+      mermaid.init(undefined, '.mermaid');
+    }
+  }
+
+  (function () {
     let initTheme = 'default';
     const html = document.documentElement;
 
@@ -35,15 +39,16 @@
     }
 
     let mermaidConf = {
-      theme: initTheme /* <default|dark|forest|neutral> */
+      theme: initTheme {%- comment -%}  <default | dark | forest | neutral> {%- endcomment -%}
     };
 
-    /* Create mermaid tag */
-    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+    {%- comment -%} Create mermaid tag {%- endcomment -%}
+    const basicList = document.getElementsByClassName('language-mermaid');
+    [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
-      backup.classList.add('unloaded');
-      /* create mermaid node */
+      backup.classList.add('d-none');
+      {%- comment -%} create mermaid node {%- endcomment -%}
       let mermaid = document.createElement('pre');
       mermaid.classList.add('mermaid');
       const text = document.createTextNode(svgCode);
@@ -52,7 +57,6 @@
     });
 
     mermaid.initialize(mermaidConf);
-
     window.addEventListener('message', updateMermaid);
   })();
 </script>

_includes/mode-toggle.html

@@ -19,45 +19,32 @@
     }
 
     constructor() {
-      if (this.hasMode) {
-        if (this.isDarkMode) {
-          if (!this.isSysDarkPrefer) {
-            this.setDark();
-          }
-        } else {
-          if (this.isSysDarkPrefer) {
-            this.setLight();
-          }
-        }
-      }
-
       let self = this;
 
-      /* always follow the system prefers */
+      {%- comment -%} always follow the system prefers {%- endcomment -%}
       this.sysDarkPrefers.addEventListener('change', () => {
         if (self.hasMode) {
-          if (self.isDarkMode) {
-            if (!self.isSysDarkPrefer) {
-              self.setDark();
-            }
-          } else {
-            if (self.isSysDarkPrefer) {
-              self.setLight();
-            }
-          }
-
           self.clearMode();
         }
-
         self.notify();
       });
-    } /* constructor() */
+
+      if (!this.hasMode) {
+        return;
+      }
+
+      if (this.isDarkMode) {
+        this.setDark();
+      } else {
+        this.setLight();
+      }
+    }
 
     get sysDarkPrefers() {
       return window.matchMedia('(prefers-color-scheme: dark)');
     }
 
-    get isSysDarkPrefer() {
+    get isPreferDark() {
       return this.sysDarkPrefers.matches;
     }
 
@@ -65,10 +52,6 @@
       return this.mode === ModeToggle.DARK_MODE;
     }
 
-    get isLightMode() {
-      return this.mode === ModeToggle.LIGHT_MODE;
-    }
-
     get hasMode() {
       return this.mode != null;
     }
@@ -77,12 +60,12 @@
       return sessionStorage.getItem(ModeToggle.MODE_KEY);
     }
 
-    /* get the current mode on screen */
+    {%- comment -%} get the current mode on screen {%- endcomment -%}
     get modeStatus() {
-      if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
-        return ModeToggle.DARK_MODE;
+      if (this.hasMode) {
+        return this.mode;
       } else {
-        return ModeToggle.LIGHT_MODE;
+        return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE;
       }
     }
 
@@ -101,7 +84,9 @@
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 
-    /* Notify another plugins that the theme mode has changed */
+    {%- comment -%}
+      Notify another plugins that the theme mode has changed
+    {%- endcomment -%}
     notify() {
       window.postMessage(
         {
@@ -114,21 +99,9 @@
 
     flipMode() {
       if (this.hasMode) {
-        if (this.isSysDarkPrefer) {
-          if (this.isLightMode) {
-            this.clearMode();
-          } else {
-            this.setLight();
-          }
-        } else {
-          if (this.isDarkMode) {
-            this.clearMode();
-          } else {
-            this.setDark();
-          }
-        }
+        this.clearMode();
       } else {
-        if (this.isSysDarkPrefer) {
+        if (this.isPreferDark) {
           this.setLight();
         } else {
           this.setDark();
@@ -136,8 +109,8 @@
       }
 
       this.notify();
-    } /* flipMode() */
-  } /* ModeToggle */
+    }
+  }
 
   const modeToggle = new ModeToggle();
 </script>

_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/pageviews/goatcounter.html

@@ -0,0 +1,18 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  let pv = document.getElementById('pageviews');
+
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        pv.innerText = new Intl.NumberFormat().format(data.count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
+</script>

_includes/post-description.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+  Get post description or generate it from the post content.
+{%- endcomment -%}
+
+{%- assign max_length = include.max_length | default: 200 -%}
+
+{%- capture description -%}
+{%- if post.description -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
+{%- endif -%}
+{%- endcapture -%}
+
+{{- description | strip | truncate: max_length | escape -}}

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

_includes/post-sharing.html

@@ -1,35 +1,52 @@
 <!-- Post sharing snippet -->
 
-<div class="share-wrapper">
-  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
+<div class="share-wrapper d-flex align-items-center">
+  <span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
     {% assign url = page.url | absolute_url | url_encode %}
 
-    {% for share in site.data.share.platforms %}
+    {% for share in site.data.share.platforms -%}
+      {%- capture tooltip -%}
+        data-bs-toggle="tooltip" data-bs-placement="top" title="{{ share.type }}" aria-label="{{ share.type }}"
+      {%- endcapture -%}
+
+      {% if share.type == 'Mastodon' %}
+        <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
+        <button class="btn text-start" {{ tooltip }}>
+          <share-to-mastodon
+            class="share-mastodon"
+            message="{{ title }}"
+            url="{{ url }}"
+            {%- if share.instances -%}
+              customInstanceList="{{ share.instances | jsonify | xml_escape }}"
+            {%- endif %}
+          >
+            <i class="fa-fw {{ share.icon }}"></i>
+          </share-to-mastodon>
+        </button>
+
+        {% continue %}
+      {% endif %}
+
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
-      <a
-        href="{{ link }}"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        title="{{ share.type }}"
-        target="_blank"
-        rel="noopener"
-        aria-label="{{ share.type }}"
-      >
+
+      <a href="{{ link }}" target="_blank" rel="noopener" {{ tooltip }}>
         <i class="fa-fw {{ share.icon }}"></i>
       </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 fs-6"></i>
+    </button>
   </span>
 </div>

_includes/refactor-content.html

@@ -30,41 +30,24 @@
 {% endif %}
 
 <!-- Change the icon of checkbox -->
+
 {% if _content contains '<input type="checkbox"' %}
   {% assign _content = _content
-    | replace:
-        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
-        '<i class="fas fa-check-circle fa-fw checked"></i>'
-    | replace:
-        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
-        '<i class="far fa-circle fa-fw"></i>'
+    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
+      '<i class="fas fa-check-circle fa-fw checked"></i>'
+    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
+      '<i class="far fa-circle fa-fw"></i>'
   %}
 {% endif %}
 
-<!-- images -->
+<!-- Handle images -->
+
 {% assign IMG_TAG = '<img ' %}
 
 {% if _content contains IMG_TAG %}
-  {% assign _img_content = nil %}
+  {% assign _img_content = null %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
-  <!-- CDN URL -->
-  {% if site.img_cdn %}
-    {% if site.img_cdn contains '//' %}
-      {% assign _path_prefix = site.img_cdn %}
-    {% else %}
-      {% assign _path_prefix = site.img_cdn | relative_url %}
-    {% endif %}
-  {% else %}
-    {% assign _path_prefix = site.baseurl %}
-  {% endif %}
-
-  <!-- Add image path -->
-  {% if page.img_path %}
-    {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
-    {% assign _path_prefix = _path_prefix | append: _path %}
-  {% endif %}
-
   {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
       {% assign _img_content = _img_snippet %}
@@ -81,10 +64,9 @@
     {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
     {% assign _attrs = _left | split: '" ' %}
 
-    {% assign _width = nil %}
-    {% assign _height = nil %}
-    {% assign _lqip = nil %}
-    {% assign _class = nil %}
+    {% assign _src = null %}
+    {% assign _lqip = null %}
+    {% assign _class = null %}
 
     {% for _attr in _attrs %}
       {% unless _attr contains '=' %}
@@ -96,10 +78,6 @@
       {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
 
       {% case _key %}
-        {% when 'width' %}
-          {% assign _width = _value %}
-        {% when 'height' %}
-          {% assign _height = _value %}
         {% when 'src' %}
           {% assign _src = _value %}
         {% when 'lqip' %}
@@ -115,54 +93,46 @@
       {% assign _left = _left | remove: _old_class %}
     {% endif %}
 
-    {% assign _final_src = nil %}
+    {% assign _final_src = null %}
+    {% assign _lazyload = true %}
+
+    {%- capture _img_url -%}
+      {% include media-url.html src=_src subpath=page.media_subpath %}
+    {%- endcapture -%}
+
+    {% assign _path_prefix = _img_url | remove: _src %}
 
     {% unless _src contains '//' %}
       {% assign _final_src = _path_prefix | append: _src %}
-      {% capture _src_from %}"{{ _src }}"{% endcapture %}
-      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
-      {% assign _left = _left | replace: _src_from, _src_to %}
+      {% assign _src_alt = 'src="' | append: _path_prefix %}
+      {% assign _left = _left | replace: 'src="', _src_alt %}
     {% endunless %}
 
     {% if _lqip %}
-      {% unless _lqip contains ':' %}
-        {% assign _final_lqip = _path_prefix | append: _lqip %}
-        {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
-        {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
-        {% assign _left = _left | replace: _lqip_from, _lqip_to %}
+      {% assign _lazyload = false %}
+      {% assign _class = _class | append: ' blur' %}
+
+      {% unless _lqip contains 'data:' %}
+        {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
+        {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
       {% endunless %}
-    {% endif %}
 
-    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
-    {% assign _left = _left | replace: 'src=', 'data-src=' %}
-    {% if _left contains 'class=' %}
-      {% assign _left = _left | replace: 'class="', 'class="lazyload '%}
+      <!-- add image placeholder -->
+      {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
+
     {% else %}
-      {% assign _left = _left | append: ' class="lazyload"' %}
+      {% assign _class = _class | append: ' shimmer' %}
     {% endif %}
 
-    <!-- add image placeholder -->
-    {% if _lqip %}
-      {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
-    {% else %}
-      {% if _width and _height %}
-        <!-- add SVG placehoder -->
-        {%- capture _svg -%}
-          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width  }} {{ _height }}'%3E%3C/svg%3E"
-        {%- endcapture -%}
-        {% assign _left =  _svg | append: ' ' | append: _left %}
-        {% assign _class = _class | append: ' shimmer' %}
-      {% endif %}
+    <!-- lazy-load images -->
+    {% if _lazyload %}
+      {% assign _left = _left | append: ' loading="lazy"' %}
     {% endif %}
 
-    <!-- Bypass the HTML-proofer test -->
-    {% assign _left = _left | append: ' data-proofer-ignore' %}
-
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {%- capture _wrapper_start -%}
-        <div class="preview-img {{ _class | strip }}">
-      {%- endcapture -%}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
+
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
 
@@ -176,26 +146,30 @@
         {% capture _class %}
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
         {% endcapture %}
-        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
+
       {% else %}
         <!-- create the image wrapper -->
-        {%- capture _wrapper_start -%}
-          <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
-        {%- endcapture -%}
+        {% assign _wrapper_start = _final_src
+          | default: _src
+          | prepend: '<a href="'
+          | append: '" class="popup img-link '
+          | append: _class
+          | append: '">'
+        %}
+
         {% assign _img_content = _img_content | append: _wrapper_start %}
-        {% assign _right = _right | prepend: '></a' %}
+        {% assign _right = '></a' | append: _right %}
       {% endif %}
     {% endif %}
 
     <!-- combine -->
-    {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
-
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
   {% endfor %}
 
   {% if _img_content %}
     {% assign _content = _img_content %}
   {% endif %}
-
 {% endif %}
 
 <!-- Add header for code snippets -->
@@ -205,13 +179,11 @@
   {% assign _new_content = '' %}
 
   {% for _snippet in _code_spippets %}
-
     {% if forloop.last %}
       {% assign _new_content = _new_content | append: _snippet %}
 
     {% else %}
-
-      {% assign _left = _snippet | split: '><' | last%}
+      {% assign _left = _snippet | split: '><' | last %}
 
       {% if _left contains 'file="' %}
         {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
@@ -226,21 +198,19 @@
         <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
-      {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header">'
-          | append: _label
-          | append: '<button aria-label="copy" data-title-succeed="'
-          | append: site.data.locales[include.lang].post.button.copy_code.succeed
-          | append: '"><i class="far fa-clipboard"></i></button></div>'
-          | append: '<div class="highlight"><code>'
+      {% assign _new_content = _new_content
+        | append: _snippet
+        | append: '<div class="code-header">'
+        | append: _label
+        | append: '<button aria-label="copy" data-title-succeed="'
+        | append: site.data.locales[include.lang].post.button.copy_code.succeed
+        | append: '"><i class="far fa-clipboard"></i></button></div>'
+        | append: '<div class="highlight"><code>'
       %}
-
     {% endif %}
-
   {% endfor %}
 
   {% assign _content = _new_content %}
-
 {% endif %}
 
 <!-- Create heading anchors -->
@@ -249,11 +219,11 @@
 {% assign _heading_content = _content %}
 
 {% for level in heading_levels %}
-  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
-  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+  {% assign mark_start = '<h' | append: level | append: ' id="' %}
+  {% assign mark_end = '</h' | append: level | append: '>' %}
 
   {% if _heading_content contains mark_start %}
-    {% assign _new_content = nil %}
+    {% assign _new_content = null %}
     {% assign heading_snippets = _heading_content | split: mark_start %}
 
     {% for snippet in heading_snippets %}
@@ -263,20 +233,19 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% assign anchor = '<a href="#'
+        | append: id
+        | append: '" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>'
+      %}
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
       {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
 
-      {% assign _new_content = _new_content | append: mark_start
-          | append: left | append: anchor | append: right
-      %}
-
+      {% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
     {% endfor %}
 
     {% assign _heading_content = _new_content %}
-
   {% endif %}
 {% endfor %}
 

_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,22 @@
 
 {% 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 match_posts = match_posts | reverse %}
+{% 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,51 +62,33 @@
   {% 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>
-              <div class="text-muted small">
-                <p>
-                  {% include no-linenos.html content=post.content %}
-                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
-                </p>
+              {% include datetime.html date=post.date lang=include.lang %}
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
+              <div class="text-muted">
+                <p>{% include post-description.html %}</p>
               </div>
             </div>
           </a>
-        </div>
+        </article>
       {% endfor %}
-    </div>
-    <!-- .card-deck -->
-  </div>
+    </nav>
+  </aside>
   <!-- #related-posts -->
 {% endif %}

_includes/search-loader.html

@@ -4,20 +4,22 @@
 -->
 
 {% capture result_elem %}
-<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
-  <a href="{url}">{title}</a>
-  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    {categories}
-    {tags}
-  </div>
-  <p>{snippet}</p>
-</div>
+  <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>
+  </article>
 {% endcapture %}
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
 <script>
-  /* Note: dependent library will be loaded in `js-selector.html` */
+  {%- comment -%} Note: dependent library will be loaded in `js-selector.html` {%- endcomment -%}
   SimpleJekyllSearch({
     searchInput: document.getElementById('search-input'),
     resultsContainer: document.getElementById('search-results'),

_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 id="search-result-wrapper" class="d-flex justify-content-center d-none">
+  <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,55 +1,50 @@
 <!-- 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 %}
-            {% if site.avatar contains '://' %}
-              {{ site.avatar }}
-            {% elsif site.img_cdn != empty and site.img_cdn %}
-              {{ site.avatar | prepend: site.img_cdn }}
-            {% else %}
-              {{ site.avatar | relative_url }}
-            {% endif %}
-          {% endcapture %}
-        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
-      {% endif %}
+      {%- if site.avatar != empty and site.avatar -%}
+        {%- capture avatar_url -%}
+          {% include media-url.html src=site.avatar %}
+        {%- endcapture -%}
+        <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+      {%- 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">
-    <!-- home -->
-    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home"></i>
-        <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
-      </a>
-    </li>
-    <!-- the real tabs -->
-    {% for tab in site.tabs %}
-      <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-        <a href="{{ tab.url | relative_url }}" class="nav-link">
-          <i class="fa-fw {{ tab.icon }}"></i>
-          {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
-
-          <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+  <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">
+          <i class="fa-fw fas fa-home"></i>
+          <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
         </a>
       </li>
-      <!-- .nav-item -->
-    {% endfor %}
-  </ul>
-  <!-- ul.nav.flex-column -->
+      <!-- the real tabs -->
+      {% for tab in site.tabs %}
+        <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+          <a href="{{ tab.url | relative_url }}" class="nav-link">
+            <i class="fa-fw {{ tab.icon }}"></i>
+            {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+
+            <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+          </a>
+        </li>
+        <!-- .nav-item -->
+      {% endfor %}
+    </ul>
+  </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="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -100,5 +95,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="d-none ps-0 pe-4">
+    <h2 class="panel-heading ps-3 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' %}
@@ -17,7 +17,7 @@
           {% if forloop.first %}
             <span>
               <a href="{{ '/' | relative_url }}">
-                {{ site.data.locales[include.lang].tabs.home | capitalize }}
+                {{- site.data.locales[include.lang].tabs.home | capitalize -}}
               </a>
             </span>
 
@@ -30,17 +30,19 @@
 
           {% elsif page.layout == 'category' or page.layout == 'tag' %}
             <span>
-              <a href="{{ item | relative_url }}">
-                {{ site.data.locales[include.lang].tabs[item] | default: page.title }}
+              <a href="{{ item | append: '/' | relative_url }}">
+                {{- site.data.locales[include.lang].tabs[item] | default: page.title -}}
               </a>
             </span>
           {% 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 id="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

@@ -1,16 +1,17 @@
-<!-- Get the last 5 posts from lastmod list. -->
+<!-- Get 5 last posted/updated posts -->
 
 {% assign MAX_SIZE = 5 %}
 
 {% assign all_list = '' | split: '' %}
 
 {% for post in site.posts %}
-  {% if post.last_modified_at and post.last_modified_at != post.date %}
-    {% capture elem %}
-      {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
-    {% endcapture %}
-    {% assign all_list = all_list | push: elem %}
-  {% endif %}
+  {% assign datetime = post.last_modified_at | default: post.date %}
+
+  {% capture elem %}
+    {{- datetime | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
+  {% endcapture %}
+
+  {% assign all_list = all_list | push: elem %}
 {% endfor %}
 
 {% assign all_list = all_list | sort | reverse %}
@@ -22,9 +23,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 +35,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/commons.js

@@ -1,5 +1,5 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 
-basic();
 initSidebar();
 initTopbar();
+basic();

_javascript/home.js

@@ -1,8 +1,8 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { initLocaleDatetime, imgLazy } from './modules/plugins';
+import { initLocaleDatetime, loadImg } from './modules/plugins';
 
-basic();
+loadImg();
+initLocaleDatetime();
 initSidebar();
 initTopbar();
-initLocaleDatetime();
-imgLazy();
+basic();

_javascript/misc.js

@@ -1,7 +1,7 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import { initLocaleDatetime } from './modules/plugins';
 
-basic();
 initSidebar();
 initTopbar();
 initLocaleDatetime();
+basic();

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

@@ -3,15 +3,17 @@
  */
 
 export function back2top() {
-  $(window).on('scroll', () => {
-    if ($(window).scrollTop() > 50) {
-      $('#back-to-top').fadeIn();
+  const btn = document.getElementById('back-to-top');
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      btn.classList.add('show');
     } else {
-      $('#back-to-top').fadeOut();
+      btn.classList.remove('show');
     }
   });
 
-  $('#back-to-top').on('click', () => {
-    window.scrollTo(0, 0);
+  btn.addEventListener('click', () => {
+    window.scrollTo({ top: 0 });
   });
 }

_javascript/modules/components/category-collapse.js

@@ -1,36 +1,36 @@
 /**
  * Tab 'Categories' expand/close effect.
  */
+
+import 'bootstrap/js/src/collapse.js';
+
 const childPrefix = 'l_';
 const parentPrefix = 'h_';
-const collapse = $('.collapse');
+const children = document.getElementsByClassName('collapse');
 
 export function categoryCollapse() {
-  /* close up top-category */
-  collapse.on('hide.bs.collapse', function () {
-    /* Bootstrap collapse events. */ const parentId =
-      parentPrefix + $(this).attr('id').substring(childPrefix.length);
-    if (parentId) {
-      $(`#${parentId} .far.fa-folder-open`).attr(
-        'class',
-        'far fa-folder fa-fw'
-      );
-      $(`#${parentId} i.fas`).addClass('rotate');
-      $(`#${parentId}`).removeClass('hide-border-bottom');
-    }
-  });
+  [...children].forEach((elem) => {
+    const id = parentPrefix + elem.id.substring(childPrefix.length);
+    const parent = document.getElementById(id);
 
-  /* expand the top category */
-  collapse.on('show.bs.collapse', function () {
-    const parentId =
-      parentPrefix + $(this).attr('id').substring(childPrefix.length);
-    if (parentId) {
-      $(`#${parentId} .far.fa-folder`).attr(
-        'class',
-        'far fa-folder-open fa-fw'
-      );
-      $(`#${parentId} i.fas`).removeClass('rotate');
-      $(`#${parentId}`).addClass('hide-border-bottom');
-    }
+    // collapse sub-categories
+    elem.addEventListener('hide.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder-open').className =
+          'far fa-folder fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
+        parent.classList.remove('hide-border-bottom');
+      }
+    });
+
+    // expand sub-categories
+    elem.addEventListener('show.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder').className =
+          'far fa-folder-open fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.remove('rotate');
+        parent.classList.add('hide-border-bottom');
+      }
+    });
   });
 }

_javascript/modules/components/clipboard.js

@@ -2,105 +2,113 @@
  * Clipboard functions
  *
  * Dependencies:
- *   - popper.js (https://github.com/popperjs/popper-core)
- *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ *    clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
+import Tooltip from 'bootstrap/js/src/tooltip';
+
 const clipboardSelector = '.code-header>button';
+
+const ICON_DEFAULT = 'far fa-clipboard';
 const ICON_SUCCESS = 'fas fa-check';
+
 const ATTR_TIMEOUT = 'timeout';
 const ATTR_TITLE_SUCCEED = 'data-title-succeed';
 const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
 const TIMEOUT = 2000; // in milliseconds
 
 function isLocked(node) {
-  if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
-    let timeout = $(node).attr(ATTR_TIMEOUT);
+  if (node.hasAttribute(ATTR_TIMEOUT)) {
+    let timeout = node.getAttribute(ATTR_TIMEOUT);
     if (Number(timeout) > Date.now()) {
       return true;
     }
   }
+
   return false;
 }
 
 function lock(node) {
-  $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+  node.setAttribute(ATTR_TIMEOUT, Date.now() + TIMEOUT);
 }
 
 function unlock(node) {
-  $(node).removeAttr(ATTR_TIMEOUT);
+  node.removeAttribute(ATTR_TIMEOUT);
 }
 
-function getIcon(btn) {
-  let iconNode = $(btn).children();
-  return iconNode.attr('class');
-}
-
-const ICON_DEFAULT = getIcon(clipboardSelector);
-
 function showTooltip(btn) {
-  const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
-  $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+  const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
+  btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+  Tooltip.getInstance(btn).show();
 }
 
 function hideTooltip(btn) {
-  $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN);
+  Tooltip.getInstance(btn).hide();
+  btn.removeAttribute(ATTR_TITLE_ORIGIN);
 }
 
 function setSuccessIcon(btn) {
-  let btnNode = $(btn);
-  let iconNode = btnNode.children();
-  iconNode.attr('class', ICON_SUCCESS);
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_SUCCESS);
 }
 
 function resumeIcon(btn) {
-  let btnNode = $(btn);
-  let iconNode = btnNode.children();
-  iconNode.attr('class', ICON_DEFAULT);
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_DEFAULT);
 }
 
-export function initClipboard() {
-  // Initial the clipboard.js object
-  if ($(clipboardSelector).length) {
-    const clipboard = new ClipboardJS(clipboardSelector, {
-      target(trigger) {
-        let codeBlock = trigger.parentNode.nextElementSibling;
-        return codeBlock.querySelector('code .rouge-code');
-      }
-    });
+function setCodeClipboard() {
+  const clipboardList = document.querySelectorAll(clipboardSelector);
 
-    const clipboardList = document.querySelectorAll(clipboardSelector);
-    [...clipboardList].map(
-      (elem) =>
-        new bootstrap.Tooltip(elem, {
-          placement: 'left'
-        })
-    );
-
-    clipboard.on('success', (e) => {
-      e.clearSelection();
-
-      const trigger = e.trigger;
-      if (isLocked(trigger)) {
-        return;
-      }
-
-      setSuccessIcon(trigger);
-      showTooltip(trigger);
-      lock(trigger);
-
-      setTimeout(() => {
-        hideTooltip(trigger);
-        resumeIcon(trigger);
-        unlock(trigger);
-      }, TIMEOUT);
-    });
+  if (clipboardList.length === 0) {
+    return;
   }
 
-  /* --- Post link sharing --- */
+  // Initial the clipboard.js object
+  const clipboard = new ClipboardJS(clipboardSelector, {
+    target: (trigger) => {
+      const codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
+    }
+  });
 
-  $('#copy-link').on('click', (e) => {
-    let target = $(e.target);
+  [...clipboardList].map(
+    (elem) =>
+      new Tooltip(elem, {
+        placement: 'left'
+      })
+  );
+
+  clipboard.on('success', (e) => {
+    const trigger = e.trigger;
+
+    e.clearSelection();
+
+    if (isLocked(trigger)) {
+      return;
+    }
+
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+    lock(trigger);
+
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+      unlock(trigger);
+    }, TIMEOUT);
+  });
+}
+
+function setLinkClipboard() {
+  const btnCopyLink = document.getElementById('copy-link');
+
+  if (btnCopyLink === null) {
+    return;
+  }
+
+  btnCopyLink.addEventListener('click', (e) => {
+    const target = e.target;
 
     if (isLocked(target)) {
       return;
@@ -108,16 +116,28 @@ export function initClipboard() {
 
     // Copy URL to clipboard
     navigator.clipboard.writeText(window.location.href).then(() => {
-      const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
-      const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
+      const defaultTitle = target.getAttribute(ATTR_TITLE_ORIGIN);
+      const succeedTitle = target.getAttribute(ATTR_TITLE_SUCCEED);
+
       // Switch tooltip title
-      target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+      target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+      Tooltip.getInstance(target).show();
+
       lock(target);
 
       setTimeout(() => {
-        target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
+        target.setAttribute(ATTR_TITLE_ORIGIN, defaultTitle);
         unlock(target);
       }, TIMEOUT);
     });
   });
+
+  btnCopyLink.addEventListener('mouseleave', (e) => {
+    Tooltip.getInstance(e.target).hide();
+  });
+}
+
+export function initClipboard() {
+  setCodeClipboard();
+  setLinkClipboard();
 }

_javascript/modules/components/img-lazyload.js

@@ -1,15 +0,0 @@
-/**
- * Set up image lazy-load
- */
-
-export function imgLazy() {
-  if ($('#core-wrapper img[data-src]') <= 0) {
-    return;
-  }
-
-  /* Stop shimmer when image loaded */
-  document.addEventListener('lazyloaded', function (e) {
-    const $img = $(e.target);
-    $img.parent().removeClass('shimmer');
-  });
-}

_javascript/modules/components/img-loading.js

@@ -0,0 +1,67 @@
+/**
+ * Setting up image lazy loading and LQIP switching
+ */
+
+const ATTR_DATA_SRC = 'data-src';
+const ATTR_DATA_LQIP = 'data-lqip';
+
+const cover = {
+  SHIMMER: 'shimmer',
+  BLUR: 'blur'
+};
+
+function removeCover(clzss) {
+  this.parentElement.classList.remove(clzss);
+}
+
+function handleImage() {
+  if (!this.complete) {
+    return;
+  }
+
+  if (this.hasAttribute(ATTR_DATA_LQIP)) {
+    removeCover.call(this, cover.BLUR);
+  } else {
+    removeCover.call(this, cover.SHIMMER);
+  }
+}
+
+/**
+ * Switches the LQIP with the real image URL.
+ */
+function switchLQIP() {
+  const src = this.getAttribute(ATTR_DATA_SRC);
+  this.setAttribute('src', encodeURI(src));
+  this.removeAttribute(ATTR_DATA_SRC);
+}
+
+export function loadImg() {
+  const images = document.querySelectorAll('article img');
+
+  if (images.length === 0) {
+    return;
+  }
+
+  images.forEach((img) => {
+    img.addEventListener('load', handleImage);
+  });
+
+  // Images loaded from the browser cache do not trigger the 'load' event
+  document.querySelectorAll('article img[loading="lazy"]').forEach((img) => {
+    if (img.complete) {
+      removeCover.call(img, cover.SHIMMER);
+    }
+  });
+
+  // LQIPs set by the data URI or WebP will not trigger the 'load' event,
+  // so manually convert the URI to the URL of a high-resolution image.
+  const lqips = document.querySelectorAll(
+    `article img[${ATTR_DATA_LQIP}="true"]`
+  );
+
+  if (lqips.length) {
+    lqips.forEach((lqip) => {
+      switchLQIP.call(lqip);
+    });
+  }
+}

_javascript/modules/components/img-popup.js

@@ -1,22 +1,15 @@
 /**
  * Set up image popup
  *
- * See: https://github.com/dimsemenov/Magnific-Popup
+ * Dependencies: https://github.com/biati-digital/glightbox
  */
 
+const IMG_CLASS = 'popup';
+
 export function imgPopup() {
-  if ($('.popup') <= 0) {
+  if (document.getElementsByClassName(IMG_CLASS).length === 0) {
     return;
   }
 
-  $('.popup').magnificPopup({
-    type: 'image',
-    closeOnContentClick: true,
-    showCloseBtn: false,
-    zoom: {
-      enabled: true,
-      duration: 300,
-      easing: 'ease-in-out'
-    }
-  });
+  GLightbox({ selector: `.${IMG_CLASS}` });
 }

_javascript/modules/components/locale-datetime.js

@@ -15,15 +15,15 @@ class LocaleHelper {
   }
 
   static get locale() {
-    return $('html').attr('lang').substring(0, 2);
+    return document.documentElement.getAttribute('lang').substring(0, 2);
   }
 
   static getTimestamp(elem) {
-    return Number(elem.attr(LocaleHelper.attrTimestamp)); // unix timestamp
+    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
   }
 
   static getDateFormat(elem) {
-    return elem.attr(LocaleHelper.attrDateFormat);
+    return elem.getAttribute(this.attrDateFormat);
   }
 }
 
@@ -31,21 +31,23 @@ export function initLocaleDatetime() {
   dayjs.locale(LocaleHelper.locale);
   dayjs.extend(window.dayjs_plugin_localizedFormat);
 
-  $(`[${LocaleHelper.attrTimestamp}]`).each(function () {
-    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
-    const text = date.format(LocaleHelper.getDateFormat($(this)));
-    $(this).text(text);
-    $(this).removeAttr(LocaleHelper.attrTimestamp);
-    $(this).removeAttr(LocaleHelper.attrDateFormat);
+  document
+    .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`)
+    .forEach((elem) => {
+      const date = dayjs.unix(LocaleHelper.getTimestamp(elem));
+      const text = date.format(LocaleHelper.getDateFormat(elem));
+      elem.textContent = text;
+      elem.removeAttribute(LocaleHelper.attrTimestamp);
+      elem.removeAttribute(LocaleHelper.attrDateFormat);
 
-    // setup tooltips
-    const tooltip = $(this).attr('data-bs-toggle');
-    if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
-      return;
-    }
-
-    const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    $(this).attr('data-bs-title', tooltipText);
-    new bootstrap.Tooltip($(this));
-  });
+      // setup tooltips
+      if (
+        elem.hasAttribute('data-bs-toggle') &&
+        elem.getAttribute('data-bs-toggle') === 'tooltip'
+      ) {
+        // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
+        const tooltipText = date.format('llll');
+        elem.setAttribute('data-bs-title', tooltipText);
+      }
+    });
 }

_javascript/modules/components/mode-watcher.js

@@ -1,21 +1,14 @@
 /**
  * Add listener for theme mode toggle
  */
-const $toggleElem = $('.mode-toggle');
+const toggle = document.getElementById('mode-toggle');
 
 export function modeWatcher() {
-  if ($toggleElem.length === 0) {
+  if (!toggle) {
     return;
   }
 
-  $toggleElem.off().on('click', (e) => {
-    const $target = $(e.target);
-    let $btn =
-      $target.prop('tagName') === 'button'.toUpperCase()
-        ? $target
-        : $target.parent();
-
-    modeToggle.flipMode(); // modeToggle: `_includes/mode-toggle.html`
-    $btn.trigger('blur'); // remove the clicking outline
+  toggle.addEventListener('click', () => {
+    modeToggle.flipMode();
   });
 }

_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

@@ -1,121 +1,109 @@
 /**
  * This script make #search-result-wrapper switch to unloaded or shown automatically.
  */
-const $btnSbTrigger = $('#sidebar-trigger');
-const $btnSearchTrigger = $('#search-trigger');
-const $btnCancel = $('#search-cancel');
-const $content = $('#main>.row');
-const $topbarTitle = $('#topbar-title');
-const $searchWrapper = $('#search-wrapper');
-const $resultWrapper = $('#search-result-wrapper');
-const $results = $('#search-results');
-const $input = $('#search-input');
-const $hints = $('#search-hints');
-const $viewport = $('html,body');
 
-// class names
-const C_LOADED = 'loaded';
-const C_UNLOADED = 'unloaded';
-const C_FOCUS = 'input-focus';
-const C_FLEX = 'd-flex';
+const btnSbTrigger = document.getElementById('sidebar-trigger');
+const btnSearchTrigger = document.getElementById('search-trigger');
+const btnCancel = document.getElementById('search-cancel');
+const content = document.querySelectorAll('#main-wrapper>.container>.row');
+const topbarTitle = document.getElementById('topbar-title');
+const search = document.getElementById('search');
+const resultWrapper = document.getElementById('search-result-wrapper');
+const results = document.getElementById('search-results');
+const input = document.getElementById('search-input');
+const hints = document.getElementById('search-hints');
 
-class ScrollBlocker {
-  static offset = 0;
-  static resultVisible = false;
+// CSS class names
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
+const FOCUS = 'input-focus';
+const FLEX = 'd-flex';
 
-  static on() {
-    ScrollBlocker.offset = window.scrollY;
-    $viewport.scrollTop(0);
-  }
-
-  static off() {
-    $viewport.scrollTop(ScrollBlocker.offset);
-  }
-}
-
-/*--- Actions in mobile screens (Sidebar hidden) ---*/
+/* Actions in mobile screens (Sidebar hidden) */
 class MobileSearchBar {
   static on() {
-    $btnSbTrigger.addClass(C_UNLOADED);
-    $topbarTitle.addClass(C_UNLOADED);
-    $btnSearchTrigger.addClass(C_UNLOADED);
-    $searchWrapper.addClass(C_FLEX);
-    $btnCancel.addClass(C_LOADED);
+    btnSbTrigger.classList.add(UNLOADED);
+    topbarTitle.classList.add(UNLOADED);
+    btnSearchTrigger.classList.add(UNLOADED);
+    search.classList.add(FLEX);
+    btnCancel.classList.add(LOADED);
   }
 
   static off() {
-    $btnCancel.removeClass(C_LOADED);
-    $searchWrapper.removeClass(C_FLEX);
-    $btnSbTrigger.removeClass(C_UNLOADED);
-    $topbarTitle.removeClass(C_UNLOADED);
-    $btnSearchTrigger.removeClass(C_UNLOADED);
+    btnCancel.classList.remove(LOADED);
+    search.classList.remove(FLEX);
+    btnSbTrigger.classList.remove(UNLOADED);
+    topbarTitle.classList.remove(UNLOADED);
+    btnSearchTrigger.classList.remove(UNLOADED);
   }
 }
 
 class ResultSwitch {
+  static resultVisible = false;
+
   static on() {
-    if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main) unloaded.
-      ScrollBlocker.on();
-      $resultWrapper.removeClass(C_UNLOADED);
-      $content.addClass(C_UNLOADED);
-      ScrollBlocker.resultVisible = true;
+    if (!this.resultVisible) {
+      resultWrapper.classList.remove(UNLOADED);
+      content.forEach((el) => {
+        el.classList.add(UNLOADED);
+      });
+      this.resultVisible = true;
     }
   }
 
   static off() {
-    if (ScrollBlocker.resultVisible) {
-      $results.empty();
-      if ($hints.hasClass(C_UNLOADED)) {
-        $hints.removeClass(C_UNLOADED);
+    if (this.resultVisible) {
+      results.innerHTML = '';
+
+      if (hints.classList.contains(UNLOADED)) {
+        hints.classList.remove(UNLOADED);
       }
-      $resultWrapper.addClass(C_UNLOADED);
-      $content.removeClass(C_UNLOADED);
 
-      // now the release method must be called after $(#main) display
-      ScrollBlocker.off();
-
-      $input.val('');
-      ScrollBlocker.resultVisible = false;
+      resultWrapper.classList.add(UNLOADED);
+      content.forEach((el) => {
+        el.classList.remove(UNLOADED);
+      });
+      input.textContent = '';
+      this.resultVisible = false;
     }
   }
 }
 
 function isMobileView() {
-  return $btnCancel.hasClass(C_LOADED);
+  return btnCancel.classList.contains(LOADED);
 }
 
 export function displaySearch() {
-  $btnSearchTrigger.on('click', function () {
+  btnSearchTrigger.addEventListener('click', () => {
     MobileSearchBar.on();
     ResultSwitch.on();
-    $input.trigger('focus');
+    input.focus();
   });
 
-  $btnCancel.on('click', function () {
+  btnCancel.addEventListener('click', () => {
     MobileSearchBar.off();
     ResultSwitch.off();
   });
 
-  $input.on('focus', function () {
-    $searchWrapper.addClass(C_FOCUS);
+  input.addEventListener('focus', () => {
+    search.classList.add(FOCUS);
   });
 
-  $input.on('focusout', function () {
-    $searchWrapper.removeClass(C_FOCUS);
+  input.addEventListener('focusout', () => {
+    search.classList.remove(FOCUS);
   });
 
-  $input.on('input', () => {
-    if ($input.val() === '') {
+  input.addEventListener('input', () => {
+    if (input.value === '') {
       if (isMobileView()) {
-        $hints.removeClass(C_UNLOADED);
+        hints.classList.remove(UNLOADED);
       } else {
         ResultSwitch.off();
       }
     } else {
       ResultSwitch.on();
       if (isMobileView()) {
-        $hints.addClass(C_UNLOADED);
+        hints.classList.add(UNLOADED);
       }
     }
   });