chore(release): 6.5.3

#1553 introduced

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

@@ -0,0 +1,26 @@
+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
+    attributes:
+      label: What is the topic?
+      options:
+        - Sharing tips and tricks
+        - Just chatting
+    validations:
+      required: true
+
+  - 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,61 +0,0 @@
----
-name: Bug Report
-about: Create a report to help us improve
----
-
-> **Tips**: Remember, contributions to this repository should follow the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
-
-## Describe the bug
-
-<!-- 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/feature_request.md

@@ -1,26 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea for this project
-labels: enhancement
----
-
-> **Tips**: Remember, contributions to this repository should follow the [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
-
-## Is your feature request related to a problem? Please describe
-
-<!-- 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/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/codeql/codeql-config.yml

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

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
 
     strategy:
       matrix:
-        ruby: [2.7, 3]
+        ruby: ["3.0", "3.1", "3.2"]
 
     steps:
       - name: Checkout
@@ -36,7 +36,7 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
 
       - name: Build Assets
         run: npm i && npm run build

.github/workflows/codeql.yml

@@ -2,11 +2,9 @@ name: "CodeQL"
 
 on:
   push:
-    paths: ["**.js"]
+    paths: ["_javascript/**/*.js"]
   pull_request:
-    paths: ["**.js"]
-  schedule:
-    - cron: "0 0 * * 5"
+    paths: ["_javascript/**/*.js"]
 
 jobs:
   analyze:
@@ -29,16 +27,17 @@ jobs:
 
       # 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/pages-deploy.yml.hook

@@ -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
+          ruby-version: 3.2
           bundler-cache: true
 
       - name: Build site
@@ -57,7 +57,7 @@ jobs:
             \-\-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 }}"
 
@@ -70,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/stale.yml

@@ -8,23 +8,25 @@ 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@v8
+      - uses: actions/stale@v9
         with:
-          days-before-stale: 30
-          days-before-close: 1
-          stale-issue-label: stale
-          exempt-issue-labels: pending
-          stale-issue-message: >
-            This issue has been automatically marked as stale because it has not had recent activity.
-            It will be closed if no further activity occurs.
-            Thank you for your contributions.
-          stale-pr-label: stale
-          exempt-pr-labels: pending
-          stale-pr-message: >
-            This PR has been automatically marked as stale because it has not had recent activity.
-            It will be closed if no further activity occurs.
-            Thank you for your contributions.
+          # 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/style-lint.yml

@@ -20,6 +20,6 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
       - run: npm i
       - run: npm test

.gitignore

@@ -16,7 +16,6 @@ package-lock.json
 
 # IDE configurations
 .idea
-.vscode
 
 # Misc
 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}

.prettierrc

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

.stylelintrc.json

@@ -1,23 +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": ["/^\\$/"] }],
-    "media-feature-range-notation": "prefix"
-  }
-}

.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,12 @@
+{
+  "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"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  // Prettier
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "prettier.trailingComma": "none",
+  // Shopify Liquid
+  "files.associations": {
+    "*.html": "liquid"
+  },
+  // 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

@@ -21,8 +21,3 @@ 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"
-end

README.md

@@ -2,7 +2,7 @@
 
   # 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)][gem] 
   [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg?branch=master&event=push)][ci] 
@@ -10,7 +10,7 @@
   [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)][license] 
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-  [**Live Demo →**][demo]
+  [**Live Demo** →][demo]
 
   [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)][demo]
 
@@ -18,78 +18,64 @@
 
 ## Features
 
-<details>
-  <summary>
-    <i>Click to view features</i>
-  </summary>
-  <p>
-
-  - Dark / Light Theme Mode
-  - 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 / Light Mode Images
-  - Embed Videos
-  - Disqus / Utterances / Giscus Comments
-  - Built-in Search
-  - Atom Feeds
-  - PWA
-  - Google Analytics
-  - SEO & Performance Optimization
-
-  </p>
-</details>
+- Dark / Light Theme Mode
+- 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 / Light Mode Images
+- Embed Videos
+- Disqus / Giscus / Utterances Comments
+- Built-in Search
+- Atom Feeds
+- PWA
+- Google Analytics / GoatCounter
+- 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
 
-Contributions (Issues/PRs/Discussions) are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. For details, see the "[Contributing Guidelines][contribute-guide]".
+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
 
-Many thanks to the [contributors][contributors] who participated in the development
-and to the folks who reported bugs or shared ideas.
+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 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/Support_Me_on_Ko--fi-ff5e5b?logo=ko-fi&logoColor=white)][ko-fi]&nbsp;
-[![Wechat Pay](https://img.shields.io/badge/Tip_Me_on_WeChat-brightgreen?logo=wechat&logoColor=white)][donation]&nbsp;
-[![Alipay](https://img.shields.io/badge/Tip_Me_on_Alipay-blue?logo=alipay&logoColor=white)][donation]
+The avatar and favicon for the project's website are from [ClipartMAX][clipartmax].
 
 ## License
 
-This work is published under [MIT License][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/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
-[ko-fi]: https://ko-fi.com/coteschung/
-[donation]: https://sponsor.cotes.page/

_config.yml

@@ -3,10 +3,6 @@
 # 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'.
@@ -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:
@@ -55,6 +52,9 @@ google_site_verification: # fill in to your verification string
 google_analytics:
   id: # fill in your Google Analytics ID
 
+goatcounter:
+  id: # fill in your Goatcounter ID
+
 # Prefer color scheme setting.
 #
 # Note: Keep empty will follow the system prefer color by default,
@@ -66,7 +66,7 @@ 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.
 # Notice that once it is assigned, the CDN url
@@ -78,6 +78,10 @@ img_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
 
@@ -107,13 +111,23 @@ 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:
@@ -153,10 +167,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-  - scope:
-      path: assets/img/favicons
-    values:
-      swcache: true
   - scope:
       path: assets/js/dist
     values:
@@ -180,7 +190,6 @@ exclude:
   - docs
   - tools
   - README.md
-  - CHANGELOG.md
   - LICENSE
   - rollup.config.js
   - package*.json

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

@@ -35,14 +35,12 @@ 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

@@ -8,6 +8,8 @@ cdns:
   - url: https://fonts.googleapis.com
   # jsDelivr CDN
   - url: https://cdn.jsdelivr.net
+  # polyfill.io for math (cdnjs.cloudflare.com/polyfill)
+  - url: https://cdnjs.cloudflare.com
 
 # fonts
 
@@ -19,41 +21,39 @@ jquery:
   js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.1/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.1/dist/tocbot.min.js
+  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.2/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@10.4.0/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.9/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/localizedFormat.min.js
+    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
 
 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

@@ -23,3 +23,16 @@ platforms:
   # - type: Weibo
   #   icon: "fab fa-weibo"
   #   link: "http://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/comments/disqus.html

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

_includes/comments/giscus.html

@@ -30,6 +30,7 @@
       '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: ''
     };

_includes/comments/utterances.html

@@ -1,51 +1,50 @@
 <!-- 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 iframe = 'iframe.utterances-frame';
+    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> */
       if (event.origin === origin) {
         /* page initial */
         theme = initTheme;
-
-      } else if (event.source === window && event.data &&
-            event.data.direction === ModeToggle.ID) {
+      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
         /* global theme mode changed */
         const mode = event.data.message;
-        theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
-
+        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;
       utterances.postMessage(message, origin);
     });
-
-  });
+  })();
 </script>

_includes/embed/bilibili.html

@@ -0,0 +1,10 @@
+<iframe
+  class="embed-video bilibili"
+  loading="lazy"
+  src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
+  scrolling="no"
+  border="0"
+  frameborder="no"
+  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/youtube.html

@@ -1,6 +1,9 @@
-<iframe class="embed-video youtube lazyload"
+<iframe
+  class="embed-video youtube"
+  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

@@ -8,9 +8,15 @@
   "
 >
   <p>
-    {{ '©' }}
+    {{- '©' }}
     <time>{{ 'now' | date: '%Y' }}</time>
-    <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+
+    {% if site.social.links %}
+      <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+    {% else %}
+      <em class="fst-normal">{{ site.social.name }}</em>.
+    {% endif %}
+
     {% if site.data.locales[include.lang].copyright.brief %}
       <span
         data-bs-toggle="tooltip"

_includes/goatcounter.html

@@ -0,0 +1,8 @@
+<!-- GoatCounter -->
+
+<script
+  data-goatcounter="https://{{ site.goatcounter.id }}.goatcounter.com/count"
+  async
+  src="https://gc.zgo.at/count.js"
+></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,29 +9,43 @@
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
   >
 
-  {% 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 img-url.html src=src img_path=page.img_path 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 img-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 property="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 }}
@@ -69,7 +81,7 @@
   {% endif %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
 
   <!-- Font Awesome -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
@@ -80,6 +92,10 @@
     <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 }}">

_includes/img-url.html

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

_includes/js-selector.html

@@ -11,8 +11,10 @@
 
 <!-- layout specified -->
 
+{% 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 -->
@@ -65,7 +67,7 @@
     {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
+{% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
 <script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
@@ -83,24 +85,29 @@
         displayMath: [
           ['$$', '$$'],
           ['\\[', '\\]']
-        ]
+        ],
+        /* equation numbering */
+        tags: 'ams'
       }
     };
   </script>
-  <script src="{{ site.data.origin[type].polyfill.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 %}
 
 {% 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 %}
+
+  <!-- GoatCounter -->
+  {% if site.goatcounter.id != empty and site.goatcounter.id %}
+    {% include goatcounter.html %}
+  {% endif %}
 {% endif %}

_includes/post-sharing.html

@@ -1,23 +1,38 @@
 <!-- Post sharing snippet -->
 
 <div class="share-wrapper d-flex align-items-center">
-  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
+  <span class="share-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 %}
@@ -31,7 +46,7 @@
       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 class="fa-fw fas fa-link pe-none"></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 img-url.html src=_src img_path=page.img_path %}
+    {%- 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

@@ -78,9 +78,9 @@
         <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 %}
+              {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
-              <div class="text-muted small">
+              <div class="text-muted">
                 <p>
                   {% include no-linenos.html content=post.content %}
                   {{ content | markdownify | strip_html | truncate: 200 | escape }}

_includes/sidebar.html

@@ -3,18 +3,12 @@
 <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 img-url.html src=site.avatar %}
+        {%- endcapture -%}
+        <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+      {%- endif -%}
     </a>
 
     <h1 class="site-title">
@@ -59,48 +53,46 @@
       {% endif %}
     {% endunless %}
 
-    <address class="d-flex mb-0">
-      {% for entry in site.data.contact %}
-        {% case entry.type %}
-          {% when 'github', 'twitter' %}
-            {%- capture url -%}
+    {% for entry in site.data.contact %}
+      {% case entry.type %}
+        {% when 'github', 'twitter' %}
+          {%- capture url -%}
             https://{{ entry.type }}.com/{{ site[entry.type].username }}
           {%- endcapture -%}
-          {% when 'email' %}
-            {% assign email = site.social.email | split: '@' %}
-            {%- capture url -%}
+        {% when 'email' %}
+          {% assign email = site.social.email | split: '@' %}
+          {%- capture url -%}
             javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
           {%- endcapture -%}
-          {% when 'rss' %}
-            {% assign url = '/feed.xml' | relative_url %}
-          {% else %}
-            {% assign url = entry.url %}
-        {% endcase %}
+        {% when 'rss' %}
+          {% assign url = '/feed.xml' | relative_url %}
+        {% else %}
+          {% assign url = entry.url %}
+      {% endcase %}
 
-        {% if url %}
-          <a
-            href="{{ url }}"
-            aria-label="{{ entry.type }}"
-            {% assign link_types = '' %}
+      {% if url %}
+        <a
+          href="{{ url }}"
+          aria-label="{{ entry.type }}"
+          {% assign link_types = '' %}
 
-            {% unless entry.noblank %}
-              target="_blank"
-              {% assign link_types = 'noopener noreferrer' %}
-            {% endunless %}
+          {% unless entry.noblank %}
+            target="_blank"
+            {% assign link_types = 'noopener noreferrer' %}
+          {% endunless %}
 
-            {% if entry.type == 'mastodon' %}
-              {% assign link_types = link_types | append: ' me' | strip %}
-            {% endif %}
+          {% if entry.type == 'mastodon' %}
+            {% assign link_types = link_types | append: ' me' | strip %}
+          {% endif %}
 
-            {% unless link_types == empty %}
-              rel="{{ link_types }}"
-            {% endunless %}
-          >
-            <i class="{{ entry.icon }}"></i>
-          </a>
-        {% endif %}
-      {% endfor %}
-    </address>
+          {% unless link_types == empty %}
+            rel="{{ link_types }}"
+          {% endunless %}
+        >
+          <i class="{{ entry.icon }}"></i>
+        </a>
+      {% endif %}
+    {% endfor %}
   </div>
   <!-- .sidebar-bottom -->
 </aside>

_includes/toc.html

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

_includes/topbar.html

@@ -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,8 +30,8 @@
 
           {% 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 %}

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

_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();
 initSidebar();
 initTopbar();
 initLocaleDatetime();
-imgLazy();
+loadImg();

_javascript/modules/components/clipboard.js

@@ -126,6 +126,5 @@ export function initClipboard() {
   btnCopyLink.on('mouseleave', function (e) {
     const target = $(e.target);
     target.tooltip('hide');
-    console.log('mouse leave...');
   });
 }

_javascript/modules/components/img-lazyload.js

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

_javascript/modules/components/img-loading.js

@@ -0,0 +1,61 @@
+/**
+ * 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).parent().removeClass(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 $img = $(this);
+  const src = $img.attr(ATTR_DATA_SRC);
+
+  $img.attr('src', encodeURI(src));
+  $img.removeAttr(ATTR_DATA_SRC);
+}
+
+export function loadImg() {
+  const $images = $('article img');
+
+  if ($images.length) {
+    $images.on('load', handleImage);
+  }
+
+  // Images loaded from the browser cache do not trigger the 'load' event
+  $('article img[loading="lazy"]').each(function () {
+    if (this.complete) {
+      removeCover.call(this, 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 = $(`article img[${ATTR_DATA_LQIP}="true"]`);
+
+  if ($lqips.length) {
+    $lqips.each(switchLQIP);
+  }
+}

_javascript/modules/components/toc.js

@@ -1,5 +1,5 @@
 export function toc() {
-  if (document.querySelector('main h2')) {
+  if (document.querySelector('main h2, main h3')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
       tocSelector: '#toc',

_javascript/modules/plugins.js

@@ -1,6 +1,6 @@
 export { categoryCollapse } from './components/category-collapse';
 export { initClipboard } from './components/clipboard';
-export { imgLazy } from './components/img-lazyload';
+export { loadImg } from './components/img-loading';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
 export { toc } from './components/toc';

_javascript/page.js

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

_javascript/post.js

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

_layouts/default.html

@@ -1,6 +1,5 @@
 ---
 layout: compress
-# Default layout
 ---
 
 <!doctype html>
@@ -9,14 +8,8 @@ layout: compress
 
 {% include lang.html %}
 
-{% capture prefer_mode %}
-  {% if site.theme_mode %}
-    data-mode="{{ site.theme_mode }}"
-  {% endif %}
-{% endcapture %}
-
-{% if layout.tail_includes %}
-  {% assign has_tail = true %}
+{% if site.theme_mode %}
+  {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
 {% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
@@ -27,19 +20,20 @@ layout: compress
     {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div class="container px-xxl-5">
+      <div class="container d-flex flex-column px-xxl-5">
         {% include topbar.html lang=lang %}
 
-        <div class="row">
-          <main
-            aria-label="Main Content"
-            class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
-          >
-            {{ content }}
+        <div class="row flex-grow-1">
+          <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% if layout.refactor or layout.layout == 'default' %}
+              {% include refactor-content.html content=content lang=lang %}
+            {% else %}
+              {{ content }}
+            {% endif %}
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}
@@ -55,12 +49,10 @@ layout: compress
         <div class="row">
           <!-- tail -->
           <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
-            {% if has_tail %}
-              {% for _include in layout.tail_includes %}
-                {% assign _include_path = _include | append: '.html' %}
-                {% include {{ _include_path }} lang=lang %}
-              {% endfor %}
-            {% endif %}
+            {% for _include in layout.tail_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
 
             {% include_cached footer.html lang=lang %}
           </div>

_layouts/home.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+refactor: true
 ---
 
 {% include lang.html %}
@@ -39,15 +40,13 @@ layout: default
   {% endfor %}
 {% endif %}
 
-{% capture content %}
+<div id="post-list" class="flex-grow-1 px-xl-1">
   {% for post in posts %}
-    <article class="card-wrapper">
-      <a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
-        {% if post.image %}
-          {% if post.image.lqip %}
-            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
-          {% endif %}
+    <article class="card-wrapper card">
+      <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
+        {% assign card_body_col = '12' %}
 
+        {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
             {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
@@ -55,54 +54,62 @@ layout: default
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
 
-          <img src="{{ src }}" w="17" h="10" alt="{{ alt }}" {{ lqip }}>
+          {% assign lqip = null %}
+
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
+
+          <div class="col-md-5">
+            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
+          </div>
+
+          {% assign card_body_col = '7' %}
         {% endif %}
 
-        <div class="card-body d-flex flex-column">
-          <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
+        <div class="col-md-{{ card_body_col }}">
+          <div class="card-body d-flex flex-column">
+            <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
-          <div class="card-text content mt-0 mb-2">
-            <p>
-              {% include no-linenos.html content=post.content %}
-              {{ content | markdownify | strip_html | truncate: 200 | escape }}
-            </p>
-          </div>
-
-          <div class="post-meta flex-grow-1 d-flex align-items-end">
-            <div class="me-auto">
-              <!-- posted date -->
-              <i class="far fa-calendar fa-fw me-1"></i>
-              {% include datetime.html date=post.date lang=lang %}
-
-              <!-- categories -->
-              {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw me-1"></i>
-                <span class="categories">
-                  {% for category in post.categories %}
-                    {{ category }}
-                    {%- unless forloop.last -%},{%- endunless -%}
-                  {% endfor %}
-                </span>
-              {% endif %}
+            <div class="card-text content mt-0 mb-3">
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
+              </p>
             </div>
 
-            {% if post.pin %}
-              <div class="pin ms-1">
-                <i class="fas fa-thumbtack fa-fw"></i>
-                <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+            <div class="post-meta flex-grow-1 d-flex align-items-end">
+              <div class="me-auto">
+                <!-- posted date -->
+                <i class="far fa-calendar fa-fw me-1"></i>
+                {% include datetime.html date=post.date lang=lang %}
+
+                <!-- categories -->
+                {% if post.categories.size > 0 %}
+                  <i class="far fa-folder-open fa-fw me-1"></i>
+                  <span class="categories">
+                    {% for category in post.categories %}
+                      {{ category }}
+                      {%- unless forloop.last -%},{%- endunless -%}
+                    {% endfor %}
+                  </span>
+                {% endif %}
               </div>
-            {% endif %}
+
+              {% if post.pin %}
+                <div class="pin ms-1">
+                  <i class="fas fa-thumbtack fa-fw"></i>
+                  <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+                </div>
+              {% endif %}
+            </div>
+            <!-- .post-meta -->
           </div>
-          <!-- .post-meta -->
+          <!-- .card-body -->
         </div>
-        <!-- .card-body -->
       </a>
     </article>
   {% endfor %}
-{% endcapture %}
-
-<div id="post-list" class="flex-grow-1 pe-xl-2">
-  {% include refactor-content.html content=content lang=lang %}
 </div>
 <!-- #post-list -->
 

_layouts/page.html

@@ -2,13 +2,7 @@
 layout: default
 ---
 
-{% capture _content %}
-  {% if layout.refactor or page.layout == 'page' %}
-    {% include refactor-content.html content=content lang=lang %}
-  {% else %}
-    {{ content }}
-  {% endif %}
-{% endcapture %}
+{% include lang.html %}
 
 <article class="px-1">
   {% if page.layout == 'page' or page.collection == 'tabs' %}
@@ -18,9 +12,9 @@ layout: default
       {{ title }}
     </h1>
     <div class="content">
-      {{ _content }}
+      {{ content }}
     </div>
   {% else %}
-    {{ _content }}
+    {{ content }}
   {% endif %}
 </article>

_layouts/post.html

@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: default
 refactor: true
 panel_includes:
   - toc
@@ -11,125 +11,129 @@ tail_includes:
 
 {% include lang.html %}
 
-<header>
-  <h1 data-toc-skip>{{ page.title }}</h1>
+<article class="px-1">
+  <header>
+    <h1 data-toc-skip>{{ page.title }}</h1>
 
-  <div class="post-meta text-muted">
-    <!-- published date -->
-    <span>
-      {{ site.data.locales[lang].post.posted }}
-      {% include datetime.html date=page.date tooltip=true lang=lang %}
-    </span>
-
-    <!-- lastmod date -->
-    {% if page.last_modified_at and page.last_modified_at != page.date %}
+    <div class="post-meta text-muted">
+      <!-- published date -->
       <span>
-        {{ site.data.locales[lang].post.updated }}
-        {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+        {{ site.data.locales[lang].post.posted }}
+        {% include datetime.html date=page.date tooltip=true lang=lang %}
       </span>
-    {% endif %}
 
-    {% if page.image %}
-      {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-      {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-      {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
-
-      {% capture lqip %}
-      {% if page.image.lqip %}
-        lqip="{{ page.image.lqip }}"
+      <!-- lastmod date -->
+      {% if page.last_modified_at and page.last_modified_at != page.date %}
+        <span>
+          {{ site.data.locales[lang].post.updated }}
+          {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+        </span>
       {% endif %}
-    {% endcapture %}
 
-      <div class="mt-3 mb-3">
-        <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
-        {%- if page.image.alt -%}
-          <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-        {%- endif -%}
+      {% if page.image %}
+        {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+        {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+        {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
+
+        {% if page.image.lqip %}
+          {%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
+        {% endif %}
+
+        <div class="mt-3 mb-3">
+          <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
+          {%- if page.image.alt -%}
+            <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
+          {%- endif -%}
+        </div>
+      {% endif %}
+
+      <div class="d-flex justify-content-between">
+        <!-- author(s) -->
+        <span>
+          {% if page.author %}
+            {% assign authors = page.author %}
+          {% elsif page.authors %}
+            {% assign authors = page.authors %}
+          {% endif %}
+
+          {{ site.data.locales[lang].post.written_by }}
+
+          <em>
+            {% if authors %}
+              {% for author in authors %}
+                {% if site.data.authors[author].url -%}
+                  <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+                {%- else -%}
+                  {{ site.data.authors[author].name }}
+                {%- endif %}
+                {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
+              {% endfor %}
+            {% else %}
+              <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
+            {% endif %}
+          </em>
+        </span>
+
+        <!-- read time -->
+        {% include read-time.html content=content prompt=true lang=lang %}
+      </div>
+      <!-- .d-flex -->
+    </div>
+    <!-- .post-meta -->
+  </header>
+
+  <div class="content">
+    {{ content }}
+  </div>
+
+  <div class="post-tail-wrapper text-muted">
+    <!-- categories -->
+    {% if page.categories.size > 0 %}
+      <div class="post-meta mb-3">
+        <i class="far fa-folder-open fa-fw me-1"></i>
+        {% for category in page.categories %}
+          <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
+          {%- unless forloop.last -%},{%- endunless -%}
+        {% endfor %}
       </div>
     {% endif %}
 
-    <div class="d-flex justify-content-between">
-      <!-- author(s) -->
-      <span>
-        {% if page.author %}
-          {% assign authors = page.author %}
-        {% elsif page.authors %}
-          {% assign authors = page.authors %}
-        {% endif %}
+    <!-- tags -->
+    {% if page.tags.size > 0 %}
+      <div class="post-tags">
+        <i class="fa fa-tags fa-fw me-1"></i>
+        {% for tag in page.tags %}
+          <a
+            href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
+            class="post-tag no-text-decoration"
+          >
+            {{- tag -}}
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
 
-        {{ site.data.locales[lang].post.written_by }}
-
-        <em>
-          {% if authors %}
-            {% for author in authors %}
-              <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
-              {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
-            {% endfor %}
-          {% else %}
-            <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
-          {% endif %}
-        </em>
-      </span>
-
-      <!-- read time -->
-      {% include read-time.html content=content prompt=true lang=lang %}
-    </div>
-    <!-- .d-flex -->
-  </div>
-  <!-- .post-meta -->
-</header>
-
-<div class="content">
-  {{ content }}
-</div>
-
-<div class="post-tail-wrapper text-muted">
-  <!-- categories -->
-  {% if page.categories.size > 0 %}
-    <div class="post-meta mb-3">
-      <i class="far fa-folder-open fa-fw me-1"></i>
-      {% for category in page.categories %}
-        <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
-        {%- unless forloop.last -%},{%- endunless -%}
-      {% endfor %}
-    </div>
-  {% endif %}
-
-  <!-- tags -->
-  {% if page.tags.size > 0 %}
-    <div class="post-tags">
-      <i class="fa fa-tags fa-fw me-1"></i>
-      {% for tag in page.tags %}
-        <a
-          href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
-          class="post-tag no-text-decoration"
-        >
-          {{- tag -}}
-        </a>
-      {% endfor %}
-    </div>
-  {% endif %}
-
-  <div
-    class="
-      post-tail-bottom
-      d-flex justify-content-between align-items-center mt-5 pb-2
-    "
-  >
-    <div class="license-wrapper">
-      {% if site.data.locales[lang].copyright.license.template %}
-        {% capture _replacement %}
+    <div
+      class="
+        post-tail-bottom
+        d-flex justify-content-between align-items-center mt-5 pb-2
+      "
+    >
+      <div class="license-wrapper">
+        {% if site.data.locales[lang].copyright.license.template %}
+          {% capture _replacement %}
         <a href="{{ site.data.locales[lang].copyright.license.link }}">
           {{ site.data.locales[lang].copyright.license.name }}
         </a>
         {% endcapture %}
 
-        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
-      {% endif %}
-    </div>
+          {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+        {% endif %}
+      </div>
 
-    {% include post-sharing.html lang=lang %}
+      {% include post-sharing.html lang=lang %}
+    </div>
+    <!-- .post-tail-bottom -->
   </div>
-  <!-- .post-tail-bottom -->
-</div>
-<!-- div.post-tail-wrapper -->
+  <!-- div.post-tail-wrapper -->
+</article>

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

@@ -17,13 +17,17 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 ## Headings
 
-<h1 class="mt-5">H1 - heading</h1>
+# H1 - heading
+{: .mt-4 .mb-0 }
 
-<h2 data-toc-skip>H2 - heading</h2>
+## H2 - heading
+{: data-toc-skip='' .mt-4 .mb-0 }
 
-<h3 data-toc-skip>H3 - heading</h3>
+### H3 - heading
+{: data-toc-skip='' .mt-4 .mb-0 }
 
-<h4 data-toc-skip>H4 - heading</h4>
+#### H4 - heading
+{: data-toc-skip='' .mt-4 }
 
 ## Paragraph
 
@@ -130,7 +134,14 @@ fi;
 
 The mathematics powered by [**MathJax**](https://www.mathjax.org/):
 
-$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+$$
+\begin{equation}
+  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
+  \label{eq:series}
+\end{equation}
+$$
+
+We can reference the equation as \eqref{eq:series}.
 
 When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
 

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

@@ -69,7 +69,6 @@ authors: [<author1_id>, <author2_id>]   # for multiple entries
 ---
 ```
 
-
 Having said that, the key `author` can also identify multiple entries.
 
 > The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
@@ -107,9 +106,46 @@ math: true
 ---
 ```
 
+After enabling the mathematical feature, you can add math equations with the following syntax:
+
+- **Block math** should be added with `$$ math $$` with **mandatory** blank lines before and after `$$`
+  - **Inserting equation numbering** should be added with `$$\begin{equation} math \end{equation}$$`
+  - **Referencing equation numbering** should be done with `\label{eq:label_name}` in the equation block and `\eqref{eq:label_name}` inline with text (see example below)
+- **Inline math** (in lines) should be added with `$$ math $$` without any blank line before or after `$$`
+- **Inline math** (in lists) should be added with `\$$ math $$`
+
+```markdown
+<!-- Block math, keep all blank lines -->
+
+$$
+LaTeX_math_expression
+$$
+
+<!-- Equation numbering, keep all blank lines  -->
+
+$$
+\begin{equation}
+  LaTeX_math_expression
+  \label{eq:label_name}
+\end{equation}
+$$
+
+Can be referenced as \eqref{eq:label_name}.
+
+<!-- Inline math in lines, NO blank lines -->
+
+"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."
+
+<!-- Inline math in lists, escape the first `$` -->
+
+1. \$$ LaTeX_math_expression $$
+2. \$$ LaTeX_math_expression $$
+3. \$$ LaTeX_math_expression $$
+```
+
 ## Mermaid
 
-[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagram generation tool. To enable it on your post, add the following to the YAML block:
 
 ```yaml
 ---
@@ -123,7 +159,7 @@ Then you can use it like other markdown languages: surround the graph code with
 
 ### Caption
 
-Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
+Add italics to the next line of an image, then it will become the caption and appear at the bottom of the image:
 
 ```markdown
 ![img-description](/path/to/image)
@@ -219,7 +255,7 @@ For instance, when using images:
 The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
 
 ```html
-<img src="https://cdn.com/path/to/flower.png" alt="The flower">
+<img src="https://cdn.com/path/to/flower.png" alt="The flower" />
 ```
 {: .nolineno }
 
@@ -243,7 +279,7 @@ And then, the image source of Markdown can write the file name directly:
 The output will be:
 
 ```html
-<img src="/img/path/flower.png" alt="The flower">
+<img src="/img/path/flower.png" alt="The flower" />
 ```
 {: .nolineno }
 
@@ -261,7 +297,7 @@ image:
 ---
 ```
 
-Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.
+Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
 
 For simple use, you can also just use `image` to define the path.
 
@@ -396,16 +432,16 @@ You can embed a video with the following syntax:
 ```liquid
 {% include embed/{Platform}.html id='{ID}' %}
 ```
+
 Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
 
 The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
 
-| Video URL                                                                                          | Platform  | ID            |
-|----------------------------------------------------------------------------------------------------|-----------|:--------------|
-| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
-| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`  | `1634779211`  |
-
-
+| Video URL                                                                                          | Platform   | ID             |
+| -------------------------------------------------------------------------------------------------- | ---------- | :------------- |
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube`  | `H-B46URT4mg`  |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`   | `1634779211`   |
+| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
 
 ## Learn More
 

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

@@ -70,9 +70,9 @@ Social contact options are displayed at the bottom of the sidebar. You can turn
 
 ### Customizing Stylesheet
 
-If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
+If you need to customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of it.
 
-Starting with version `4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main sass file `_sass/jekyll-theme-chirpy.scss`{: .filepath} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.
+Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main sass file `_sass/main.scss`{: .filepath} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.
 
 ### Customing Static Assets
 
@@ -88,15 +88,6 @@ You may want to preview the site contents before publishing, so just run it by:
 $ bundle exec jekyll s
 ```
 
-Or run the site on Docker with the following command:
-
-```console
-$ docker run -it --rm \
-    --volume="$PWD:/srv/jekyll" \
-    -p 4000:4000 jekyll/jekyll \
-    jekyll serve
-```
-
 After a few seconds, the local service will be published at _<http://127.0.0.1:4000>_.
 
 ## Deployment
@@ -110,7 +101,7 @@ Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
 There are a few things to get ready for.
 
 - If you're on the GitHub Free plan, keep your site repository public.
-- If you have committed `Gemfile.lock`{: .filepath} to the repository, and your local machine is not running Linux, go the the root of your site and update the platform list of the lock-file:
+- If you have committed `Gemfile.lock`{: .filepath} to the repository, and your local machine is not running Linux, go to the root of your site and update the platform list of the lock-file:
 
   ```console
   $ bundle lock --add-platform x86_64-linux
@@ -136,16 +127,6 @@ Go to the root of the source project, and build your site as follows:
 $ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-Or build the site on Docker:
-
-```console
-$ docker run -it --rm \
-    --env JEKYLL_ENV=production \
-    --volume="$PWD:/srv/jekyll" \
-    jekyll/jekyll \
-    jekyll build
-```
-
 Unless you specified the output path, the generated site files will be placed in folder `_site`{: .filepath} of the project's root directory. Now you should upload those files to the target server.
 
 [nodejs]: https://nodejs.org/

_sass/addon/commons.scss

@@ -1,6 +1,4 @@
-/*
-  The common styles
-*/
+/* The common styles */
 
 html {
   @media (prefers-color-scheme: light) {
@@ -73,52 +71,11 @@ img {
   height: auto;
   transition: all 0.35s ease-in-out;
 
-  &[data-src] {
-    &[data-lqip='true'] {
-      &.lazyload,
-      &.lazyloading {
-        -webkit-filter: blur(20px);
-        filter: blur(20px);
-      }
-    }
+  .blur & {
+    $blur: 20px;
 
-    &:not([data-lqip='true']) {
-      &.lazyload,
-      &.lazyloading {
-        background: var(--img-bg);
-      }
-
-      &.lazyloaded {
-        -webkit-animation: fade-in 0.35s ease-in;
-        animation: fade-in 0.35s ease-in;
-      }
-    }
-
-    &.shadow {
-      -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-      box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
-    }
-
-    @extend %img-caption;
-  }
-
-  @-webkit-keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+    -webkit-filter: blur($blur);
+    filter: blur($blur);
   }
 }
 
@@ -127,6 +84,10 @@ blockquote {
   padding-left: 1rem;
   color: var(--blockquote-text-color);
 
+  > p:last-child {
+    margin-bottom: 0;
+  }
+
   &[class^='prompt-'] {
     border-left: 0;
     position: relative;
@@ -144,10 +105,6 @@ blockquote {
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
     }
-
-    > p:last-child {
-      margin-bottom: 0;
-    }
   }
 
   @include prompt('tip', '\f0eb', 'regular');
@@ -173,12 +130,11 @@ kbd {
 }
 
 footer {
-  font-size: 0.8rem;
   background-color: var(--main-bg);
   height: $footer-height;
   border-top: 1px solid var(--main-border-color);
 
-  @extend %text-color;
+  @extend %text-xs;
 
   a {
     @extend %text-highlight;
@@ -188,8 +144,11 @@ footer {
     }
   }
 
+  em {
+    @extend %text-highlight;
+  }
+
   p {
-    line-height: 1.75;
     text-align: center;
     margin-bottom: 0;
   }
@@ -273,6 +232,8 @@ i {
       margin-bottom: 0.3rem;
     }
 
+    @extend %sup-fn-target;
+
     > p {
       margin-left: 0.25em;
       margin-top: 0;
@@ -287,10 +248,13 @@ i {
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    transition: background-color 1.5s ease-in-out;
   }
 }
 
+sup {
+  @extend %sup-fn-target;
+}
+
 .reversefootnote {
   @at-root a#{&} {
     font-size: 0.6rem;
@@ -344,6 +308,31 @@ i {
 
 /* --- post --- */
 
+.preview-img {
+  aspect-ratio: 40 / 21;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  @extend %rounded;
+
+  &:not(.no-bg) {
+    background: var(--img-bg);
+  }
+
+  img {
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %rounded;
+
+    @at-root #post-list & {
+      width: 100%;
+    }
+  }
+}
+
 .post-preview {
   @extend %rounded;
 
@@ -372,7 +361,6 @@ i {
 
 main {
   line-height: 1.75;
-  min-height: calc(100vh - $topbar-height - $footer-height);
 
   h1 {
     margin-top: 2rem;
@@ -380,7 +368,6 @@ main {
   }
 
   p {
-    > img[data-src],
     > a.popup {
       &:not(.normal):not(.left):not(.right) {
         @include align-center;
@@ -398,7 +385,7 @@ main {
 }
 
 .post-meta {
-  font-size: 0.85rem;
+  @extend %text-sm;
 
   a {
     &:not([class]):hover {
@@ -534,14 +521,15 @@ main {
     background: var(--shimmer-bg);
     height: 100%;
     width: 100%;
-    -webkit-animation: shimmer 1s infinite;
-    animation: shimmer 1s infinite;
+    -webkit-animation: shimmer 1.3s infinite;
+    animation: shimmer 1.3s infinite;
   }
 
   @-webkit-keyframes shimmer {
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -551,6 +539,7 @@ main {
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -564,7 +553,8 @@ main {
 
   @extend %rounded;
 
-  &.youtube {
+  &.youtube,
+  &.bilibili {
     aspect-ratio: 16 / 9;
   }
 
@@ -653,12 +643,12 @@ main {
 
 .left {
   float: left;
-  margin: 0.75rem 1rem 1rem 0 !important;
+  margin: 0.75rem 1rem 1rem 0;
 }
 
 .right {
   float: right;
-  margin: 0.75rem 0 1rem 1rem !important;
+  margin: 0.75rem 0 1rem 1rem;
 }
 
 /* --- Overriding --- */
@@ -689,7 +679,6 @@ mjx-container {
 /* --- sidebar layout --- */
 
 $sidebar-display: 'sidebar-display';
-$btn-gap: 0.8rem; // for the bottom icons
 $btn-border-width: 3px;
 $btn-mb: 0.5rem;
 
@@ -830,13 +819,15 @@ $btn-mb: 0.5rem;
   }
 
   .sidebar-bottom {
-    @include pl-pr(2rem);
-
+    padding-left: 2rem;
+    padding-right: 1rem;
     margin-bottom: 1.5rem;
 
+    $btn-size: 1.75rem;
+
     %button {
-      width: 1.75rem;
-      height: 1.75rem;
+      width: $btn-size;
+      height: $btn-size;
       margin-bottom: $btn-mb; // multi line gap
       border-radius: 50%;
       color: var(--sidebar-btn-color);
@@ -858,12 +849,12 @@ $btn-mb: 0.5rem;
       @extend %clickable-transition;
 
       &:not(:last-child) {
-        margin-right: $btn-gap;
+        margin-right: $sb-btn-gap;
       }
     }
 
     i {
-      line-height: 1.75rem;
+      line-height: $btn-size;
     }
 
     .mode-toggle {
@@ -877,7 +868,7 @@ $btn-mb: 0.5rem;
 
     .icon-border {
       @extend %no-cursor;
-      @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
+      @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
 
       background-color: var(--sidebar-btn-color);
       content: '';
@@ -1121,12 +1112,16 @@ search {
   }
 }
 
-/* --- main wrapper --- */
+/* --- basic wrappers --- */
 
 #main-wrapper {
   position: relative;
 
   @include pl-pr(0);
+
+  > .container {
+    min-height: 100vh;
+  }
 }
 
 #topbar-wrapper.row,
@@ -1135,6 +1130,12 @@ search {
   @include ml-mr(0);
 }
 
+#tail-wrapper {
+  > :not(script) {
+    margin-top: 3rem;
+  }
+}
+
 /* --- button back-to-top --- */
 
 #back-to-top {
@@ -1270,10 +1271,6 @@ search {
     }
   }
 
-  main {
-    min-height: calc(100vh - $topbar-height - $footer-height-large);
-  }
-
   footer {
     @include slide;
 
@@ -1287,7 +1284,7 @@ search {
     }
 
     #main-wrapper {
-      transform: translateX(#{$sidebar-width});
+      transform: translateX($sidebar-width);
     }
 
     #back-to-top {
@@ -1298,8 +1295,8 @@ search {
   #sidebar {
     @include slide;
 
-    transform: translateX(-#{$sidebar-width}); /* hide */
-    -webkit-transform: translateX(-#{$sidebar-width});
+    transform: translateX(-$sidebar-width); /* hide */
+    -webkit-transform: translateX(-$sidebar-width);
   }
 
   #main-wrapper {
@@ -1474,7 +1471,7 @@ search {
 
 @media all and (min-width: 1400px) {
   #back-to-top {
-    right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
+    right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
   }
 }
 
@@ -1491,7 +1488,7 @@ search {
 
   search {
     margin-right: calc(
-      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
+      $main-content-max-width / 4 - $search-max-width - 0.75rem
     );
   }
 
@@ -1508,15 +1505,13 @@ search {
 
   #back-to-top {
     right: calc(
-      (100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem
+      (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
     );
   }
 
   #sidebar {
     width: $sidebar-width-large;
 
-    $icon-gap: 1rem; // for the bottom icons
-
     .profile-wrapper {
       margin-top: 3.5rem;
       margin-bottom: 2.5rem;
@@ -1534,11 +1529,11 @@ search {
       margin-bottom: 1.75rem;
 
       a:not(:last-child) {
-        margin-right: $icon-gap;
+        margin-right: $sb-btn-gap-lg;
       }
 
       .icon-border {
-        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
+        @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
       }
     }
   }

_sass/addon/module.scss

@@ -123,10 +123,28 @@
 }
 
 %text-highlight {
-  color: inherit;
+  color: var(--text-muted-hightlight-color);
   font-weight: 600;
 }
 
+%text-sm {
+  font-size: 0.85rem;
+}
+
+%text-xs {
+  font-size: 0.8rem;
+}
+
+%sup-fn-target {
+  &:target {
+    background-color: var(--footnote-target-bg);
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    transition: background-color 1.75s ease-in-out;
+  }
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {

_sass/addon/syntax.scss

@@ -186,7 +186,7 @@ div {
   align-items: center;
   height: $code-header-height;
   margin-left: 0.75rem;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 
   /* the label block */
   span {
@@ -267,7 +267,7 @@ div {
     .code-header {
       @include ml-mr(0);
 
-      $dot-margin: calc($code-header-height / 2);
+      $dot-margin: 1rem;
 
       &::before {
         content: '';

_sass/addon/variables.scss

@@ -6,6 +6,8 @@
 
 $sidebar-width: 260px !default; /* the basic width */
 $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
+$sb-btn-gap: 0.8rem !default;
+$sb-btn-gap-lg: 1rem !default;
 
 /* other framework sizes */
 
@@ -14,8 +16,7 @@ $search-max-width: 200px !default;
 $footer-height: 5rem !default;
 $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
-$bottom-min-height: 35rem !default;
-$base-radius: 0.5rem !default;
+$base-radius: 0.625rem !default;
 $back2top-size: 2.75rem !default;
 
 /* syntax highlight */

_sass/colors/syntax-dark.scss

@@ -24,18 +24,22 @@
   .highlight table td {
     padding: 5px;
   }
+
   .highlight table pre {
     margin: 0;
   }
+
   .highlight,
   .highlight .w {
     color: #d0d0d0;
     background-color: #151515;
   }
+
   .highlight .err {
     color: #151515;
     background-color: #ac4142;
   }
+
   .highlight .c,
   .highlight .ch,
   .highlight .cd,
@@ -45,32 +49,40 @@
   .highlight .cs {
     color: #848484;
   }
+
   .highlight .cp {
     color: #f4bf75;
   }
+
   .highlight .nt {
     color: #f4bf75;
   }
+
   .highlight .o,
   .highlight .ow {
     color: #d0d0d0;
   }
+
   .highlight .p,
   .highlight .pi {
     color: #d0d0d0;
   }
+
   .highlight .gi {
     color: #90a959;
   }
+
   .highlight .gd {
     color: #f08a8b;
     background-color: #320000;
   }
+
   .highlight .gh {
     color: #6a9fb5;
     background-color: #151515;
     font-weight: bold;
   }
+
   .highlight .k,
   .highlight .kn,
   .highlight .kp,
@@ -78,15 +90,19 @@
   .highlight .kv {
     color: #aa759f;
   }
+
   .highlight .kc {
     color: #d28445;
   }
+
   .highlight .kt {
     color: #d28445;
   }
+
   .highlight .kd {
     color: #d28445;
   }
+
   .highlight .s,
   .highlight .sb,
   .highlight .sc,
@@ -98,30 +114,39 @@
   .highlight .s1 {
     color: #90a959;
   }
+
   .highlight .sa {
     color: #aa759f;
   }
+
   .highlight .sr {
     color: #75b5aa;
   }
+
   .highlight .si {
     color: #b76d45;
   }
+
   .highlight .se {
     color: #b76d45;
   }
+
   .highlight .nn {
     color: #f4bf75;
   }
+
   .highlight .nc {
     color: #f4bf75;
   }
+
   .highlight .no {
     color: #f4bf75;
   }
+
   .highlight .na {
     color: #6a9fb5;
   }
+
   .highlight .m,
   .highlight .mb,
   .highlight .mf,
@@ -132,6 +157,7 @@
   .highlight .mx {
     color: #90a959;
   }
+
   .highlight .ss {
     color: #90a959;
   }

_sass/colors/syntax-light.scss

@@ -24,14 +24,17 @@
   .highlight table td {
     padding: 5px;
   }
+
   .highlight table pre {
     margin: 0;
   }
+
   .highlight,
   .highlight .w {
     color: #24292f;
     background-color: #f6f8fa;
   }
+
   .highlight .k,
   .highlight .kd,
   .highlight .kn,
@@ -41,41 +44,53 @@
   .highlight .kv {
     color: #cf222e;
   }
+
   .highlight .gr {
     color: #f6f8fa;
   }
+
   .highlight .gd {
     color: #82071e;
     background-color: #ffebe9;
   }
+
   .highlight .nb {
     color: #953800;
   }
+
   .highlight .nc {
     color: #953800;
   }
+
   .highlight .no {
     color: #953800;
   }
+
   .highlight .nn {
     color: #953800;
   }
+
   .highlight .sr {
     color: #116329;
   }
+
   .highlight .na {
     color: #116329;
   }
+
   .highlight .nt {
     color: #116329;
   }
+
   .highlight .gi {
     color: #116329;
     background-color: #dafbe1;
   }
+
   .highlight .kc {
     color: #0550ae;
   }
+
   .highlight .l,
   .highlight .ld,
   .highlight .m,
@@ -88,21 +103,27 @@
   .highlight .mx {
     color: #0550ae;
   }
+
   .highlight .sb {
     color: #0550ae;
   }
+
   .highlight .bp {
     color: #0550ae;
   }
+
   .highlight .ne {
     color: #0550ae;
   }
+
   .highlight .nl {
     color: #0550ae;
   }
+
   .highlight .py {
     color: #0550ae;
   }
+
   .highlight .nv,
   .highlight .vc,
   .highlight .vg,
@@ -110,18 +131,22 @@
   .highlight .vm {
     color: #0550ae;
   }
+
   .highlight .o,
   .highlight .ow {
     color: #0550ae;
   }
+
   .highlight .gh {
     color: #0550ae;
     font-weight: bold;
   }
+
   .highlight .gu {
     color: #0550ae;
     font-weight: bold;
   }
+
   .highlight .s,
   .highlight .sa,
   .highlight .sc,
@@ -135,17 +160,21 @@
   .highlight .ss {
     color: #0a3069;
   }
+
   .highlight .nd {
     color: #8250df;
   }
+
   .highlight .nf,
   .highlight .fm {
     color: #8250df;
   }
+
   .highlight .err {
     color: #f6f8fa;
     background-color: #82071e;
   }
+
   .highlight .c,
   .highlight .ch,
   .highlight .cd,
@@ -156,22 +185,28 @@
   .highlight .cs {
     color: #68717a;
   }
+
   .highlight .gl {
     color: #68717a;
   }
+
   .highlight .gt {
     color: #68717a;
   }
+
   .highlight .ni {
     color: #24292f;
   }
+
   .highlight .si {
     color: #24292f;
   }
+
   .highlight .ge {
     color: #24292f;
     font-style: italic;
   }
+
   .highlight .gs {
     color: #24292f;
     font-weight: bold;

_sass/colors/typography-dark.scss

@@ -11,6 +11,7 @@
   /* Common color */
   --text-color: rgb(175, 176, 177);
   --text-muted-color: #868686;
+  --text-muted-hightlight-color: #aeaeae;
   --heading-color: #cccccc;
   --label-color: #a7a7a7;
   --blockquote-border-color: rgb(66, 66, 66);

_sass/colors/typography-light.scss

@@ -11,6 +11,7 @@
   /* Common color */
   --text-color: #34343c;
   --text-muted-color: #757575;
+  --text-muted-hightlight-color: inherit;
   --heading-color: #2a2a2a;
   --label-color: #585858;
   --blockquote-border-color: #eeeeee;
@@ -62,7 +63,8 @@
 
   /* Posts */
   --toc-highlight: #0550ae;
-  --btn-share-hover-color: var(--link-color);
+  --btn-share-color: gray;
+  --btn-share-hover-color: #0d6efd;
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
   --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,

_sass/layout/home.scss

@@ -6,8 +6,6 @@
   margin-top: 2rem;
 
   .card-wrapper {
-    display: block;
-
     &:hover {
       text-decoration: none;
     }
@@ -18,27 +16,23 @@
   }
 
   .card {
+    border: 0;
+    background: none;
+
     %img-radius {
       border-radius: $base-radius $base-radius 0 0;
     }
 
     .preview-img {
-      height: 10rem;
-
       @extend %img-radius;
 
       img {
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-
         @extend %img-radius;
       }
     }
 
     .card-body {
-      min-height: 10.5rem;
+      height: 100%;
       padding: 1rem;
 
       .card-title {
@@ -136,20 +130,13 @@
 
 /* Tablet */
 @media all and (min-width: 768px) {
+  %img-radius {
+    border-radius: 0 $base-radius $base-radius 0;
+  }
+
   #post-list {
-    %img-radius {
-      border-radius: 0 $base-radius $base-radius 0;
-    }
-
     .card {
-      .preview-img {
-        width: 20rem;
-        height: 11.55rem; // can hold 2 lines each for title and content
-      }
-
       .card-body {
-        min-height: 10.75rem;
-        width: 60%;
         padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
         .card-text {

_sass/layout/post.scss

@@ -2,14 +2,6 @@
   Post-specific style
 */
 
-@mixin btn-sharing-color($light-color, $important: false) {
-  @if $important {
-    color: var(--btn-share-color, $light-color) !important;
-  } @else {
-    color: var(--btn-share-color, $light-color);
-  }
-}
-
 %btn-post-nav {
   width: 50%;
   position: relative;
@@ -22,30 +14,6 @@
   padding-right: $pr;
 }
 
-%text-color {
-  color: var(--text-color);
-}
-
-.preview-img {
-  overflow: hidden;
-  aspect-ratio: 40 / 21;
-
-  @extend %rounded;
-
-  &:not(.no-bg) {
-    img.lazyloaded {
-      background: var(--img-bg);
-    }
-  }
-
-  img {
-    -o-object-fit: cover;
-    object-fit: cover;
-
-    @extend %rounded;
-  }
-}
-
 h1 + .post-meta {
   > span + span::before {
     @include dot;
@@ -53,7 +21,7 @@ h1 + .post-meta {
 
   em,
   time {
-    color: var(--text-color);
+    @extend %text-highlight;
   }
 
   em {
@@ -64,13 +32,10 @@ h1 + .post-meta {
 }
 
 .post-tail-wrapper {
+  @extend %text-sm;
+
   margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
-  font-size: 0.85rem;
-
-  .post-tail-bottom a {
-    color: inherit;
-  }
 
   .license-wrapper {
     line-height: 1.2rem;
@@ -84,7 +49,7 @@ h1 + .post-meta {
     }
 
     span:last-child {
-      font-size: 0.85rem;
+      @extend %text-sm;
     }
   } /* .license-wrapper */
 
@@ -99,11 +64,23 @@ h1 + .post-meta {
     -ms-user-select: none;
     user-select: none;
 
+    %icon-size {
+      font-size: 1.125rem;
+    }
+
     .share-icons {
-      font-size: 1.2rem;
+      display: flex;
+
+      i {
+        color: var(--btn-share-color);
+
+        @extend %icon-size;
+      }
 
       > * {
-        margin-left: 0.25rem;
+        @extend %icon-size;
+
+        margin-left: 0.5rem;
 
         &:hover {
           i {
@@ -113,44 +90,29 @@ h1 + .post-meta {
       }
 
       button {
-        position: relative;
-        bottom: 2px;
         padding: 0;
+        border: none;
+        line-height: inherit;
 
         @extend %cursor-pointer;
       }
-
-      a :hover {
-        text-decoration: none;
-      }
-
-      .fa-square-x-twitter {
-        @include btn-sharing-color(black);
-      }
-
-      .fa-facebook-square {
-        @include btn-sharing-color(rgb(66, 95, 156));
-      }
-
-      .fa-telegram {
-        @include btn-sharing-color(rgb(39, 159, 217));
-      }
-
-      .fa-linkedin {
-        @include btn-sharing-color(rgb(0, 119, 181));
-      }
-
-      .fa-weibo {
-        @include btn-sharing-color(rgb(229, 20, 43));
-      }
     } /* .share-icons */
-
-    .fas.fa-link {
-      @include btn-sharing-color(rgb(171, 171, 171));
-    }
   } /* .share-wrapper */
 }
 
+.share-mastodon {
+  /* See: https://github.com/justinribeiro/share-to-mastodon#properties */
+  --wc-stm-font-family: $font-family-base;
+  --wc-stm-dialog-background-color: var(--card-bg);
+  --wc-stm-form-button-border: 1px solid var(--btn-border-color);
+  --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-button-background-color-hover: #007bff;
+  --wc-stm-form-button-color-hover: white;
+
+  font-size: 1rem;
+}
+
 .post-tags {
   line-height: 2rem;
 
@@ -324,6 +286,7 @@ h1 + .post-meta {
 
   time {
     @extend %normal-font-style;
+    @extend %text-xs;
 
     color: var(--text-muted-color);
   }
@@ -340,27 +303,18 @@ h1 + .post-meta {
 
   .card {
     h4 {
-      @extend %text-color;
       @extend %text-clip;
     }
   }
 }
 
-#tail-wrapper {
-  min-height: 2rem;
+/* stylelint-disable-next-line selector-id-pattern */
+#disqus_thread {
+  min-height: 8.5rem;
+}
 
-  > *:not(:last-child) {
-    margin-top: 3rem;
-  }
-
-  > *:nth-last-child(2) {
-    margin-bottom: 3rem;
-  }
-
-  /* stylelint-disable-next-line selector-id-pattern */
-  #disqus_thread {
-    min-height: 8.5rem;
-  }
+.utterances {
+  max-width: 100%;
 }
 
 %btn-share-hovor {
@@ -376,10 +330,6 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 576px) {
-  .preview-img[data-src] {
-    margin-top: 2.2rem;
-  }
-
   .post-tail-bottom {
     flex-wrap: wrap-reverse !important;
 
@@ -404,9 +354,4 @@ h1 + .post-meta {
     margin-left: -0.5rem;
     margin-right: -0.5rem;
   }
-
-  .preview-img[data-src] {
-    max-width: 100vw;
-    border-radius: 0;
-  }
 }

assets/js/data/swcache.js

@@ -1,49 +0,0 @@
----
-layout: compress
-# The list to be cached by PWA
----
-
-const resource = [
-  /* --- CSS --- */
-  '{{ "/assets/css/:THEME.css" | replace: ':THEME', site.theme | relative_url }}',
-
-  /* --- PWA --- */
-  '{{ "/app.js" | relative_url }}',
-  '{{ "/sw.js" | relative_url }}',
-
-  /* --- HTML --- */
-  '{{ "/index.html" | relative_url }}',
-  '{{ "/404.html" | relative_url }}',
-
-  {% for tab in site.tabs %}
-    '{{ tab.url | relative_url }}',
-  {% endfor %}
-
-  /* --- Favicons & compressed JS --- */
-  {% assign cache_list = site.static_files | where: 'swcache', true  %}
-  {% for file in cache_list %}
-    '{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
-  {% endfor %}
-];
-
-/* The request url with below domain will be cached */
-const allowedDomains = [
-  {% if site.google_analytics.id != empty and site.google_analytics.id %}
-    'www.googletagmanager.com',
-    'www.google-analytics.com',
-  {% endif %}
-
-  '{{ site.url | split: "//" | last }}',
-
-  {% if site.img_cdn contains '//' and site.img_cdn %}
-    '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
-  {% endif %}
-
-  'fonts.gstatic.com',
-  'fonts.googleapis.com',
-  'cdn.jsdelivr.net',
-  'polyfill.io'
-];
-
-/* Requests that include the following path will be banned */
-const denyUrls = [];

assets/js/data/swconf.js

@@ -0,0 +1,51 @@
+---
+layout: compress
+permalink: '/:path/swconf.js'
+# Note that this file will be fetched by the ServiceWorker, so it will not be cached.
+---
+
+const swconf = {
+  {% if site.pwa.cache.enabled %}
+    cacheName: 'chirpy-{{ "now" | date: "%s" }}',
+
+    {%- comment -%} Resources added to the cache during PWA installation. {%- endcomment -%}
+    resources: [
+      '{{ "/assets/css/:THEME.css" | replace: ':THEME', site.theme | relative_url }}',
+      '{{ "/" | relative_url }}',
+      {% for tab in site.tabs %}
+        '{{- tab.url | relative_url -}}',
+      {% endfor %}
+
+      {% assign cache_list = site.static_files | where: 'swcache', true %}
+      {% for file in cache_list %}
+        '{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
+      {% endfor %}
+    ],
+
+    {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
+    allowHosts: [
+      {% if site.img_cdn and site.img_cdn contains '//' %}
+        '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
+      {% endif %}
+
+      {%- unless site.assets.self_host.enabled -%}
+       {% for cdn in site.data.origin["cors"].cdns %}
+          '{{ cdn.url | split: "//" | last }}'
+          {%- unless forloop.last -%},{%- endunless -%}
+        {% endfor %}
+      {% endunless %}
+    ],
+
+    {%- comment -%} The request url with below path will not be cached. {%- endcomment -%}
+    denyPaths: [
+      {% for path in site.pwa.cache.deny_paths %}
+        {% unless path == empty %}
+          '{{ path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
+        {% endunless  %}
+      {% endfor %}
+    ],
+    purge: false
+  {% else %}
+    purge: true
+  {% endif %}
+};

assets/js/pwa/app.js

@@ -1,47 +1,54 @@
 ---
 layout: compress
-permalink: '/app.js'
+permalink: /assets/js/dist/:basename.min.js
 ---
 
-const $notification = $('#notification');
-const $btnRefresh = $('#notification .toast-body>button');
-
 if ('serviceWorker' in navigator) {
-    /* Registering Service Worker */
-    navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}')
-        .then(registration => {
+  const isEnabled = '{{ site.pwa.enabled }}' === 'true';
 
-            /* in case the user ignores the notification */
-            if (registration.waiting) {
-                $notification.toast('show');
+  if (isEnabled) {
+    const swUrl = '{{ '/sw.min.js' | relative_url }}';
+    const $notification = $('#notification');
+    const $btnRefresh = $('#notification .toast-body>button');
+
+    navigator.serviceWorker.register(swUrl).then((registration) => {
+      {% comment %}In case the user ignores the notification{% endcomment %}
+      if (registration.waiting) {
+        $notification.toast('show');
+      }
+
+      registration.addEventListener('updatefound', () => {
+        registration.installing.addEventListener('statechange', () => {
+          if (registration.waiting) {
+            if (navigator.serviceWorker.controller) {
+              $notification.toast('show');
             }
-
-            registration.addEventListener('updatefound', () => {
-                registration.installing.addEventListener('statechange', () => {
-                    if (registration.waiting) {
-                        if (navigator.serviceWorker.controller) {
-                            $notification.toast('show');
-                        }
-                    }
-                });
-            });
-
-            $btnRefresh.click(() => {
-                if (registration.waiting) {
-                    registration.waiting.postMessage('SKIP_WAITING');
-                }
-                $notification.toast('hide');
-            });
+          }
         });
+      });
+
+      $btnRefresh.on('click', () => {
+        if (registration.waiting) {
+          registration.waiting.postMessage('SKIP_WAITING');
+        }
+        $notification.toast('hide');
+      });
+    });
 
     let refreshing = false;
 
-    /* Detect controller change and refresh all the opened tabs */
+    {% comment %}Detect controller change and refresh all the opened tabs{% endcomment %}
     navigator.serviceWorker.addEventListener('controllerchange', () => {
-        if (!refreshing) {
-            window.location.reload();
-            refreshing = true;
-        }
+      if (!refreshing) {
+        window.location.reload();
+        refreshing = true;
+      }
     });
+  } else {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (let registration of registrations) {
+        registration.unregister();
+      }
+    });
+  }
 }
-

assets/js/pwa/sw.js

@@ -1,37 +1,51 @@
 ---
 layout: compress
-permalink: '/sw.js'
+permalink: /:basename.min.js
 # PWA service worker
 ---
 
-self.importScripts('{{ "/assets/js/data/swcache.js" | relative_url }}');
+const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
 
-const cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M%S" }}';
+importScripts(swconfUrl);
+const purge = swconf.purge;
 
-function verifyDomain(url) {
-  for (const domain of allowedDomains) {
-    const regex = RegExp(`^http(s)?:\/\/${domain}\/`);
+function verifyHost(url) {
+  for (const host of swconf.allowHosts) {
+    const regex = RegExp(`^http(s)?://${host}/`);
     if (regex.test(url)) {
       return true;
     }
   }
-
   return false;
 }
 
-function isExcluded(url) {
-  for (const item of denyUrls) {
-    if (url === item) {
-      return true;
+function verifyUrl(url) {
+  if (!verifyHost(url)) {
+    return false;
+  }
+
+  const requestPath = new URL(url).pathname;
+
+  for (const path of swconf.denyPaths) {
+    if (requestPath.startsWith(path)) {
+      return false;
     }
   }
-  return false;
+  return true;
+}
+
+if (!purge) {
+  swconf.allowHosts.push(location.host);
 }
 
 self.addEventListener('install', (event) => {
+  if (purge) {
+    return;
+  }
+
   event.waitUntil(
-    caches.open(cacheName).then((cache) => {
-      return cache.addAll(resource);
+    caches.open(swconf.cacheName).then((cache) => {
+      return cache.addAll(swconf.resources);
     })
   );
 });
@@ -41,8 +55,12 @@ self.addEventListener('activate', (event) => {
     caches.keys().then((keyList) => {
       return Promise.all(
         keyList.map((key) => {
-          if (key !== cacheName) {
+          if (purge) {
             return caches.delete(key);
+          } else {
+            if (key !== swconf.cacheName) {
+              return caches.delete(key);
+            }
           }
         })
       );
@@ -66,22 +84,16 @@ self.addEventListener('fetch', (event) => {
       return fetch(event.request).then((response) => {
         const url = event.request.url;
 
-        if (
-          event.request.method !== 'GET' ||
-          !verifyDomain(url) ||
-          isExcluded(url)
-        ) {
+        if (purge || event.request.method !== 'GET' || !verifyUrl(url)) {
           return response;
         }
 
-        /* see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests> */
+        {% comment %}See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>{% endcomment %}
         let responseToCache = response.clone();
 
-        caches.open(cacheName).then((cache) => {
-          /* console.log('[sw] Caching new resource: ' + event.request.url); */
+        caches.open(swconf.cacheName).then((cache) => {
           cache.put(event.request, responseToCache);
         });
-
         return response;
       });
     })

assets/js/pwa/unregister.js

@@ -1,12 +0,0 @@
----
-layout: compress
-permalink: '/unregister.js'
----
-
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.getRegistrations().then((registrations) => {
-        for (let reg of registrations) {
-            reg.unregister();
-        }
-    });
-}

docs/CHANGELOG.md

@@ -2,6 +2,108 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [6.5.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.2...v6.5.3) (2024-03-07)
+
+## [6.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.1...v6.5.2) (2024-02-29)
+
+### Bug Fixes
+
+* correct the base URL parameter name ([#1576](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1576)) ([19d6baf](https://github.com/cotes2020/jekyll-theme-chirpy/commit/19d6bafbe1a60614e0d63b961bc73c342a9f6f33)), closes [#1553](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1553)
+
+## [6.5.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.0...v6.5.1) (2024-02-26)
+
+### Bug Fixes
+
+* correct the generation of relative resource paths ([#1553](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1553)) ([89b9625](https://github.com/cotes2020/jekyll-theme-chirpy/commit/89b962557a56ccc13eba3c9c20b4270ee9d30042))
+
+## [6.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.4.2...v6.5.0) (2024-02-14)
+
+### Features
+
+* add `pwa.cache.*` option to precisely control caching ([#1501](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1501)) ([1127c43](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1127c43823aac4db7fd80d5bb706ae7b1e129dc6))
+* add analytics support for GoatCounter ([#1526](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1526)) ([90693ff](https://github.com/cotes2020/jekyll-theme-chirpy/commit/90693ff95e72ca4b5135a7b454a6ab521b995b3e))
+
+### Bug Fixes
+
+* correct the Twitter Card in social share preview ([#1498](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1498)) ([74f1662](https://github.com/cotes2020/jekyll-theme-chirpy/commit/74f16623c9c4877ef36ac52e8b69c19d1d9a82ba))
+* missing "/" at the end of URLs for categories and tags in breadcrumb ([#1495](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1495)) ([02e296e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/02e296ed75b7906b2d112c67f9054f5d71919de9))
+
+### Improvements
+
+* allow no social links to be configured ([#1494](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1494)) ([4facf5b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4facf5b390eeba612ca439f3354c5d2d881aac56))
+* allow TOC to start at heading 3 ([#1512](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1512)) ([bbbb66b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bbbb66b489a3bf2b878947336fe894e8ea2ae3f5))
+* enable equation numbering in MathJax ([#1520](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1520)) ([c13ec31](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c13ec311636d5e057c6895e353e1c1a4e570f582))
+
+## [6.4.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.4.1...v6.4.2) (2024-01-13)
+
+### Bug Fixes
+
+* resume the `blockquote` display type ([#1480](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1480)) ([c7cfde0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c7cfde093020c73ca9a1b83437eb600379e05918)), closes [#1449](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1449)
+
+## [6.4.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.4.0...v6.4.1) (2024-01-10)
+
+### Bug Fixes
+
+* `og:image` URL is incorrect ([#1468](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1468)) ([b2d1cb6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b2d1cb68db659270aac537d2aa8d4b806fa6991d)), closes [#1463](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1463)
+
+## [6.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.3.1...v6.4.0) (2024-01-10)
+
+### Features
+
+* add bilibili embed video support ([#1406](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1406)) ([4a2b89d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4a2b89d0b698d672486349131a89025fa47afcb6))
+* add site-wide social preview image settings ([#1463](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1463)) ([241bb4d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/241bb4df7878cff7f82014df660874a1dcddba76))
+
+### Bug Fixes
+
+*  image float breaks quotes and prompts ([#1449](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1449)) ([ea2d238](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ea2d238bd8adc018256862e05a5092311c87a671)), closes [#1441](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1441)
+* url-less authors should not have empty links ([#1410](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1410)) ([2a4fbf6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2a4fbf6a7925da610a75c498116da7cf9ba857d7)), closes [#1403](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1403)
+
+### Improvements
+
+* include the latest posts in the "Recently Updated" list ([#1456](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1456)) ([82d8f2d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/82d8f2db984711f334f55b6af5098ec16770e824))
+
+## [6.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.3.0...v6.3.1) (2023-11-12)
+
+### Bug Fixes
+
+* **home:** responsive gap at the bottom of preview image ([1a977a8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1a977a87a0da1cff35d0896cf9265c31034841a6))
+
+## [6.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.3...v6.3.0) (2023-11-10)
+
+### Features
+
+* add Mastodon sharing link ([#1344](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1344)) ([2bf87e0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bf87e0de7928f325811e1bb96cfcaefdf6cf66a)), closes [#1324](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1324)
+
+### Bug Fixes
+
+* **home:** crop the preview image that doesn't match 1.91:1 ([#1325](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1325)) ([5810bcd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5810bcd1d7b83e111017831fa82c368a6b15c7cd))
+* resume lazy loading for Twitch videos ([#1326](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1326)) ([9f174d9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9f174d9088e5c83a5e0c4630336cea65e199c553)), closes [#1267](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1267)
+
+## [6.2.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.2...v6.2.3) (2023-10-10)
+
+### Bug Fixes
+
+* avoid `utterances` initialization failure  ([#1234](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1234)) ([b34661e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b34661efd72e8697fd5b30ba7e55c86c7dd10338))
+* **home:** avoid LQIP dirty data passing to the next post ([#1278](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1278)) ([109725d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/109725d2dc56e329c60a876e9ce4094513fd36a5))
+* **posts:** code snippet clipboard tooltip missing title ([#1246](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1246)) ([726085c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/726085c6478e7a9dc2cc57189b2dcbc85d90f048))
+* **posts:** resume target highlighting for superscripts and footnotes ([#1253](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1253)) ([0465a98](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0465a985dc5262fa2043540f4eddafa251f917a3))
+
+### Improvements
+
+* **comments:** lazy load `giscus` ([#1254](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1254)) ([e9c9206](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e9c920641b9c97594fa078ea89747d77eb7e7493))
+* **core:** replace `lazysizes` with browser-level lazy loading ([#1267](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1267)) ([bf3a34d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bf3a34d0544b49fcf40f57080c4d6b4ff44750c4))
+* **layout:** improve margins for tail block ([#1243](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1243)) ([13a3c3c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/13a3c3c906bb6c5a38314ea27b6cf3767df94b27))
+* **layout:** optimize the main block height calculation ([#1249](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1249)) ([73e171b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/73e171b0fbce4a542e2141d7e2b1144450571ce1))
+* **pwa:** enhance cache privacy protection ([#1275](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1275)) ([2d56597](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2d56597571aaafa92251d192861ea69cce3e83d2))
+* **ui:** standardize metadata text styles ([#1295](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1295)) ([2574118](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2574118f40a956184705f87dea4d88e7c246a055))
+* **ux:** render background color before loading preview image ([#1298](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1298)) ([42bf39e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/42bf39e21c9a497aecc3e9b4549e2fc3ba4a1e4a))
+
+## [6.2.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.1...v6.2.2) (2023-09-10)
+
+### Bug Fixes
+
+* **sidebar:** contact icons not stacking ([#1224](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1224)) ([273b389](https://github.com/cotes2020/jekyll-theme-chirpy/commit/273b389c512f13693ed6cdf57d256ac21deae97c))
+
 ## [6.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.0...v6.2.1) (2023-09-10)
 
 ### Bug Fixes

docs/CONTRIBUTING.md

@@ -1,38 +1,41 @@
 # Contributing Guidelines
 
-:tada: _First of all, thank you for considering contributing to this project!_ :tada:
+_First of all, thank you for considering contributing to this project_ ! :tada:
 
 There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug
-reports and feature requests or writing code which can be incorporated into Chirpy itself.
+reports and feature requests, or writing code that can be incorporated into the project. In order to make a good
+experience for both contributors and maintainers, please start with the "[General Rules](#general-rules)"
+before taking further action.
 
-## In This Article
+## Table of Contents
 
 - [General Rules](#general-rules)
 - [Questions and Requests for Help](#questions-and-requests-for-help)
-- [File a Bug Report](#file-a-bug-report)
-- [Suggest a New Feature](#suggest-a-new-feature)
-- [Contributing Code and Documentation Changes](#contributing-code-and-documentation-changes)
+- [Reporting a Bug](#reporting-a-bug)
+- [Suggesting a New Feature](#suggesting-a-new-feature)
+- [Contributing Code/Documentation](#contributing-codedocumentation)
 - [Helpful Resources](#helpful-resources)
 
 ## General Rules
 
-All contributions should be based on the following rules:
+All types of contributions (_pull requests_, _issues_, and _discussions_) should follow these rules:
 
 - You should read through the [Wiki][wiki] to understand the project features and how to use it properly. This is to
 respect the time of the project's developers and
-maintainers, and to save their energy for other problems that really need to be resolved.
+maintainers and to save their energy for other problems that really need to be resolved.
 
 - Use the [latest release version][latest-ver]. If your contribution involves code/documentation changes, update to the
 latest version of the default (`master`) branch.
 
-- Avoid making duplicate contributions by searching for existing [Issues][issues] / [Discussioins][discus] /
-[Pull Requests][pr], but don't leave any unhelpful comments such as "I have the same problem". Prefer using
+- Avoid making duplicate contributions by searching for existing [issues][issues] / [discussions][discus] /
+[pull requests][pr], but don't leave any unhelpful comments such as "I have the same problem". Prefer using
 [reactions][gh-reactions] if you simply want to "+1" an existing issue.
 
 - DO NOT email or tweet the
-project developers and maintainers directly, everything about Chirpy should be left in GitHub.
+project developers and maintainers directly, everything about the project should be left on GitHub.
 
-**Tips**: If you're new to open source, see "[How To Ask Questions The Smart Way][ext-reading]".
+**Tip**: If you are new to the open-source community, then please read through
+"[How To Ask Questions The Smart Way][ext-reading]" before contributing.
 
 ## Questions and Requests for Help
 
@@ -43,7 +46,7 @@ enthusiastic geeks who will positively answer your challenging questions.
 If you can't get an answer in any of the above ways, then create a new [discussion][discus]. As long as it is not a
 duplicate and [RTFM][rtfm] / [STFW][stfw] issue, we will respond as soon as possible.
 
-## File a Bug Report
+## Reporting a Bug
 
 A great way to contribute to the project is to send a detailed issue when you encounter a problem. We always appreciate
 a well-written, thorough bug report.
@@ -58,34 +61,34 @@ You can learn about Jekyll and modern Web development to solve problems caused b
 
 3. Make good use of your browser's incognito mode to troubleshoot if the problem is caused by caching.
 
-4. As a last option, you can create a new [Bug Report][new-issue] follow the template to describe the details.
+4. As a last option, you can create a new [Bug Report][bug-report] following the template to describe the details.
 If possible, providing a demo that reproduces the error will help us troubleshoot faster.
 
-## Suggest a New Feature
-
-Feature requests are welcome! While we will consider all requests, we cannot guarantee your request will be accepted.
-
-We want to avoid chaos in the UI design, so we won't accept requests for changes like color schemes, font families,
-typography, and so on. **Do not open a duplicate feature request.** Search for existing feature requests first. If you
-find your feature (or one very similar) previously requested, comment on that issue.
+## Suggesting a New Feature
 
+Feature requests are welcome! While we will consider all requests, we cannot guarantee your request will be accepted.  
+We want to avoid chaos in the UI design and therefore do not accept requests for changes like color schemes,
+fontfamilies, typography, and so on. We want to avoid [feature creep][feat-creep] and focus only on the core features.
 If accepted, we cannot make any commitments regarding the timeline for implementation and release. However, you are
 welcome to submit a pull request to help!
 
-## Contributing Code and Documentation Changes
+## Contributing Code/Documentation
 
-In short, you can follow these steps to complete the contribution.
+If your request is about an enhancement, it is recommended to first submit a
+[Feature Request][feat-request] to discuss whether your idea fits the project.
+See also: "[Suggesting a New Feature](#suggesting-a-new-feature)". Other than that, you can start the PR process.
 
 1. Fork this project on GitHub and clone your repository locally.
 2. Setting up the [development & test environments][dev-env].
-3. Create a new branch from the default branch and give it a descriptive name (e.g. `add-a-new-feat` or `fix-a-bug`).
+3. Creating a new branch from the default branch and give it a descriptive name (e.g. `add-a-new-feat` or `fix-a-bug`).
 When development is complete, create a [Conventional Commit][cc] with Git.
-4. Create a new [Pull Request][gh-pr].
+4. Submitting a [Pull Request][gh-pr].
 
 ## Helpful Resources
 
 - [Code of conduct](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CODE_OF_CONDUCT.md)
 - [Security policy](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/SECURITY.md)
+- [How To Ask Questions The Smart Way][ext-reading]
 
 [latest-ver]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/latest
 [wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
@@ -98,7 +101,9 @@ When development is complete, create a [Conventional Commit][cc] with Git.
 [rtfm]: https://en.wikipedia.org/wiki/RTFM
 [stfw]: https://www.webster-dictionary.org/definition/STFW
 [gh-reactions]: https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/
-[new-issue]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new/choose
+[bug-report]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?assignees=&labels=&projects=&template=bug_report.yml
+[feat-request]: https://github.com/cotes2020/jekyll-theme-chirpy/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml
+[feat-creep]: https://en.wikipedia.org/wiki/Feature_creep
 [dev-env]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Development-&-Test-Environments
 [cc]: https://www.conventionalcommits.org/
 [gh-pr]: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests

jekyll-theme-chirpy.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "6.2.1"
+  spec.version       = "6.5.3"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 
-  spec.summary       = "A minimal, responsive and feature-rich Jekyll theme for technical writing."
+  spec.summary       = "A minimal, responsive, and feature-rich Jekyll theme for technical writing."
   spec.homepage      = "https://github.com/cotes2020/jekyll-theme-chirpy"
   spec.license       = "MIT"
 
@@ -23,12 +23,12 @@ Gem::Specification.new do |spec|
     "plugin_type"       => "theme"
   }
 
-  spec.required_ruby_version = ">= 2.6"
+  spec.required_ruby_version = ">= 3.0"
 
   spec.add_runtime_dependency "jekyll", "~> 4.3"
   spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
   spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
-  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"
+  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.8"
   spec.add_runtime_dependency "jekyll-archives", "~> 2.2"
   spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4"
   spec.add_runtime_dependency "jekyll-include-cache", "~> 0.2"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "6.2.1",
-  "description": "A minimal, responsive and feature-rich Jekyll theme for technical writing.",
+  "version": "6.5.3",
+  "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cotes2020/jekyll-theme-chirpy.git"
@@ -21,15 +21,92 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.17",
+    "@babel/core": "^7.23.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.15",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-terser": "^0.4.3",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.29.0",
-    "rollup-plugin-license": "^3.1.0",
-    "stylelint": "^15.10.3",
-    "stylelint-config-standard-scss": "^11.0.0"
+    "@babel/preset-env": "^7.23.9",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-terser": "^0.4.4",
+    "husky": "^9.0.11",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.10.0",
+    "rollup-plugin-license": "^3.2.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard-scss": "^13.0.0"
+  },
+  "prettier": {
+    "trailingComma": "none"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "> 0.2%",
+    "not dead"
+  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ],
+    "rules": {
+      "body-max-line-length": [
+        0,
+        "always"
+      ]
+    }
+  },
+  "stylelint": {
+    "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"
+          ]
+        }
+      ],
+      "value-keyword-case": [
+        "lower",
+        {
+          "ignoreProperties": [
+            "/^\\$/"
+          ]
+        }
+      ],
+      "media-feature-range-notation": "prefix"
+    }
+  },
+  "standard-version": {
+    "skip": {
+      "commit": true,
+      "tag": true
+    },
+    "types": [
+      {
+        "type": "feat",
+        "section": "Features"
+      },
+      {
+        "type": "fix",
+        "section": "Bug Fixes"
+      },
+      {
+        "type": "perf",
+        "section": "Improvements"
+      }
+    ]
   }
 }

rollup.config.js

@@ -3,21 +3,21 @@ import terser from '@rollup/plugin-terser';
 import license from 'rollup-plugin-license';
 import path from 'path';
 
-const JS_SRC = '_javascript';
-const JS_DIST = 'assets/js/dist';
+const SRC_DEFAULT = '_javascript';
+const DIST_DEFAULT = 'assets/js/dist';
 const isProd = process.env.NODE_ENV === 'production';
 
 function build(filename) {
   return {
-    input: [`${JS_SRC}/${filename}.js`],
+    input: [`${SRC_DEFAULT}/${filename}.js`],
     output: {
-      file: `${JS_DIST}/${filename}.min.js`,
+      file: `${DIST_DEFAULT}/${filename}.min.js`,
       format: 'iife',
       name: 'Chirpy',
       sourcemap: !isProd
     },
     watch: {
-      include: `${JS_SRC}/**`
+      include: `${SRC_DEFAULT}/**`
     },
     plugins: [
       babel({
@@ -28,7 +28,7 @@ function build(filename) {
       license({
         banner: {
           commentStyle: 'ignored',
-          content: { file: path.join(__dirname, JS_SRC, '_copyright') }
+          content: { file: path.join(__dirname, SRC_DEFAULT, '_copyright') }
         }
       }),
       isProd && terser()

tools/release

@@ -8,7 +8,7 @@
 # and production branch.
 #
 #
-# Usage: run on main branch or the patch branch
+# Usage: run on the default, release or the patch branch
 #
 # Requires: Git, NPM and RubyGems
 
@@ -18,13 +18,13 @@ opt_pre=false # preview mode option
 
 working_branch="$(git branch --show-current)"
 
-# AKA the default branch, main/master branch
-STAGING_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
+DEFAULT_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
 
 PROD_BRANCH="production"
 
 GEM_SPEC="jekyll-theme-chirpy.gemspec"
 NODE_CONFIG="package.json"
+CHANGE_LOG="docs/CHANGELOG.md"
 
 JS_DIST="assets/js/dist"
 BACKUP_PATH="$(mktemp -d)"
@@ -64,17 +64,20 @@ _check_cli() {
 }
 
 _check_git() {
-  # ensure nothing is uncommitted
+  # ensure that changes have been committed
   if [[ -n $(git status . -s) ]]; then
     echo "> Abort: Commit the staged files first, and then run this tool again."
     exit 1
   fi
 
-  # ensure the working branch is the default/patch branch
-  if [[ $working_branch != "$STAGING_BRANCH" && $working_branch != hotfix/* ]]; then
-    echo "> Abort: Please run on the $STAGING_BRANCH branch or a patch branche."
-    exit 1
-  fi
+  $opt_pre || (
+    if [[ $working_branch != "$DEFAULT_BRANCH" &&
+      $working_branch != hotfix/* &&
+      $working_branch != "$PROD_BRANCH" ]]; then
+      echo "> Abort: Please run on the default, release or patch branch."
+      exit 1
+    fi
+  )
 }
 
 _check_src() {
@@ -100,55 +103,64 @@ check() {
   _check_node_packages
 }
 
-# auto-generate a new version number to the file 'package.json' and
+# Auto-generate a new version number to the file 'package.json'
 bump_node() {
+  bump="standard-version -i $CHANGE_LOG"
+
   if $opt_pre; then
-    standard-version --prerelease rc
-  else
-    standard-version
+    bump="$bump -p rc"
   fi
 
+  eval "$bump"
+
   # Change heading of Patch version to heading level 2 (a bug from `standard-version`)
-  sed -i "s/^### \[/## \[/g" CHANGELOG.md
+  sed -i "s/^### \[/## \[/g" "$CHANGE_LOG"
   # Replace multiple empty lines with a single empty line
-  sed -i "/^$/N;/^\n$/D" CHANGELOG.md
+  sed -i "/^$/N;/^\n$/D" "$CHANGE_LOG"
 }
 
 ## Bump new version to gem config file
 bump_gem() {
-  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$1/" "$GEM_SPEC"
+  _ver="$1"
+
+  if $opt_pre; then
+    _ver="${1/-/.}"
+  fi
+
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_ver/" "$GEM_SPEC"
 }
 
-# Update the git branches, create a new tag, and then build the gem package.
-release() {
+# Creates a new tag on the production branch with the given version number.
+# Also commits the changes and merges the production branch into the default branch.
+branch() {
   _version="$1" # X.Y.Z
-  _latest_commit="$(git rev-parse HEAD)"
+
+  git add .
+  git commit -m "chore(release): $_version"
 
   # Create a new tag on production branch
   echo -e "> Create tag v$_version\n"
   git tag "v$_version"
 
-  git checkout "$STAGING_BRANCH"
+  git checkout "$DEFAULT_BRANCH"
+  git merge --no-ff --no-edit "$PROD_BRANCH"
 
   if [[ $working_branch == hotfix/* ]]; then
-    git merge --no-ff --no-edit "$working_branch"
     # delete the patch branch
     git branch -D "$working_branch"
   fi
-
-  # cherry-pick the latest commit from production branch to default branch
-  git cherry-pick "$_latest_commit"
-
 }
 
-## Build a gem package
+## Build a Gem package
 build_gem() {
+  git checkout "$PROD_BRANCH"
+
   # Remove unnecessary theme settings
   sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
   rm -f ./*.gem
 
   npm run build
-  git add "$JS_DIST" -f # add JS dist to gem
+  git add "$JS_DIST" -f # add JS distribution files to gem
   gem build "$GEM_SPEC"
   cp "$JS_DIST"/* "$BACKUP_PATH"
 
@@ -158,12 +170,15 @@ build_gem() {
 
   # restore the dist files for future development
   mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST"
+
+  # back to the default branch
+  git checkout "$DEFAULT_BRANCH"
 }
 
 main() {
   check
 
-  if [[ $opt_pre = false ]]; then
+  if [[ $opt_pre = false && $working_branch != "$PROD_BRANCH" ]]; then
     git checkout "$PROD_BRANCH"
     git merge --no-ff --no-edit "$working_branch"
   fi
@@ -174,16 +189,12 @@ main() {
 
   bump_gem "$_version"
 
-  echo -e "> Build the gem package for v$_version\n"
-
   if [[ $opt_pre = false ]]; then
-    echo -e "> Bumped version number to $_version\n"
-    git add .
-    git commit -m "chore(release): $_version"
-
-    release "$_version"
+    branch "$_version"
   fi
 
+  echo -e "> Build the gem package for v$_version\n"
+
   build_gem
 }