diff --git a/.github/DISCUSSION_TEMPLATE/general.yml b/.github/DISCUSSION_TEMPLATE/general.yml
new file mode 100644
index 0000000..18d0f85
--- /dev/null
+++ b/.github/DISCUSSION_TEMPLATE/general.yml
@@ -0,0 +1,17 @@
+body:
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Following the guidelines can make you more likely to get responses.
+      options:
+        - label: >-
+            I have read and accepted the
+            [contributing guidelines](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md).
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true
diff --git a/.github/DISCUSSION_TEMPLATE/ideas.yml b/.github/DISCUSSION_TEMPLATE/ideas.yml
new file mode 100644
index 0000000..e4c987d
--- /dev/null
+++ b/.github/DISCUSSION_TEMPLATE/ideas.yml
@@ -0,0 +1,7 @@
+body:
+  - type: textarea
+    attributes:
+      label: Description
+      description: Please describe in detail what you want to share.
+    validations:
+      required: true
diff --git a/.github/DISCUSSION_TEMPLATE/q-a.yml b/.github/DISCUSSION_TEMPLATE/q-a.yml
new file mode 100644
index 0000000..a2e2aa1
--- /dev/null
+++ b/.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!
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..f22921b
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+ko_fi: coteschung
+custom: https://sponsor.cotes.page
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..7b513fb
--- /dev/null
+++ b/.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!
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..1dfb2b2
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Ask the community for help
+    url: https://github.com/cotes2020/jekyll-theme-chirpy/discussions
+    about: Please ask and answer questions here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..7957035
--- /dev/null
+++ b/.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.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..0ff984a
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,17 @@
+## Type of change
+<!-- 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
+
+## 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.
+-->
+
+## Additional context
+<!-- e.g. Fixes #(issue) -->
diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
new file mode 100644
index 0000000..1439beb
--- /dev/null
+++ b/.github/codeql/codeql-config.yml
@@ -0,0 +1,2 @@
+paths-ignore:
+  - "assets/js"
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000..393fa98
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,25 @@
+version: 2
+updates:
+  - package-ecosystem: "bundler"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    versioning-strategy: increase
+    groups:
+      npm:
+        update-types:
+          - "major"
+          - "minor"
+          - "patch"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    groups:
+      gh-actions:
+        update-types:
+          - "major"
+    schedule:
+      interval: "weekly"
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
new file mode 100644
index 0000000..160750d
--- /dev/null
+++ b/.github/workflows/cd.yml
@@ -0,0 +1,37 @@
+name: CD
+
+on:
+  push:
+    branches:
+      - production
+    tags-ignore:
+      - "**"
+
+jobs:
+  release:
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.3
+          bundler-cache: true
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - run: npm install
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GEM_HOST_API_KEY: ${{ secrets.GEM_HOST_API_KEY }}
+
+  publish:
+    needs: release
+    uses: ./.github/workflows/publish.yml
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..078e4f1
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,44 @@
+name: "CI"
+on:
+  push:
+    branches:
+      - "master"
+    paths-ignore:
+      - ".github/**"
+      - "!.github/workflows/ci.yml"
+      - ".gitignore"
+      - "docs/**"
+      - "README.md"
+      - "LICENSE"
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        ruby: ["3.1", "3.2", "3.3"]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # for posts's lastmod
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: ${{ matrix.ruby }}
+          bundler-cache: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+
+      - name: Build Assets
+        run: npm i && npm run build
+
+      - name: Test Site
+        run: bash tools/test
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000..06feb7f
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,44 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: ["master"]
+    paths: ["_javascript/**/*.js"]
+  pull_request:
+    paths: ["_javascript/**/*.js"]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        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@v3
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: "/language:${{ matrix.language }}"
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
new file mode 100644
index 0000000..c9c48c3
--- /dev/null
+++ b/.github/workflows/commitlint.yml
@@ -0,0 +1,9 @@
+name: Lint Commit Messages
+on: pull_request
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: wagoid/commitlint-github-action@v6
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..20e4691
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,17 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - docs
+  workflow_call:
+
+jobs:
+  launch:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          curl -X POST -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
+            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
new file mode 100644
index 0000000..bcf425a
--- /dev/null
+++ b/.github/workflows/stale.yml
@@ -0,0 +1,32 @@
+name: "Close stale issues and PRs"
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # every day at 00:00 UTC
+
+permissions:
+  issues: write
+  pull-requests: write
+
+env:
+  STALE_LABEL: stale
+  EXEMPT_LABELS: "pending,planning,in progress"
+  MESSAGE: >
+    This conversation has been automatically marked as stale because it has not had recent activity.
+    It will be closed if no further activity occurs.
+    Thank you for your contributions.
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          # 60 days before marking issues/PRs stale
+          days-before-close: -1 # does not close automatically
+          stale-issue-label: ${{ env.STALE_LABEL }}
+          exempt-issue-labels: ${{ env.EXEMPT_LABELS }}
+          stale-issue-message: ${{ env.MESSAGE }}
+          stale-pr-label: ${{ env.STALE_LABEL }}
+          exempt-pr-labels: ${{ env.EXEMPT_LABELS }}
+          stale-pr-message: ${{ env.MESSAGE }}
diff --git a/.github/workflows/starter/pages-deploy.yml b/.github/workflows/starter/pages-deploy.yml
new file mode 100644
index 0000000..cc28f99
--- /dev/null
+++ b/.github/workflows/starter/pages-deploy.yml
@@ -0,0 +1,73 @@
+name: "Build and Deploy"
+on:
+  push:
+    branches:
+      - main
+      - master
+    paths-ignore:
+      - .gitignore
+      - README.md
+      - LICENSE
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # submodules: true
+          # If using the 'assets' git submodule from Chirpy Starter, uncomment above
+          # (See: https://github.com/cotes2020/chirpy-starter/tree/main/assets)
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.3
+          bundler-cache: true
+
+      - name: Build site
+        run: bundle exec jekyll b -d "_site${{ steps.pages.outputs.base_path }}"
+        env:
+          JEKYLL_ENV: "production"
+
+      - name: Test site
+        run: |
+          bundle exec htmlproofer _site \
+            \-\-disable-external \
+            \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
+
+      - name: Upload site artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "_site${{ steps.pages.outputs.base_path }}"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/style-lint.yml b/.github/workflows/style-lint.yml
new file mode 100644
index 0000000..89eeaef
--- /dev/null
+++ b/.github/workflows/style-lint.yml
@@ -0,0 +1,23 @@
+name: "Style Lint"
+
+on:
+  push:
+    branches: ["master"]
+    paths: ["_sass/**/*.scss"]
+  pull_request:
+    paths: ["_sass/**/*.scss"]
+
+jobs:
+  stylelint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: latest
+      - run: npm i
+      - run: npm test
diff --git a/.gitignore b/.gitignore
index 63bdc56..d6bf509 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,3 @@
-*._md
-
-*.ipynb
-*.ignore
-1011_potential.html
-
-# jekyll
 # Bundler cache
 .bundle
 vendor
@@ -12,6 +5,7 @@ Gemfile.lock
 
 # Jekyll cache
 .jekyll-cache
+.jekyll-metadata
 _site
 
 # RubyGems
@@ -24,6 +18,9 @@ package-lock.json
 # IDE configurations
 .idea
 .vscode
+!.vscode/settings.json
+!.vscode/extensions.json
 
 # Misc
+_sass/dist
 assets/js/dist
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100644
index 0000000..7f23494
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}
diff --git a/.markdownlint.json b/.markdownlint.json
new file mode 100644
index 0000000..831991e
--- /dev/null
+++ b/.markdownlint.json
@@ -0,0 +1,8 @@
+{
+  "commands-show-output": false,
+  "blanks-around-fences": false,
+  "line-length": false,
+  "no-inline-html": {
+    "allowed_elements": ["kbd", "sub"]
+  }
+}
diff --git a/.nojekyll b/.nojekyll
index 8b13789..e69de29 100644
--- a/.nojekyll
+++ b/.nojekyll
@@ -1 +0,0 @@
-
diff --git a/Gemfile b/Gemfile
index 1d5342c..672e9e4 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,27 +2,8 @@
 
 source "https://rubygems.org"
 
-gem "jekyll-theme-chirpy", "~> 6.1"
+gemspec
 
 group :test do
-  gem "html-proofer", "~> 3.18"
-end
-
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
-platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", ">= 1", "< 3"
-  gem "tzinfo-data"
-end
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
-
-# Lock jekyll-sass-converter to 2.x on Linux-musl
-if RUBY_PLATFORM =~ /linux-musl/
-  gem "jekyll-sass-converter", "~> 2.0"
+  gem "html-proofer", "~> 5.0"
 end
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..299d89f
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Cotes Chung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/_config.yml b/_config.yml
index 8a32533..4bdda15 100644
--- a/_config.yml
+++ b/_config.yml
@@ -13,7 +13,7 @@ baseurl: ""
 lang: en
 
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
-timezone:
+timezone: Australia/West
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
 # ↓ --------------------------
@@ -38,7 +38,7 @@ social:
   # Change to your full name.
   # It will be displayed as the default author of the posts and the copyright owner in the Footer
   name: Peter Tanner
-  email: example@domain.com # change to your email address
+  email: hello@petertanner.dev # change to your email address
   links:
     # The first element serves as the copyright owner's link
     - https://github.com/peter-tanner # change to your github homepage
@@ -47,12 +47,37 @@ social:
     # Uncomment below to add more social links
     # - https://www.facebook.com/username
 
-# google_site_verification: # fill in to your verification string
+
+# Site Verification Settings
+webmaster_verifications:
+  google: # fill in your Google verification code
+  bing: # fill in your Bing verification code
+  alexa: # fill in your Alexa verification code
+  yandex: # fill in your Yandex verification code
+  baidu: # fill in your Baidu verification code
+  facebook: # fill in your Facebook verification code
+
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-# google_analytics:
-#   id: # fill in your Google Analytics ID
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
+  umami:
+    id: # fill in your Umami ID
+    domain: # fill in your Umami domain
+  matomo:
+    id: # fill in your Matomo ID
+    domain: # fill in your Matomo domain
+  cloudflare:
+    id: # fill in your Cloudflare Web Analytics token
+
+# Pageviews settings
+pageviews:
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
@@ -72,7 +97,7 @@ theme_mode: dark # [light|dark]
 # will be added to all image (site avatar & posts' images) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn:
+cdn:
 
 # the avatar on sidebar, support local or CORS resources
 avatar: assets/img/avatar.jpg
@@ -99,6 +124,7 @@ comments:
     category:
     category_id:
     mapping: # optional, default to 'pathname'
+    strict: # optional, default to '0'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
@@ -109,16 +135,27 @@ assets:
     enabled: # boolean, keep empty means false
     # specify the Jekyll environment, empty means both
     # only works if `assets.self_host.enabled` is 'true'
-    env: # [development|production]
+    env: # [development | production]
 
 pwa:
-  enabled: true # the option for PWA feature
+  enabled: true # the option for PWA feature (installable)
+  cache:
+    enabled: true # the option for PWA offline cache
+    # Paths defined here will be excluded from the PWA cache.
+    # Usually its value is the `baseurl` of another website that
+    # shares the same domain name as the current website.
+    deny_paths:
+      # - "/example"  # URLs match `<SITE_URL>/example/*` will not be cached by the PWA
 
 paginate: 10
 
+# The base URL of your site
+baseurl: "https://www.petertanner.dev"
+
 # ------------ The following options are not recommended to be modified ------------------
 
 kramdown:
+  footnote_backlink: "&#8617;&#xfe0e;"
   syntax_highlighter: rouge
   syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options
     css_class: highlight
@@ -183,10 +220,12 @@ compress_html:
 exclude:
   - "*.gem"
   - "*.gemspec"
+  - docs
   - tools
   - README.md
   - CHANGELOG.md
   - LICENSE
+  - "*.config.js"
   - rollup.config.js
   - node_modules
   - package*.json
diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml
new file mode 100644
index 0000000..c608298
--- /dev/null
+++ b/_data/locales/ar.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: منشور
+  category: فئة
+  tag: وسم
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: الرئيسية
+  categories: الفئات
+  tags: الوسوم
+  archives: الأرشيف
+  about: حول
+
+# the text displayed in the search bar & search results
+search:
+  hint: بحث
+  cancel: إلغاء
+  no_results: نأسف! لا يوجد نتائج.
+
+panel:
+  lastmod: المحدثة مؤخرا
+  trending_tags: الوسوم الشائعة
+  toc: محتويات
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: هذا المنشور تحت ترخيص :LICENSE_NAME بواسطة المؤلف.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: بعض الحقوق محفوظة.
+  verbose: >-
+    ما لم يذكر خلاف ذلك ، يتم ترخيص منشورات المدونة على هذا الموقع
+    بموجب ترخيص Creative Commons Attribution 4.0 International (CC BY 4.0) من قبل المؤلف.
+
+meta: باستخدام :PLATFORM السمة :THEME
+
+not_found:
+  statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
+
+notification:
+  update_found: يتوفر اصدار جديد للمحتوى.
+  update: تحديث
+
+# ----- Posts related labels -----
+
+post:
+  written_by: بواسطة
+  posted: نشّر
+  updated: حدّث
+  words: كلمات
+  pageview_measure: مشاهدات
+  read_time:
+    unit: دقيقة
+    prompt: قراءة
+  relate_posts: إقرأ المزيد
+  share: شارك
+  button:
+    next: الأجدد
+    previous: الأقدم
+    copy_code:
+      succeed: تم النسخ!
+    share_link:
+      title: أنسخ الرابط
+      succeed: تم نسخ الرابط بنجاح!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: فئة
+    plural: فئات
+  post_measure:
+    singular: منشور
+    plural: منشورات
diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml
new file mode 100644
index 0000000..3e04993
--- /dev/null
+++ b/_data/locales/bg-BG.yml
@@ -0,0 +1,81 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Публикация
+  category: Категория
+  tag: Таг
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Начало
+  categories: Категории
+  tags: Тагове
+  archives: Архив
+  about: За мен
+
+# the text displayed in the search bar & search results
+search:
+  hint: търси
+  cancel: Отмени
+  no_results: Упс! Не са намерени резултати.
+
+panel:
+  lastmod: Наскоро обновени
+  trending_tags: Популярни тагове
+  toc: Съдържание
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Тази публикация е лицензирана под :LICENSE_NAME от автора.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Някои права запазени.
+  verbose: >-
+    Освен ако не е посочено друго, публикациите в блога на този сайт са лицензирани
+    под лиценза Creative Commons Attribution 4.0 (CC BY 4.0) от автора.
+
+meta: Създадено чрез :PLATFORM и :THEME тема
+
+not_found:
+  statment: Съжалявам, но на този URL адрес няма налично съдържание.
+
+notification:
+  update_found: Налична е нова версия на съдържанието.
+  update: Обнови
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Автор
+  posted: Публикувана
+  updated: Обновена
+  words: думи
+  pageview_measure: преглеждания
+  read_time:
+    unit: мин
+    prompt: четиво
+  relate_posts: Още за четене
+  share: Споделете
+  button:
+    next: По-нови
+    previous: По-стари
+    copy_code:
+      succeed: Копирано!
+    share_link:
+      title: Копирай линк
+      succeed: Линкът е копиран успешно!
+
+# categories page
+categories:
+  category_measure:
+    singular: категория
+    plural: категории
+  post_measure:
+    singular: публикация
+    plural: публикации
diff --git a/_data/locales/cs-CZ.yml b/_data/locales/cs-CZ.yml
new file mode 100644
index 0000000..e515c08
--- /dev/null
+++ b/_data/locales/cs-CZ.yml
@@ -0,0 +1,89 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Příspěvek
+  category: Kategorie
+  tag: Štítek
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Domů
+  categories: Kategorie
+  tags: Štítky
+  archives: Archivy
+  about: O mně
+
+# the text displayed in the search bar & search results
+search:
+  hint: hledat
+  cancel: Zrušit
+  no_results: Ups! Žádný výsledek nenalezen.
+
+panel:
+  lastmod: Nedávno aktualizováno
+  trending_tags: Trendy štítky
+  toc: Obsah
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tento příspěvek je licencován pod :LICENSE_NAME autorem.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Některá práva vyhrazena.
+  verbose: >-
+    Pokud není uvedeno jinak, jsou příspěvky na tomto webu licencovány
+    pod licencí Creative Commons Attribution 4.0 International (CC BY 4.0) Licence autora.
+
+meta: Použití :PLATFORM s motivem :THEME
+
+not_found:
+  statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
+
+notification:
+  update_found: Je k dispozici nová verze obsahu.
+  update: Aktualizace
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Od
+  posted: Zveřejněno
+  updated: Aktualizováno
+  words: slova
+  pageview_measure: zhlednutí
+  read_time:
+    unit: minut
+    prompt: čtení
+  relate_posts: Další čtení
+  share: Sdílet
+  button:
+    next: Novější
+    previous: Starší
+    copy_code:
+      succeed: Zkopírováno!
+    share_link:
+      title: Kopírovat odkaz
+      succeed: Zkopírováno!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure: kategorie
+  post_measure:
+    singular: příspěvěk
+    plural: příspěvky
diff --git a/_data/locales/de-DE.yml b/_data/locales/de-DE.yml
new file mode 100644
index 0000000..6b187b4
--- /dev/null
+++ b/_data/locales/de-DE.yml
@@ -0,0 +1,87 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Eintrag
+  category: Kategorie
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Startseite
+  categories: Kategorien
+  tags: Tags
+  archives: Archiv
+  about: Über
+
+# the text displayed in the search bar & search results
+search:
+  hint: Suche
+  cancel: Abbrechen
+  no_results: Ups! Keine Einträge gefunden.
+
+panel:
+  lastmod: Kürzlich aktualisiert
+  trending_tags: Beliebte Tags
+  toc: Inhalt
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Dieser Eintrag ist vom Autor unter :LICENSE_NAME lizensiert.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Einige Rechte vorbehalten.
+  verbose: >-
+    Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0).
+
+meta: Powered by :PLATFORM with :THEME theme
+
+not_found:
+  statment: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
+
+notification:
+  update_found: Eine neue Version ist verfügbar.
+  update: Neue Version
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Von
+  posted: Veröffentlicht
+  updated: Aktualisiert
+  words: Wörter
+  pageview_measure: Aufrufe
+  read_time:
+    unit: Minuten
+    prompt: Lesezeit
+  relate_posts: Weiterlesen
+  share: Teilen
+  button:
+    next: Nächster Eintrag
+    previous: Eintrag vorher
+    copy_code:
+      succeed: Kopiert!
+    share_link:
+      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:
+    singular: Kategorie
+    plural: Kategorien
+  post_measure:
+    singular: Eintrag
+    plural: Einträge
diff --git a/_data/locales/el-GR.yml b/_data/locales/el-GR.yml
new file mode 100644
index 0000000..ab5fb0e
--- /dev/null
+++ b/_data/locales/el-GR.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Δημοσίευση
+  category: Κατηγορία
+  tag: Ετικέτα
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Home
+  categories: Κατηγορίες
+  tags: Ετικέτες
+  archives: Αρχεία
+  about: Σχετικά
+
+# the text displayed in the search bar & search results
+search:
+  hint: αναζήτηση
+  cancel: Ακύρωση
+  no_results: Oops! Κανένα αποτέλεσμα δεν βρέθηκε.
+
+panel:
+  lastmod: Σχετικά ενημερωμένα
+  trending_tags: Ετικέτες τάσης
+  toc: Περιεχόμενα
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Η δημοσίευση αυτή βρίσκεται υπο την άδεια :LICENSE_NAME Greekforce1821.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Ορισμένα δικαιώματα reserved.
+  verbose: >-
+    Εκτός αλλού ή οπουδήποτε αλλού, τα blog posts σε αυτήν την σελίδα βρίσκονται υπο την άδεια
+    Creative Commons Attribution 4.0 International (CC BY 4.0) του δημιουργού.
+
+meta: Αξιοποιώντας την :PLATFORM theme :THEME
+
+not_found:
+  statment: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
+
+notification:
+  update_found: Υπάρχει διαθέσιμη μια νέα έκδοση του περιεχομένου.
+  update: Ενημέρωση
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Από
+  posted: Δημοσιεύθηκε
+  updated: Ενημερώθηκε
+  words: λέξεις
+  pageview_measure: προβολές
+  read_time:
+    unit: Λεπτά
+    prompt: διαβάσματος
+  relate_posts: Περισσότερα
+  share: Κοινοποιήστε
+  button:
+    next: Νεότερα
+    previous: Παλαιότερα
+    copy_code:
+      succeed: Αντιγράφθηκε!
+    share_link:
+      title: Αντιγραφή συνδέσμου
+      succeed: Η διεύθυνση αντιγράφθηκε με επιτυχία!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: Κατηγορία
+    plural: Κατηγορίες
+  post_measure:
+    singular: Δημοσίευση
+    plural: Δημοσιεύσεις
diff --git a/_data/locales/en.yml b/_data/locales/en.yml
new file mode 100644
index 0000000..0dbe713
--- /dev/null
+++ b/_data/locales/en.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Category
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Home
+  categories: Categories
+  tags: Tags
+  archives: Archives
+  about: About
+
+# the text displayed in the search bar & search results
+search:
+  hint: search
+  cancel: Cancel
+  no_results: Oops! No results found.
+
+panel:
+  lastmod: Recently Updated
+  trending_tags: Trending Tags
+  toc: Contents
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: This post is licensed under :LICENSE_NAME by the author.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Some rights reserved.
+  verbose: >-
+    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 :THEME theme for :PLATFORM.
+
+not_found:
+  statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+
+notification:
+  update_found: A new version of content is available.
+  update: Update
+
+# ----- Posts related labels -----
+
+post:
+  written_by: By
+  posted: Posted
+  updated: Updated
+  words: words
+  pageview_measure: views
+  read_time:
+    unit: min
+    prompt: read
+  relate_posts: Further Reading
+  share: Share
+  button:
+    next: Newer
+    previous: Older
+    copy_code:
+      succeed: Copied!
+    share_link:
+      title: Copy link
+      succeed: Link copied successfully!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: category
+    plural: categories
+  post_measure:
+    singular: post
+    plural: posts
diff --git a/_data/locales/es-ES.yml b/_data/locales/es-ES.yml
new file mode 100644
index 0000000..5529230
--- /dev/null
+++ b/_data/locales/es-ES.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Entrada
+  category: Categoría
+  tag: Etiqueta
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Inicio
+  categories: Categorías
+  tags: Etiquetas
+  archives: Archivo
+  about: Acerca de
+
+# the text displayed in the search bar & search results
+search:
+  hint: Buscar
+  cancel: Cancelar
+  no_results: ¡Oops! No se encuentran resultados.
+
+panel:
+  lastmod: Actualizado recientemente
+  trending_tags: Etiquetas populares
+  toc: Contenido
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Esta entrada está licenciada bajo :LICENSE_NAME por el autor.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Algunos derechos reservados.
+  verbose: >-
+    Salvo que se indique explícitamente, las entradas de este blog están licenciadas
+    bajo la Creative Commons Attribution 4.0 International (CC BY 4.0) License por el autor.
+
+meta: Hecho con :PLATFORM usando el tema :THEME
+
+not_found:
+  statment: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
+
+notification:
+  update_found: Hay una nueva versión de contenido disponible.
+  update: Actualizar
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Por
+  posted: Publicado
+  updated: Actualizado
+  words: palabras
+  pageview_measure: visitas
+  read_time:
+    unit: min
+    prompt: " de lectura"
+  relate_posts: Lecturas adicionales
+  share: Compartir
+  button:
+    next: Nuevo
+    previous: Anterior
+    copy_code:
+      succeed: ¡Copiado!
+    share_link:
+      title: Copiar enlace
+      succeed: ¡Enlace copiado!
+
+# categories page
+categories:
+  category_measure: categorias
+  post_measure: entradas
diff --git a/_data/locales/fi-FI.yml b/_data/locales/fi-FI.yml
new file mode 100644
index 0000000..c817d2b
--- /dev/null
+++ b/_data/locales/fi-FI.yml
@@ -0,0 +1,90 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Julkaisu
+  category: Kateogoria
+  tag: Tagi
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Koti
+  categories: Kateogoriat
+  tags: Tagit
+  archives: Arkistot
+  about: Minusta
+
+# the text displayed in the search bar & search results
+search:
+  hint: etsi
+  cancel: Peruuta
+  no_results: Hups! Ei tuloksia.
+
+panel:
+  lastmod: Viimeksi päivitetty
+  trending_tags: Trendaavat tagit
+  toc: Sisältö
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tämä julkaisu on lisenssoitu :LICENSE_NAME julkaisijan toimesta.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Jotkut oikeudet pidätetään.
+  verbose: >-
+    Paitsi jos erikseen mainitaan on kaikki sisältö Creative Commons Attribution 4.0 International (CC BY 4.0) Lisensoitu kirjoittajan toimesta.
+
+meta: Käytetään :PLATFORM iä Teema :THEME
+
+not_found:
+  statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
+
+notification:
+  update_found: Uusi versio sisällöstä on saatavilla.
+  update: Päivitä
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Kirjoittaja
+  posted: Julkaistu
+  updated: Päivitetty
+  words: sanaa
+  pageview_measure: katselukertoja
+  read_time:
+    unit: minuuttia
+    prompt: lukea
+  relate_posts: Jatka lukemista
+  share: Jaa
+  button:
+    next: Uudempi
+    previous: Vanhempi
+    copy_code:
+      succeed: Kopiotu!
+    share_link:
+      title: Kopioi linkki
+      succeed: Linkki kopioitu onnistuneesti!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: kategoria
+    plural: kategoriat
+  post_measure:
+    singular: julkaisu
+    plural: julkaisut
diff --git a/_data/locales/fr-FR.yml b/_data/locales/fr-FR.yml
new file mode 100644
index 0000000..72b034d
--- /dev/null
+++ b/_data/locales/fr-FR.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Catégorie
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Accueil
+  categories: Catégories
+  tags: Tags
+  archives: Archives
+  about: A propos de
+
+# the text displayed in the search bar & search results
+search:
+  hint: recherche
+  cancel: Annuler
+  no_results: Oups ! Aucun résultat trouvé.
+
+panel:
+  lastmod: Récemment mis à jour
+  trending_tags: Tags tendance
+  toc: Contenu
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Cet article est sous licence :LICENSE_NAME par l'auteur.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Certains droits réservés.
+  verbose: >-
+    Sauf mention contraire, les articles de ce site sont publiés sous licence
+    sous la licence Creative Commons Attribution 4.0 International (CC BY 4.0) par l'auteur.
+
+meta: Propulsé par :PLATFORM avec le thème :THEME
+
+not_found:
+  statment: Désolé, nous avons égaré cette URL ou elle pointe vers quelque chose qui n'existe pas.
+
+notification:
+  update_found: Une nouvelle version du contenu est disponible.
+  update: Mise à jour
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Par
+  posted: Posté
+  updated: Mis à jour
+  words: mots
+  pageview_measure: vues
+  read_time:
+    unit: min
+    prompt: lire
+  relate_posts: Autres lectures
+  share: Partager
+  button:
+    next: Plus récent
+    previous: Plus ancien
+    copy_code:
+      succeed: Copié !
+    share_link:
+      title: Copier le lien
+      succeed: Lien copié avec succès !
+
+# categories page
+categories:
+  category_measure: catégories
+  post_measure: posts
diff --git a/_data/locales/hu-HU.yml b/_data/locales/hu-HU.yml
new file mode 100644
index 0000000..b09f2cd
--- /dev/null
+++ b/_data/locales/hu-HU.yml
@@ -0,0 +1,79 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Bejegyzés
+  category: Kategória
+  tag: Címke
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Kezdőlap
+  categories: Kategóriák
+  tags: Címkék
+  archives: Archívum
+  about: Rólam
+
+# the text displayed in the search bar & search results
+search:
+  hint: keresés
+  cancel: Mégse
+  no_results: Oops! Nincs találat a keresésre.
+
+panel:
+  lastmod: Legutóbb frissítve
+  trending_tags: Népszerű Címkék
+  toc: Tartalom
+  links: Blog linkek
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: A bejegyzés :LICENSE_NAME licenccel rendelkezik.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Néhány jog fenntartva.
+  verbose: >-
+    Az oldalon található tartalmak
+    Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
+    hacsak másképp nincs jelezve.
+
+meta: Készítve :PLATFORM motorral :THEME témával
+
+not_found:
+  statment: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
+
+notification:
+  update_found: Elérhető a tartalom új verziója.
+  update: Frissítés
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Szerző
+  posted: Létrehozva
+  updated: Frissítve
+  words: szó
+  pageview_measure: látogató
+  read_time:
+    unit: perc
+    prompt: elolvasni
+  relate_posts: További olvasnivaló
+  share: Megosztás
+  button:
+    next: Újabb
+    previous: Régebbi
+    copy_code:
+      succeed: Másolva!
+    share_link:
+      title: Link másolása
+      succeed: Link sikeresen másolva!
+
+# categories page
+categories:
+  category_measure: kategória
+  post_measure: bejegyzés
diff --git a/_data/locales/id-ID.yml b/_data/locales/id-ID.yml
new file mode 100644
index 0000000..29ad156
--- /dev/null
+++ b/_data/locales/id-ID.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Postingan
+  category: Kategori
+  tag: Tagar
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Beranda
+  categories: Kategori
+  tags: Tagar
+  archives: Arsip
+  about: Tentang
+
+# the text displayed in the search bar & search results
+search:
+  hint: Cari
+  cancel: Batal
+  no_results: Ups! Tidak ada hasil yang ditemukan.
+
+panel:
+  lastmod: Postingan Terbaru
+  trending_tags: Tagar Terpopuler
+  toc: Konten
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Postingan ini dilisensikan di bawah :LICENSE_NAME oleh penulis.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Sebagian konten dilindungi.
+  verbose: >-
+    Kecuali jika dinyatakan, Postingan blog di situs ini dilisensikan
+    di bawah Lisensi Creative Commons Attribution 4.0 International (CC BY 4.0) oleh penulis.
+
+meta: Didukung oleh :PLATFORM dengan tema :THEME
+
+not_found:
+  statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
+
+notification:
+  update_found: Versi konten baru tersedia.
+  update: Perbarui
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Oleh
+  posted: Diterbitkan
+  updated: Diperbarui
+  words: kata
+  pageview_measure: dilihat
+  read_time:
+    unit: menit
+    prompt: baca
+  relate_posts: Postingan Lainya
+  share: Bagikan
+  button:
+    next: Terbaru
+    previous: Terlama
+    copy_code:
+      succeed: Disalin!
+    share_link:
+      title: Salin tautan
+      succeed: Tautan berhasil disalin!
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: Postingan
diff --git a/_data/locales/it-IT.yml b/_data/locales/it-IT.yml
new file mode 100644
index 0000000..cf7b691
--- /dev/null
+++ b/_data/locales/it-IT.yml
@@ -0,0 +1,90 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categoria
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Pagina principale
+  categories: Categorie
+  tags: Tags
+  archives: Archivio
+  about: Informazioni
+
+# the text displayed in the search bar & search results
+search:
+  hint: ricerca
+  cancel: Cancella
+  no_results: Oops! La ricerca non ha fornito risultati.
+
+panel:
+  lastmod: Aggiornati recentemente
+  trending_tags: Tags più cliccati
+  toc: Contenuti
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Questo post è sotto licenza :LICENSE_NAME a nome dell'autore.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alcuni diritti riservati.
+  verbose: >-
+    Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto
+    i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0).
+
+meta: Servizio offerto da :PLATFORM con tema :THEME
+not_found:
+  statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
+
+notification:
+  update_found: Nuova versione del contenuto disponibile.
+  update: Aggiornamento
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Da
+  posted: Postato
+  updated: Aggiornato
+  words: parole
+  pageview_measure: visioni
+  read_time:
+    unit: min
+    prompt: lettura
+  relate_posts: Continua a leggere
+  share: Condividi
+  button:
+    next: Più recenti
+    previous: Meno recenti
+    copy_code:
+      succeed: Copiato!
+    share_link:
+      title: Copia link
+      succeed: Link copiato con successo!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: categoria
+    plural: categorie
+  post_measure:
+    singular: post
+    plural: posts
diff --git a/_data/locales/ko-KR.yml b/_data/locales/ko-KR.yml
new file mode 100644
index 0000000..4dd221b
--- /dev/null
+++ b/_data/locales/ko-KR.yml
@@ -0,0 +1,84 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 포스트
+  category: 카테고리
+  tag: 태그
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 홈
+  categories: 카테고리
+  tags: 태그
+  archives: 아카이브
+  about: 정보
+
+# the text displayed in the search bar & search results
+search:
+  hint: 검색
+  cancel: 취소
+  no_results: 검색 결과가 없습니다.
+
+panel:
+  lastmod: 최근 업데이트
+  trending_tags: 인기 태그
+  toc: 바로가기
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 이 기사는 저작권자의 :LICENSE_NAME 라이센스를 따릅니다.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 일부 권리 보유
+  verbose: >-
+    명시되지 않는 한 이 사이트의 블로그 게시물은 작성자의
+    Creative Commons Attribution 4.0 International(CC BY 4.0) 라이선스에 따라 사용이 허가되었습니다.
+
+meta: Powered by :PLATFORM with :THEME theme
+
+not_found:
+  statment: 해당 URL은 존재하지 않습니다.
+
+notification:
+  update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
+  update: 업데이트
+
+# ----- Posts related labels -----
+
+post:
+  written_by: By
+  posted: 게시
+  updated: 업데이트
+  words: 단어
+  pageview_measure: 조회
+  read_time:
+    unit: 분
+    prompt: 읽는 시간
+  relate_posts: 관련된 글
+  share: 공유하기
+  button:
+    next: 다음 글
+    previous: 이전 글
+    copy_code:
+      succeed: 복사되었습니다!
+    share_link:
+      title: 링크 복사하기
+      succeed: 링크가 복사되었습니다!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
+
+# categories page
+categories:
+  category_measure: 카테고리
+  post_measure: 포스트
diff --git a/_data/locales/my-MM.yml b/_data/locales/my-MM.yml
new file mode 100644
index 0000000..98848d5
--- /dev/null
+++ b/_data/locales/my-MM.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: ပို့စ်
+  category: ကဏ္ဍ
+  tag: နာမ(တက်ဂ်)
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: အဓိကစာမျက်နှာ
+  categories: ကဏ္ဍများ
+  tags: နာမ(တက်ဂ်)များ
+  archives: မှတ်တမ်း​တိုက်
+  about: အကြောင်းအရာ
+
+# the text displayed in the search bar & search results
+search:
+  hint: ရှာဖွေမည်
+  cancel: ဖျက်သိမ်းမည်
+  no_results: အိုး! ဘာမှမရှိပါ
+
+panel:
+  lastmod: မကြာသေးမီကမွမ်းမံထားသည်
+  trending_tags: ခေတ်စားနေသည့်တက်ဂ်များ
+  toc: အကြောင်းအရာများ
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: ဤပို့စ်သည်စာရေးသူ၏ :LICENSE_NAME လိုင်စင်ရထားသည်။
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: မူပိုင်ခွင့်အချို့ကို လက်ဝယ်ထားသည်။
+  verbose: >-
+    အခြားမှတ်သားထားချက်များမှလွဲ၍ ဤဆိုက်ရှိ ဘလော့ဂ်ပို့စ်များသည် စာရေးသူ၏
+    Creative Commons Attribution 4.0 International (CC BY 4.0) အောက်တွင် လိုင်စင်ရထားပါသည်။
+
+meta: Powered by :PLATFORM with :THEME theme
+
+not_found:
+  statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
+
+notification:
+  update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
+  update: အပ်ဒိတ်
+
+# ----- Posts related labels -----
+
+post:
+  written_by: ကရေးသားခဲ့သည်။
+  posted: တင်ထားခဲ့သည်။
+  updated: မွမ်းမံထားခဲ့သည်။
+  words: စကားလုံးများ
+  pageview_measure: အမြင်များ
+  read_time:
+    unit: မိနစ်
+    prompt: ဖတ်ပါမည်
+  relate_posts: နောက်ထပ်ဖတ်ရန်
+  share: မျှဝေရန်
+  button:
+    next: အသစ်များ
+    previous: အဟောင်းများ
+    copy_code:
+      succeed: ကူးယူလိုက်ပြီ။
+    share_link:
+      title: လင့်ခ်ကို ကူးယူရန်
+      succeed: လင့်ခ်ကို ကူးယူလိုက်ပြီ။
+
+# categories page
+categories:
+  category_measure: ကဏ္ဍများ
+  post_measure: ပို့စ်များ
diff --git a/_data/locales/pt-BR.yml b/_data/locales/pt-BR.yml
new file mode 100644
index 0000000..4cef833
--- /dev/null
+++ b/_data/locales/pt-BR.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categoria
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Home
+  categories: Categorias
+  tags: Tags
+  archives: Arquivos
+  about: Sobre
+
+# the text displayed in the search bar & search results
+search:
+  hint: Buscar
+  cancel: Cancelar
+  no_results: Oops! Nenhum resultado encontrado.
+
+panel:
+  lastmod: Atualizados recentemente
+  trending_tags: Trending Tags
+  toc: Conteúdo
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Esta postagem está licenciada sob :LICENSE_NAME pelo autor.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alguns direitos reservados.
+  verbose: >-
+    Exceto onde indicado de outra forma, as postagens do blog neste site são licenciadas sob a
+    Creative Commons Attribution 4.0 International (CC BY 4.0) License pelo autor.
+
+meta: Feito com :PLATFORM usando o tema :THEME
+
+not_found:
+  statment: Desculpe, a página não foi encontrada.
+
+notification:
+  update_found: Uma nova versão do conteúdo está disponível.
+  update: atualização
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Por
+  posted: Postado em
+  updated: Atualizado
+  words: palavras
+  pageview_measure: visualizações
+  read_time:
+    unit: min
+    prompt: " de leitura"
+  relate_posts: Leia também
+  share: Compartilhar
+  button:
+    next: Próximo
+    previous: Anterior
+    copy_code:
+      succeed: Copiado!
+    share_link:
+      title: Copie o link
+      succeed: Link copiado com sucesso!
+
+# categories page
+categories:
+  category_measure: categorias
+  post_measure: posts
diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml
new file mode 100644
index 0000000..185407c
--- /dev/null
+++ b/_data/locales/ru-RU.yml
@@ -0,0 +1,87 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Пост
+  category: Категория
+  tag: Тег
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Главная
+  categories: Категории
+  tags: Теги
+  archives: Архив
+  about: О сайте
+
+# the text displayed in the search bar & search results
+search:
+  hint: поиск
+  cancel: Отмена
+  no_results: Упс! Ничего не найдено.
+
+panel:
+  lastmod: Недавно обновлено
+  trending_tags: Популярные теги
+  toc: Содержание
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Авторский пост защищен лицензией :LICENSE_NAME.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Некоторые права защищены.
+  verbose: >-
+    Если не указано иное, авторские посты на этом сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0).
+
+meta: Использует тему :THEME для :PLATFORM
+
+not_found:
+  statment: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
+
+notification:
+  update_found: Доступна новая версия контента.
+  update: Обновить
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Автор
+  posted: Опубликовано
+  updated: Обновлено
+  words: слов
+  pageview_measure: просмотров
+  read_time:
+    unit: мин.
+    prompt: чтения
+  relate_posts: Похожие посты
+  share: Поделиться
+  button:
+    next: Следующий пост
+    previous: Предыдущий пост
+    copy_code:
+      succeed: Скопировано!
+    share_link:
+      title: Скопировать ссылку
+      succeed: Ссылка успешно скопирована!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%d.%m.%Y"
+    dayjs: "DD.MM.YYYY"
+    
+# categories page
+categories:
+  category_measure:
+    singular: категория
+    plural: категории
+  post_measure:
+    singular: пост
+    plural: посты
diff --git a/_data/locales/sl-SI.yml b/_data/locales/sl-SI.yml
new file mode 100644
index 0000000..7ab18b1
--- /dev/null
+++ b/_data/locales/sl-SI.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Objava #Post
+  category: Kategorija #Category
+  tag: Oznaka #Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Domov #Home
+  categories: Kategorije #Categories
+  tags: Oznake #Tags
+  archives: Arhiv #Archives
+  about: O meni #About
+
+# the text displayed in the search bar & search results
+search:
+  hint: išči #search
+  cancel: Prekliči #Cancel
+  no_results: Ups! Vsebina ni bila najdena #Oops! No results found.
+
+panel:
+  lastmod: Nedavno Posodobljeno #Recently Updated
+  trending_tags: Priljubljene Oznake #Trending Tags
+  toc: Vsebina #Contents
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Ta objava je licencirana pod :LICENCE_NAME s strani avtorja. #This post is licensed under :LICENSE_NAME by the author.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Nekatere pravice pridržane. #Some rights reserved.
+  verbose: >-
+    Razen kjer navedeno drugače, vse objave spletnega dnevnika so licencirane
+    pod Creative Commons Attribution 4.0 International (CC BY 4.0) s strani avtorja.
+
+meta: Uporabljena :PLATFORM tema :THEME #Using the :PLATFORM theme :THEME
+
+not_found:
+  statment: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
+
+notification:
+  update_found: Novejša različica vsebine je na voljo. #A new version of content is available.
+  update: Posodobi #Update
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Od #By
+  posted: Objavljeno #Posted
+  updated: Posodobljeno #Updated
+  words: besede #words
+  pageview_measure: ogledi #views
+  read_time:
+    unit: min
+    prompt: beri #read
+  relate_posts: Nadaljnje branje #Further Reading
+  share: Deli #Share
+  button:
+    next: Novejše #Newer
+    previous: Starejše #Older
+    copy_code:
+      succeed: Kopirano! #Copied!
+    share_link:
+      title: Kopiraj povezavo #Copy link
+      succeed: Povezava uspešno kopirana! #Link copied successfully!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%e %b, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: kategorija #category
+    plural: kategorije #categories
+  post_measure:
+    singular: objava #post
+    plural: objave #posts
diff --git a/_data/locales/sv-SE.yml b/_data/locales/sv-SE.yml
new file mode 100644
index 0000000..7ec2ee2
--- /dev/null
+++ b/_data/locales/sv-SE.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Inlägg #Post
+  category: Kategori #Category
+  tag: Tagga #Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Hem #Home
+  categories: Kategorier #Categories
+  tags: Taggar #Tags
+  archives: Arkiv #Archives
+  about: Om #About
+
+# the text displayed in the search bar & search results
+search:
+  hint: sök
+  cancel: Avbryt
+  no_results: Hoppsan! Hittade inga sökträffar.
+
+panel:
+  lastmod: Senast uppdaterad
+  trending_tags: Trendande taggar
+  toc: Innehåll
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Den här posten är publicerad under licensen :LICENSE_NAME av författaren.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Vissa rättigheter är reserverade.
+  verbose: >-
+    Om inte annat anges är blogginläggen på denna webbplats licensierade
+     under Creative Commons Attribution 4.0 International (CC BY 4.0) av författaren.
+
+meta: Byggd med :PLATFORM och temat :THEME
+
+not_found:
+  statment: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns.
+
+notification:
+  update_found: Det finns en ny version av innehållet.
+  update: Uppdatera sidan
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Av
+  posted: Postad
+  updated: Uppdaterad
+  words: ord
+  pageview_measure: visningar
+  read_time:
+    unit: min
+    prompt: läsning
+  relate_posts: Mer läsning
+  share: Dela
+  button:
+    next: Nyare
+    previous: Äldre
+    copy_code:
+      succeed: Kopierat!
+    share_link:
+      title: Kopiera länk
+      succeed: Länken har kopierats!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: kategori
+    plural: kategorier
+  post_measure:
+    singular: inlägg
+    plural: inlägg
diff --git a/_data/locales/th.yml b/_data/locales/th.yml
new file mode 100644
index 0000000..22cb00a
--- /dev/null
+++ b/_data/locales/th.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: โพสต์
+  category: หมวดหมู่
+  tag: แท็ก
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: หน้าแรก
+  categories: หมวดหมู่
+  tags: แท็ก
+  archives: คลังเก็บ
+  about: เกี่ยวกับ
+
+# the text displayed in the search bar & search results
+search:
+  hint: ค้นหา
+  cancel: ยกเลิก
+  no_results: โอ๊ะ! ไม่พบผลลัพธ์
+
+panel:
+  lastmod: อัปเดตล่าสุด
+  trending_tags: แท็กยอดนิยม
+  toc: เนื้อหา
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: โพสต์นี้อยู่ภายใต้การอนุญาต :LICENSE_NAME โดยผู้เขียน
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: สงวนลิขสิทธิ์เป็นบางส่วน
+  verbose: >-
+    เว้นแต่ว่าจะระบุเป็นอย่างอื่น โพสต์บนเว็บไซต์นี้อยู่ภายใต้
+    สัญญาอนุญาตครีเอทีฟคอมมอนส์แบบ 4.0 นานาชาติ (CC BY 4.0) โดยผู้เขียน
+
+meta: กำลังใช้ธีมของ :PLATFORM ชื่อ :THEME
+
+not_found:
+  statment: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
+
+notification:
+  update_found: มีเวอร์ชันใหม่ของเนื้อหา
+  update: อัปเดต
+
+# ----- Posts related labels -----
+
+post:
+  written_by: โดย
+  posted: โพสต์เมื่อ
+  updated: อัปเดตเมื่อ
+  words: คำ
+  pageview_measure: ครั้ง
+  read_time:
+    unit: นาที
+    prompt: อ่าน
+  relate_posts: อ่านต่อ
+  share: แชร์
+  button:
+    next: ใหม่กว่า
+    previous: เก่ากว่า
+    copy_code:
+      succeed: คัดลอกแล้ว!
+    share_link:
+      title: คัดลอกลิงก์
+      succeed: คัดลอกลิงก์เรียบร้อยแล้ว!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: หมวดหมู่
+    plural: หมวดหมู่
+  post_measure:
+    singular: โพสต์
+    plural: โพสต์
diff --git a/_data/locales/tr-TR.yml b/_data/locales/tr-TR.yml
new file mode 100644
index 0000000..50d8110
--- /dev/null
+++ b/_data/locales/tr-TR.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Gönderi
+  category: Kategori
+  tag: Etiket
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Ana Sayfa
+  categories: Kategoriler
+  tags: Etiketler
+  archives: Arşiv
+  about: Hakkında
+
+# the text displayed in the search bar & search results
+search:
+  hint: Ara...
+  cancel: İptal
+  no_results: Hop! Öyle bir şey bulamadım.
+
+panel:
+  lastmod: Son Güncellenenler
+  trending_tags: Yükselen Etiketler
+  toc: İçindekiler
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Bu gönderi :LICENSE_NAME lisansı altındadır.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/deed.tr
+
+  # Displayed in the footer
+  brief: Bazı hakları saklıdır.
+  verbose: >-
+    Aksi belirtilmediği sürece, bu sitedeki gönderiler Creative Commons Atıf 4.0 Uluslararası (CC BY 4.0) Lisansı altındadır.
+    Kısaca sayfa linkini vererek değiştirebilir / paylaşabilirsiniz.
+
+meta: :PLATFORM ve :THEME teması
+
+not_found:
+  statment: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
+
+notification:
+  update_found: İçeriğin yeni bir sürümü mevcut.
+  update: Güncelle
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Yazan
+  posted: Gönderim
+  updated: Güncelleme
+  words: sözcük
+  pageview_measure: görüntülenme
+  read_time:
+    unit: dakikada
+    prompt: okunabilir
+  relate_posts: Benzer Gönderiler
+  share: Paylaş
+  button:
+    next: İleri
+    previous: Geri
+    copy_code:
+      succeed: Kopyalandı.
+    share_link:
+      title: Linki kopyala
+      succeed: Link kopyalandı.
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: gönderi
diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml
new file mode 100644
index 0000000..b605073
--- /dev/null
+++ b/_data/locales/uk-UA.yml
@@ -0,0 +1,77 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Публікація
+  category: Категорія
+  tag: Тег
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Домашня сторінка
+  categories: Категорії
+  tags: Теги
+  archives: Архів
+  about: Про сайт
+
+# the text displayed in the search bar & search results
+search:
+  hint: пошук
+  cancel: Скасувати
+  no_results: Ох! Нічого не знайдено.
+
+panel:
+  lastmod: Нещодавно оновлено
+  trending_tags: Популярні теги
+  toc: Зміст
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Публікація захищена ліцензією :LICENSE_NAME.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Деякі права захищено.
+  verbose: >-
+    Публікації на сайті захищено ліцензією Creative Commons Attribution 4.0 International (CC BY 4.0),
+    якщо інше не вказано в тексті.
+
+meta: Powered by :PLATFORM with :THEME theme
+
+not_found:
+  statment: Вибачте, це посилання вказує на ресурс, що не існує.
+
+notification:
+  update_found: Доступна нова версія вмісту.
+  update: Оновлення
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Автор
+  posted: Час публікації
+  updated: Оновлено
+  words: слів
+  pageview_measure: переглядів
+  read_time:
+    unit: хвилин
+    prompt: читання
+  relate_posts: Вас також може зацікавити
+  share: Поділитися
+  button:
+    next: Попередня публікація
+    previous: Наступна публікація
+    copy_code:
+      succeed: Успішно скопійовано!
+    share_link:
+      title: Скопіювати посилання
+      succeed: Посилання успішно скопійовано!
+
+# categories page
+categories:
+  category_measure: категорії
+  post_measure: публікації
diff --git a/_data/locales/vi-VN.yml b/_data/locales/vi-VN.yml
new file mode 100644
index 0000000..617431a
--- /dev/null
+++ b/_data/locales/vi-VN.yml
@@ -0,0 +1,76 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Bài viết
+  category: Danh mục
+  tag: Thẻ
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Trang chủ
+  categories: Các danh mục
+  tags: Các thẻ
+  archives: Lưu trữ
+  about: Giới thiệu
+
+# the text displayed in the search bar & search results
+search:
+  hint: tìm kiếm
+  cancel: Hủy
+  no_results: Không có kết quả tìm kiếm.
+
+panel:
+  lastmod: Mới cập nhật
+  trending_tags: Các thẻ thịnh hành
+  toc: Mục lục
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Bài viết này được cấp phép bởi tác giả theo giấy phép :LICENSE_NAME.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Một số quyền được bảo lưu.
+  verbose: >-
+    Trừ khi có ghi chú khác, các bài viết đăng trên trang này được cấp phép bởi tác giả theo giấy phép Creative Commons Attribution 4.0 International (CC BY 4.0).
+
+meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME
+
+not_found:
+  statment: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
+
+notification:
+  update_found: Đã có phiên bản mới của nội dung.
+  update: Cập nhật
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Viết bởi
+  posted: Đăng lúc
+  updated: Cập nhật lúc
+  words: từ
+  pageview_measure: lượt xem
+  read_time:
+    unit: phút
+    prompt: đọc
+  relate_posts: Bài viết liên quan
+  share: Chia sẻ
+  button:
+    next: Mới hơn
+    previous: Cũ hơn
+    copy_code:
+      succeed: Đã sao chép!
+    share_link:
+      title: Sao chép đường dẫn
+      succeed: Đã sao chép đường dẫn thành công!
+
+# categories page
+categories:
+  category_measure: danh mục
+  post_measure: bài viết
diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml
new file mode 100644
index 0000000..f828134
--- /dev/null
+++ b/_data/locales/zh-CN.yml
@@ -0,0 +1,83 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 文章
+  category: 分类
+  tag: 标签
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 首页
+  categories: 分类
+  tags: 标签
+  archives: 归档
+  about: 关于
+
+# the text displayed in the search bar & search results
+search:
+  hint: 搜索
+  cancel: 取消
+  no_results: 搜索结果为空
+
+panel:
+  lastmod: 最近更新
+  trending_tags: 热门标签
+  toc: 文章内容
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 本文由作者按照 :LICENSE_NAME 进行授权
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 保留部分权利。
+  verbose: >-
+    除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。
+
+meta: 本站采用 :PLATFORM 主题 :THEME
+
+not_found:
+  statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
+
+notification:
+  update_found: 发现新版本的内容。
+  update: 更新
+
+# ----- Posts related labels -----
+
+post:
+  written_by: 作者
+  posted: 发表于
+  updated: 更新于
+  words: 字
+  pageview_measure: 次浏览
+  read_time:
+    unit: 分钟
+    prompt: 阅读
+  relate_posts: 相关文章
+  share: 分享
+  button:
+    next: 下一篇
+    previous: 上一篇
+    copy_code:
+      succeed: 已复制！
+    share_link:
+      title: 分享链接
+      succeed: 链接已复制！
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
+
+# categories page
+categories:
+  category_measure: 个分类
+  post_measure: 篇文章
diff --git a/_data/locales/zh-TW.yml b/_data/locales/zh-TW.yml
new file mode 100644
index 0000000..911253b
--- /dev/null
+++ b/_data/locales/zh-TW.yml
@@ -0,0 +1,83 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 文章
+  category: 分類
+  tag: 標籤
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 首頁
+  categories: 分類
+  tags: 標籤
+  archives: 封存
+  about: 關於
+
+# the text displayed in the search bar & search results
+search:
+  hint: 搜尋
+  cancel: 取消
+  no_results: 沒有搜尋結果
+
+panel:
+  lastmod: 最近更新
+  trending_tags: 熱門標籤
+  toc: 文章摘要
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 本文章以 :LICENSE_NAME 授權
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 保留部份權利。
+  verbose: >-
+    除非另有說明，否則本網誌的文章均由作者按照姓名標示 4.0 國際 (CC BY 4.0) 授權條款進行授權。
+
+meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題
+
+not_found:
+  statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
+
+notification:
+  update_found: 發現新版本更新。
+  update: 更新
+
+# ----- Posts related labels -----
+
+post:
+  written_by: 作者
+  posted: 發布於
+  updated: 更新於
+  words: 字
+  pageview_measure: 次瀏覽
+  read_time:
+    unit: 分鐘
+    prompt: 閱讀
+  relate_posts: 相關文章
+  share: 分享
+  button:
+    next: 下一篇
+    previous: 上一篇
+    copy_code:
+      succeed: 已複製！
+    share_link:
+      title: 分享連結
+      succeed: 已複製連結！
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
+
+# categories page
+categories:
+  category_measure: 個分類
+  post_measure: 篇文章
diff --git a/_data/media.yml b/_data/media.yml
new file mode 100644
index 0000000..9cd69b4
--- /dev/null
+++ b/_data/media.yml
@@ -0,0 +1,18 @@
+- extension: mp3
+  mime_type: mpeg
+- extension: mov
+  mime_type: quicktime
+- extension: avi
+  mime_type: x-msvideo
+- extension: mkv
+  mime_type: x-matroska
+- extension: ogv
+  mime_type: ogg
+- extension: weba
+  mime_type: webm
+- extension: 3gp
+  mime_type: 3gpp
+- extension: 3g2
+  mime_type: 3gpp2
+- extension: mid
+  mime_type: midi
diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml
new file mode 100644
index 0000000..9027e6e
--- /dev/null
+++ b/_data/origin/basic.yml
@@ -0,0 +1,39 @@
+# fonts
+
+webfonts: /assets/lib/fonts/main.css
+
+# Libraries
+
+toc:
+  css: /assets/lib/tocbot/tocbot.min.css
+  js: /assets/lib/tocbot/tocbot.min.js
+
+fontawesome:
+  css: /assets/lib/fontawesome-free/css/all.min.css
+
+search:
+  js: /assets/lib/simple-jekyll-search/simple-jekyll-search.min.js
+
+mermaid:
+  js: /assets/lib/mermaid/mermaid.min.js
+
+dayjs:
+  js:
+    common: /assets/lib/dayjs/dayjs.min.js
+    locale: /assets/lib/dayjs/locale/en.min.js
+    relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
+    localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
+
+glightbox:
+  css: /assets/lib/glightbox/glightbox.min.css
+  js: /assets/lib/glightbox/glightbox.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
+
+mathjax:
+  js: /assets/lib/mathjax/tex-chtml.js
diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml
new file mode 100644
index 0000000..abedb6c
--- /dev/null
+++ b/_data/origin/cors.yml
@@ -0,0 +1,54 @@
+# Resource Hints
+resource_hints:
+  - url: https://fonts.googleapis.com
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
+  - url: https://fonts.gstatic.com
+    links:
+      - rel: preconnect
+        opts: [crossorigin]
+      - rel: dns-prefetch
+  - url: https://cdn.jsdelivr.net
+    links:
+      - rel: preconnect
+      - rel: dns-prefetch
+
+# Web Fonts
+webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+
+# Libraries
+
+toc:
+  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.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.8.0/dist/mermaid.min.js
+
+dayjs:
+  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
+
+glightbox:
+  css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js
+
+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
+
+mathjax:
+  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js
diff --git a/_data/share.yml b/_data/share.yml
index 80c5eca..b1d077d 100644
--- a/_data/share.yml
+++ b/_data/share.yml
@@ -3,7 +3,7 @@
 
 platforms:
   - type: Twitter
-    icon: "fab fa-twitter"
+    icon: "fa-brands fa-square-x-twitter"
     link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
 
   - type: Facebook
@@ -16,10 +16,23 @@ platforms:
 
   # Uncomment below if you need to.
   #
-  - type: Linkedin
-    icon: "fab fa-linkedin"
-    link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
+  # - type: Linkedin
+  #   icon: "fab fa-linkedin"
+  #   link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"
-  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #   link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #
+  # - type: Mastodon
+  #   icon: "fa-brands fa-mastodon"
+  #   # See: https://github.com/justinribeiro/share-to-mastodon#properties
+  #   instances:
+  #     - label: mastodon.social
+  #       link: "https://mastodon.social/"
+  #     - label: mastodon.online
+  #       link: "https://mastodon.online/"
+  #     - label: fosstodon.org
+  #       link: "https://fosstodon.org/"
+  #     - label: photog.social
+  #       link: "https://photog.social/"
diff --git a/_includes/analytics/cloudflare.html b/_includes/analytics/cloudflare.html
new file mode 100644
index 0000000..1eeb1a9
--- /dev/null
+++ b/_includes/analytics/cloudflare.html
@@ -0,0 +1,7 @@
+<!-- Cloudflare Web Analytics -->
+<script
+  defer
+  src="https://static.cloudflareinsights.com/beacon.min.js"
+  data-cf-beacon='{"token": "{{ site.analytics.cloudflare.id }}"}'
+></script>
+<!-- End Cloudflare Web Analytics -->
diff --git a/_includes/analytics/goatcounter.html b/_includes/analytics/goatcounter.html
new file mode 100644
index 0000000..3867fdb
--- /dev/null
+++ b/_includes/analytics/goatcounter.html
@@ -0,0 +1,6 @@
+<!-- GoatCounter -->
+<script
+  async
+  src="https://gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
+></script>
diff --git a/_includes/analytics/google.html b/_includes/analytics/google.html
new file mode 100644
index 0000000..d0aac65
--- /dev/null
+++ b/_includes/analytics/google.html
@@ -0,0 +1,13 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function (event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.analytics.google.id }}');
+  });
+</script>
diff --git a/_includes/analytics/matomo.html b/_includes/analytics/matomo.html
new file mode 100644
index 0000000..72b2c46
--- /dev/null
+++ b/_includes/analytics/matomo.html
@@ -0,0 +1,14 @@
+<!-- Matomo -->
+<script type="text/javascript">
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//{{ site.analytics.matomo.domain }}/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', {{ site.analytics.matomo.id }}]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->
diff --git a/_includes/analytics/umami.html b/_includes/analytics/umami.html
new file mode 100644
index 0000000..bfcb1d0
--- /dev/null
+++ b/_includes/analytics/umami.html
@@ -0,0 +1,6 @@
+<!-- Umami -->
+<script
+  defer
+  src="{{ site.analytics.umami.domain }}/script.js"
+  data-website-id="{{ site.analytics.umami.id }}"
+></script>
diff --git a/_includes/comments.html b/_includes/comments.html
new file mode 100644
index 0000000..fef135f
--- /dev/null
+++ b/_includes/comments.html
@@ -0,0 +1,5 @@
+<!-- The comments switcher -->
+{% if page.comments and site.comments.provider %}
+  {% capture path %}comments/{{ site.comments.provider }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}
diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
new file mode 100644
index 0000000..2b889a4
--- /dev/null
+++ b/_includes/comments/disqus.html
@@ -0,0 +1,50 @@
+<!-- The Disqus lazy loading. -->
+
+<div id="disqus_thread">
+  <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+</div>
+
+<script type="text/javascript">
+  var disqus_config = function () {
+    this.page.url = '{{ page.url | absolute_url }}';
+    this.page.identifier = '{{ page.url }}';
+  };
+
+  {%- comment -%} Lazy loading {%- endcomment -%}
+  var disqus_observer = new IntersectionObserver(
+    function (entries) {
+      if (entries[0].isIntersecting) {
+        (function () {
+          var d = document,
+            s = d.createElement('script');
+          s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+          s.setAttribute('data-timestamp', +new Date());
+          (d.head || d.body).appendChild(s);
+        })();
+
+        disqus_observer.disconnect();
+      }
+    },
+    { threshold: [0] }
+  );
+
+  disqus_observer.observe(document.getElementById('disqus_thread'));
+
+  {%- comment -%} Auto switch theme {%- endcomment -%}
+  function reloadDisqus() {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
+      if (typeof DISQUS === 'undefined') {
+        return;
+      }
+
+      if (document.readyState == 'complete') {
+        DISQUS.reset({ reload: true, config: disqus_config });
+      }
+    }
+  }
+
+  if (document.getElementById('mode-toggle')) {
+    window.addEventListener('message', reloadDisqus);
+  }
+</script>
diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html
new file mode 100644
index 0000000..c8d48e6
--- /dev/null
+++ b/_includes/comments/giscus.html
@@ -0,0 +1,65 @@
+<!-- https://giscus.app/ -->
+<script type="text/javascript">
+  (function () {
+    const origin = 'https://giscus.app';
+    const lightTheme = 'light';
+    const darkTheme = 'dark_dimmed';
+
+    let initTheme = lightTheme;
+    const html = document.documentElement;
+
+    if (
+      (html.hasAttribute('data-mode') &&
+        html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = darkTheme;
+    }
+
+    let giscusAttributes = {
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ site.comments.giscus.repo}}',
+      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
+      'data-category': '{{ site.comments.giscus.category }}',
+      'data-category-id': '{{ site.comments.giscus.category_id }}',
+      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
+      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
+      'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      'data-loading': 'lazy',
+      crossorigin: 'anonymous',
+      async: ''
+    };
+
+    let giscusScript = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusScript.setAttribute(key, value)
+    );
+    document.getElementById('tail-wrapper').appendChild(giscusScript);
+
+    addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
+        {%- comment -%} global theme mode changed {%- endcomment -%}
+        const mode = event.data.message;
+        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+
+        const message = {
+          setConfig: {
+            theme: theme
+          }
+        };
+
+        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, origin);
+      }
+    });
+  })();
+</script>
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
new file mode 100644
index 0000000..5dd78ed
--- /dev/null
+++ b/_includes/comments/utterances.html
@@ -0,0 +1,49 @@
+<!-- https://utteranc.es/ -->
+<script
+  src="https://utteranc.es/client.js"
+  repo="{{ site.comments.utterances.repo }}"
+  issue-term="{{ site.comments.utterances.issue_term }}"
+  crossorigin="anonymous"
+  async
+></script>
+
+<script type="text/javascript">
+  (function () {
+    const origin = 'https://utteranc.es';
+    const lightTheme = 'github-light';
+    const darkTheme = 'github-dark';
+    let initTheme = lightTheme;
+    const html = document.documentElement;
+
+    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) => {
+      let theme;
+
+      {%- comment -%} credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> {%- endcomment -%}
+      if (event.origin === origin) {
+        {%- comment -%} page initial {%- endcomment -%}
+        theme = initTheme;
+      } else if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+        {%- comment -%} global theme mode changed {%- endcomment -%}
+        const mode = event.data.message;
+        theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
+      } else {
+        return;
+      }
+
+      const message = {
+        type: 'set-theme',
+        theme: theme
+      };
+
+      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
+      utterances.postMessage(message, origin);
+    });
+  })();
+</script>
diff --git a/_includes/datetime.html b/_includes/datetime.html
new file mode 100644
index 0000000..9f954b6
--- /dev/null
+++ b/_includes/datetime.html
@@ -0,0 +1,20 @@
+<!--
+  Date format snippet
+  See: ${JS_ROOT}/utils/locale-dateime.js
+-->
+
+{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
+{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
+
+<time
+  {% if include.class %}
+    class="{{ include.class }}"
+  {% endif %}
+  data-ts="{{ include.date | date: '%s' }}"
+  data-df="{{ df_dayjs }}"
+  {% if include.tooltip %}
+    data-bs-toggle="tooltip" data-bs-placement="bottom"
+  {% endif %}
+>
+  {{ include.date | date: df_strftime }}
+</time>
diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html
new file mode 100644
index 0000000..e2b8979
--- /dev/null
+++ b/_includes/embed/audio.html
@@ -0,0 +1,35 @@
+{% assign src = include.src | strip %}
+{% assign title = include.title | strip %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless src contains '://' %}
+  {%- capture src -%}
+    {% include media-url.html src=src %}
+  {%- endcapture -%}
+{% endunless %}
+
+<p>
+  <audio class="embed-audio" controls>
+    {% assign extension = src | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = src | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = src | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="audio/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the audio tag. Here is a
+    <a href="{{ src | strip }}">link to the audio file</a> instead.
+  </audio>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>
diff --git a/_includes/embed/bilibili.html b/_includes/embed/bilibili.html
new file mode 100644
index 0000000..0aa5552
--- /dev/null
+++ b/_includes/embed/bilibili.html
@@ -0,0 +1,9 @@
+<iframe
+  class="embed-video"
+  loading="lazy"
+  src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
+  scrolling="no"
+  frameborder="0"
+  framespacing="0"
+  allowfullscreen="true"
+></iframe>
diff --git a/_includes/embed/twitch.html b/_includes/embed/twitch.html
new file mode 100644
index 0000000..ed5ec83
--- /dev/null
+++ b/_includes/embed/twitch.html
@@ -0,0 +1,8 @@
+<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>
diff --git a/_includes/embed/video.html b/_includes/embed/video.html
new file mode 100644
index 0000000..712a266
--- /dev/null
+++ b/_includes/embed/video.html
@@ -0,0 +1,59 @@
+{% assign video_url = include.src %}
+{% assign title = include.title %}
+{% assign poster_url = include.poster %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless video_url contains '://' %}
+  {%- capture video_url -%}
+    {% include media-url.html src=video_url %}
+  {%- endcapture -%}
+{% endunless %}
+
+{% if poster_url %}
+  {% unless poster_url contains '://' %}
+    {%- capture poster_url -%}
+      {% include media-url.html src=poster_url subpath=page.media_subpath %}
+    {%- endcapture -%}
+  {% endunless %}
+  {% assign poster = 'poster="' | append: poster_url | append: '"' %}
+{% endif %}
+
+{% assign attributes = 'controls' %}
+
+{% if include.autoplay %}
+  {% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
+{% endif %}
+
+{% if include.loop %}
+  {% assign attributes = attributes | append: ' ' | append: 'loop' %}
+{% endif %}
+
+{% if include.muted %}
+  {% assign attributes = attributes | append: ' ' | append: 'muted' %}
+{% endif %}
+
+<p>
+  <video class="embed-video file" {{ poster }} {{ attributes }}>
+    {% assign extension = video_url | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = video_url | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = video_url | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="video/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the video tag. Here is a
+    <a href="{{ video_url | strip }}">link to the video file</a> instead.
+  </video>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>
diff --git a/_includes/embed/youtube.html b/_includes/embed/youtube.html
new file mode 100644
index 0000000..8f08002
--- /dev/null
+++ b/_includes/embed/youtube.html
@@ -0,0 +1,9 @@
+<iframe
+  class="embed-video"
+  loading="lazy"
+  src="https://www.youtube.com/embed/{{ include.id }}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
diff --git a/_includes/favicons.html b/_includes/favicons.html
new file mode 100644
index 0000000..957c933
--- /dev/null
+++ b/_includes/favicons.html
@@ -0,0 +1,19 @@
+<!--
+  The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
+  Generated by: https://realfavicongenerator.net/
+-->
+
+{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
+
+<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">
+{% 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 }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">
diff --git a/_includes/footer.html b/_includes/footer.html
index b1865aa..1ba9b63 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,37 +1,49 @@
 <!-- The Footer -->
 
-<footer>
-  <div class="container px-lg-4">
-    <div
-      class="d-flex justify-content-center align-items-center text-muted mx-md-3"
-    >
-      <!-- <p>
-        {%- capture _platform -%}
-        <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {%- endcapture -%} {%- capture _theme -%}
-        <a
-          href="https://github.com/cotes2020/jekyll-theme-chirpy"
-          target="_blank"
-          rel="noopener"
-          >Chirpy</a
-        >
-        {%- endcapture -%} {{ site.data.locales[include.lang].meta | replace:
-        ':PLATFORM', _platform | replace: ':THEME', _theme }}
-      </p>
+<footer
+  aria-label="Site Info"
+  class="
+    d-flex flex-column justify-content-center text-muted
+    flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
+  "
+>
+  <p>
+    {{- '©' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
 
-      <p>
-        {{- '©' }} {{ 'now' | date: '%Y' }}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>. {% if
-        site.data.locales[include.lang].copyright.brief %}
-        <span
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="{{ site.data.locales[include.lang].copyright.verbose }}"
-        >
-          {{- site.data.locales[include.lang].copyright.brief -}}
-        </span>
-        {% endif %}
-      </p> -->
-    </div>
-  </div>
+    {% 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"
+        data-bs-placement="top"
+        title="{{ site.data.locales[include.lang].copyright.verbose }}"
+      >
+        {{- site.data.locales[include.lang].copyright.brief -}}
+      </span>
+    {% endif %}
+  </p>
+
+  <p>
+    {%- capture _platform -%}
+      <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+    {%- endcapture -%}
+
+    {%- capture _theme -%}
+      <a
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="v{{ theme.version }}"
+        href="https://github.com/cotes2020/jekyll-theme-chirpy"
+        target="_blank"
+        rel="noopener"
+      >Chirpy</a>
+    {%- endcapture -%}
+
+    {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+  </p>
 </footer>
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..fd260c0
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,107 @@
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta
+    name="viewport"
+    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+  >
+
+  {%- capture seo_tags -%}
+    {% seo title=false %}
+  {%- endcapture -%}
+
+  <!-- Setup Open Graph image -->
+
+  {% if page.image %}
+    {% assign src = page.image.path | default: page.image %}
+
+    {% unless src contains '://' %}
+      {%- capture img_url -%}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
+      {%- endcapture -%}
+
+      {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
+      {%- capture new_url -%}{{ img_url }}{%- endcapture -%}
+
+      {% assign seo_tags = seo_tags | replace: old_url, new_url %}
+    {% endunless %}
+
+  {% elsif site.social_preview_image %}
+    {%- capture img_url -%}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
+    {%- endcapture -%}
+
+    {%- capture og_image -%}
+      <meta property="og:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {%- capture twitter_image -%}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {% assign old_meta_clip = '<meta name="twitter:card" content="summary" />' %}
+    {% assign new_meta_clip = og_image | append: twitter_image %}
+    {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
+  {% endif %}
+
+  {{ seo_tags }}
+
+  <title>
+    {%- unless page.layout == 'home' -%}
+      {{ page.title | append: ' | ' }}
+    {%- endunless -%}
+    {{ site.title }}
+  </title>
+
+  {% include_cached favicons.html %}
+
+  <!-- Resource Hints -->
+  {% unless site.assets.self_host.enabled %}
+    {% for hint in site.data.origin.cors.resource_hints %}
+      {% for link in hint.links %}
+        <link rel="{{ link.rel }}" href="{{ hint.url }}" {{ link.opts | join: ' ' }}>
+      {% endfor %}
+    {% endfor %}
+  {% endunless %}
+
+  <!-- Bootstrap -->
+  {% unless jekyll.environment == 'production' %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  {% endunless %}
+
+  <!-- Theme style -->
+  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
+
+  <!-- Web Font -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
+
+  <!-- Font Awesome Icons -->
+  <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
+
+  <!-- 3rd-party Dependencies -->
+
+  {% if site.toc and page.toc %}
+    <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
+  {% endif %}
+
+  {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+    <link rel="stylesheet" href="{{ site.data.origin[type]['lazy-polyfill'].css | relative_url }}">
+  {% endif %}
+
+  {% if page.layout == 'page' or page.layout == 'post' %}
+    <!-- Image Popup -->
+    <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
+  {% endif %}
+
+  <!-- JavaScript -->
+
+  {% unless site.theme_mode %}
+    {% include mode-toggle.html %}
+  {% endunless %}
+
+  {% include metadata-hook.html %}
+</head>
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
new file mode 100644
index 0000000..b229b70
--- /dev/null
+++ b/_includes/js-selector.html
@@ -0,0 +1,107 @@
+<!-- JS selector for site. -->
+
+<!-- commons -->
+
+{% assign urls = site.data.origin[type].search.js %}
+
+<!-- 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]['lazy-polyfill'].js %}
+
+  {% unless page.layout == 'home' %}
+    <!-- image lazy-loading & popup & clipboard -->
+    {% assign urls = urls
+      | append: ','
+      | append: site.data.origin[type].glightbox.js
+      | append: ','
+      | append: site.data.origin[type].clipboard.js
+    %}
+  {% endunless %}
+{% endif %}
+
+{% if page.layout == 'home'
+  or page.layout == 'post'
+  or page.layout == 'archives'
+  or page.layout == 'category'
+  or page.layout == 'tag'
+%}
+  {% assign locale = include.lang | split: '-' | first %}
+
+  {% assign urls = urls
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.common
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.locale
+    | replace: ':LOCALE', locale
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.relativeTime
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.localizedFormat
+  %}
+{% endif %}
+
+{% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].mermaid.js %}
+{% endif %}
+
+{% include jsdelivr-combine.html urls=urls %}
+
+{% case page.layout %}
+  {% when 'home', 'categories', 'post', 'page' %}
+    {% assign js = page.layout %}
+  {% when 'archives', 'category', 'tag' %}
+    {% assign js = 'misc' %}
+  {% else %}
+    {% assign js = 'commons' %}
+{% endcase %}
+
+{% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
+<script src="{{ script | relative_url }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
+  <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
+  <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
+{% endif %}
+
+<!-- Pageviews -->
+{% if page.layout == 'post' %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
+      {% when 'goatcounter' %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
+        {% endif %}
+    {% endcase %}
+  {% endif %}
+{% endif %}
+
+{% if page.mermaid %}
+  {% include mermaid.html %}
+{% endif %}
+
+{% if jekyll.environment == 'production' %}
+  <!-- PWA -->
+  {% if site.pwa.enabled %}
+    <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
+  {% endif %}
+
+  <!-- Web Analytics -->
+  {% for analytics in site.analytics %}
+    {% capture str %}{{ analytics }}{% endcapture %}
+    {% assign type = str | split: '{' | first %}
+    {% if site.analytics[type].id and site.analytics[type].id != empty %}
+      {% include analytics/{{ type }}.html %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
diff --git a/_includes/jsdelivr-combine.html b/_includes/jsdelivr-combine.html
new file mode 100644
index 0000000..cffa699
--- /dev/null
+++ b/_includes/jsdelivr-combine.html
@@ -0,0 +1,26 @@
+{% assign urls = include.urls | split: ',' %}
+
+{% assign combined_urls = nil %}
+
+{% assign domain = 'https://cdn.jsdelivr.net/' %}
+
+{% for url in urls %}
+  {% if url contains domain %}
+    {% assign url_snippet = url | slice: domain.size, url.size %}
+
+    {% if combined_urls %}
+      {% assign combined_urls = combined_urls | append: ',' | append: url_snippet %}
+    {% else %}
+      {% assign combined_urls = domain | append: 'combine/' | append: url_snippet %}
+    {% endif %}
+
+  {% elsif url contains '//' %}
+    <script src="{{ url }}"></script>
+  {% else %}
+    <script src="{{ url | relative_url }}"></script>
+  {% endif %}
+{% endfor %}
+
+{% if combined_urls %}
+  <script src="{{ combined_urls }}"></script>
+{% endif %}
diff --git a/_includes/lang.html b/_includes/lang.html
new file mode 100644
index 0000000..34b50df
--- /dev/null
+++ b/_includes/lang.html
@@ -0,0 +1,10 @@
+{% comment %}
+  Detect appearance language and return it through variable "lang"
+{% endcomment %}
+{% if site.data.locales[page.lang] %}
+  {% assign lang = page.lang %}
+{% elsif site.data.locales[site.lang] %}
+  {% assign lang = site.lang %}
+{% else %}
+  {% assign lang = 'en' %}
+{% endif %}
diff --git a/_includes/language-alias.html b/_includes/language-alias.html
new file mode 100644
index 0000000..abfa7ba
--- /dev/null
+++ b/_includes/language-alias.html
@@ -0,0 +1,70 @@
+{% comment %}
+
+  Convert the alias of the syntax language to the official name
+
+  See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
+
+{% endcomment %}
+
+{% assign _lang = include.language | default: '' %}
+
+{% case _lang %}
+  {% when 'actionscript', 'as', 'as3' %}
+    {{ 'ActionScript' }}
+  {% when 'applescript' %}
+    {{ 'AppleScript' }}
+  {% when 'brightscript', 'bs', 'brs' %}
+    {{ 'BrightScript' }}
+  {% when 'cfscript', 'cfc' %}
+    {{ 'CFScript' }}
+  {% when 'coffeescript', 'coffee', 'coffee-script' %}
+    {{ 'CoffeeScript' }}
+  {% when 'cs', 'csharp' %}
+   {{ 'C#' }}
+  {% when 'erl' %}
+    {{ 'Erlang' }}
+  {% when 'graphql' %}
+   {{ 'GraphQL' }}
+  {% when 'haskell', 'hs' %}
+   {{ 'Haskell' }}
+  {% when 'javascript', 'js' %}
+    {{ 'JavaScript' }}
+  {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
+    {{ 'Makefile' }}
+  {% when 'md', 'mkd' %}
+    {{ 'Markdown' }}
+  {% when 'm' %}
+    {{ 'Matlab' }}
+  {% when 'objective_c', 'objc', 'obj-c', 'obj_c', 'objectivec' %}
+    {{ 'Objective-C' }}
+  {% when 'perl', 'pl' %}
+    {{ 'Perl' }}
+  {% when 'php','php3','php4','php5' %}
+    {{ 'PHP' }}
+  {% when 'py' %}
+    {{ 'Python' }}
+  {% when 'rb' %}
+    {{ 'Ruby' }}
+  {% when 'rs','no_run','ignore','should_panic' %}
+    {{ 'Rust' }}
+  {% when 'bash', 'zsh', 'ksh', 'sh' %}
+    {{ 'Shell' }}
+  {% when 'st', 'squeak' %}
+    {{ 'Smalltalk' }}
+  {% when 'tex'%}
+    {{ 'TeX' }}
+  {% when 'latex' %}
+    {{ 'LaTex' }}
+  {% when 'ts', 'typescript' %}
+    {{ 'TypeScript' }}
+  {% when 'vb', 'visualbasic' %}
+    {{ 'Visual Basic' }}
+  {% when 'vue', 'vuejs' %}
+    {{ 'Vue.js' }}
+  {% when 'yml' %}
+    {{ 'YAML' }}
+  {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml', 'json' %}
+    {{ _lang | upcase }}
+  {% else %}
+    {{ _lang | capitalize }}
+{% endcase %}
diff --git a/_includes/media-url.html b/_includes/media-url.html
new file mode 100644
index 0000000..ea41075
--- /dev/null
+++ b/_includes/media-url.html
@@ -0,0 +1,37 @@
+{%- comment -%}
+  Generate media resource final URL based on `site.cdn`, `page.media_subpath`
+
+  Arguments:
+    src - required, basic media resources path
+    subpath - optional, relative path of media resources
+    absolute - optional, boolean, if true, generate absolute URL
+
+  Return:
+    media resources URL
+{%- endcomment -%}
+
+{% assign url = include.src %}
+
+{%- if url -%}
+  {% unless url contains ':' %}
+    {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
+    {% assign url = include.subpath | default: '' | append: '/' | append: url %}
+
+    {%- comment -%} Prepend CND URL {%- endcomment -%}
+    {% if site.cdn %}
+      {% assign url = site.cdn | append: '/' | append: url %}
+    {% endif %}
+
+    {% assign url = url | replace: '///', '/' | replace: '//', '/' | replace: ':/', '://' %}
+
+    {% unless url contains '://' %}
+      {% if include.absolute %}
+        {% assign url = site.url | append: site.baseurl | append: url %}
+      {% else %}
+        {% assign url = site.baseurl | append: url %}
+      {% endif %}
+    {% endunless %}
+  {% endunless %}
+{%- endif -%}
+
+{{- url -}}
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
new file mode 100644
index 0000000..a3a83ed
--- /dev/null
+++ b/_includes/mermaid.html
@@ -0,0 +1,62 @@
+<!-- mermaid-js loader -->
+<script type="text/javascript">
+  function updateMermaid(event) {
+    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+      const mode = event.data.message;
+
+      if (typeof mermaid === 'undefined') {
+        return;
+      }
+
+      let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
+      let config = { theme: expectedTheme };
+
+      {%- comment -%}
+        Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
+      {%- endcomment -%}
+      const mermaidList = document.getElementsByClassName('mermaid');
+
+      [...mermaidList].forEach((elem) => {
+        const svgCode = elem.previousSibling.children.item(0).innerHTML;
+        elem.innerHTML = svgCode;
+        elem.removeAttribute('data-processed');
+      });
+
+      mermaid.initialize(config);
+      mermaid.init(undefined, '.mermaid');
+    }
+  }
+
+  (function () {
+    let initTheme = 'default';
+    const html = document.documentElement;
+
+    if (
+      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = 'dark';
+    }
+
+    let mermaidConf = {
+      theme: initTheme {%- comment -%}  <default | dark | forest | neutral> {%- endcomment -%}
+    };
+
+    {%- comment -%} Create mermaid tag {%- endcomment -%}
+    const basicList = document.getElementsByClassName('language-mermaid');
+    [...basicList].forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('d-none');
+      {%- comment -%} create mermaid node {%- endcomment -%}
+      let mermaid = document.createElement('pre');
+      mermaid.classList.add('mermaid');
+      const text = document.createTextNode(svgCode);
+      mermaid.appendChild(text);
+      backup.after(mermaid);
+    });
+
+    mermaid.initialize(mermaidConf);
+    window.addEventListener('message', updateMermaid);
+  })();
+</script>
diff --git a/_includes/metadata-hook.html b/_includes/metadata-hook.html
new file mode 100644
index 0000000..fd7e9bd
--- /dev/null
+++ b/_includes/metadata-hook.html
@@ -0,0 +1 @@
+<!-- A placeholder to allow defining custom metadata -->
diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
new file mode 100644
index 0000000..113ec37
--- /dev/null
+++ b/_includes/mode-toggle.html
@@ -0,0 +1,116 @@
+<!-- Switch the mode between dark and light. -->
+
+<script type="text/javascript">
+  class ModeToggle {
+    static get MODE_KEY() {
+      return 'mode';
+    }
+    static get MODE_ATTR() {
+      return 'data-mode';
+    }
+    static get DARK_MODE() {
+      return 'dark';
+    }
+    static get LIGHT_MODE() {
+      return 'light';
+    }
+    static get ID() {
+      return 'mode-toggle';
+    }
+
+    constructor() {
+      let self = this;
+
+      {%- comment -%} always follow the system prefers {%- endcomment -%}
+      this.sysDarkPrefers.addEventListener('change', () => {
+        if (self.hasMode) {
+          self.clearMode();
+        }
+        self.notify();
+      });
+
+      if (!this.hasMode) {
+        return;
+      }
+
+      if (this.isDarkMode) {
+        this.setDark();
+      } else {
+        this.setLight();
+      }
+    }
+
+    get sysDarkPrefers() {
+      return window.matchMedia('(prefers-color-scheme: dark)');
+    }
+
+    get isPreferDark() {
+      return this.sysDarkPrefers.matches;
+    }
+
+    get isDarkMode() {
+      return this.mode === ModeToggle.DARK_MODE;
+    }
+
+    get hasMode() {
+      return this.mode != null;
+    }
+
+    get mode() {
+      return sessionStorage.getItem(ModeToggle.MODE_KEY);
+    }
+
+    {%- comment -%} get the current mode on screen {%- endcomment -%}
+    get modeStatus() {
+      if (this.hasMode) {
+        return this.mode;
+      } else {
+        return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE;
+      }
+    }
+
+    setDark() {
+      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+    }
+
+    setLight() {
+      document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+    }
+
+    clearMode() {
+      document.documentElement.removeAttribute(ModeToggle.MODE_ATTR);
+      sessionStorage.removeItem(ModeToggle.MODE_KEY);
+    }
+
+    {%- comment -%}
+      Notify another plugins that the theme mode has changed
+    {%- endcomment -%}
+    notify() {
+      window.postMessage(
+        {
+          direction: ModeToggle.ID,
+          message: this.modeStatus
+        },
+        '*'
+      );
+    }
+
+    flipMode() {
+      if (this.hasMode) {
+        this.clearMode();
+      } else {
+        if (this.isPreferDark) {
+          this.setLight();
+        } else {
+          this.setDark();
+        }
+      }
+
+      this.notify();
+    }
+  }
+
+  const modeToggle = new ModeToggle();
+</script>
diff --git a/_includes/no-linenos.html b/_includes/no-linenos.html
new file mode 100644
index 0000000..8500693
--- /dev/null
+++ b/_includes/no-linenos.html
@@ -0,0 +1,10 @@
+{% comment %}
+  Remove the line number of the code snippet.
+{% endcomment %}
+
+{% assign content = include.content %}
+
+{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% endif %}
diff --git a/_includes/notification.html b/_includes/notification.html
new file mode 100644
index 0000000..80049b0
--- /dev/null
+++ b/_includes/notification.html
@@ -0,0 +1,24 @@
+<aside
+  id="notification"
+  class="toast"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-bs-animation="true"
+  data-bs-autohide="false"
+>
+  <div class="toast-header">
+    <button
+      type="button"
+      class="btn-close ms-auto"
+      data-bs-dismiss="toast"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="toast-body text-center pt-0">
+    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
+    <button type="button" class="btn btn-primary" aria-label="Update">
+      {{ site.data.locales[include.lang].notification.update }}
+    </button>
+  </div>
+</aside>
diff --git a/_includes/origin-type.html b/_includes/origin-type.html
new file mode 100644
index 0000000..7f72012
--- /dev/null
+++ b/_includes/origin-type.html
@@ -0,0 +1,13 @@
+{% comment %} Site static assets origin type {% endcomment %}
+
+{% assign type = 'cors' %}
+
+{% if site.assets.self_host.enabled %}
+  {% if site.assets.self_host.env %}
+    {% if site.assets.self_host.env == jekyll.environment %}
+      {% assign type = 'basic' %}
+    {% endif %}
+  {% else %}
+    {% assign type = 'basic' %}
+  {% endif %}
+{% endif %}
diff --git a/_includes/pageviews/goatcounter.html b/_includes/pageviews/goatcounter.html
new file mode 100644
index 0000000..af536db
--- /dev/null
+++ b/_includes/pageviews/goatcounter.html
@@ -0,0 +1,18 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  let pv = document.getElementById('pageviews');
+
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        pv.innerText = new Intl.NumberFormat().format(data.count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
+</script>
diff --git a/_includes/post-description.html b/_includes/post-description.html
new file mode 100644
index 0000000..6c40036
--- /dev/null
+++ b/_includes/post-description.html
@@ -0,0 +1,16 @@
+{%- comment -%}
+  Get post description or generate it from the post content.
+{%- endcomment -%}
+
+{%- assign max_length = include.max_length | default: 200 -%}
+
+{%- capture description -%}
+{%- if post.description -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
+{%- endif -%}
+{%- endcapture -%}
+
+{{- description | strip | truncate: max_length | escape -}}
diff --git a/_includes/post-nav.html b/_includes/post-nav.html
new file mode 100644
index 0000000..736bec3
--- /dev/null
+++ b/_includes/post-nav.html
@@ -0,0 +1,34 @@
+<!-- Navigation buttons at the bottom of the post. -->
+
+<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
+  {% assign previous = site.data.locales[include.lang].post.button.previous %}
+  {% assign next = site.data.locales[include.lang].post.button.next %}
+
+  {% if page.previous.url %}
+    <a
+      href="{{ site.baseurl }}{{ page.previous.url }}"
+      class="btn btn-outline-primary"
+      aria-label="{{ previous }}"
+    >
+      <p>{{ page.previous.title }}</p>
+    </a>
+  {% else %}
+    <div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
+      <p>-</p>
+    </div>
+  {% endif %}
+
+  {% if page.next.url %}
+    <a
+      href="{{ site.baseurl }}{{page.next.url}}"
+      class="btn btn-outline-primary"
+      aria-label="{{ next }}"
+    >
+      <p>{{ page.next.title }}</p>
+    </a>
+  {% else %}
+    <div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
+      <p>-</p>
+    </div>
+  {% endif %}
+</nav>
diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
new file mode 100644
index 0000000..c74e978
--- /dev/null
+++ b/_includes/post-paginator.html
@@ -0,0 +1,91 @@
+<!-- The paginator for post list on HomgPage. -->
+
+<nav aria-label="Page Navigation">
+  <ul class="pagination align-items-center mt-4 mb-0">
+    <!-- left arrow -->
+    {% if paginator.previous_page %}
+      {% assign prev_url = paginator.previous_page_path | relative_url %}
+    {% else %}
+      {% assign prev_url = '#' %}
+    {% endif %}
+
+    <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+      <a class="page-link" href="{{ prev_url }}" aria-label="previous-page">
+        <i class="fas fa-angle-left"></i>
+      </a>
+    </li>
+
+    <!-- page numbers -->
+    {% assign left_ellipsis = false %}
+    {% assign right_ellipsis = false %}
+
+    {% for i in (1..paginator.total_pages) %}
+      {% assign pre = paginator.page | minus: 1 %}
+      {% assign next = paginator.page | plus: 1 %}
+      {% assign pre_less = pre | minus: 1 %}
+      {% assign next_more = next | plus: 1 %}
+      {% assign show = false %}
+
+      {% if paginator.page == 1 %}
+        {% if i <= 3 or i == paginator.total_pages %}
+          {% assign show = true %}
+        {% endif %}
+      {% elsif paginator.page == paginator.total_pages %}
+        {% if i == 1 or i >= pre_less %}
+          {% assign show = true %}
+        {% endif %}
+      {% else %}
+        {% if i == 1 or i == paginator.total_pages %}
+          {% assign show = true %}
+        {% elsif i >= pre and i <= next %}
+          {% assign show = true %}
+        {% endif %}
+      {% endif %}
+
+      {% if show %}
+        <!-- show number -->
+        <li class="page-item {% if i == paginator.page %} active{% endif %}">
+          <a
+            class="page-link"
+            href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
+          >
+            {{- i -}}
+          </a>
+        </li>
+      {% else %}
+        <!-- hide number -->
+        {% if i < pre and left_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link">...</span>
+          </li>
+          {% assign left_ellipsis = true %}
+        {% elsif i > next and right_ellipsis == false %}
+          <li class="page-item disabled">
+            <span class="page-link">...</span>
+          </li>
+          {% assign right_ellipsis = true %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+    <!-- mobile pagination -->
+    <li class="page-index align-middle">
+      <span>{{ paginator.page }}</span>
+      <span class="text-muted">/ {{ paginator.total_pages }}</span>
+    </li>
+
+    <!-- right arrow -->
+    {% if paginator.next_page_path %}
+      {% assign next_url = paginator.next_page_path | relative_url %}
+    {% else %}
+      {% assign next_url = '#' %}
+    {% endif %}
+
+    <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+      <a class="page-link" href="{{ next_url }}" aria-label="next-page">
+        <i class="fas fa-angle-right"></i>
+      </a>
+    </li>
+  </ul>
+</nav>
+<!-- .pagination -->
diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html
new file mode 100644
index 0000000..d894199
--- /dev/null
+++ b/_includes/post-sharing.html
@@ -0,0 +1,52 @@
+<!-- Post sharing snippet -->
+
+<div class="share-wrapper d-flex align-items-center">
+  <span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
+  <span class="share-icons">
+    {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
+    {% assign title = title | uri_escape %}
+    {% assign url = page.url | absolute_url | url_encode %}
+
+    {% for share in site.data.share.platforms -%}
+      {%- 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 }}" target="_blank" rel="noopener" {{ tooltip }}>
+        <i class="fa-fw {{ share.icon }}"></i>
+      </a>
+    {% endfor %}
+
+    <button
+      id="copy-link"
+      aria-label="Copy link"
+      class="btn small"
+      data-bs-toggle="tooltip"
+      data-bs-placement="top"
+      title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
+      data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
+    >
+      <i class="fa-fw fas fa-link pe-none fs-6"></i>
+    </button>
+  </span>
+</div>
diff --git a/_includes/read-time.html b/_includes/read-time.html
new file mode 100644
index 0000000..9952410
--- /dev/null
+++ b/_includes/read-time.html
@@ -0,0 +1,37 @@
+<!-- Calculate the post's reading time, and display the word count in tooltip -->
+
+{% assign words = include.content | strip_html | number_of_words: 'auto' %}
+
+<!-- words per minute -->
+
+{% assign wpm = 180 %}
+{% assign min_time = 1 %}
+
+{% assign read_time = words | divided_by: wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = min_time %}
+{% endunless %}
+
+{% capture read_prompt %}
+  {{- site.data.locales[include.lang].post.read_time.prompt -}}
+{% endcapture %}
+
+<!-- return element -->
+<span
+  class="readtime"
+  data-bs-toggle="tooltip"
+  data-bs-placement="bottom"
+  title="{{ words }} {{ site.data.locales[include.lang].post.words }}"
+>
+  <em>
+    {{- read_time -}}
+    {{ ' ' }}
+    {{- site.data.locales[include.lang].post.read_time.unit -}}
+  </em>
+  {%- if include.prompt -%}
+    {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
+    {%- unless _prompt_words > 1 -%}{{ ' ' }}{%- endunless -%}
+    {{ read_prompt }}
+  {%- endif -%}
+</span>
diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
new file mode 100644
index 0000000..8d298cd
--- /dev/null
+++ b/_includes/refactor-content.html
@@ -0,0 +1,255 @@
+<!-- Refactor the HTML structure -->
+
+{% assign _content = include.content %}
+
+<!--
+  In order to allow a wide table to scroll horizontally,
+  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
+-->
+
+{% if _content contains '<table' %}
+  {% assign _content = _content
+    | replace: '<table', '<div class="table-wrapper"><table'
+    | replace: '</table>', '</table></div>'
+    | replace: '<code><div class="table-wrapper">', '<code>'
+    | replace: '</table></div></code>', '</table></code>'
+  %}
+{% endif %}
+
+<!--
+  Fixed kramdown code highlight rendering:
+  https://github.com/penibelst/jekyll-compress-html/issues/101
+  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+-->
+
+{% if _content contains '<pre class="highlight">' %}
+  {% assign _content = _content
+    | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
+    | replace: '</code></pre></div>', '</code></div>'
+  %}
+{% 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>'
+  %}
+{% endif %}
+
+<!-- Handle images -->
+
+{% assign IMG_TAG = '<img ' %}
+
+{% if _content contains IMG_TAG %}
+  {% assign _img_content = null %}
+  {% assign _img_snippets = _content | split: IMG_TAG %}
+
+  {% for _img_snippet in _img_snippets %}
+    {% if forloop.first %}
+      {% assign _img_content = _img_snippet %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _left = _img_snippet | split: '>' | first %}
+    {% assign _right = _img_snippet | remove: _left %}
+
+    {% unless _left contains 'src=' %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: '" ' %}
+
+    {% assign _src = null %}
+    {% assign _lqip = null %}
+    {% assign _class = null %}
+
+    {% for _attr in _attrs %}
+      {% unless _attr contains '=' %}
+        {% continue %}
+      {% endunless %}
+
+      {% assign _pair = _attr | split: '="' %}
+      {% capture _key %}{{ _pair | first }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'src' %}
+          {% assign _src = _value %}
+        {% when 'lqip' %}
+          {% assign _lqip = _value %}
+        {% when 'class' %}
+          {% assign _class = _value %}
+      {% endcase %}
+    {% endfor %}
+
+    <!-- take out classes -->
+    {% if _class %}
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
+      {% assign _left = _left | remove: _old_class %}
+    {% endif %}
+
+    {% assign _final_src = null %}
+    {% assign _lazyload = true %}
+
+    {%- capture _img_url -%}
+      {% include media-url.html src=_src subpath=page.media_subpath %}
+    {%- endcapture -%}
+
+    {% assign _path_prefix = _img_url | remove: _src %}
+
+    {% unless _src contains '//' %}
+      {% assign _final_src = _path_prefix | append: _src %}
+      {% assign _src_alt = 'src="' | append: _path_prefix %}
+      {% assign _left = _left | replace: 'src="', _src_alt %}
+    {% endunless %}
+
+    {% if _lqip %}
+      {% 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 %}
+
+      <!-- add image placeholder -->
+      {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
+
+    {% else %}
+      {% assign _class = _class | append: ' shimmer' %}
+    {% endif %}
+
+    <!-- lazy-load images -->
+    {% if _lazyload %}
+      {% assign _left = _left | append: ' loading="lazy"' %}
+    {% endif %}
+
+    {% if page.layout == 'home' %}
+      <!-- create the image wrapper -->
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
+
+      {% assign _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></div' %}
+
+    {% else %}
+      <!-- make sure the `<img>` is wrapped by `<a>` -->
+      {% assign _parent = _right | slice: 1, 4 %}
+
+      {% if _parent == '</a>' %}
+        <!-- add class to exist <a> tag -->
+        {% assign _size = _img_content | size | minus: 1 %}
+        {% capture _class %}
+          class="img-link{% unless _lqip %} shimmer{% endunless %}"
+        {% endcapture %}
+        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
+
+      {% else %}
+        <!-- create the image wrapper -->
+        {% 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 = '></a' | append: _right %}
+      {% endif %}
+    {% endif %}
+
+    <!-- combine -->
+    {% 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 -->
+
+{% if _content contains '<div class="highlight"><code>' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
+  {% assign _new_content = '' %}
+
+  {% for _snippet in _code_spippets %}
+    {% if forloop.last %}
+      {% assign _new_content = _new_content | append: _snippet %}
+
+    {% else %}
+      {% assign _left = _snippet | split: '><' | last %}
+
+      {% if _left contains 'file="' %}
+        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file-code fa-fw' %}
+      {% else %}
+        {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
+        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% assign _label_icon = 'fas fa-code fa-fw small' %}
+      {% endif %}
+
+      {% capture _label %}
+        <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>'
+      %}
+    {% endif %}
+  {% endfor %}
+
+  {% assign _content = _new_content %}
+{% endif %}
+
+<!-- Create heading anchors -->
+
+{% assign heading_levels = '2,3,4,5' | split: ',' %}
+{% assign _heading_content = _content %}
+
+{% for level in heading_levels %}
+  {% assign mark_start = '<h' | append: level | append: ' id="' %}
+  {% assign mark_end = '</h' | append: level | append: '>' %}
+
+  {% if _heading_content contains mark_start %}
+    {% assign _new_content = null %}
+    {% assign heading_snippets = _heading_content | split: mark_start %}
+
+    {% for snippet in heading_snippets %}
+      {% if forloop.first %}
+        {% assign _new_content = snippet %}
+        {% continue %}
+      {% endif %}
+
+      {% assign id = snippet | split: '"' | first %}
+      {% 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 %}
+    {% endfor %}
+
+    {% assign _heading_content = _new_content %}
+  {% endif %}
+{% endfor %}
+
+{% assign _content = _heading_content %}
+
+<!-- return -->
+{{ _content }}
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
new file mode 100644
index 0000000..37a295b
--- /dev/null
+++ b/_includes/related-posts.html
@@ -0,0 +1,94 @@
+<!-- Recommend the other 3 posts according to the tags and categories of the current post. -->
+
+<!-- The total size of related posts -->
+{% assign TOTAL_SIZE = 3 %}
+
+<!-- An random integer that bigger than 0 -->
+{% assign TAG_SCORE = 1 %}
+
+<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
+{% assign CATEGORY_SCORE = 0.5 %}
+
+{% assign SEPARATOR = ':' %}
+
+{% assign match_posts = '' | split: '' %}
+
+{% for category in page.categories %}
+  {% assign match_posts = match_posts | push: site.categories[category] | uniq %}
+{% endfor %}
+
+{% for tag in page.tags %}
+  {% assign match_posts = match_posts | push: site.tags[tag] | uniq %}
+{% endfor %}
+
+{% assign match_posts = match_posts | reverse %}
+{% assign last_index = match_posts.size | minus: 1 %}
+{% assign score_list = '' | split: '' %}
+
+{% for i in (0..last_index) %}
+  {% assign post = match_posts[i] %}
+
+  {% if post.url == page.url %}
+    {% continue %}
+  {% endif %}
+
+  {% assign score = 0 %}
+
+  {% for tag in post.tags %}
+    {% if page.tags contains tag %}
+      {% assign score = score | plus: TAG_SCORE %}
+    {% endif %}
+  {% endfor %}
+
+  {% for category in post.categories %}
+    {% if page.categories contains category %}
+      {% assign score = score | plus: CATEGORY_SCORE %}
+    {% endif %}
+  {% endfor %}
+
+  {% if score > 0 %}
+    {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %}
+    {% assign score_list = score_list | push: score_item %}
+  {% endif %}
+{% endfor %}
+
+{% assign index_list = '' | split: '' %}
+
+{% if score_list.size > 0 %}
+  {% assign score_list = score_list | sort | reverse %}
+  {% for entry in score_list limit: TOTAL_SIZE %}
+    {% assign index = entry | split: SEPARATOR | last %}
+    {% assign index_list = index_list | push: index %}
+  {% endfor %}
+{% endif %}
+
+{% assign relate_posts = '' | split: '' %}
+
+{% for index in index_list %}
+  {% assign i = index | to_integer %}
+  {% assign relate_posts = relate_posts | push: match_posts[i] %}
+{% endfor %}
+
+{% if relate_posts.size > 0 %}
+  <aside id="related-posts" aria-labelledby="related-label">
+    <h3 class="mb-4" id="related-label">
+      {{- site.data.locales[include.lang].post.relate_posts -}}
+    </h3>
+    <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+      {% for post in relate_posts %}
+        <article class="col">
+          <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
+            <div class="card-body">
+              {% include datetime.html date=post.date lang=include.lang %}
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
+              <div class="text-muted">
+                <p>{% include post-description.html %}</p>
+              </div>
+            </div>
+          </a>
+        </article>
+      {% endfor %}
+    </nav>
+  </aside>
+  <!-- #related-posts -->
+{% endif %}
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
new file mode 100644
index 0000000..2582580
--- /dev/null
+++ b/_includes/search-loader.html
@@ -0,0 +1,47 @@
+<!--
+  Jekyll Simple Search loader
+  See: <https://github.com/christian-fei/Simple-Jekyll-Search>
+-->
+
+{% capture result_elem %}
+  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
+    <header>
+      <h2><a href="{url}">{title}</a></h2>
+      <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+        {categories}
+        {tags}
+      </div>
+    </header>
+    <p>{snippet}</p>
+  </article>
+{% endcapture %}
+
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
+
+<script>
+  {%- comment -%} Note: dependent library will be loaded in `js-selector.html` {%- endcomment -%}
+  SimpleJekyllSearch({
+    searchInput: document.getElementById('search-input'),
+    resultsContainer: document.getElementById('search-results'),
+    json: '{{ '/assets/js/data/search.json' | relative_url }}',
+    searchResultTemplate: '{{ result_elem | strip_newlines }}',
+    noResultsText: '{{ not_found }}',
+    templateMiddleware: function(prop, value, template) {
+      if (prop === 'categories') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+        }
+      }
+
+      if (prop === 'tags') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+        }
+      }
+    }
+  });
+</script>
diff --git a/_includes/search-results.html b/_includes/search-results.html
new file mode 100644
index 0000000..00a3182
--- /dev/null
+++ b/_includes/search-results.html
@@ -0,0 +1,10 @@
+<!-- The Search results -->
+
+<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
+  <div class="col-11 content">
+    <div id="search-hints">
+      {% include_cached trending-tags.html %}
+    </div>
+    <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
+  </div>
+</div>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 6991284..4f0bb8c 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -5,7 +5,7 @@
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {%- if site.avatar != empty and site.avatar -%}
         {%- capture avatar_url -%}
-          {% include img-url.html src=site.avatar %}
+          {% include media-url.html src=site.avatar %}
         {%- endcapture -%}
         <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
       {%- endif -%}
@@ -39,25 +39,12 @@
         </li>
         <!-- .nav-item -->
       {% endfor %}
-
-      <li class="nav-item">
-        <a href="/neptunium/" class="nav-link" data-proofer-ignore>
-          <i class="fa-fw fas fa-microchip"></i>
-          <span>NEPTUNIUM</span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a href="/legacy_site/index.html" class="nav-link" data-proofer-ignore>
-          <i class="fa-fw fas fa-info-circle"></i>
-          <span>OLD SITE</span>
-        </a>
-      </li>
     </ul>
   </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
         <i class="fas fa-adjust"></i>
       </button>
 
diff --git a/_includes/toc.html b/_includes/toc.html
new file mode 100644
index 0000000..15eb934
--- /dev/null
+++ b/_includes/toc.html
@@ -0,0 +1,13 @@
+{% assign enable_toc = false %}
+{% if site.toc and page.toc %}
+  {% if page.content contains '<h2' or page.content contains '<h3' %}
+    {% assign enable_toc = true %}
+  {% endif %}
+{% endif %}
+
+{% if enable_toc %}
+  <section id="toc-wrapper" class="d-none ps-0 pe-4">
+    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+    <nav id="toc"></nav>
+  </section>
+{% endif %}
diff --git a/_includes/topbar.html b/_includes/topbar.html
new file mode 100644
index 0000000..fd68d1f
--- /dev/null
+++ b/_includes/topbar.html
@@ -0,0 +1,77 @@
+<!-- The Top Bar -->
+
+<header id="topbar-wrapper" aria-label="Top Bar">
+  <div
+    id="topbar"
+    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
+  >
+    <nav id="breadcrumb" aria-label="Breadcrumb">
+      {% assign paths = page.url | split: '/' %}
+
+      {% if paths.size == 0 or page.layout == 'home' %}
+        <!-- index page -->
+        <span>{{ site.data.locales[include.lang].tabs.home | capitalize }}</span>
+
+      {% else %}
+        {% for item in paths %}
+          {% if forloop.first %}
+            <span>
+              <a href="{{ '/' | relative_url }}">
+                {{- site.data.locales[include.lang].tabs.home | capitalize -}}
+              </a>
+            </span>
+
+          {% elsif forloop.last %}
+            {% if page.collection == 'tabs' %}
+              <span>{{ site.data.locales[include.lang].tabs[item] | default: page.title }}</span>
+            {% else %}
+              <span>{{ page.title }}</span>
+            {% endif %}
+
+          {% elsif page.layout == 'category' or page.layout == 'tag' %}
+            <span>
+              <a href="{{ item | append: '/' | relative_url }}">
+                {{- site.data.locales[include.lang].tabs[item] | default: page.title -}}
+              </a>
+            </span>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    </nav>
+    <!-- endof #breadcrumb -->
+
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
+
+    <div id="topbar-title">
+      {% if page.layout == 'home' %}
+        {{- site.data.locales[include.lang].title | default: site.title -}}
+      {% elsif page.collection == 'tabs' or page.layout == 'page' %}
+        {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
+        {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}}
+      {% else %}
+        {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}}
+      {% endif %}
+    </div>
+
+    <button type="button" id="search-trigger" class="btn btn-link">
+      <i class="fas fa-search fa-fw"></i>
+    </button>
+
+    <search id="search" class="align-items-center ms-3 ms-lg-0">
+      <i class="fas fa-search fa-fw"></i>
+      <input
+        class="form-control"
+        id="search-input"
+        type="search"
+        aria-label="search"
+        autocomplete="off"
+        placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
+      >
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- site.data.locales[include.lang].search.cancel -}}
+    </button>
+  </div>
+</header>
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html
new file mode 100644
index 0000000..57369f0
--- /dev/null
+++ b/_includes/trending-tags.html
@@ -0,0 +1,46 @@
+<!-- The trending tags list -->
+
+{% assign MAX = 10 %}
+
+{% assign size_list = '' | split: '' %}
+{% assign tag_list = '' | split: '' %}
+
+{% for tag in site.tags %}
+  {% assign size = tag | last | size %}
+  {% assign size_list = size_list | push: size %}
+
+  {% assign tag_str = tag | first | append: '::' | append: size %}
+  {% assign tag_list = tag_list | push: tag_str %}
+{% endfor %}
+
+{% assign size_list = size_list | sort | reverse %}
+
+{% assign tag_list = tag_list | sort_natural %}
+
+{% assign trending_tags = '' | split: '' %}
+
+{% for size in size_list limit: MAX %}
+  {% for tag_str in tag_list %}
+    {% assign tag = tag_str | split: '::' %}
+    {% assign tag_name = tag | first %}
+    {% assign tag_size = tag | last | plus: 0 %}
+    {% if tag_size == size %}
+      {% unless trending_tags contains tag_name %}
+        {% assign trending_tags = trending_tags | push: tag_name %}
+        {% break %}
+      {% endunless %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+{% if trending_tags.size > 0 %}
+  <section>
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
+    <div class="d-flex flex-wrap mt-3 mb-1 me-3">
+      {% for tag_name in trending_tags %}
+        {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
+        <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}
diff --git a/_includes/update-list.html b/_includes/update-list.html
new file mode 100644
index 0000000..93684c3
--- /dev/null
+++ b/_includes/update-list.html
@@ -0,0 +1,40 @@
+<!-- Get 5 last posted/updated posts -->
+
+{% assign MAX_SIZE = 5 %}
+
+{% assign all_list = '' | split: '' %}
+
+{% for post in site.posts %}
+  {% 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 %}
+
+{% assign update_list = '' | split: '' %}
+
+{% for entry in all_list limit: MAX_SIZE %}
+  {% assign update_list = update_list | push: entry %}
+{% endfor %}
+
+{% if update_list.size > 0 %}
+  <section id="access-lastmod">
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
+    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
+      {% for item in update_list %}
+        {% assign index = item | split: '::' | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+        <li class="text-truncate lh-lg">
+          <a href="{{ url }}">{{ post.title }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </section>
+  <!-- #access-lastmod -->
+{% endif %}
diff --git a/_javascript/_copyright b/_javascript/_copyright
new file mode 100644
index 0000000..60a706b
--- /dev/null
+++ b/_javascript/_copyright
@@ -0,0 +1 @@
+Chirpy v<%= pkg.version %> | © 2019 <%= pkg.author %> | <%= pkg.license %> Licensed | <%= pkg.homepage %>
diff --git a/_javascript/categories.js b/_javascript/categories.js
new file mode 100644
index 0000000..15d8251
--- /dev/null
+++ b/_javascript/categories.js
@@ -0,0 +1,7 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { categoryCollapse } from './modules/plugins';
+
+basic();
+initSidebar();
+initTopbar();
+categoryCollapse();
diff --git a/_javascript/commons.js b/_javascript/commons.js
new file mode 100644
index 0000000..6a17fb9
--- /dev/null
+++ b/_javascript/commons.js
@@ -0,0 +1,5 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+
+initSidebar();
+initTopbar();
+basic();
diff --git a/_javascript/home.js b/_javascript/home.js
new file mode 100644
index 0000000..ef22cb9
--- /dev/null
+++ b/_javascript/home.js
@@ -0,0 +1,8 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { initLocaleDatetime, loadImg } from './modules/plugins';
+
+loadImg();
+initLocaleDatetime();
+initSidebar();
+initTopbar();
+basic();
diff --git a/_javascript/misc.js b/_javascript/misc.js
new file mode 100644
index 0000000..52b4043
--- /dev/null
+++ b/_javascript/misc.js
@@ -0,0 +1,7 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { initLocaleDatetime } from './modules/plugins';
+
+initSidebar();
+initTopbar();
+initLocaleDatetime();
+basic();
diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js
new file mode 100644
index 0000000..40d9cd1
--- /dev/null
+++ b/_javascript/modules/components/back-to-top.js
@@ -0,0 +1,19 @@
+/**
+ * Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
+ */
+
+export function back2top() {
+  const btn = document.getElementById('back-to-top');
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      btn.classList.add('show');
+    } else {
+      btn.classList.remove('show');
+    }
+  });
+
+  btn.addEventListener('click', () => {
+    window.scrollTo({ top: 0 });
+  });
+}
diff --git a/_javascript/modules/components/category-collapse.js b/_javascript/modules/components/category-collapse.js
new file mode 100644
index 0000000..0c53cb4
--- /dev/null
+++ b/_javascript/modules/components/category-collapse.js
@@ -0,0 +1,36 @@
+/**
+ * Tab 'Categories' expand/close effect.
+ */
+
+import 'bootstrap/js/src/collapse.js';
+
+const childPrefix = 'l_';
+const parentPrefix = 'h_';
+const children = document.getElementsByClassName('collapse');
+
+export function categoryCollapse() {
+  [...children].forEach((elem) => {
+    const id = parentPrefix + elem.id.substring(childPrefix.length);
+    const parent = document.getElementById(id);
+
+    // collapse sub-categories
+    elem.addEventListener('hide.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder-open').className =
+          'far fa-folder fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
+        parent.classList.remove('hide-border-bottom');
+      }
+    });
+
+    // expand sub-categories
+    elem.addEventListener('show.bs.collapse', () => {
+      if (parent) {
+        parent.querySelector('.far.fa-folder').className =
+          'far fa-folder-open fa-fw';
+        parent.querySelector('.fas.fa-angle-down').classList.remove('rotate');
+        parent.classList.add('hide-border-bottom');
+      }
+    });
+  });
+}
diff --git a/_javascript/modules/components/clipboard.js b/_javascript/modules/components/clipboard.js
new file mode 100644
index 0000000..9566e9d
--- /dev/null
+++ b/_javascript/modules/components/clipboard.js
@@ -0,0 +1,143 @@
+/**
+ * Clipboard functions
+ *
+ * Dependencies:
+ *    clipboard.js (https://github.com/zenorocha/clipboard.js)
+ */
+
+import Tooltip from 'bootstrap/js/src/tooltip';
+
+const clipboardSelector = '.code-header>button';
+
+const ICON_DEFAULT = 'far fa-clipboard';
+const ICON_SUCCESS = 'fas fa-check';
+
+const ATTR_TIMEOUT = 'timeout';
+const ATTR_TITLE_SUCCEED = 'data-title-succeed';
+const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
+const TIMEOUT = 2000; // in milliseconds
+
+function isLocked(node) {
+  if (node.hasAttribute(ATTR_TIMEOUT)) {
+    let timeout = node.getAttribute(ATTR_TIMEOUT);
+    if (Number(timeout) > Date.now()) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function lock(node) {
+  node.setAttribute(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+}
+
+function unlock(node) {
+  node.removeAttribute(ATTR_TIMEOUT);
+}
+
+function showTooltip(btn) {
+  const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
+  btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+  Tooltip.getInstance(btn).show();
+}
+
+function hideTooltip(btn) {
+  Tooltip.getInstance(btn).hide();
+  btn.removeAttribute(ATTR_TITLE_ORIGIN);
+}
+
+function setSuccessIcon(btn) {
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_SUCCESS);
+}
+
+function resumeIcon(btn) {
+  const icon = btn.children[0];
+  icon.setAttribute('class', ICON_DEFAULT);
+}
+
+function setCodeClipboard() {
+  const clipboardList = document.querySelectorAll(clipboardSelector);
+
+  if (clipboardList.length === 0) {
+    return;
+  }
+
+  // Initial the clipboard.js object
+  const clipboard = new ClipboardJS(clipboardSelector, {
+    target: (trigger) => {
+      const codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
+    }
+  });
+
+  [...clipboardList].map(
+    (elem) =>
+      new Tooltip(elem, {
+        placement: 'left'
+      })
+  );
+
+  clipboard.on('success', (e) => {
+    const trigger = e.trigger;
+
+    e.clearSelection();
+
+    if (isLocked(trigger)) {
+      return;
+    }
+
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+    lock(trigger);
+
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+      unlock(trigger);
+    }, TIMEOUT);
+  });
+}
+
+function setLinkClipboard() {
+  const btnCopyLink = document.getElementById('copy-link');
+
+  if (btnCopyLink === null) {
+    return;
+  }
+
+  btnCopyLink.addEventListener('click', (e) => {
+    const target = e.target;
+
+    if (isLocked(target)) {
+      return;
+    }
+
+    // Copy URL to clipboard
+    navigator.clipboard.writeText(window.location.href).then(() => {
+      const defaultTitle = target.getAttribute(ATTR_TITLE_ORIGIN);
+      const succeedTitle = target.getAttribute(ATTR_TITLE_SUCCEED);
+
+      // Switch tooltip title
+      target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
+      Tooltip.getInstance(target).show();
+
+      lock(target);
+
+      setTimeout(() => {
+        target.setAttribute(ATTR_TITLE_ORIGIN, defaultTitle);
+        unlock(target);
+      }, TIMEOUT);
+    });
+  });
+
+  btnCopyLink.addEventListener('mouseleave', (e) => {
+    Tooltip.getInstance(e.target).hide();
+  });
+}
+
+export function initClipboard() {
+  setCodeClipboard();
+  setLinkClipboard();
+}
diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js
new file mode 100644
index 0000000..989d9e6
--- /dev/null
+++ b/_javascript/modules/components/img-loading.js
@@ -0,0 +1,67 @@
+/**
+ * Setting up image lazy loading and LQIP switching
+ */
+
+const ATTR_DATA_SRC = 'data-src';
+const ATTR_DATA_LQIP = 'data-lqip';
+
+const cover = {
+  SHIMMER: 'shimmer',
+  BLUR: 'blur'
+};
+
+function removeCover(clzss) {
+  this.parentElement.classList.remove(clzss);
+}
+
+function handleImage() {
+  if (!this.complete) {
+    return;
+  }
+
+  if (this.hasAttribute(ATTR_DATA_LQIP)) {
+    removeCover.call(this, cover.BLUR);
+  } else {
+    removeCover.call(this, cover.SHIMMER);
+  }
+}
+
+/**
+ * Switches the LQIP with the real image URL.
+ */
+function switchLQIP() {
+  const src = this.getAttribute(ATTR_DATA_SRC);
+  this.setAttribute('src', encodeURI(src));
+  this.removeAttribute(ATTR_DATA_SRC);
+}
+
+export function loadImg() {
+  const images = document.querySelectorAll('article img');
+
+  if (images.length === 0) {
+    return;
+  }
+
+  images.forEach((img) => {
+    img.addEventListener('load', handleImage);
+  });
+
+  // Images loaded from the browser cache do not trigger the 'load' event
+  document.querySelectorAll('article img[loading="lazy"]').forEach((img) => {
+    if (img.complete) {
+      removeCover.call(img, cover.SHIMMER);
+    }
+  });
+
+  // LQIPs set by the data URI or WebP will not trigger the 'load' event,
+  // so manually convert the URI to the URL of a high-resolution image.
+  const lqips = document.querySelectorAll(
+    `article img[${ATTR_DATA_LQIP}="true"]`
+  );
+
+  if (lqips.length) {
+    lqips.forEach((lqip) => {
+      switchLQIP.call(lqip);
+    });
+  }
+}
diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
new file mode 100644
index 0000000..b5c7c6e
--- /dev/null
+++ b/_javascript/modules/components/img-popup.js
@@ -0,0 +1,15 @@
+/**
+ * Set up image popup
+ *
+ * Dependencies: https://github.com/biati-digital/glightbox
+ */
+
+const IMG_CLASS = 'popup';
+
+export function imgPopup() {
+  if (document.getElementsByClassName(IMG_CLASS).length === 0) {
+    return;
+  }
+
+  GLightbox({ selector: `.${IMG_CLASS}` });
+}
diff --git a/_javascript/modules/components/locale-datetime.js b/_javascript/modules/components/locale-datetime.js
new file mode 100644
index 0000000..eb75626
--- /dev/null
+++ b/_javascript/modules/components/locale-datetime.js
@@ -0,0 +1,53 @@
+/**
+ * Update month/day to locale datetime
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
+ */
+
+/* A tool for locale datetime */
+class LocaleHelper {
+  static get attrTimestamp() {
+    return 'data-ts';
+  }
+
+  static get attrDateFormat() {
+    return 'data-df';
+  }
+
+  static get locale() {
+    return document.documentElement.getAttribute('lang').substring(0, 2);
+  }
+
+  static getTimestamp(elem) {
+    return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp
+  }
+
+  static getDateFormat(elem) {
+    return elem.getAttribute(this.attrDateFormat);
+  }
+}
+
+export function initLocaleDatetime() {
+  dayjs.locale(LocaleHelper.locale);
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
+
+  document
+    .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`)
+    .forEach((elem) => {
+      const date = dayjs.unix(LocaleHelper.getTimestamp(elem));
+      const text = date.format(LocaleHelper.getDateFormat(elem));
+      elem.textContent = text;
+      elem.removeAttribute(LocaleHelper.attrTimestamp);
+      elem.removeAttribute(LocaleHelper.attrDateFormat);
+
+      // setup tooltips
+      if (
+        elem.hasAttribute('data-bs-toggle') &&
+        elem.getAttribute('data-bs-toggle') === 'tooltip'
+      ) {
+        // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
+        const tooltipText = date.format('llll');
+        elem.setAttribute('data-bs-title', tooltipText);
+      }
+    });
+}
diff --git a/_javascript/modules/components/mode-watcher.js b/_javascript/modules/components/mode-watcher.js
new file mode 100644
index 0000000..9eecd09
--- /dev/null
+++ b/_javascript/modules/components/mode-watcher.js
@@ -0,0 +1,14 @@
+/**
+ * Add listener for theme mode toggle
+ */
+const toggle = document.getElementById('mode-toggle');
+
+export function modeWatcher() {
+  if (!toggle) {
+    return;
+  }
+
+  toggle.addEventListener('click', () => {
+    modeToggle.flipMode();
+  });
+}
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
new file mode 100644
index 0000000..21d634e
--- /dev/null
+++ b/_javascript/modules/components/search-display.js
@@ -0,0 +1,110 @@
+/**
+ * This script make #search-result-wrapper switch to unloaded or shown automatically.
+ */
+
+const btnSbTrigger = document.getElementById('sidebar-trigger');
+const btnSearchTrigger = document.getElementById('search-trigger');
+const btnCancel = document.getElementById('search-cancel');
+const content = document.querySelectorAll('#main-wrapper>.container>.row');
+const topbarTitle = document.getElementById('topbar-title');
+const search = document.getElementById('search');
+const resultWrapper = document.getElementById('search-result-wrapper');
+const results = document.getElementById('search-results');
+const input = document.getElementById('search-input');
+const hints = document.getElementById('search-hints');
+
+// CSS class names
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
+const FOCUS = 'input-focus';
+const FLEX = 'd-flex';
+
+/* Actions in mobile screens (Sidebar hidden) */
+class MobileSearchBar {
+  static on() {
+    btnSbTrigger.classList.add(UNLOADED);
+    topbarTitle.classList.add(UNLOADED);
+    btnSearchTrigger.classList.add(UNLOADED);
+    search.classList.add(FLEX);
+    btnCancel.classList.add(LOADED);
+  }
+
+  static off() {
+    btnCancel.classList.remove(LOADED);
+    search.classList.remove(FLEX);
+    btnSbTrigger.classList.remove(UNLOADED);
+    topbarTitle.classList.remove(UNLOADED);
+    btnSearchTrigger.classList.remove(UNLOADED);
+  }
+}
+
+class ResultSwitch {
+  static resultVisible = false;
+
+  static on() {
+    if (!this.resultVisible) {
+      resultWrapper.classList.remove(UNLOADED);
+      content.forEach((el) => {
+        el.classList.add(UNLOADED);
+      });
+      this.resultVisible = true;
+    }
+  }
+
+  static off() {
+    if (this.resultVisible) {
+      results.innerHTML = '';
+
+      if (hints.classList.contains(UNLOADED)) {
+        hints.classList.remove(UNLOADED);
+      }
+
+      resultWrapper.classList.add(UNLOADED);
+      content.forEach((el) => {
+        el.classList.remove(UNLOADED);
+      });
+      input.textContent = '';
+      this.resultVisible = false;
+    }
+  }
+}
+
+function isMobileView() {
+  return btnCancel.classList.contains(LOADED);
+}
+
+export function displaySearch() {
+  btnSearchTrigger.addEventListener('click', () => {
+    MobileSearchBar.on();
+    ResultSwitch.on();
+    input.focus();
+  });
+
+  btnCancel.addEventListener('click', () => {
+    MobileSearchBar.off();
+    ResultSwitch.off();
+  });
+
+  input.addEventListener('focus', () => {
+    search.classList.add(FOCUS);
+  });
+
+  input.addEventListener('focusout', () => {
+    search.classList.remove(FOCUS);
+  });
+
+  input.addEventListener('input', () => {
+    if (input.value === '') {
+      if (isMobileView()) {
+        hints.classList.remove(UNLOADED);
+      } else {
+        ResultSwitch.off();
+      }
+    } else {
+      ResultSwitch.on();
+      if (isMobileView()) {
+        hints.classList.add(UNLOADED);
+      }
+    }
+  });
+}
diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js
new file mode 100644
index 0000000..6b562d8
--- /dev/null
+++ b/_javascript/modules/components/sidebar.js
@@ -0,0 +1,27 @@
+/**
+ * Expand or close the sidebar in mobile screens.
+ */
+
+const ATTR_DISPLAY = 'sidebar-display';
+
+class SidebarUtil {
+  static isExpanded = false;
+
+  static toggle() {
+    if (SidebarUtil.isExpanded === false) {
+      document.body.setAttribute(ATTR_DISPLAY, '');
+    } else {
+      document.body.removeAttribute(ATTR_DISPLAY);
+    }
+
+    SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
+  }
+}
+
+export function sidebarExpand() {
+  document
+    .getElementById('sidebar-trigger')
+    .addEventListener('click', SidebarUtil.toggle);
+
+  document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
+}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
new file mode 100644
index 0000000..56ce26f
--- /dev/null
+++ b/_javascript/modules/components/toc.js
@@ -0,0 +1,15 @@
+export function toc() {
+  if (document.querySelector('main h2, main h3')) {
+    // see: https://github.com/tscanlin/tocbot#usage
+    tocbot.init({
+      tocSelector: '#toc',
+      contentSelector: '.content',
+      ignoreSelector: '[data-toc-skip]',
+      headingSelector: 'h2, h3, h4',
+      orderedList: false,
+      scrollSmooth: false
+    });
+
+    document.getElementById('toc-wrapper').classList.remove('d-none');
+  }
+}
diff --git a/_javascript/modules/components/tooltip-loader.js b/_javascript/modules/components/tooltip-loader.js
new file mode 100644
index 0000000..c36c879
--- /dev/null
+++ b/_javascript/modules/components/tooltip-loader.js
@@ -0,0 +1,11 @@
+import Tooltip from 'bootstrap/js/src/tooltip';
+
+export function loadTooptip() {
+  const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+  );
+
+  [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
+  );
+}
diff --git a/_javascript/modules/layouts.js b/_javascript/modules/layouts.js
new file mode 100644
index 0000000..28f7962
--- /dev/null
+++ b/_javascript/modules/layouts.js
@@ -0,0 +1,3 @@
+export { basic } from './layouts/basic';
+export { initSidebar } from './layouts/sidebar';
+export { initTopbar } from './layouts/topbar';
diff --git a/_javascript/modules/layouts/basic.js b/_javascript/modules/layouts/basic.js
new file mode 100644
index 0000000..fb36a8b
--- /dev/null
+++ b/_javascript/modules/layouts/basic.js
@@ -0,0 +1,7 @@
+import { back2top } from '../components/back-to-top';
+import { loadTooptip } from '../components/tooltip-loader';
+
+export function basic() {
+  back2top();
+  loadTooptip();
+}
diff --git a/_javascript/modules/layouts/sidebar.js b/_javascript/modules/layouts/sidebar.js
new file mode 100644
index 0000000..8795693
--- /dev/null
+++ b/_javascript/modules/layouts/sidebar.js
@@ -0,0 +1,7 @@
+import { modeWatcher } from '../components/mode-watcher';
+import { sidebarExpand } from '../components/sidebar';
+
+export function initSidebar() {
+  modeWatcher();
+  sidebarExpand();
+}
diff --git a/_javascript/modules/layouts/topbar.js b/_javascript/modules/layouts/topbar.js
new file mode 100644
index 0000000..cfcd0ed
--- /dev/null
+++ b/_javascript/modules/layouts/topbar.js
@@ -0,0 +1,5 @@
+import { displaySearch } from '../components/search-display';
+
+export function initTopbar() {
+  displaySearch();
+}
diff --git a/_javascript/modules/plugins.js b/_javascript/modules/plugins.js
new file mode 100644
index 0000000..fb892e2
--- /dev/null
+++ b/_javascript/modules/plugins.js
@@ -0,0 +1,6 @@
+export { categoryCollapse } from './components/category-collapse';
+export { initClipboard } from './components/clipboard';
+export { loadImg } from './components/img-loading';
+export { imgPopup } from './components/img-popup';
+export { initLocaleDatetime } from './components/locale-datetime';
+export { toc } from './components/toc';
diff --git a/_javascript/page.js b/_javascript/page.js
new file mode 100644
index 0000000..76e8ce9
--- /dev/null
+++ b/_javascript/page.js
@@ -0,0 +1,9 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { loadImg, imgPopup, initClipboard } from './modules/plugins';
+
+loadImg();
+imgPopup();
+initSidebar();
+initTopbar();
+initClipboard();
+basic();
diff --git a/_javascript/post.js b/_javascript/post.js
new file mode 100644
index 0000000..9340f05
--- /dev/null
+++ b/_javascript/post.js
@@ -0,0 +1,17 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import {
+  loadImg,
+  imgPopup,
+  initLocaleDatetime,
+  initClipboard,
+  toc
+} from './modules/plugins';
+
+loadImg();
+toc();
+imgPopup();
+initSidebar();
+initLocaleDatetime();
+initClipboard();
+initTopbar();
+basic();
diff --git a/_javascript/pwa/_frontmatter b/_javascript/pwa/_frontmatter
new file mode 100644
index 0000000..97ecf0a
--- /dev/null
+++ b/_javascript/pwa/_frontmatter
@@ -0,0 +1,3 @@
+---
+permalink: /:basename
+---
diff --git a/_javascript/pwa/app.js b/_javascript/pwa/app.js
new file mode 100644
index 0000000..c71036a
--- /dev/null
+++ b/_javascript/pwa/app.js
@@ -0,0 +1,51 @@
+import { pwa, baseurl } from '../../_config.yml';
+import Toast from 'bootstrap/js/src/toast';
+
+if ('serviceWorker' in navigator) {
+  if (pwa.enabled) {
+    const swUrl = `${baseurl}/sw.min.js`;
+    const notification = document.getElementById('notification');
+    const btnRefresh = notification.querySelector('.toast-body>button');
+    const popupWindow = Toast.getOrCreateInstance(notification);
+
+    navigator.serviceWorker.register(swUrl).then((registration) => {
+      // In case the user ignores the notification
+      if (registration.waiting) {
+        popupWindow.show();
+      }
+
+      registration.addEventListener('updatefound', () => {
+        registration.installing.addEventListener('statechange', () => {
+          if (registration.waiting) {
+            if (navigator.serviceWorker.controller) {
+              popupWindow.show();
+            }
+          }
+        });
+      });
+
+      btnRefresh.addEventListener('click', () => {
+        if (registration.waiting) {
+          registration.waiting.postMessage('SKIP_WAITING');
+        }
+        popupWindow.hide();
+      });
+    });
+
+    let refreshing = false;
+
+    // Detect controller change and refresh all the opened tabs
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      if (!refreshing) {
+        window.location.reload();
+        refreshing = true;
+      }
+    });
+  } else {
+    navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      for (let registration of registrations) {
+        registration.unregister();
+      }
+    });
+  }
+}
diff --git a/_javascript/pwa/sw.js b/_javascript/pwa/sw.js
new file mode 100644
index 0000000..bc67bd8
--- /dev/null
+++ b/_javascript/pwa/sw.js
@@ -0,0 +1,82 @@
+import { baseurl } from '../../_config.yml';
+
+importScripts(`${baseurl}/assets/js/data/swconf.js`);
+
+const purge = swconf.purge;
+
+function verifyUrl(url) {
+  const requestPath = new URL(url).pathname;
+
+  for (const path of swconf.denyPaths) {
+    if (requestPath.startsWith(path)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+self.addEventListener('install', (event) => {
+  if (purge) {
+    return;
+  }
+
+  event.waitUntil(
+    caches.open(swconf.cacheName).then((cache) => {
+      return cache.addAll(swconf.resources);
+    })
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(
+        keyList.map((key) => {
+          if (purge) {
+            return caches.delete(key);
+          } else {
+            if (key !== swconf.cacheName) {
+              return caches.delete(key);
+            }
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.headers.has('range')) {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
+
+      return fetch(event.request).then((response) => {
+        const url = event.request.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>
+        let responseToCache = response.clone();
+
+        caches.open(swconf.cacheName).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      });
+    })
+  );
+});
diff --git a/_layouts/archives.html b/_layouts/archives.html
new file mode 100644
index 0000000..4f7ad7d
--- /dev/null
+++ b/_layouts/archives.html
@@ -0,0 +1,35 @@
+---
+layout: page
+# The Archives of posts.
+---
+
+{% include lang.html %}
+
+{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %}
+{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
+
+<div id="archives" class="pl-xl-3">
+  {% for post in site.posts %}
+    {% assign cur_year = post.date | date: '%Y' %}
+
+    {% if cur_year != last_year %}
+      {% unless forloop.first %}</ul>{% endunless %}
+
+      <time class="year lead d-block">{{ cur_year }}</time>
+      {{ '<ul class="list-unstyled">' }}
+
+      {% assign last_year = cur_year %}
+    {% endif %}
+
+    <li>
+      {% assign ts = post.date | date: '%s' %}
+      <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
+      <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+        {{ post.date | date: df_strftime_m }}
+      </span>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+    </li>
+
+    {% if forloop.last %}</ul>{% endif %}
+  {% endfor %}
+</div>
diff --git a/_layouts/categories.html b/_layouts/categories.html
new file mode 100644
index 0000000..0515097
--- /dev/null
+++ b/_layouts/categories.html
@@ -0,0 +1,138 @@
+---
+layout: page
+# All the Categories of posts
+---
+
+{% include lang.html %}
+
+{% assign HEAD_PREFIX = 'h_' %}
+{% assign LIST_PREFIX = 'l_' %}
+
+{% assign group_index = 0 %}
+
+{% assign sort_categories = site.categories | sort %}
+
+{% for category in sort_categories %}
+  {% assign category_name = category | first %}
+  {% assign posts_of_category = category | last %}
+  {% assign first_post = posts_of_category | first %}
+
+  {% if category_name == first_post.categories[0] %}
+    {% assign sub_categories = '' | split: '' %}
+
+    {% for post in posts_of_category %}
+      {% assign second_category = post.categories[1] %}
+      {% if second_category %}
+        {% unless sub_categories contains second_category %}
+          {% assign sub_categories = sub_categories | push: second_category %}
+        {% endunless %}
+      {% endif %}
+    {% endfor %}
+
+    {% assign sub_categories = sub_categories | sort %}
+    {% assign sub_categories_size = sub_categories | size %}
+
+    <div class="card categories">
+      <!-- top-category -->
+      <div
+        id="{{ HEAD_PREFIX }}{{ group_index }}"
+        class="card-header d-flex justify-content-between hide-border-bottom"
+      >
+        <span class="ms-2">
+          <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
+
+          {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
+          <a href="{{ _category_url | relative_url }}" class="mx-2">{{ category_name }}</a>
+
+          <!-- content count -->
+          {% assign top_posts_size = site.categories[category_name] | size %}
+          <span class="text-muted small font-weight-light">
+            {% if sub_categories_size > 0 %}
+              {{ sub_categories_size }}
+              {% if sub_categories_size > 1 %}
+                {{
+                  site.data.locales[lang].categories.category_measure.plural
+                  | default: site.data.locales[lang].categories.category_measure
+                }}
+              {% else %}
+                {{
+                  site.data.locales[lang].categories.category_measure.singular
+                  | default: site.data.locales[lang].categories.category_measure
+                }}
+              {% endif -%}
+              ,
+            {% endif %}
+
+            {{ top_posts_size }}
+
+            {% if top_posts_size > 1 %}
+              {{
+                site.data.locales[lang].categories.post_measure.plural
+                | default: site.data.locales[lang].categories.post_measure
+              }}
+            {% else %}
+              {{
+                site.data.locales[lang].categories.post_measure.singular
+                | default: site.data.locales[lang].categories.post_measure
+              }}
+            {% endif %}
+          </span>
+        </span>
+
+        <!-- arrow -->
+        {% if sub_categories_size > 0 %}
+          <a
+            href="#{{ LIST_PREFIX }}{{ group_index }}"
+            data-bs-toggle="collapse"
+            aria-expanded="true"
+            aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
+            class="category-trigger hide-border-bottom"
+          >
+            <i class="fas fa-fw fa-angle-down"></i>
+          </a>
+        {% else %}
+          <span data-bs-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+            <i class="fas fa-fw fa-angle-right"></i>
+          </span>
+        {% endif %}
+      </div>
+      <!-- .card-header -->
+
+      <!-- Sub-categories -->
+      {% if sub_categories_size > 0 %}
+        <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
+          <ul class="list-group">
+            {% for sub_category in sub_categories %}
+              <li class="list-group-item">
+                <i class="far fa-folder fa-fw"></i>
+
+                {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
+                <a href="{{ _sub_ctg_url | relative_url }}" class="mx-2">{{ sub_category }}</a>
+
+                {% assign posts_size = site.categories[sub_category] | size %}
+                <span class="text-muted small font-weight-light">
+                  {{ posts_size }}
+
+                  {% if posts_size > 1 %}
+                    {{
+                      site.data.locales[lang].categories.post_measure.plural
+                      | default: site.data.locales[lang].categories.post_measure
+                    }}
+                  {% else %}
+                    {{
+                      site.data.locales[lang].categories.post_measure.singular
+                      | default: site.data.locales[lang].categories.post_measure
+                    }}
+                  {% endif %}
+                </span>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+    </div>
+    <!-- .card -->
+
+    {% assign group_index = group_index | plus: 1 %}
+  {% endif %}
+{% endfor %}
diff --git a/_layouts/category.html b/_layouts/category.html
new file mode 100644
index 0000000..b064f27
--- /dev/null
+++ b/_layouts/category.html
@@ -0,0 +1,24 @@
+---
+layout: page
+# The Category layout
+---
+
+{% include lang.html %}
+
+<div id="page-category">
+  <h1 class="ps-lg-2">
+    <i class="far fa-folder-open fa-fw text-muted"></i>
+    {{ page.title }}
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
+  </h1>
+
+  <ul class="content ps-0">
+    {% for post in page.posts %}
+      <li class="d-flex justify-content-between px-md-3">
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+        <span class="dash flex-grow-1"></span>
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_layouts/compress.html b/_layouts/compress.html
new file mode 100644
index 0000000..2779e92
--- /dev/null
+++ b/_layouts/compress.html
@@ -0,0 +1,10 @@
+---
+# Jekyll layout that compresses HTML
+# v3.2.0
+# http://jch.penibelst.de/
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" or page.compress_html == false %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..ea438fe
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,82 @@
+---
+layout: compress
+---
+
+<!doctype html>
+
+{% include origin-type.html %}
+
+{% include lang.html %}
+
+{% 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 -->
+<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
+  {% include head.html %}
+
+  <body>
+    {% include sidebar.html lang=lang %}
+
+    <div id="main-wrapper" class="d-flex justify-content-center">
+      <div class="container d-flex flex-column px-xxl-5">
+        {% include topbar.html lang=lang %}
+
+        <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 mb-5 text-muted">
+            <div class="access">
+              {% include_cached update-list.html lang=lang %}
+              {% include_cached trending-tags.html lang=lang %}
+            </div>
+
+            {% for _include in layout.panel_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
+          </aside>
+        </div>
+
+        <div class="row">
+          <!-- tail -->
+          <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% 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>
+        </div>
+
+        {% include_cached search-results.html lang=lang %}
+      </div>
+
+      <aside aria-label="Scroll to Top">
+        <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
+          <i class="fas fa-angle-up"></i>
+        </button>
+      </aside>
+    </div>
+
+    <div id="mask"></div>
+
+    {% if site.pwa.enabled %}
+      {% include_cached notification.html lang=lang %}
+    {% endif %}
+
+    <!-- JavaScripts -->
+    {% include js-selector.html lang=lang %}
+
+    {% include_cached search-loader.html lang=lang %}
+  </body>
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..e44efe8
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,115 @@
+---
+layout: default
+refactor: true
+---
+
+{% include lang.html %}
+
+{% assign pinned = site.posts | where: 'pin', 'true' %}
+{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
+
+{% assign posts = '' | split: '' %}
+
+<!-- Get pinned posts -->
+
+{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
+{% assign pinned_num = pinned.size | minus: offset %}
+
+{% if pinned_num > 0 %}
+  {% for i in (offset..pinned.size) limit: pinned_num %}
+    {% assign posts = posts | push: pinned[i] %}
+  {% endfor %}
+{% else %}
+  {% assign pinned_num = 0 %}
+{% endif %}
+
+<!-- Get default posts -->
+
+{% assign default_beg = offset | minus: pinned.size %}
+
+{% if default_beg < 0 %}
+  {% assign default_beg = 0 %}
+{% endif %}
+
+{% assign default_num = paginator.posts | size | minus: pinned_num %}
+{% assign default_end = default_beg | plus: default_num | minus: 1 %}
+
+{% if default_num > 0 %}
+  {% for i in (default_beg..default_end) %}
+    {% assign posts = posts | push: default[i] %}
+  {% endfor %}
+{% endif %}
+
+<div id="post-list" class="flex-grow-1 px-xl-1">
+  {% for post in posts %}
+    <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.media_subpath | append: '/' | append: src | replace: '//', '/' %}
+          {% endunless %}
+
+          {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
+
+          {% 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="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-3">
+              <p>{% include post-description.html %}</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>
+
+              {% 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>
+          <!-- .card-body -->
+        </div>
+      </a>
+    </article>
+  {% endfor %}
+</div>
+<!-- #post-list -->
+
+{% if paginator.total_pages > 1 %}
+  {% include post-paginator.html %}
+{% endif %}
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..32d6582
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,20 @@
+---
+layout: default
+---
+
+{% include lang.html %}
+
+<article class="px-1">
+  {% if page.layout == 'page' or page.collection == 'tabs' %}
+    {% assign tab_key = page.title | downcase %}
+    {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+    <h1 class="dynamic-title">
+      {{ title }}
+    </h1>
+    <div class="content">
+      {{ content }}
+    </div>
+  {% else %}
+    {{ content }}
+  {% endif %}
+</article>
diff --git a/_layouts/post.html b/_layouts/post.html
index 380283d..f17ceea 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: default
 refactor: true
 panel_includes:
   - toc
@@ -11,119 +11,142 @@ tail_includes:
 
 {% include lang.html %}
 
-<h1 data-toc-skip>{{ page.title }}</h1>
+<article class="px-1">
+  <header>
+    <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+      <p class="post-desc fw-light mb-4">{{ page.description }}</p>
+    {% endif %}
 
-<style>
-  img.lazyloaded,
-  img.lazyloading {
-    max-height: 80vh;
-  }
-</style>
+    <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>
 
-<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 %}
+        <span>
+          {{ site.data.locales[lang].post.updated }}
+          {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+        </span>
+      {% endif %}
 
-  <!-- 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 %} {% 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 }}" {% endif %} {% endcapture %}
+      {% 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 %}
 
-  <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 -%}
-  </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 %}
-        <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>
+        {% if page.image.lqip %}
+          {%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
         {% endif %}
-      </em>
-    </span>
 
-    <div>
-      <!-- read time -->
-      {% include read-time.html content=content prompt=true lang=lang %}
+        <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>
+
+        <div>
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true lang=lang %}
+        </div>
+      </div>
     </div>
+  </header>
+
+  <div class="content">
+    {{ content }}
   </div>
-  <!-- .d-flex -->
-</div>
-<!-- .post-meta -->
 
-<div class="post-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="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
+    <!-- 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
+      "
     >
-    {%- unless forloop.last -%}, {%- endunless -%} {% endfor %}
-  </div>
-  {% endif %}
+      <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 %}
 
-  <!-- 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].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+        {% endif %}
+      </div>
 
-  <div
-    class="post-tail-bottom d-flex justify-content-between align-items-center mt-3 pt-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> -->
-
-    {% 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>
diff --git a/_layouts/tag.html b/_layouts/tag.html
new file mode 100644
index 0000000..d766d09
--- /dev/null
+++ b/_layouts/tag.html
@@ -0,0 +1,23 @@
+---
+layout: page
+# The layout for Tag page
+---
+
+{% include lang.html %}
+
+<div id="page-tag">
+  <h1 class="ps-lg-2">
+    <i class="fa fa-tag fa-fw text-muted"></i>
+    {{ page.title }}
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
+  </h1>
+  <ul class="content ps-0">
+    {% for post in page.posts %}
+      <li class="d-flex justify-content-between px-md-3">
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+        <span class="dash flex-grow-1"></span>
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_layouts/tags.html b/_layouts/tags.html
new file mode 100644
index 0000000..7800ca0
--- /dev/null
+++ b/_layouts/tags.html
@@ -0,0 +1,22 @@
+---
+layout: page
+# All the Tags of posts.
+---
+
+<div id="tags" class="d-flex flex-wrap mx-xl-2">
+  {% assign tags = '' | split: '' %}
+  {% for t in site.tags %}
+    {% assign tags = tags | push: t[0] %}
+  {% endfor %}
+
+  {% assign sorted_tags = tags | sort_natural %}
+
+  {% for t in sorted_tags %}
+    <div>
+      <a class="tag" href="{{ t | slugify | url_encode | prepend: '/tags/' | append: '/' | relative_url }}">
+        {{ t -}}
+        <span class="text-muted">{{ site.tags[t].size }}</span>
+      </a>
+    </div>
+  {% endfor %}
+</div>
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
new file mode 100644
index 0000000..7064d5d
--- /dev/null
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -0,0 +1,200 @@
+---
+title: Text and Typography
+description: Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
+author: cotes
+date: 2019-08-08 11:33:00 +0800
+categories: [Blogging, Demo]
+tags: [typography]
+pin: true
+math: true
+mermaid: true
+image:
+  path: /commons/devices-mockup.png
+  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
+  alt: Responsive rendering of Chirpy theme on multiple devices.
+---
+
+## Headings
+
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
+# H1 - heading
+{: .mt-4 .mb-0 }
+
+## H2 - heading
+{: data-toc-skip='' .mt-4 .mb-0 }
+
+### H3 - heading
+{: data-toc-skip='' .mt-4 .mb-0 }
+
+#### H4 - heading
+{: data-toc-skip='' .mt-4 }
+<!-- markdownlint-restore -->
+
+## Paragraph
+
+Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.
+
+## Lists
+
+### Ordered list
+
+1. Firstly
+2. Secondly
+3. Thirdly
+
+### Unordered list
+
+- Chapter
+  - Section
+    - Paragraph
+
+### ToDo list
+
+- [ ] Job
+  - [x] Step 1
+  - [x] Step 2
+  - [ ] Step 3
+
+### Description list
+
+Sun
+: the star around which the earth orbits
+
+Moon
+: the natural satellite of the earth, visible by reflected light from the sun
+
+## Block Quote
+
+> This line shows the _block quote_.
+
+## Prompts
+
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
+> An example showing the `tip` type prompt.
+{: .prompt-tip }
+
+> An example showing the `info` type prompt.
+{: .prompt-info }
+
+> An example showing the `warning` type prompt.
+{: .prompt-warning }
+
+> An example showing the `danger` type prompt.
+{: .prompt-danger }
+<!-- markdownlint-restore -->
+
+## Tables
+
+| Company                      | Contact          | Country |
+| :--------------------------- | :--------------- | ------: |
+| Alfreds Futterkiste          | Maria Anders     | Germany |
+| Island Trading               | Helen Bennett    |      UK |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli |   Italy |
+
+## Links
+
+<http://127.0.0.1:4000>
+
+## Footnote
+
+Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+## Filepath
+
+Here is the `/path/to/the/file.extend`{: .filepath}.
+
+## Code blocks
+
+### Common
+
+```text
+This is a common code snippet, without syntax highlight and line number.
+```
+
+### Specific Language
+
+```bash
+if [ $? -ne 0 ]; then
+  echo "The command was not successful.";
+  #do the needful / exit
+fi;
+```
+
+### Specific filename
+
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography";
+```
+{: file='_sass/jekyll-theme-chirpy.scss'}
+
+## Mathematics
+
+The mathematics powered by [**MathJax**](https://www.mathjax.org/):
+
+$$
+\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
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## Images
+
+### Default (with caption)
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
+_Full screen width and center alignment_
+
+### Left aligned
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+
+### Float to left
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Float to right
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Dark/Light mode & Shadow
+
+The image below will toggle dark/light mode based on theme preference, notice it has shadows.
+
+![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
+![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+
+## Video
+
+{% include embed/youtube.html id='Balreaj8Yqs' %}
+
+## Reverse Footnote
+
+[^footnote]: The footnote source
+[^fn-nth-2]: The 2nd footnote source
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
new file mode 100644
index 0000000..bda7705
--- /dev/null
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -0,0 +1,538 @@
+---
+title: Writing a New Post
+author: cotes
+date: 2019-08-08 14:10:00 +0800
+categories: [Blogging, Tutorial]
+tags: [writing]
+render_with_liquid: false
+---
+
+This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.
+
+## Naming and Path
+
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION`{: .filepath} and put it in the `_posts`{: .filepath} of the root directory. Please note that the `EXTENSION`{: .filepath} must be one of `md`{: .filepath} and `markdown`{: .filepath}. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this.
+
+## Front Matter
+
+Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-matter/) as below at the top of the post:
+
+```yaml
+---
+title: TITLE
+date: YYYY-MM-DD HH:MM:SS +/-TTTT
+categories: [TOP_CATEGORIE, SUB_CATEGORIE]
+tags: [TAG]     # TAG names should always be lowercase
+---
+```
+
+> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+{: .prompt-tip }
+
+### Timezone of Date
+
+In order to accurately record the release date of a post, you should not only set up the `timezone` of `_config.yml`{: .filepath} but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
+
+### Categories and Tags
+
+The `categories` of each post are designed to contain up to two elements, and the number of elements in `tags` can be zero to infinity. For instance:
+
+```yaml
+---
+categories: [Animal, Insect]
+tags: [bee]
+---
+```
+
+### Author Information
+
+The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
+
+Adding author information in `_data/authors.yml` (If your website doesn't have this file, don't hesitate to create one).
+
+```yaml
+<author_id>:
+  name: <full name>
+  twitter: <twitter_of_author>
+  url: <homepage_of_author>
+```
+{: file="_data/authors.yml" }
+
+And then use `author` to specify a single entry or `authors` to specify multiple entries:
+
+```yaml
+---
+author: <author_id>                     # for single entry
+# or
+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.
+{: .prompt-info }
+
+### Post Description
+
+By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:
+
+```yaml
+---
+description: Short summary of the post.
+---
+```
+
+Additionally, the `description` text will also be displayed under the post title on the post's page.
+
+## Table of Contents
+
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+
+```yaml
+---
+toc: false
+---
+```
+
+## Comments
+
+The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
+
+If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
+
+```yaml
+---
+comments: false
+---
+```
+
+## Mathematics
+
+We use [**MathJax**][mathjax] to generate mathematics. For website performance reasons, the mathematical feature won't be loaded by default. But it can be enabled by:
+
+[mathjax]: https://www.mathjax.org/
+
+```yaml
+---
+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 $$
+```
+
+> Starting with `v7.0.0`, configuration options for **MathJax** have been moved to file `assets/js/data/mathjax.js`{: .filepath }, and you can change the options as needed, such as adding [extensions][mathjax-exts].  
+> If you are building the site via `chirpy-starter`, copy that file from the gem installation directory (check with command `bundle info --path jekyll-theme-chirpy`) to the same directory in your repository.
+{: .prompt-tip }
+
+[mathjax-exts]: https://docs.mathjax.org/en/latest/input/tex/extensions/index.html
+
+## Mermaid
+
+[**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
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown languages: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
+
+## Images
+
+### Caption
+
+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)
+_Image Caption_
+```
+{: .nolineno}
+
+### Size
+
+In order to prevent the page content layout from shifting when the image is loaded, we should set the width and height for each image.
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
+```
+{: .nolineno}
+
+> For an SVG, you have to at least specify its _width_, otherwise it won't be rendered.
+{: .prompt-info }
+
+Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`height` → `h`, `width` → `w`). The following example has the same effect as the above:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }
+```
+{: .nolineno}
+
+### Position
+
+By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
+
+> Once the position is specified, the image caption should not be added.
+{: .prompt-warning }
+
+- **Normal position**
+
+  Image will be left aligned in below sample:
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .normal }
+  ```
+  {: .nolineno}
+
+- **Float to the left**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .left }
+  ```
+  {: .nolineno}
+
+- **Float to the right**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: .right }
+  ```
+  {: .nolineno}
+
+### Dark/Light mode
+
+You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
+
+```markdown
+![Light mode only](/path/to/light-mode.png){: .light }
+![Dark mode only](/path/to/dark-mode.png){: .dark }
+```
+
+### Shadow
+
+The screenshots of the program window can be considered to show the shadow effect:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: .shadow }
+```
+{: .nolineno}
+
+### CDN URL
+
+If you host the media resources on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `cdn` of `_config.yml`{: .filepath} file:
+
+```yaml
+cdn: https://cdn.com
+```
+{: file='_config.yml' .nolineno}
+
+Once `cdn` is assigned, the CDN URL will be added to the path of all media resources (site avatar, posts' images, audio and video files) starting with `/`.
+
+For instance, when using images:
+
+```markdown
+![The flower](/path/to/flower.png)
+```
+{: .nolineno}
+
+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" />
+```
+{: .nolineno }
+
+### Media Subpath
+
+When a post contains many images, it will be a time-consuming task to repeatedly define the path of the media resources. To solve this, we can define this path in the YAML block of the post:
+
+```yml
+---
+media_subpath: /img/path/
+---
+```
+
+And then, the image source of Markdown can write the file name directly:
+
+```md
+![The flower](flower.png)
+```
+{: .nolineno }
+
+The output will be:
+
+```html
+<img src="/img/path/flower.png" alt="The flower" />
+```
+{: .nolineno }
+
+### Preview Image
+
+If you want to add an image at the top of the post, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
+
+Knowing these prerequisites, you can start setting the image's attribute:
+
+```yaml
+---
+image:
+  path: /path/to/image
+  alt: image alternative text
+---
+```
+
+Note that the [`media_subpath`](#media-subpath) 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.
+
+```yml
+---
+image: /path/to/image
+---
+```
+
+### LQIP
+
+For preview images:
+
+```yaml
+---
+image:
+  lqip: /path/to/lqip-file # or base64 URI
+---
+```
+
+> You can observe LQIP in the preview image of post \"[Text and Typography](../text-and-typography/)\".
+
+For normal images:
+
+```markdown
+![Image description](/path/to/image){: lqip="/path/to/lqip-file" }
+```
+{: .nolineno }
+
+## Pinned Posts
+
+You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
+
+```yaml
+---
+pin: true
+---
+```
+
+## Prompts
+
+There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They can be generated by adding the class `prompt-{type}` to the blockquote. For example, define a prompt of type `info` as follows:
+
+```md
+> Example line for prompt.
+{: .prompt-info }
+```
+{: .nolineno }
+
+## Syntax
+
+### Inline Code
+
+```md
+`inline code part`
+```
+{: .nolineno }
+
+### Filepath Hightlight
+
+```md
+`/path/to/a/file.extend`{: .filepath}
+```
+{: .nolineno }
+
+### Code Block
+
+Markdown symbols ```` ``` ```` can easily create a code block as follows:
+
+````md
+```
+This is a plaintext code snippet.
+```
+````
+
+#### Specifying Language
+
+Using ```` ```{language} ```` you will get a code block with syntax highlight:
+
+````markdown
+```yaml
+key: value
+```
+````
+
+> The Jekyll tag `{% highlight %}` is not compatible with this theme.
+{: .prompt-danger }
+
+#### Line Number
+
+By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it:
+
+````markdown
+```shell
+echo 'No more line numbers!'
+```
+{: .nolineno }
+````
+
+#### Specifying the Filename
+
+You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
+
+````markdown
+```shell
+# content
+```
+{: file="path/to/file" }
+````
+
+#### Liquid Codes
+
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
+
+````markdown
+{% raw %}
+```liquid
+{% if product.title contains 'Pack' %}
+  This product's title contains the word Pack.
+{% endif %}
+```
+{% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
+
+## Videos
+
+### Video Sharing Platform
+
+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`   |
+| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
+
+### Video File
+
+If you want to embed a video file directly, use the following syntax:
+
+```liquid
+{% include embed/video.html src='{URL}' %}
+```
+
+Where `URL` is an URL to a video file e.g. `/assets/img/sample/video.mp4`.
+
+You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.
+
+- `poster='/path/to/poster.png'` - poster image for a video that is shown while video is downloading
+- `title='Text'` - title for a video that appears below the video and looks same as for images
+- `autoplay=true` - video automatically begins to play back as soon as it can
+- `loop=true` - automatically seek back to the start upon reaching the end of the video
+- `muted=true` - audio will be initially silenced
+- `types` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
+
+Consider an example utilizing all of the above:
+
+```liquid
+{%
+  include embed/video.html
+  src='/path/to/video/video.mp4'
+  types='ogg|mov'
+  poster='poster.png'
+  title='Demo video'
+  autoplay=true
+  loop=true
+  muted=true
+%}
+```
+
+> It's not recommended to host video files in `assets` folder as they cannot be cached by PWA and may cause issues.
+> Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
+{: .prompt-warning }
+
+## Audios
+
+### Audio File
+
+If you want to embed an audio file directly, use the following syntax:
+
+```liquid
+{% include embed/audio.html src='{URL}' %}
+```
+
+Where `URL` is an URL to an audio file e.g. `/assets/img/sample/audio.mp3`.
+
+You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.
+
+- `title='Text'` - title for an audio that appears below the audio and looks same as for images
+- `types` - specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
+
+Consider an example utilizing all of the above:
+
+```liquid
+{%
+  include embed/audio.html
+  src='/path/to/audio/audio.mp3'
+  types='ogg|wav|aac'
+  title='Demo audio'
+%}
+```
+
+> It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues.
+> Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
+{: .prompt-warning }
+
+## Learn More
+
+For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
new file mode 100644
index 0000000..1cea5be
--- /dev/null
+++ b/_posts/2019-08-09-getting-started.md
@@ -0,0 +1,138 @@
+---
+title: Getting Started
+description: >-
+  Get started with Chirpy basics in this comprehensive overview.
+  You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
+author: cotes
+date: 2019-08-09 20:55:00 +0800
+categories: [Blogging, Tutorial]
+tags: [getting started]
+pin: true
+media_subpath: '/posts/20180809'
+---
+
+## Prerequisites
+
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of the basic environment. [Git](https://git-scm.com/) also needs to be installed.
+
+## Installation
+
+### Creating a New Site
+
+There are two ways to create a new repository for this theme:
+
+- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) — Easy to upgrade, isolates irrelevant project files so you can focus on writing.
+- [**GitHub Fork**](#option-2-github-fork) — Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.
+
+#### Option 1. Using the Chirpy Starter
+
+Sign in to GitHub and browse to [**Chirpy Starter**][starter], click the button <kbd>Use this template</kbd> > <kbd>Create a new repository</kbd>, and name the new repository `USERNAME.github.io`, where `USERNAME` represents your GitHub username.
+
+#### Option 2. GitHub Fork
+
+Sign in to GitHub to [fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), and then rename it to `USERNAME.github.io` (`USERNAME` means your username).
+
+Next, clone the repository to your local machine, make sure it has [Node.js][nodejs] installed, then go to the root directory of the repo and run the following command:
+
+```console
+$ bash tools/init
+```
+
+> If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+{: .prompt-info }
+
+The above command will:
+
+1. Check out the code to the [latest tag][latest-tag] (to ensure the stability of your site: as the code for the default branch is under development).
+2. Remove non-essential sample files and take care of GitHub-related files.
+3. Build CSS/JS assets files and then make them tracked by Git.
+4. Automatically create a new commit to save the changes above.
+
+### Installing Dependencies
+
+Before running local server for the first time, go to the root directory of your site and run:
+
+```console
+$ bundle
+```
+
+## Usage
+
+### Configuration
+
+Update the variables of `_config.yml`{: .filepath} as needed. Some of them are typical options:
+
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
+
+### Social Contact Options
+
+Social contact options are displayed at the bottom of the sidebar. You can turn on/off the specified contacts in file `_data/contact.yml`{: .filepath }.
+
+### Customizing Stylesheet
+
+If you need to customize the stylesheet, copy the theme's `assets/css/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 `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
+
+Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/origin/cors.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published.
+
+Also, if you'd like to self-host the static assets, please refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme).
+
+### Running Local Server
+
+You may want to preview the site contents before publishing, so just run it by:
+
+```console
+$ bundle exec jekyll s
+```
+
+After a few seconds, the local service will be published at _<http://127.0.0.1:4000>_.
+
+## Deployment
+
+Before the deployment begins, check out the file `_config.yml`{: .filepath} and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`.
+
+Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
+
+### Deploy by Using GitHub Actions
+
+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 to the root of your site and update the platform list of the lock-file:
+
+  ```console
+  $ bundle lock --add-platform x86_64-linux
+  ```
+
+Next, configure the _Pages_ service.
+
+1. Browse to your repository on GitHub. Select the tab _Settings_, then click _Pages_ in the left navigation bar. Then, in the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.  
+![Build source](pages-source-light.png){: .light .border .normal w='375' h='140' }
+![Build source](pages-source-dark.png){: .dark .normal w='375' h='140' }
+
+2. Push any commits to GitHub to trigger the _Actions_ workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site will be deployed automatically.
+
+At this point, you can go to the URL indicated by GitHub to access your site.
+
+### Manually Build and Deploy
+
+On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
+
+Go to the root of the source project, and build your site as follows:
+
+```console
+$ JEKYLL_ENV=production bundle exec jekyll b
+```
+
+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/
+[starter]: https://github.com/cotes2020/chirpy-starter
+[pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
+[latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
new file mode 100644
index 0000000..a3278fa
--- /dev/null
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -0,0 +1,37 @@
+---
+title: Customize the Favicon
+author: cotes
+date: 2019-08-11 00:34:00 +0800
+categories: [Blogging, Tutorial]
+tags: [favicon]
+---
+
+The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`{: .filepath}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
+
+## Generate the favicon
+
+Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button <kbd>Select your Favicon image</kbd> to upload your image file.
+
+In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.
+
+## Download & Replace
+
+Download the generated package, unzip and delete the following two from the extracted files:
+
+- `browserconfig.xml`{: .filepath}
+- `site.webmanifest`{: .filepath}
+
+And then copy the remaining image files (`.PNG`{: .filepath} and `.ICO`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
+
+The following table will help you understand the changes to the favicon files:
+
+| File(s)             | From Online Tool                  | From Chirpy |
+|---------------------|:---------------------------------:|:-----------:|
+| `*.PNG`             | ✓                                 | ✗           |
+| `*.ICO`             | ✓                                 | ✗           |
+
+<!-- markdownlint-disable-next-line -->
+>  ✓ means keep, ✗ means delete.
+{: .prompt-info }
+
+The next time you build the site, the favicon will be replaced with a customized edition.
diff --git a/_posts/2023-09-18-Jaycar-price-anomaly._md b/_posts/2023-09-18-Jaycar-price-anomaly._md
new file mode 100644
index 0000000..24ffecb
--- /dev/null
+++ b/_posts/2023-09-18-Jaycar-price-anomaly._md
@@ -0,0 +1,15 @@
+---
+title: Jaycar price anomaly
+author: peter
+date: 2023-09-18 00:33:11 +0800
+categories: [Blogging] # Blogging | Electronics | Programming | Mechanical
+tags: [random] # systems | embedded | rf | microwave | electronics | solidworks | automation
+---
+
+This has to be the first time I've seen a product on Jaycar be cheaper than, well, literally anywhere else.
+
+| Jaycar                                                                                             | Amazon                                                                |
+| -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| ![jaycar $19.95](/assets/img/2023-09-18-Jaycar-price-anomaly/Screenshot%202023-09-18%20003536.png) | ![Amazon ~$22](/assets/img/2023-09-18-Jaycar-price-anomaly/image.png) |
+
+Can't find anything below $20 on Amazon. Although, to be fair the Jaycar one does look like an older model, so maybe paying the ~$2 difference for the newer ones will be worth it anyways.
diff --git a/_posts/2023-11-25-Neptunium-flight-computer-sensors-comparison._md b/_posts/2023-11-25-Neptunium-flight-computer-sensors-comparison._md
new file mode 100644
index 0000000..8d48afa
--- /dev/null
+++ b/_posts/2023-11-25-Neptunium-flight-computer-sensors-comparison._md
@@ -0,0 +1,31 @@
+---
+title: Neptunium flight computer sensors comparison
+author: peter
+date: 2023-11-25 19:43:56 +0800
+categories: [Electronics] # Blogging | Electronics | Programming | Mechanical
+tags: [embedded, electronics] # systems | embedded | rf | microwave | electronics | solidworks | automation
+---
+
+## Inertial measurement unit (IMU) and accelerometers
+
+`minimum (Maximum acceleration) >= 16 g`
+
+| Part number           | Cost+Assy fee (USD) | Max. accel. (g) | Accel. bits | Accel. max ODR (Hz) | Max. angular accel. (º/s) | Angular accel. bits | Gyro max ODR (Hz) | Notes                  |
+| --------------------- | ------------------- | --------------- | ----------- | ------------------- | ------------------------- | ------------------- | ----------------- | ---------------------- |
+| **_LSM6DSOWTR_**      | **_$1.75_**         | ±16             | 16          | **_6664_**          | ±2000                     | 16                  | **_6664_**        |                        |
+| LSM6DSRTR             | $2.4759             | ±16             | 16          | **_6664_**          | **_±4000_**               | 16                  | **_6664_**        |                        |
+| BMI088                | $3.83               | **_±24_**       | 16          | 1600                | ±2000                     | 16                  | 2000              |
+| MPU-6050              | $4.64               | ±16             | 16          | 1000                | ±2000                     | 16                  | 8000              | Obsolete               |
+| **_ADXL375BCCZ-RL7_** | $6.0962             | **±200**        | 16          | 3200                | -                         | -                   | -                 | High-_g_ accelerometer |
+
+## Barometer
+
+Sea level pressure: 1013.25 hPa\
+Pressure at 33kft: 260 hPa
+
+| Part number     | Cost+Assy fee (USD) | Min pressure (hPa) | Max pressure (hPa) | Max ODR (Hz) | Bits | Rel. accuracy (hPa) | Abs. accuracy (hPa)  |     | Notes |
+| --------------- | ------------------- | ------------------ | ------------------ | ------------ | ---- | ------------------- | -------------------- | --- | ----- |
+| SPL06-001       | $1.8237             | 300                | 1100               | 128          | 24   | ±0.06               | ±1                   |
+| **_LPS22HBTR_** | $1.8740             | **_260_**          | 1260               | 75           | 24   | ±0.1                | **_±0.1 (OPC)_**, ±1 |
+| HP203B          | $1.9598             | 300                | 1200               | 475          | 24   | ±1.5                | ±3                   |
+| DPS310          | $2.4123             | 300                | 1200               | 128          | 24   | ±0.06               | ±1                   |
diff --git a/_posts/2024-02-24-Ublox-MAXM10-and-NEOM9-comparison._md b/_posts/2024-02-24-Ublox-MAXM10-and-NEOM9-comparison._md
new file mode 100644
index 0000000..67817f9
--- /dev/null
+++ b/_posts/2024-02-24-Ublox-MAXM10-and-NEOM9-comparison._md
@@ -0,0 +1,89 @@
+---
+title: U-blox MAX-M10 and NEO-M9 comparison
+author: peter
+date: 2024-02-24 15:04:28 +0800
+categories: [Electronics] # Blogging | Electronics | Programming | Mechanical
+tags: [GNSS, electronics] # systems | embedded | rf | microwave | electronics | solidworks | automation
+---
+
+Here's a comparison of the u-blox NEO-M9N and MAX-M10S GNSS receiver modules
+
+## NEO-M9N
+
+### NEO-M9N-00B typical performance in multi-constellation GNSS modes
+
+| GNSS                           | GPS+GLO+GAL+BDS | GPS+GLO+GAL | GPS+GLO   | GPS+BDS   | GPS+GAL   |
+| ------------------------------ | --------------- | ----------- | --------- | --------- | --------- |
+| Acquisition Cold start         | 24 s            | 25 s        | 26 s      | 28 s      | 29 s      |
+| Acquisition Hot start          | 2 s             | 2 s         | 2 s       | 2 s       | 2 s       |
+| Acquisition Aided start        | 2 s             | 2 s         | 2 s       | 2 s       | 2 s       |
+| Max navigation update rate PVT | 25 Hz           | 25 Hz       | 25 Hz     | 25 Hz     | 25 Hz     |
+| Sensitivity Tracking and nav.  | -167 dBm        | -167 dBm    | -167 dBm  | -166 dBm  | -166 dBm  |
+| Sensitivity Reacquisition      | -160 dBm        | -160 dBm    | -160 dBm  | -160 dBm  | -160 dBm  |
+| Sensitivity Cold start         | -148 dBm        | -148 dBm    | -148 dBm  | -148 dBm  | -148 dBm  |
+| Sensitivity Hot start          | -159 dBm        | -159 dBm    | -159 dBm  | -159 dBm  | -159 dBm  |
+| Position accuracy PVT          | 2.0 m CEP       | 2.0 m CEP   | 2.0 m CEP | 2.0 m CEP | 2.0 m CEP |
+
+### NEO-M9N-00B typical performance in single-GNSS modes
+
+| GNSS                           | GPS       | GLONASS   | BEIDOU    | GALILEO   |
+| ------------------------------ | --------- | --------- | --------- | --------- |
+| Acquisition Cold start         | 29 s      | 27 s      | 32 s      | 42 s      |
+| Acquisition Hot start          | 2 s       | 2 s       | 2 s       | 2 s       |
+| Acquisition Aided start        | 2 s       | 2 s       | 2 s       | 5 s       |
+| Max navigation update rate PVT | 25 Hz     | 25 Hz     | 25 Hz     | 25 Hz     |
+| Sensitivity Tracking and nav.  | -166 dBm  | -166 dBm  | -160 dBm  | -159 dBm  |
+| Sensitivity Reacquisition      | -160 dBm  | -156 dBm  | -158 dBm  | -154 dBm  |
+| Sensitivity Cold start         | -148 dBm  | -145 dBm  | -145 dBm  | -140 dBm  |
+| Sensitivity Hot start          | -159 dBm  | -156 dBm  | -159 dBm  | -154 dBm  |
+| Position accuracy PVT          | 2.0 m CEP | 4.0 m CEP | 3.0 m CEP | 3.0 m CEP |
+
+## MAX-M10S
+
+### MAX-M10S typical performance in multi-constellation GNSS modes.
+
+| Parameter                                     | GPS+GAL  | GPS+GAL+GLO | GPS+GAL+BDS B1I (default) | GPS+GAL+BDS B1C | GPS+GAL+BDS B1C+GLO |
+| --------------------------------------------- | -------- | ----------- | ------------------------- | --------------- | ------------------- |
+| Max navigation update rate Default            | 10 Hz    | 6 Hz        | 3 Hz                      | 8 Hz            | 4 Hz                |
+| Max navigation update rate High performance   | 20 Hz    | 16 Hz       | 12 Hz                     | 16 Hz           | 10 Hz               |
+| Position accuracy (CEP)                       | 1.5 m    | 1.5 m       | 1.5 m                     | 1.5 m           | 1.5 m               |
+| Time To First Fix (TTFF) Cold start           | 28 s     | 23 s        | 27 s                      | 28 s            | 23 s                |
+| Time To First Fix (TTFF) Hot start            | 1 s      | 1 s         | 1 s                       | 1 s             | 1 s                 |
+| Time To First Fix (TTFF) AssistNow Online     | 1 s      | 1 s         | 1 s                       | 1 s             | 1 s                 |
+| Time To First Fix (TTFF) AssistNow Offline    | 2 s      | 2 s         | 3 s                       | 2 s             | 2 s                 |
+| Time To First Fix (TTFF) AssistNow Autonomous | 3 s      | 4 s         | 4 s                       | 4 s             | 4 s                 |
+| Sensitivity Tracking and nav.                 | -167 dBm | -167 dBm    | -167 dBm                  | -167 dBm        | -167 dBm            |
+| Sensitivity Reacquisition                     | -160 dBm | -160 dBm    | -160 dBm                  | -160 dBm        | -160 dBm            |
+| Sensitivity Cold Start                        | -148 dBm | -148 dBm    | -148 dBm                  | -148 dBm        | -148 dBm            |
+| Sensitivity Hot start                         | -159 dBm | -159 dBm    | -159 dBm                  | -159 dBm        | -159 dBm            |
+
+### MAX-M10S typical performance in single-GNSS modes
+
+| Parameter                                   | GPS      | GLONASS  | BDS B1I  | GALILEO  | BDS B1C  |
+| ------------------------------------------- | -------- | -------- | -------- | -------- | -------- |
+| Max navigation update rate Default          | 18 Hz    | 18 Hz    | 18 Hz    | 18 Hz    | 18 Hz    |
+| Max navigation update rate High performance | 25 Hz    | 25 Hz    | 25 Hz    | 25 Hz    | 25 Hz    |
+| Position accuracy (CEP)                     | 1.5 m    | 4 m      | 2 m      | 3 m      | 2 m      |
+| Time To First Fix (TTFF) Cold start         | 29 s     | 27 s     | 30 s     | 41 s     | 56 s     |
+| Time To First Fix (TTFF) Hot start          | 1 s      | 1 s      | 1 s      | 1 s      | 1 s      |
+| Time To First Fix (TTFF) AssistNow Online   | 1 s      | 1 s      | 1 s      | 5 s      | N/A      |
+| Sensitivity Tracking and nav.               | -167 dBm | -166 dBm | -160 dBm | -161 dBm | -163 dBm |
+| Sensitivity Reacquisition                   | -160 dBm | -158 dBm | -158 dBm | -154 dBm | -156 dBm |
+| Sensitivity Cold Start                      | -148 dBm | -147 dBm | -146 dBm | -141 dBm | -136 dBm |
+| Sensitivity Hot start                       | -159 dBm | -159 dBm | -159 dBm | -155 dBm | -157 dBm |
+
+
+SDO
+ASDx
+ASCx
+INT1
+VDDIO
+GNDIO
+GND
+VDD
+INT2
+OCSB
+OSDO
+CSB
+SCx
+SDx
\ No newline at end of file
diff --git a/_posts/2024-03-10-Echo360-downloader-userscript._md b/_posts/2024-03-10-Echo360-downloader-userscript._md
new file mode 100644
index 0000000..8bfa059
--- /dev/null
+++ b/_posts/2024-03-10-Echo360-downloader-userscript._md
@@ -0,0 +1,540 @@
+---
+title: Echo360 downloader userscript
+author: peter
+date: 2024-03-10 23:27:38 +0800
+categories: [Blogging] # Blogging | Electronics | Programming | Mechanical
+tags: [getting started] # systems | embedded | rf | microwave | electronics | solidworks | automation
+# image: assets/img/2024-03-10-Echo360-downloader-u/preview.png
+---
+
+## APIs
+
+Start by reverse engineering the APIs, look for IDs in the HTML to find out how you should parse the page to start requesting from these APIs.
+
+```
+https://echo360.net.au/lesson/${LESSON_ID}/media
+
+{
+  "status": "ok",
+  "message": "",
+  "data": [
+    {
+      "lesson": {
+        "id": "${LESSON_ID}",
+        "institutionId": "${INST_ID}",
+        "sectionId": "5c4ac4ff-13bb-4ea7-b252-f162d2e6de70",
+        "captureOccurrenceId": "90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058",
+        "name": "${NAME}",
+        "timing": {
+          "start": "2024-02-27T08:58:00.000",
+          "end": "2024-02-27T10:52:00.000"
+        },
+        "timeZone": {
+          "id": "Australia/Perth",
+          "name": "(+08:00) Australia/Perth",
+          "standardOffset": "PT8H"
+        },
+        "fromSchedule": true,
+        "shouldStreamLive": false,
+        "createdAt": "2024-02-27T02:56:03.430Z",
+        "updatedAt": "2024-02-27T02:56:03.430Z",
+        "displayName": "${NAME}",
+        "lessonHasName": true
+      },
+      "video": {
+        "media": {
+          "id": "${MEDIA_ID}",
+          "institutionId": "${INST_ID}",
+          "captureOccurrenceId": "90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058",
+          "createdAt": "2024-02-27T00:58:00Z",
+          "updatedAt": "2024-02-27T05:07:53.618Z",
+          "timeZone": {
+            "id": "Australia/Perth",
+            "name": "(+08:00) Australia/Perth",
+            "standardOffset": "PT8H"
+          },
+          "name": "${NAME}",
+          "status": "Processed",
+          "media": {
+            "current": {
+              "mediaId": "${MEDIA_ID}",
+              "primaryFiles": [
+                {
+                  "s3Url": "https://content.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/sd1.mp4",
+                  "width": 640,
+                  "height": 360,
+                  "size": 88149199
+                },
+                {
+                  "s3Url": "https://content.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/hd1.mp4",
+                  "width": 1280,
+                  "height": 720,
+                  "size": 378163225
+                }
+              ],
+              "secondaryFiles": [
+                {
+                  "s3Url": "https://content.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/sd2.mp4",
+                  "width": 640,
+                  "height": 360,
+                  "size": 88128484
+                },
+                {
+                  "s3Url": "https://content.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/hd2.mp4",
+                  "width": 1280,
+                  "height": 720,
+                  "size": 378281631
+                }
+              ],
+              "tertiaryFiles": [],
+              "quaternaryFiles": [],
+              "audioFiles": [
+                {
+                  "s3Url": "https://content.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/audio.mp3",
+                  "size": 105651115
+                }
+              ],
+              "duration": "PT6845.104S",
+              "primaryThumbnails": {
+                "baseUrl": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/thumbnails1",
+                "ext": "jpg",
+                "thumbnailIds": [
+                  huge array of numbers...
+                ]
+              },
+              "secondaryThumbnails": {
+                "baseUrl": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/thumbnails2",
+                "ext": "jpg",
+                "thumbnailIds": [
+                  huge array of numbers...
+                ]
+              },
+              "primaryPosterImageUri": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/poster1.jpg",
+              "secondaryPosterImageUri": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/poster2.jpg",
+              "introDuration": "PT5S",
+              "outroDuration": "PT0S",
+              "processedWithEdits": false,
+              "preliminary": false,
+              "editClips": []
+            },
+            "versions": [
+              {
+                "mediaId": "${MEDIA_ID}",
+                "version": 0,
+                "duration": "PT6840.024S",
+                "disableAutoBandwidth": true,
+                "preliminary": true,
+                "processedWithEdits": false,
+                "manifests": [
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/s0_a.m3u8",
+                    "sizeInBytes": 235,
+                    "sourceIndex": 0,
+                    "quality": [
+                      0
+                    ],
+                    "trackType": [
+                      "Audio"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/s1_av.m3u8",
+                    "sizeInBytes": 391,
+                    "sourceIndex": 1,
+                    "quality": [
+                      0
+                    ],
+                    "trackType": [
+                      "Audio",
+                      "Video"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/s1_v.m3u8",
+                    "sizeInBytes": 180,
+                    "sourceIndex": 1,
+                    "quality": [
+                      0
+                    ],
+                    "trackType": [
+                      "Video"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/s2_av.m3u8",
+                    "sizeInBytes": 383,
+                    "sourceIndex": 2,
+                    "quality": [
+                      0
+                    ],
+                    "trackType": [
+                      "Audio",
+                      "Video"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/s2_v.m3u8",
+                    "sizeInBytes": 172,
+                    "sourceIndex": 2,
+                    "quality": [
+                      0
+                    ],
+                    "trackType": [
+                      "Video"
+                    ]
+                  }
+                ],
+                "posterMedia": [
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/thumbnails1/241.jpg",
+                    "sizeInBytes": 34120,
+                    "sourceIndex": 1,
+                    "imageProperties": {
+                      "width": 640,
+                      "height": 360
+                    }
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/thumbnails2/241.jpg",
+                    "sizeInBytes": 34120,
+                    "sourceIndex": 2,
+                    "imageProperties": {
+                      "width": 640,
+                      "height": 360
+                    }
+                  }
+                ],
+                "thumbnailMedia": [
+                  {
+                    "baseUri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/thumbnails1",
+                    "extension": "jpg",
+                    "sourceIndex": 1,
+                    "imageProperties": {
+                      "width": 640,
+                      "height": 360
+                    },
+                    "timesInSeconds": [
+                      huge array of numbers...
+                    ]
+                  },
+                  {
+                    "baseUri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/${INST_ID}/00-1C-08-00-4D-D8/content/90acabaf-9956-4f89-b90a-d6abddae130e_20240227T0058/thumbnails2",
+                    "extension": "jpg",
+                    "sourceIndex": 2,
+                    "imageProperties": {
+                      "width": 640,
+                      "height": 360
+                    },
+                    "timesInSeconds": [
+                      huge array of numbers...
+                    ]
+                  }
+                ]
+              },
+              {
+                "mediaId": "${MEDIA_ID}",
+                "version": 1,
+                "duration": "PT6845.104S",
+                "introDuration": "PT5S",
+                "outroDuration": "PT0S",
+                "disableAutoBandwidth": false,
+                "preliminary": false,
+                "processedWithEdits": false,
+                "manifests": [
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/s0_a.m3u8",
+                    "sizeInBytes": 181,
+                    "sourceIndex": 0,
+                    "quality": [
+                      0,
+                      1
+                    ],
+                    "trackType": [
+                      "Audio"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/s1_v.m3u8",
+                    "sizeInBytes": 256,
+                    "sourceIndex": 1,
+                    "quality": [
+                      0,
+                      1
+                    ],
+                    "trackType": [
+                      "Video"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/s1_av.m3u8",
+                    "sizeInBytes": 517,
+                    "sourceIndex": 1,
+                    "quality": [
+                      0,
+                      1
+                    ],
+                    "trackType": [
+                      "Audio",
+                      "Video"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/s2_v.m3u8",
+                    "sizeInBytes": 256,
+                    "sourceIndex": 2,
+                    "quality": [
+                      0,
+                      1
+                    ],
+                    "trackType": [
+                      "Video"
+                    ]
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/s2_av.m3u8",
+                    "sizeInBytes": 517,
+                    "sourceIndex": 2,
+                    "quality": [
+                      0,
+                      1
+                    ],
+                    "trackType": [
+                      "Audio",
+                      "Video"
+                    ]
+                  }
+                ],
+                "posterMedia": [
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/poster1.jpg",
+                    "sizeInBytes": 125872,
+                    "sourceIndex": 1,
+                    "imageProperties": {
+                      "width": 1280,
+                      "height": 720
+                    }
+                  },
+                  {
+                    "uri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/poster2.jpg",
+                    "sizeInBytes": 125872,
+                    "sourceIndex": 2,
+                    "imageProperties": {
+                      "width": 1280,
+                      "height": 720
+                    }
+                  }
+                ],
+                "thumbnailMedia": [
+                  {
+                    "baseUri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/thumbnails1",
+                    "extension": "jpg",
+                    "sourceIndex": 1,
+                    "imageProperties": {
+                      "width": 320,
+                      "height": 180
+                    },
+                    "timesInSeconds": [
+                      huge array of numbers...
+                    ]
+                  },
+                  {
+                    "baseUri": "https://au-org-echo360-alpprod-ap-southeast-upload.s3.amazonaws.com/0000.${INST_ID}/${MEDIA_ID}/1/thumbnails2",
+                    "extension": "jpg",
+                    "sourceIndex": 2,
+                    "imageProperties": {
+                      "width": 320,
+                      "height": 180
+                    },
+                    "timesInSeconds": [
+                      huge array of numbers...
+                    ]
+                  }
+                ]
+              }
+            ],
+            "source": "HardwareCapture2",
+            "liveStreamed": false,
+            "duration": 6845104,
+            "thumbnailUrl": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/poster1.jpg",
+            "isAudio": false,
+            "type": "VideoPresentation"
+          },
+          "tags": [],
+          "isInteractive": false,
+          "currentDurationSec": 6845.104,
+          "isDeleted": false,
+          "isArchived": false,
+          "isPublishable": true,
+          "mediaType": "Video"
+        },
+        "published": {
+          "lessonId": "${LESSON_ID}",
+          "mediaId": "${MEDIA_ID}",
+          "institutionId": "${INST_ID}",
+          "termId": "bb68dc0a-35d7-4d94-8a9c-55f69ad8981a",
+          "termName": "2024",
+          "courseId": "b6bba317-8794-4e79-b7ec-b79762f895b0",
+          "sectionId": "5c4ac4ff-13bb-4ea7-b252-f162d2e6de70",
+          "lessonName": "${NAME}",
+          "lessonTiming": {
+            "start": "2024-02-27T08:58:00.000",
+            "end": "2024-02-27T10:52:00.000"
+          },
+          "timeZone": {
+            "id": "Australia/Perth",
+            "name": "(+08:00) Australia/Perth",
+            "standardOffset": "PT8H"
+          },
+          "courseName": "Signal Processing",
+          "contentAvailability": {
+            "body": {},
+            "type": "Immediate"
+          },
+          "mediaType": "Video",
+          "createdAt": "2024-02-27T02:56:03.729Z",
+          "updatedAt": "2024-02-27T02:56:03.729Z",
+          "isAvailable": true,
+          "isDeleted": false,
+          "availabilityString": "Library.immediate",
+          "publishableMediaId": "${MEDIA_ID}"
+        },
+        "receipt": {
+          "institutionId": "${INST_ID}",
+          "userId": "0ebaa2ec-b796-4fee-a497-0ec86934965f",
+          "associationId": "${MEDIA_ID}",
+          "associationType": "PublishableMedia",
+          "read": true,
+          "liked": false,
+          "bookmarked": false,
+          "position": 670,
+          "createdAt": "2024-02-28T07:24:25.407",
+          "updatedAt": "2024-03-10T15:20:46.157"
+        },
+        "copyable": false,
+        "unpublishable": false
+      },
+      "userSection": {
+        "id": "6be1f452-80b6-4e7f-bc44-c41b7a3763f3",
+        "userId": "0ebaa2ec-b796-4fee-a497-0ec86934965f",
+        "institutionId": "${INST_ID}",
+        "role": "Student",
+        "sectionId": "5c4ac4ff-13bb-4ea7-b252-f162d2e6de70",
+        "sectionNumber": "ELEC4404_SEM-1_2024",
+        "courseId": "b6bba317-8794-4e79-b7ec-b79762f895b0",
+        "termId": "bb68dc0a-35d7-4d94-8a9c-55f69ad8981a",
+        "createdAt": "2024-02-25T15:09:06.482Z",
+        "updatedAt": "2024-02-25T15:09:06.482Z"
+      },
+      "questionCount": 0,
+      "hideUncaptionedVideo": false,
+      "downloadPermissionsByMediaId": {
+        "${MEDIA_ID}": {
+          "canDownload": true,
+          "audioDownloadsOnly": false
+        }
+      },
+      "noLessonDate": false,
+      "isScheduled": true,
+      "coverImage": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/poster1.jpg",
+      "hasContent": true,
+      "hasAvailableVideo": true,
+      "hasAvailableSlideDeck": false,
+      "hasVideo": true,
+      "hasSlideDeck": false,
+      "medias": [
+        {
+          "id": "${MEDIA_ID}",
+          "title": "${NAME}",
+          "mediaType": "Video",
+          "coverImage": "https://thumbnails.echo360.net.au/0000.${INST_ID}/${MEDIA_ID}/1/poster1.jpg",
+          "isScheduled": false,
+          "isAvailable": true,
+          "isRead": true,
+          "isDownloadable": true,
+          "isProcessing": false,
+          "isFailed": false,
+          "isPreliminary": false,
+          "isInteractiveMedia": false,
+          "is360Video": false,
+          "isOwned": false,
+          "downloadUri": "/media/download/${MEDIA_ID}/ELEC4404%20-%2027%20Feb%202024,%2009:00%20-%20Lecture",
+          "canCopy": false,
+          "unpublishable": false,
+          "hasResponded": null
+        }
+      ],
+      "isLive": false,
+      "isPast": true,
+      "isFuture": false,
+      "startTimeUTC": "2024-02-27T00:58:00.000Z",
+      "endTimeUTC": "2024-02-27T02:52:00.000Z",
+      "captureEndedAt": "2024-02-27T10:52:00.109"
+    }
+  ]
+}
+```
+
+```
+https://echo360.net.au/api/ui/library/medias/${SOME_ID}/download-info
+
+{
+  "status": "ok",
+  "message": "",
+  "data": {
+    "audioFiles": [
+      {
+        "fileName": "audio.mp3",
+        "fileSize": ${SIZE_AUDIO},
+        "label": "MP3"
+      }
+    ],
+    "primaryFiles": {
+      "posterUrl": "https://thumbnails.echo360.net.au/0000.${INSTITUTION_ID}/${SOME_ID}/1/poster1.jpg?x-uid=${USER_ID}&x-instid=${INSTITUTION_ID}&x-mid=${SOME_ID}&x-act=mediaDownload&x-src=desktop",
+      "files": [
+        {
+          "fileName": "sd1.mp4",
+          "fileSize": ${SIZE_SOURCE_1_SD},
+          "label": "Lower"
+        },
+        {
+          "fileName": "hd1.mp4",
+          "fileSize": ${SIZE_SOURCE_2_HD},
+          "label": "Full"
+        }
+      ],
+      "isInteractive": false
+    },
+    "secondaryFiles": {
+      "posterUrl": "https://thumbnails.echo360.net.au/0000.${INSTITUTION_ID}/${SOME_ID}/1/poster2.jpg?x-uid=${USER_ID}&x-instid=${INSTITUTION_ID}&x-mid=${SOME_ID}&x-act=mediaDownload&x-src=desktop",
+      "files": [
+        {
+          "fileName": "sd2.mp4",
+          "fileSize": ${SIZE_SOURCE_2_SD},
+          "label": "Lower"
+        },
+        {
+          "fileName": "hd2.mp4",
+          "fileSize": ${SIZE_SOURCE_2_HD},
+          "label": "Full"
+        }
+      ],
+      "isInteractive": false
+    },
+    "transcriptFiles": []
+  }
+}
+```
+
+Transcript download
+
+```
+https://echo360.net.au/api/ui/echoplayer/lessons/${LESSON_ID}/medias/${MEDIA_ID}/transcript-file?format=vtt
+https://echo360.net.au/api/ui/echoplayer/lessons/${LESSON_ID}/medias/${MEDIA_ID}/transcript-file?format=text
+```
+
+```
+https://echo360.net.au/media/download/${SOME_ID}/${fileName}
+
+Downloads video.
+Note: Seems like the lessonId parameter is optional.
+```
diff --git a/_posts/2024-05-07-JLCPCB-shipping-costs._md b/_posts/2024-05-07-JLCPCB-shipping-costs._md
new file mode 100644
index 0000000..d0aca48
--- /dev/null
+++ b/_posts/2024-05-07-JLCPCB-shipping-costs._md
@@ -0,0 +1,71 @@
+---
+title: JLCPCB shipping costs
+author: peter
+date: 2024-05-07 20:19:45 +0800
+categories: [Blogging] # Blogging | Electronics | Programming | Mechanical
+tags: [getting started] # systems | embedded | rf | microwave | electronics | solidworks | automation
+# image: assets/img/2024-05-07-JLCPCB-shipping-cost/preview.png
+---
+
+# TLDR:
+
+These examples should get the point across
+
+| Dimensions                          | Merchandise price | Global Standard Direct Line | DHL express | S.F Express Standard | FedEx International Packet | UPS Express Saver |
+| ----------------------------------- | ----------------- | --------------------------- | ----------- | -------------------- | -------------------------- | ----------------- |
+| 100 mm \* 100 mm, 0.29 kg           | 65.29             | 2.27                        | 28.40       | 31.42                | 31.72                      | 49.52             |
+| 39 mm \* 40 mm (STENCIL), 0.33 kg   | 10.57             | 14.35                       | 28.40       | 31.42                | 31.72                      | 49.52             |
+| 100 mm \* 100 mm, 0.46 kg           | 76.86             | 14.35                       | 28.40       | 31.42                | 31.72                      | 49.52             |
+| 100 mm \* 100 mm, 0.67 kg           | -                 | 23.39                       | 40.49       | 37.42                | 45.02                      | 67.74             |
+| 100 mm \* 28 mm (Neptunium), 0.8 kg | 108.54            | 23.61                       | 40.49       | 37.42                | 45.02                      | 67.74             |
+| 1.19 kg order  |206.75$A |31.59 | 63.01 | 43.06 | 64.40 | 46.65$A |
+
+# Trial and error:
+
+## 2 layer boards
+
+2 layer boards, 5pcs, default modifiers
+
+Prices in AUD and shipping to Australia
+
+| Dimensions        | Merchandise price | Global Standard Direct Line | DHL express | S.F Express Standard | FedEx International Packet | UPS Express Saver |
+| ----------------- | ----------------- | --------------------------- | ----------- | -------------------- | -------------------------- | ----------------- |
+| 20 mm \* 20 mm:   | 6.06              | 2.27                        | 28.46       | 31.49                | 31.79                      | 49.63             |
+| 100 mm \* 100 mm: | 6.06              | 2.27                        | 28.46       | 31.49                | 31.79                      | 49.63             |
+
+## 4 layer boards
+
+4 layer boards, 5pcs, default modifiers
+
+Prices in AUD and shipping to Australia
+
+| Dimensions        | Merchandise price | Global Standard Direct Line | DHL express | S.F Express Standard | FedEx International Packet | UPS Express Saver |
+| ----------------- | ----------------- | --------------------------- | ----------- | -------------------- | -------------------------- | ----------------- |
+| 20 mm \* 20 mm:   | 10.60             | 2.27                        | 28.46       | 31.49                | 31.79                      | 49.63             |
+| 50 mm \* 50 mm:   | 10.60             | 2.27                        | 28.46       | 31.49                | 31.79                      | 49.63             |
+| 100 mm \* 100 mm: | 10.60             | 2.27                        | 28.46       | 31.49                | 31.79                      | 49.63             |
+
+100mm \* 100mm with medical and enig:
+
+| Dimensions                | Merchandise price | Global Standard Direct Line | DHL express | S.F Express Standard | FedEx International Packet | UPS Express Saver |
+| ------------------------- | ----------------- | --------------------------- | ----------- | -------------------- | -------------------------- | ----------------- |
+| 100 mm \* 100 mm, 0.29 kg | 65.29             | 2.27                        | 28.40       | 31.42                | 31.72                      | 49.52             |
+| 100 mm \* 100 mm, 0.46 kg | 76.86             | 14.35                       | 28.40       | 31.42                | 31.72                      | 49.52             |
+| 100 mm \* 100 mm, 0.67 kg | -                 | 23.39                       | 40.49       | 37.42                | 45.02                      | 67.74             |
+| Neptunium, 0.8 kg         | 108.54            | 23.61                       | 40.49       | 37.42                | 45.02                      | 67.74             |
+
+## Previous orders and shipping costs
+
+| Dimensions         | Layers | Assembly | Merchandise price | Global Standard Direct Line | DHL express | S.F Express Standard | FedEx International Packet | UPS Express Saver |
+| ------------------ | ------ | -------- | ----------------- | --------------------------- | ----------- | -------------------- | -------------------------- | ----------------- |
+| 100 mm \* 31.6 mm: | 2      | N        | 6.04 (2024 MAR)   | 2.27 (2024 MAR)             | -           | -                    | -                          | -                 |
+| 100 mm \* 31.6 mm: | 4      | Y        | 16.22 (2024 MAR)  | 2.30 (2024 MAR)             | -           | -                    | -                          | -                 |
+| 100 mm \* 28 mm:   | 4      | Y        | 108.54            | 23.61                       | 40.49       | 37.42                | 45.02                      | 67.74             |
+
+## Stencils
+
+They seem to be more expensive to ship than boards...
+
+| Dimensions                       | Merchandise price | Global Standard Direct Line | DHL express | S.F Express Standard | FedEx International Packet | UPS Express Saver |
+| -------------------------------- | ----------------- | --------------------------- | ----------- | -------------------- | -------------------------- | ----------------- |
+| 39 mm \* 40 mm (CUSTOM), 0.33 kg | 10.57             | 14.35                       | 28.40       | 31.42                | 31.72                      | 39.78             |
diff --git a/_posts/2024-09-05-Tutorial-Create-highresolution-images-of-Altium-schematics._md b/_posts/2024-09-05-Tutorial-Create-highresolution-images-of-Altium-schematics._md
new file mode 100644
index 0000000..722fc44
--- /dev/null
+++ b/_posts/2024-09-05-Tutorial-Create-highresolution-images-of-Altium-schematics._md
@@ -0,0 +1,16 @@
+---
+title: Tutorial: Create high-resolution images of Altium schematics
+author: peter
+date: 2024-09-05 05:50:04 +0800
+categories: [Blogging]    # Blogging | Electronics | Programming | Mechanical | SelfHosting
+tags: [getting started]   # systems | embedded | rf | microwave | electronics | solidworks | automation | tip
+# image: assets/img/2024-09-05-Tutorial-Create-high/preview.png
+---
+
+<!-- Smart PDF -> PDF -> pdftopng.exe -r 1500 (use windows to inherit system fonts, don't use WSL) -->
+<!-- Don't use imagemagick, creates poor-quality PDFs -->
+<!-- Doesn't seem to be possible to export vectors from altium or the pdf -->
+
+<!-- print preview -> right click -> export to emf -->
+
+<!-- For word - Select all - Copy paste into word or inkscape, altium exports as embedded media file (EMF) -->
diff --git a/_posts/2024-10-01-Fixing-a-Missileworks-RRC3._md b/_posts/2024-10-01-Fixing-a-Missileworks-RRC3._md
new file mode 100644
index 0000000..f7ca952
--- /dev/null
+++ b/_posts/2024-10-01-Fixing-a-Missileworks-RRC3._md
@@ -0,0 +1,12 @@
+---
+title: Fixing a Missileworks RRC3
+author: peter
+date: 2024-10-01 19:41:08 +0800
+categories: [Blogging] # Blogging | Electronics | Programming | Mechanical | SelfHosting
+tags: [getting started] # systems | embedded | rf | microwave | electronics | solidworks | automation | tip
+# image: assets/img/2024-10-01-Fixing-a-Missilework/preview.png
+---
+
+## Debug pinout
+
+![debug pinouts](/assets/img/2024-10-01-Fixing-a-Missilework/jtag_pinout.png)
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
new file mode 100644
index 0000000..e6cf7c2
--- /dev/null
+++ b/_sass/addon/commons.scss
@@ -0,0 +1,1532 @@
+/* The common styles */
+
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    &[data-mode='light'] {
+      @include light-scheme;
+    }
+
+    &[data-mode='dark'] {
+      @include dark-scheme;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode='dark'] {
+      @include dark-scheme;
+    }
+
+    &[data-mode='light'] {
+      @include light-scheme;
+    }
+  }
+
+  font-size: 16px;
+}
+
+body {
+  background: var(--main-bg);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+  color: var(--text-color);
+  -webkit-font-smoothing: antialiased;
+  font-family: $font-family-base;
+}
+
+/* --- Typography --- */
+
+@for $i from 1 through 5 {
+  h#{$i} {
+    @extend %heading;
+
+    @if $i > 1 {
+      @extend %section;
+      @extend %anchor;
+    }
+
+    @if $i < 5 {
+      $factor: 0.18rem;
+
+      @if $i == 1 {
+        $factor: 0.23rem;
+      }
+
+      font-size: 1rem + (5 - $i) * $factor;
+    } @else {
+      font-size: 1rem;
+    }
+  }
+}
+
+a {
+  @extend %link-color;
+
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 0.35s ease-in-out;
+
+  .blur & {
+    $blur: 20px;
+
+    -webkit-filter: blur($blur);
+    filter: blur($blur);
+  }
+}
+
+blockquote {
+  border-left: 5px solid var(--blockquote-border-color);
+  padding-left: 1rem;
+  color: var(--blockquote-text-color);
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
+
+  &[class^='prompt-'] {
+    border-left: 0;
+    position: relative;
+    padding: 1rem 1rem 1rem 3rem;
+    color: var(--prompt-text-color);
+
+    @extend %rounded;
+
+    &::before {
+      text-align: center;
+      width: 3rem;
+      position: absolute;
+      left: 0.25rem;
+      margin-top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+
+  @include prompt('tip', '\f0eb', 'regular');
+  @include prompt('info', '\f06a');
+  @include prompt('warning', '\f06a');
+  @include prompt('danger', '\f071');
+}
+
+kbd {
+  font-family: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.3rem;
+  min-width: 1.75rem;
+  text-align: center;
+  margin: 0 0.3rem;
+  padding-top: 0.1rem;
+  color: var(--kbd-text-color);
+  background-color: var(--kbd-bg-color);
+  border-radius: 0.25rem;
+  border: solid 1px var(--kbd-wrap-color);
+  box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
+}
+
+hr {
+  border-color: var(--main-border-color);
+  opacity: 1;
+}
+
+footer {
+  background-color: var(--main-bg);
+  height: $footer-height;
+  border-top: 1px solid var(--main-border-color);
+
+  @extend %text-xs;
+
+  a {
+    @extend %text-highlight;
+
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+
+  em {
+    @extend %text-highlight;
+  }
+
+  p {
+    text-align: center;
+    margin-bottom: 0;
+  }
+}
+
+/* fontawesome icons */
+i {
+  &.far,
+  &.fas {
+    @extend %no-cursor;
+  }
+}
+
+/* --- Panels --- */
+
+.access {
+  top: 2rem;
+  transition: top 0.2s ease-in-out;
+  margin-top: 3rem;
+  margin-bottom: 4rem;
+
+  &:only-child {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+
+  > section {
+    padding-left: 1rem;
+    border-left: 1px solid var(--main-border-color);
+
+    &:not(:last-child) {
+      margin-bottom: 4rem;
+    }
+  }
+
+  .content {
+    font-size: 0.9rem;
+  }
+}
+
+#panel-wrapper {
+  /* the headings */
+  .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
+    @include label(inherit);
+  }
+
+  .post-tag {
+    line-height: 1.05rem;
+    font-size: 0.85rem;
+    border-radius: 0.8rem;
+    padding: 0.3rem 0.5rem;
+    margin: 0 0.35rem 0.5rem 0;
+
+    &:hover {
+      transition: all 0.3s ease-in;
+    }
+  }
+}
+
+#access-lastmod {
+  a {
+    &:hover {
+      @extend %link-hover;
+    }
+
+    @extend %no-bottom-border;
+
+    color: inherit;
+  }
+}
+
+.footnotes > ol {
+  padding-left: 2rem;
+  margin-top: 0.5rem;
+
+  > li {
+    &:not(:last-child) {
+      margin-bottom: 0.3rem;
+    }
+
+    @extend %sup-fn-target;
+
+    > p {
+      margin-left: 0.25em;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.footnote {
+  @at-root a#{&} {
+    @include ml-mr(1px);
+    @include pl-pr(2px);
+
+    border-bottom-style: none !important;
+  }
+}
+
+sup {
+  @extend %sup-fn-target;
+}
+
+.reversefootnote {
+  @at-root a#{&} {
+    font-size: 0.6rem;
+    line-height: 1;
+    position: relative;
+    bottom: 0.25em;
+    margin-left: 0.25em;
+    border-bottom-style: none !important;
+  }
+}
+
+/* --- Begin of Markdown table style --- */
+
+/* it will be created by Liquid */
+.table-wrapper {
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+
+  > table {
+    min-width: 100%;
+    overflow-x: auto;
+    border-spacing: 0;
+
+    thead {
+      border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+
+      th {
+        @extend %table-cell;
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid var(--tb-border-color);
+
+        &:nth-child(2n) {
+          background-color: var(--tb-even-bg);
+        }
+
+        &:nth-child(2n + 1) {
+          background-color: var(--tb-odd-bg);
+        }
+
+        td {
+          @extend %table-cell;
+        }
+      }
+    } /* tbody */
+  } /* table */
+}
+
+/* --- 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;
+
+  border: 0;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+
+  &::before {
+    @extend %rounded;
+
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: var(--card-hovor-bg);
+    opacity: 0;
+    transition: opacity 0.35s ease-in-out;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.3;
+    }
+  }
+}
+
+main {
+  line-height: 1.75;
+
+  h1 {
+    margin-top: 2rem;
+  }
+
+  p {
+    > a.popup {
+      &:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
+    }
+  }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
+}
+
+.post-meta {
+  @extend %text-sm;
+
+  a {
+    &:not([class]):hover {
+      @extend %link-hover;
+    }
+  }
+
+  em {
+    @extend %normal-font-style;
+  }
+}
+
+.content {
+  font-size: 1.08rem;
+  margin-top: 2rem;
+  overflow-wrap: break-word;
+
+  a {
+    &.popup {
+      @extend %no-cursor;
+      @extend %img-caption;
+      @include mt-mb(0.5rem);
+
+      cursor: zoom-in;
+    }
+
+    &:not(.img-link) {
+      @extend %link-underline;
+
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+  }
+
+  ol,
+  ul {
+    &:not([class]),
+    &.task-list {
+      -webkit-padding-start: 1.75rem;
+      padding-inline-start: 1.75rem;
+
+      li {
+        margin: 0.25rem 0;
+        padding-left: 0.25rem;
+      }
+
+      ol,
+      ul {
+        -webkit-padding-start: 1.25rem;
+        padding-inline-start: 1.25rem;
+        margin: 0.5rem 0;
+      }
+    }
+  }
+
+  ul.task-list {
+    -webkit-padding-start: 1.25rem;
+    padding-inline-start: 1.25rem;
+
+    li {
+      list-style-type: none;
+      padding-left: 0;
+
+      /* checkbox icon */
+      > i {
+        width: 2rem;
+        margin-left: -1.25rem;
+        color: var(--checkbox-color);
+
+        &.checked {
+          color: var(--checkbox-checked-color);
+        }
+      }
+
+      ul {
+        -webkit-padding-start: 1.75rem;
+        padding-inline-start: 1.75rem;
+      }
+    }
+
+    input[type='checkbox'] {
+      margin: 0 0.5rem 0.2rem -1.3rem;
+      vertical-align: middle;
+    }
+  } /* ul */
+
+  dl > dd {
+    margin-left: 1rem;
+  }
+
+  ::marker {
+    color: var(--text-muted-color);
+  }
+} /* .content */
+
+.tag:hover {
+  @extend %tag-hover;
+}
+
+.post-tag {
+  display: inline-block;
+  min-width: 2rem;
+  text-align: center;
+  border-radius: 0.5rem;
+  border: 1px solid var(--btn-border-color);
+  padding: 0 0.4rem;
+  color: var(--text-muted-color);
+  line-height: 1.3rem;
+
+  &:not(:last-child) {
+    margin-right: 0.2rem;
+  }
+}
+
+.rounded-10 {
+  border-radius: 10px !important;
+}
+
+.img-link {
+  color: transparent;
+  display: inline-flex;
+}
+
+.shimmer {
+  overflow: hidden;
+  position: relative;
+  background: var(--img-bg);
+
+  &::before {
+    content: '';
+    position: absolute;
+    background: var(--shimmer-bg);
+    height: 100%;
+    width: 100%;
+    -webkit-animation: shimmer 1.3s infinite;
+    animation: shimmer 1.3s infinite;
+  }
+
+  @-webkit-keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+.embed-video {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+  aspect-ratio: 16 / 9;
+
+  @extend %rounded;
+
+  &.twitch {
+    aspect-ratio: 310 / 189;
+  }
+
+  &.file {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    margin-bottom: 0;
+  }
+
+  @extend %img-caption;
+}
+
+.embed-audio {
+  width: 100%;
+  display: block;
+
+  @extend %img-caption;
+}
+
+/* --- buttons --- */
+.btn-lang {
+  border: 1px solid !important;
+  padding: 1px 3px;
+  border-radius: 3px;
+  color: var(--link-color);
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+/* --- Effects classes --- */
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.btn-box-shadow {
+  box-shadow: var(--card-shadow);
+}
+
+/* overwrite bootstrap muted */
+.text-muted {
+  color: var(--text-muted-color) !important;
+}
+
+/* Overwrite bootstrap tooltip */
+.tooltip-inner {
+  font-size: 0.7rem;
+  max-width: 220px;
+  text-align: left;
+}
+
+/* Overwrite bootstrap outline button */
+.btn.btn-outline-primary {
+  &:not(.disabled):hover {
+    border-color: #007bff !important;
+  }
+}
+
+.disabled {
+  color: rgb(206, 196, 196);
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
+.hide-border-bottom {
+  border-bottom: none !important;
+}
+
+.input-focus {
+  box-shadow: none;
+  border-color: var(--input-focus-border-color) !important;
+  background: center !important;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+.left {
+  float: left;
+  margin: 0.75rem 1rem 1rem 0;
+}
+
+.right {
+  float: right;
+  margin: 0.75rem 0 1rem 1rem;
+}
+
+/* --- Overriding --- */
+
+/* mermaid */
+.mermaid {
+  text-align: center;
+}
+
+/* MathJax */
+mjx-container {
+  overflow-y: hidden;
+  min-width: auto !important;
+}
+
+/* --- sidebar layout --- */
+
+$sidebar-display: 'sidebar-display';
+$btn-border-width: 3px;
+$btn-mb: 0.5rem;
+
+#sidebar {
+  @include pl-pr(0);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  overflow-y: auto;
+  width: $sidebar-width;
+  z-index: 99;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border-color);
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  %sidebar-link-hover {
+    &:hover {
+      color: var(--sidebar-active-color);
+    }
+  }
+
+  a {
+    @extend %sidebar-links;
+  }
+
+  #avatar {
+    display: block;
+    width: 7rem;
+    height: 7rem;
+    overflow: hidden;
+    box-shadow: var(--avatar-border-color) 0 0 0 2px;
+    transform: translateZ(0); /* fixed the zoom in Safari */
+
+    img {
+      transition: transform 0.5s;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  .profile-wrapper {
+    @include mt-mb(2.5rem);
+    @extend %clickable-transition;
+
+    padding-left: 2.5rem;
+    padding-right: 1.25rem;
+    width: 100%;
+  }
+
+  .site-title {
+    font-family: inherit;
+    font-weight: 900;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    letter-spacing: 0.25px;
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
+
+    a {
+      @extend %clickable-transition;
+      @extend %sidebar-link-hover;
+
+      color: var(--site-title-color);
+    }
+  }
+
+  .site-subtitle {
+    font-size: 95%;
+    color: var(--site-subtitle-color);
+    margin-top: 0.25rem;
+    word-spacing: 1px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  ul {
+    margin-bottom: 2rem;
+
+    li.nav-item {
+      opacity: 0.9;
+      width: 100%;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+
+      a.nav-link {
+        @include pt-pb(0.6rem);
+
+        display: flex;
+        align-items: center;
+        border-radius: 0.75rem;
+        font-weight: 600;
+
+        &:hover {
+          background-color: var(--sidebar-hover-bg);
+        }
+
+        i {
+          font-size: 95%;
+          opacity: 0.8;
+          margin-right: 1.5rem;
+        }
+
+        span {
+          font-size: 90%;
+          letter-spacing: 0.2px;
+        }
+      }
+
+      &.active {
+        .nav-link {
+          color: var(--sidebar-active-color);
+          background-color: var(--sidebar-hover-bg);
+
+          span {
+            opacity: 1;
+          }
+        }
+      }
+
+      &:not(:first-child) {
+        margin-top: 0.25rem;
+      }
+    }
+  }
+
+  .sidebar-bottom {
+    padding-left: 2rem;
+    padding-right: 1rem;
+    margin-bottom: 1.5rem;
+
+    $btn-size: 1.75rem;
+
+    %button {
+      width: $btn-size;
+      height: $btn-size;
+      margin-bottom: $btn-mb; // multi line gap
+      border-radius: 50%;
+      color: var(--sidebar-btn-color);
+      background-color: var(--sidebar-btn-bg);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:not(:focus-visible) {
+        box-shadow: var(--sidebar-border-color) 0 0 0 1px;
+      }
+
+      &:hover {
+        background-color: var(--sidebar-hover-bg);
+      }
+    }
+
+    a {
+      @extend %button;
+      @extend %sidebar-link-hover;
+      @extend %clickable-transition;
+
+      &:not(:last-child) {
+        margin-right: $sb-btn-gap;
+      }
+    }
+
+    i {
+      line-height: $btn-size;
+    }
+
+    #mode-toggle {
+      @extend %button;
+      @extend %sidebar-links;
+      @extend %sidebar-link-hover;
+    }
+
+    .icon-border {
+      @extend %no-cursor;
+      @include ml-mr(calc(($sb-btn-gap - $btn-border-width) / 2));
+
+      background-color: var(--sidebar-btn-color);
+      content: '';
+      width: $btn-border-width;
+      height: $btn-border-width;
+      border-radius: 50%;
+      margin-bottom: $btn-mb;
+    }
+  } /* .sidebar-bottom */
+} /* #sidebar */
+
+@media (hover: hover) {
+  #sidebar ul > li:last-child::after {
+    transition: top 0.5s ease;
+  }
+
+  .nav-link {
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .post-preview {
+    transition: background-color 0.35s ease-in-out;
+  }
+}
+
+#search-result-wrapper {
+  display: none;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+
+  .content {
+    margin-top: 2rem;
+  }
+}
+
+/* --- top-bar --- */
+
+#topbar-wrapper {
+  height: $topbar-height;
+  background-color: var(--topbar-bg);
+}
+
+#topbar {
+  button i {
+    color: #999999;
+  }
+
+  #breadcrumb {
+    font-size: 1rem;
+    color: var(--text-muted-color);
+    padding-left: 0.5rem;
+
+    a:hover {
+      @extend %link-hover;
+    }
+
+    span {
+      &:not(:last-child) {
+        &::after {
+          content: '›';
+          padding: 0 0.3rem;
+        }
+      }
+    }
+  }
+} /* #topbar */
+
+::-webkit-input-placeholder {
+  @include placeholder;
+}
+
+::-moz-placeholder {
+  @include placeholder;
+}
+
+:-ms-input-placeholder {
+  @include placeholder;
+}
+
+::-ms-input-placeholder {
+  @include placeholder;
+}
+
+::placeholder {
+  @include placeholder;
+}
+
+:focus::-webkit-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-moz-placeholder {
+  @include placeholder-focus;
+}
+
+:focus:-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::placeholder {
+  @include placeholder-focus;
+}
+
+search {
+  display: flex;
+  width: 100%;
+  border-radius: 1rem;
+  border: 1px solid var(--search-border-color);
+  background: var(--main-bg);
+  padding: 0 0.5rem;
+
+  i {
+    z-index: 2;
+    font-size: 0.9rem;
+    color: var(--search-icon-color);
+  }
+}
+
+#sidebar-trigger,
+#search-trigger {
+  display: none;
+}
+
+/* 'Cancel' link */
+#search-cancel {
+  color: var(--link-color);
+  display: none;
+  white-space: nowrap;
+
+  @extend %cursor-pointer;
+}
+
+#search-input {
+  background: center;
+  border: 0;
+  border-radius: 0;
+  padding: 0.18rem 0.3rem;
+  color: var(--text-color);
+  height: auto;
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+#search-hints {
+  padding: 0 1rem;
+
+  h4 {
+    margin-bottom: 1.5rem;
+  }
+
+  .post-tag {
+    display: inline-block;
+    line-height: 1rem;
+    font-size: 1rem;
+    background: var(--search-tag-bg);
+    border: none;
+    padding: 0.5rem;
+    margin: 0 1.25rem 1rem 0;
+
+    &::before {
+      content: '#';
+      color: var(--text-muted-color);
+      padding-right: 0.2rem;
+    }
+
+    @extend %link-color;
+  }
+}
+
+#search-results {
+  padding-bottom: 3rem;
+
+  a {
+    &:hover {
+      @extend %link-hover;
+    }
+
+    @extend %link-color;
+    @extend %no-bottom-border;
+    @extend %heading;
+
+    font-size: 1.4rem;
+    line-height: 2.5rem;
+  }
+
+  > article {
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+
+    /* icons */
+    i {
+      color: #818182;
+      margin-right: 0.15rem;
+      font-size: 80%;
+    }
+
+    > p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+} /* #search-results */
+
+#topbar-title {
+  display: none;
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: sans-serif;
+  color: var(--topbar-text-color);
+  text-align: center;
+  width: 70%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  white-space: nowrap;
+}
+
+#mask {
+  display: none;
+  position: fixed;
+  inset: 0 0 0 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+
+  @at-root [#{$sidebar-display}] & {
+    display: block !important;
+  }
+}
+
+/* --- basic wrappers --- */
+
+#main-wrapper {
+  position: relative;
+
+  @include pl-pr(0);
+
+  > .container {
+    min-height: 100vh;
+  }
+}
+
+#topbar-wrapper.row,
+#main-wrapper > .container > .row,
+#search-result-wrapper > .row {
+  @include ml-mr(0);
+}
+
+#tail-wrapper {
+  > :not(script) {
+    margin-top: 3rem;
+  }
+}
+
+/* --- button back-to-top --- */
+
+#back-to-top {
+  visibility: hidden;
+  opacity: 0;
+  z-index: 1;
+  cursor: pointer;
+  position: fixed;
+  right: 1rem;
+  bottom: calc($footer-height-large - $back2top-size / 2);
+  background: var(--button-bg);
+  color: var(--btn-backtotop-color);
+  padding: 0;
+  width: $back2top-size;
+  height: $back2top-size;
+  border-radius: 50%;
+  border: 1px solid var(--btn-backtotop-border-color);
+  transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
+
+  &:hover {
+    transform: translate3d(0, -5px, 0);
+    -webkit-transform: translate3d(0, -5px, 0);
+  }
+
+  i {
+    line-height: $back2top-size;
+    position: relative;
+    bottom: 2px;
+  }
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+#notification {
+  @-webkit-keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
+  @keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
+  .toast-header {
+    background: none;
+    border-bottom: none;
+    color: inherit;
+  }
+
+  .toast-body {
+    font-family: Lato, sans-serif;
+    line-height: 1.25rem;
+
+    button {
+      font-size: 90%;
+      min-width: 4rem;
+    }
+  }
+
+  &.toast {
+    &.show {
+      display: block;
+      min-width: 20rem;
+      border-radius: 0.5rem;
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+      background-color: rgba(255, 255, 255, 0.5);
+      color: #1b1b1eba;
+      position: fixed;
+      left: 50%;
+      bottom: 20%;
+      transform: translateX(-50%);
+      -webkit-animation: popup 0.8s;
+      animation: popup 0.8s;
+    }
+  }
+}
+
+/*
+  Responsive Design:
+
+ {sidebar, content, panel} >= 1200px screen width
+ {sidebar, content} >= 850px screen width
+ {content} <= 849px screen width
+
+*/
+
+@media all and (max-width: 576px) {
+  main {
+    .content {
+      > blockquote[class^='prompt-'] {
+        @include ml-mr(-1rem);
+
+        border-radius: 0;
+        max-width: none;
+      }
+    }
+  }
+
+  #avatar {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+
+@media all and (max-width: 768px) {
+  %full-width {
+    max-width: 100%;
+  }
+
+  #topbar {
+    @extend %full-width;
+  }
+
+  #main-wrapper > .container {
+    @extend %full-width;
+    @include pl-pr(0);
+  }
+}
+
+/* hide sidebar and panel */
+@media all and (max-width: 849px) {
+  @mixin slide($append: null) {
+    $basic: transform 0.4s ease;
+
+    @if $append {
+      transition: $basic, $append;
+    } @else {
+      transition: $basic;
+    }
+  }
+
+  footer {
+    @include slide;
+
+    height: $footer-height-large;
+    padding: 1.5rem 0;
+  }
+
+  [#{$sidebar-display}] {
+    #sidebar {
+      transform: translateX(0);
+    }
+
+    #main-wrapper {
+      transform: translateX($sidebar-width);
+    }
+
+    #back-to-top {
+      visibility: hidden;
+    }
+  }
+
+  #sidebar {
+    @include slide;
+
+    transform: translateX(-$sidebar-width); /* hide */
+    -webkit-transform: translateX(-$sidebar-width);
+  }
+
+  #main-wrapper {
+    @include slide;
+  }
+
+  #topbar,
+  #main-wrapper > .container {
+    max-width: 100%;
+  }
+
+  #search-result-wrapper {
+    width: 100%;
+  }
+
+  #breadcrumb,
+  search {
+    display: none;
+  }
+
+  #topbar-wrapper {
+    @include slide(top 0.2s ease);
+
+    left: 0;
+  }
+
+  main,
+  #panel-wrapper {
+    margin-top: 0;
+  }
+
+  #topbar-title,
+  #sidebar-trigger,
+  #search-trigger {
+    display: block;
+  }
+
+  #search-result-wrapper .content {
+    letter-spacing: 0;
+  }
+
+  #tags {
+    justify-content: center !important;
+  }
+
+  h1.dynamic-title {
+    display: none;
+
+    ~ .content {
+      margin-top: 2.5rem;
+    }
+  }
+} /* max-width: 849px */
+
+/* Sidebar is visible */
+@media all and (min-width: 850px) {
+  /* Solved jumping scrollbar */
+  html {
+    overflow-y: scroll;
+  }
+
+  #main-wrapper {
+    margin-left: $sidebar-width;
+  }
+
+  #sidebar {
+    .profile-wrapper {
+      margin-top: 3rem;
+    }
+  }
+
+  #search-hints {
+    display: none;
+  }
+
+  search {
+    max-width: $search-max-width;
+  }
+
+  #search-result-wrapper {
+    max-width: $main-content-max-width;
+    justify-content: start !important;
+  }
+
+  main {
+    h1 {
+      margin-top: 3rem;
+    }
+  }
+
+  div.content .table-wrapper > table {
+    min-width: 70%;
+  }
+
+  /* button 'back-to-Top' position */
+  #back-to-top {
+    right: 5%;
+    bottom: calc($footer-height - $back2top-size / 2);
+  }
+
+  #topbar-title {
+    text-align: left;
+  }
+}
+
+/* Pad horizontal */
+@media all and (min-width: 992px) and (max-width: 1199px) {
+  #main-wrapper > .container .col-lg-11 {
+    flex: 0 0 96%;
+    max-width: 96%;
+  }
+}
+
+/* Compact icons in sidebar & panel hidden */
+@media all and (min-width: 850px) and (max-width: 1199px) {
+  #search-results > div {
+    max-width: 700px;
+  }
+
+  #breadcrumb {
+    width: 65%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    white-space: nowrap;
+  }
+}
+
+/* panel hidden */
+@media all and (max-width: 1199px) {
+  #panel-wrapper {
+    display: none;
+  }
+
+  #main-wrapper > .container > div.row {
+    justify-content: center !important;
+  }
+}
+
+/* --- desktop mode, both sidebar and panel are visible --- */
+
+@media all and (min-width: 1200px) {
+  search {
+    margin-right: 4rem;
+  }
+
+  #search-input {
+    transition: all 0.3s ease-in-out;
+  }
+
+  #search-results > article {
+    width: 45%;
+
+    &:nth-child(odd) {
+      margin-right: 1.5rem;
+    }
+
+    &:nth-child(even) {
+      margin-left: 1.5rem;
+    }
+
+    &:last-child:nth-child(odd) {
+      position: relative;
+      right: 24.3%;
+    }
+  }
+
+  .content {
+    font-size: 1.03rem;
+  }
+}
+
+@media all and (min-width: 1400px) {
+  #back-to-top {
+    right: calc((100vw - $sidebar-width - 1140px) / 2 + 3rem);
+  }
+}
+
+@media all and (min-width: 1650px) {
+  $icon-gap: 1rem;
+
+  #main-wrapper {
+    margin-left: $sidebar-width-large;
+  }
+
+  #topbar-wrapper {
+    left: $sidebar-width-large;
+  }
+
+  search {
+    margin-right: calc(
+      $main-content-max-width / 4 - $search-max-width - 0.75rem
+    );
+  }
+
+  #main-wrapper > .container {
+    max-width: $main-content-max-width;
+    padding-left: 1.75rem !important;
+    padding-right: 1.75rem !important;
+  }
+
+  main.col-12,
+  #tail-wrapper {
+    padding-right: 4.5rem !important;
+  }
+
+  #back-to-top {
+    right: calc(
+      (100vw - $sidebar-width-large - $main-content-max-width) / 2 + 2rem
+    );
+  }
+
+  #sidebar {
+    width: $sidebar-width-large;
+
+    .profile-wrapper {
+      margin-top: 3.5rem;
+      margin-bottom: 2.5rem;
+      padding-left: 3.5rem;
+    }
+
+    ul {
+      li.nav-item {
+        @include pl-pr(2.75rem);
+      }
+    }
+
+    .sidebar-bottom {
+      padding-left: 2.75rem;
+      margin-bottom: 1.75rem;
+
+      a:not(:last-child) {
+        margin-right: $sb-btn-gap-lg;
+      }
+
+      .icon-border {
+        @include ml-mr(calc(($sb-btn-gap-lg - $btn-border-width) / 2));
+      }
+    }
+  }
+} /* min-width: 1650px */
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
new file mode 100644
index 0000000..d1b7103
--- /dev/null
+++ b/_sass/addon/module.scss
@@ -0,0 +1,200 @@
+/*
+* Mainly scss modules, only imported to `assets/css/main.scss`
+*/
+
+/* ---------- scss placeholder --------- */
+
+%heading {
+  color: var(--heading-color);
+  font-weight: 400;
+  font-family: $font-family-heading;
+}
+
+%section {
+  main & {
+    margin-top: 2.5rem;
+    margin-bottom: 1.25rem;
+
+    &:focus {
+      outline: none; /* avoid outline in Safari */
+    }
+  }
+}
+
+%anchor {
+  .anchor {
+    font-size: 80%;
+  }
+
+  @media (hover: hover) {
+    .anchor {
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
+    }
+
+    &:hover {
+      .anchor {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
+      }
+    }
+  }
+}
+
+%tag-hover {
+  background: var(--tag-hover);
+  transition: background 0.35s ease-in-out;
+}
+
+%table-cell {
+  padding: 0.4rem 1rem;
+  font-size: 95%;
+  white-space: nowrap;
+}
+
+%link-hover {
+  color: #d2603a !important;
+  border-bottom: 1px solid #d2603a;
+  text-decoration: none;
+}
+
+%link-color {
+  color: var(--link-color);
+}
+
+%link-underline {
+  border-bottom: 1px solid var(--link-underline-color);
+}
+
+%clickable-transition {
+  transition: all 0.3s ease-in-out;
+}
+
+%no-cursor {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+%no-bottom-border {
+  border-bottom: none;
+}
+
+%cursor-pointer {
+  cursor: pointer;
+}
+
+%normal-font-style {
+  font-style: normal;
+}
+
+%rounded {
+  border-radius: $base-radius;
+}
+
+%img-caption {
+  + em {
+    display: block;
+    text-align: center;
+    font-style: normal;
+    font-size: 80%;
+    padding: 0;
+    color: #6d6c6c;
+  }
+}
+
+%sidebar-links {
+  color: var(--sidebar-muted-color);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+%text-clip {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+%text-highlight {
+  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) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
+@mixin pl-pr($val) {
+  padding-left: $val;
+  padding-right: $val;
+}
+
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
+  opacity: 0.6;
+}
+
+@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
+  color: $color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@mixin prompt($type, $fa-content, $fa-style: 'solid') {
+  &.prompt-#{$type} {
+    background-color: var(--prompt-#{$type}-bg);
+
+    &::before {
+      content: $fa-content;
+      color: var(--prompt-#{$type}-icon-color);
+      font: var(--fa-font-#{$fa-style});
+    }
+  }
+}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
new file mode 100644
index 0000000..68796f2
--- /dev/null
+++ b/_sass/addon/syntax.scss
@@ -0,0 +1,292 @@
+/*
+* The syntax highlight.
+*/
+
+@import 'colors/syntax-light';
+@import 'colors/syntax-dark';
+
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    &[data-mode='light'] {
+      @include light-syntax;
+    }
+
+    &[data-mode='dark'] {
+      @include dark-syntax;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode='dark'] {
+      @include dark-syntax;
+    }
+
+    &[data-mode='light'] {
+      @include light-syntax;
+    }
+  }
+}
+
+/* -- code snippets -- */
+
+%code-snippet-bg {
+  background-color: var(--highlight-bg-color);
+}
+
+%code-snippet-padding {
+  padding-left: 1rem;
+  padding-right: 1.5rem;
+}
+
+.highlighter-rouge {
+  color: var(--highlighter-rouge-color);
+  margin-top: 0.5rem;
+  margin-bottom: 1.2em; /* Override BS Inline-code style */
+}
+
+.highlight {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  @at-root figure#{&} {
+    @extend %code-snippet-bg;
+  }
+
+  overflow: auto;
+  padding-bottom: 0.75rem;
+
+  pre {
+    margin-bottom: 0;
+    font-size: $code-font-size;
+    line-height: 1.4rem;
+    word-wrap: normal; /* Fixed Safari overflow-x */
+  }
+
+  table {
+    td {
+      &:first-child {
+        display: inline-block;
+        margin-left: 1rem;
+        margin-right: 0.75rem;
+      }
+
+      &:last-child {
+        padding-right: 2rem !important;
+      }
+
+      pre {
+        overflow: visible; /* Fixed iOS safari overflow-x */
+        word-break: normal; /* Fixed iOS safari linenos code break */
+      }
+    }
+  }
+
+  .lineno {
+    text-align: right;
+    color: var(--highlight-lineno-color);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+} /* .highlight */
+
+code {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  color: var(--code-color);
+
+  &.highlighter-rouge {
+    font-size: $code-font-size;
+    padding: 3px 5px;
+    word-break: break-word;
+    border-radius: 4px;
+    background-color: var(--inline-code-bg);
+  }
+
+  &.filepath {
+    background-color: inherit;
+    color: var(--filepath-text-color);
+    font-weight: 600;
+    padding: 0;
+  }
+
+  a > &.highlighter-rouge {
+    padding-bottom: 0; /* show link's underlinke */
+    color: inherit;
+  }
+
+  a:hover > &.highlighter-rouge {
+    border-bottom: none;
+  }
+
+  blockquote & {
+    color: inherit;
+  }
+}
+
+td.rouge-code {
+  @extend %code-snippet-padding;
+
+  /*
+    Prevent some browser extends from
+    changing the URL string of code block.
+  */
+  a {
+    color: inherit !important;
+    border-bottom: none !important;
+    pointer-events: none;
+  }
+}
+
+div[class^='language-'] {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  box-shadow: var(--language-border-color) 0 0 0 1px;
+
+  .content > & {
+    @include ml-mr(-1rem);
+
+    border-radius: 0;
+  }
+
+  .highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+/* Hide line numbers for default, console, and terminal code snippets */
+div {
+  &.nolineno,
+  &.language-plaintext,
+  &.language-console,
+  &.language-terminal {
+    td:first-child {
+      padding: 0 !important;
+      margin-right: 0;
+
+      .lineno {
+        display: none;
+      }
+    }
+  }
+}
+
+.code-header {
+  @extend %no-cursor;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: $code-header-height;
+  margin-left: 0.75rem;
+  margin-right: 0.25rem;
+
+  /* the label block */
+  span {
+    line-height: $code-header-height;
+
+    /* label icon */
+    i {
+      font-size: 1rem;
+      width: $code-icon-width;
+      color: var(--code-header-icon-color);
+
+      &.small {
+        font-size: 70%;
+      }
+    }
+
+    @at-root [file] #{&} > i {
+      position: relative;
+      top: 1px; /* center the file icon */
+    }
+
+    /* label text */
+    &::after {
+      content: attr(data-label-text);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--code-header-text-color);
+    }
+  }
+
+  /* clipboard */
+  button {
+    @extend %cursor-pointer;
+    @extend %rounded;
+
+    border: 1px solid transparent;
+    height: $code-header-height;
+    width: $code-header-height;
+    padding: 0;
+    background-color: inherit;
+
+    i {
+      color: var(--code-header-icon-color);
+    }
+
+    &[timeout] {
+      &:hover {
+        border-color: var(--clipboard-checked-color);
+      }
+
+      i {
+        color: var(--clipboard-checked-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:not([timeout]):hover {
+      background-color: rgba(128, 128, 128, 0.37);
+
+      i {
+        color: white;
+      }
+    }
+  }
+}
+
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .content > & {
+      @include ml-mr(0);
+
+      border-radius: $base-radius;
+    }
+
+    .code-header {
+      @include ml-mr(0);
+
+      $dot-margin: 1rem;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        margin-left: $dot-margin;
+        width: $code-dot-size;
+        height: $code-dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          ($code-dot-size + $code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
+      }
+
+      span {
+        // center the text of label
+        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
+      }
+    }
+  }
+}
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
new file mode 100644
index 0000000..8924a00
--- /dev/null
+++ b/_sass/addon/variables.scss
@@ -0,0 +1,33 @@
+/*
+ * The SCSS variables
+ */
+
+/* sidebar */
+
+$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 */
+
+$topbar-height: 3rem !default;
+$search-max-width: 200px !default;
+$footer-height: 5rem !default;
+$footer-height-large: 6rem !default; /* screen width: < 850px */
+$main-content-max-width: 1250px !default;
+$base-radius: 0.625rem !default;
+$back2top-size: 2.75rem !default;
+
+/* syntax highlight */
+
+$code-font-size: 0.85rem !default;
+$code-header-height: 2.25rem !default;
+$code-dot-size: 0.75rem !default;
+$code-dot-gap: 0.5rem !default;
+$code-icon-width: 1.75rem !default;
+
+/* fonts */
+
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;
diff --git a/_sass/colors/syntax-dark.scss b/_sass/colors/syntax-dark.scss
new file mode 100644
index 0000000..d898c65
--- /dev/null
+++ b/_sass/colors/syntax-dark.scss
@@ -0,0 +1,164 @@
+/*
+ * The syntax dark mode styles.
+ */
+
+@mixin dark-syntax {
+  --language-border-color: #2d2d2d;
+  --highlight-bg-color: #151515;
+  --highlighter-rouge-color: #c9def1;
+  --highlight-lineno-color: #808080;
+  --inline-code-bg: #323238;
+  --code-color: #b0b0b0;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: #353535;
+  --code-header-icon-color: #565656;
+  --clipboard-checked-color: #2bcc2b;
+  --filepath-text-color: #cacaca;
+
+  .highlight .gp {
+    color: #87939d;
+  }
+
+  /* --- Syntax highlight theme from `rougify style base16.dark` --- */
+
+  .highlight table td {
+    padding: 5px;
+  }
+
+  .highlight table pre {
+    margin: 0;
+  }
+
+  .highlight,
+  .highlight .w {
+    color: #d0d0d0;
+    background-color: #151515;
+  }
+
+  .highlight .err {
+    color: #151515;
+    background-color: #ac4142;
+  }
+
+  .highlight .c,
+  .highlight .ch,
+  .highlight .cd,
+  .highlight .cm,
+  .highlight .cpf,
+  .highlight .c1,
+  .highlight .cs {
+    color: #848484;
+  }
+
+  .highlight .cp {
+    color: #f4bf75;
+  }
+
+  .highlight .nt {
+    color: #f4bf75;
+  }
+
+  .highlight .o,
+  .highlight .ow {
+    color: #d0d0d0;
+  }
+
+  .highlight .p,
+  .highlight .pi {
+    color: #d0d0d0;
+  }
+
+  .highlight .gi {
+    color: #90a959;
+  }
+
+  .highlight .gd {
+    color: #f08a8b;
+    background-color: #320000;
+  }
+
+  .highlight .gh {
+    color: #6a9fb5;
+    background-color: #151515;
+    font-weight: bold;
+  }
+
+  .highlight .k,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kv {
+    color: #aa759f;
+  }
+
+  .highlight .kc {
+    color: #d28445;
+  }
+
+  .highlight .kt {
+    color: #d28445;
+  }
+
+  .highlight .kd {
+    color: #d28445;
+  }
+
+  .highlight .s,
+  .highlight .sb,
+  .highlight .sc,
+  .highlight .dl,
+  .highlight .sd,
+  .highlight .s2,
+  .highlight .sh,
+  .highlight .sx,
+  .highlight .s1 {
+    color: #90a959;
+  }
+
+  .highlight .sa {
+    color: #aa759f;
+  }
+
+  .highlight .sr {
+    color: #75b5aa;
+  }
+
+  .highlight .si {
+    color: #b76d45;
+  }
+
+  .highlight .se {
+    color: #b76d45;
+  }
+
+  .highlight .nn {
+    color: #f4bf75;
+  }
+
+  .highlight .nc {
+    color: #f4bf75;
+  }
+
+  .highlight .no {
+    color: #f4bf75;
+  }
+
+  .highlight .na {
+    color: #6a9fb5;
+  }
+
+  .highlight .m,
+  .highlight .mb,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .il,
+  .highlight .mo,
+  .highlight .mx {
+    color: #90a959;
+  }
+
+  .highlight .ss {
+    color: #90a959;
+  }
+}
diff --git a/_sass/colors/syntax-light.scss b/_sass/colors/syntax-light.scss
new file mode 100644
index 0000000..6562c76
--- /dev/null
+++ b/_sass/colors/syntax-light.scss
@@ -0,0 +1,214 @@
+/*
+ * The syntax light mode code snippet colors.
+ */
+
+@mixin light-syntax {
+  /* --- custom light colors --- */
+  --language-border-color: #ececec;
+  --highlight-bg-color: #f6f8fa;
+  --highlighter-rouge-color: #3f596f;
+  --highlight-lineno-color: #9e9e9e;
+  --inline-code-bg: #f6f6f7;
+  --code-color: #3a3a3a;
+  --code-header-text-color: #a3a3a3;
+  --code-header-muted-color: #e5e5e5;
+  --code-header-icon-color: #c9c8c8;
+  --clipboard-checked-color: #43c743;
+
+  [class^='prompt-'] {
+    --inline-code-bg: #fbfafa;
+  }
+
+  /* --- Syntax highlight theme from `rougify style github` --- */
+
+  .highlight table td {
+    padding: 5px;
+  }
+
+  .highlight table pre {
+    margin: 0;
+  }
+
+  .highlight,
+  .highlight .w {
+    color: #24292f;
+    background-color: #f6f8fa;
+  }
+
+  .highlight .k,
+  .highlight .kd,
+  .highlight .kn,
+  .highlight .kp,
+  .highlight .kr,
+  .highlight .kt,
+  .highlight .kv {
+    color: #cf222e;
+  }
+
+  .highlight .gr {
+    color: #f6f8fa;
+  }
+
+  .highlight .gd {
+    color: #82071e;
+    background-color: #ffebe9;
+  }
+
+  .highlight .nb {
+    color: #953800;
+  }
+
+  .highlight .nc {
+    color: #953800;
+  }
+
+  .highlight .no {
+    color: #953800;
+  }
+
+  .highlight .nn {
+    color: #953800;
+  }
+
+  .highlight .sr {
+    color: #116329;
+  }
+
+  .highlight .na {
+    color: #116329;
+  }
+
+  .highlight .nt {
+    color: #116329;
+  }
+
+  .highlight .gi {
+    color: #116329;
+    background-color: #dafbe1;
+  }
+
+  .highlight .kc {
+    color: #0550ae;
+  }
+
+  .highlight .l,
+  .highlight .ld,
+  .highlight .m,
+  .highlight .mb,
+  .highlight .mf,
+  .highlight .mh,
+  .highlight .mi,
+  .highlight .il,
+  .highlight .mo,
+  .highlight .mx {
+    color: #0550ae;
+  }
+
+  .highlight .sb {
+    color: #0550ae;
+  }
+
+  .highlight .bp {
+    color: #0550ae;
+  }
+
+  .highlight .ne {
+    color: #0550ae;
+  }
+
+  .highlight .nl {
+    color: #0550ae;
+  }
+
+  .highlight .py {
+    color: #0550ae;
+  }
+
+  .highlight .nv,
+  .highlight .vc,
+  .highlight .vg,
+  .highlight .vi,
+  .highlight .vm {
+    color: #0550ae;
+  }
+
+  .highlight .o,
+  .highlight .ow {
+    color: #0550ae;
+  }
+
+  .highlight .gh {
+    color: #0550ae;
+    font-weight: bold;
+  }
+
+  .highlight .gu {
+    color: #0550ae;
+    font-weight: bold;
+  }
+
+  .highlight .s,
+  .highlight .sa,
+  .highlight .sc,
+  .highlight .dl,
+  .highlight .sd,
+  .highlight .s2,
+  .highlight .se,
+  .highlight .sh,
+  .highlight .sx,
+  .highlight .s1,
+  .highlight .ss {
+    color: #0a3069;
+  }
+
+  .highlight .nd {
+    color: #8250df;
+  }
+
+  .highlight .nf,
+  .highlight .fm {
+    color: #8250df;
+  }
+
+  .highlight .err {
+    color: #f6f8fa;
+    background-color: #82071e;
+  }
+
+  .highlight .c,
+  .highlight .ch,
+  .highlight .cd,
+  .highlight .cm,
+  .highlight .cp,
+  .highlight .cpf,
+  .highlight .c1,
+  .highlight .cs {
+    color: #68717a;
+  }
+
+  .highlight .gl {
+    color: #68717a;
+  }
+
+  .highlight .gt {
+    color: #68717a;
+  }
+
+  .highlight .ni {
+    color: #24292f;
+  }
+
+  .highlight .si {
+    color: #24292f;
+  }
+
+  .highlight .ge {
+    color: #24292f;
+    font-style: italic;
+  }
+
+  .highlight .gs {
+    color: #24292f;
+    font-weight: bold;
+  }
+} /* light-syntax */
diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
new file mode 100644
index 0000000..d9b1df6
--- /dev/null
+++ b/_sass/colors/typography-dark.scss
@@ -0,0 +1,147 @@
+/*
+ * The main dark mode styles
+ */
+
+@mixin dark-scheme {
+  /* Framework color */
+  --main-bg: rgb(27, 27, 30);
+  --mask-bg: rgb(68, 69, 70);
+  --main-border-color: rgb(44, 45, 45);
+
+  /* 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);
+  --blockquote-text-color: #868686;
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(82, 108, 150);
+  --button-bg: #1e1e1e;
+  --btn-border-color: #2e2f31;
+  --btn-backtotop-color: var(--text-color);
+  --btn-backtotop-border-color: #212122;
+  --btn-box-shadow: var(--main-bg);
+  --card-header-bg: #292929;
+  --checkbox-color: rgb(118, 120, 121);
+  --checkbox-checked-color: var(--link-color);
+  --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(58, 55, 55, 0.4) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  /* Sidebar */
+  --site-title-color: #717070;
+  --site-subtitle-color: #868686;
+  --sidebar-bg: #1e1e1e;
+  --sidebar-border-color: #292929;
+  --sidebar-muted-color: #868686;
+  --sidebar-active-color: rgb(255, 255, 255, 0.95);
+  --sidebar-hover-bg: #262626;
+  --sidebar-btn-bg: #232328;
+  --sidebar-btn-color: #787878;
+  --avatar-border-color: rgb(206, 206, 206, 0.9);
+
+  /* Topbar */
+  --topbar-bg: rgb(27, 27, 30, 0.64);
+  --topbar-text-color: var(--text-color);
+  --search-border-color: rgb(55, 55, 55);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
+
+  /* Home page */
+  --post-list-text-color: rgb(175, 176, 177);
+  --btn-patinator-text-color: var(--text-color);
+  --btn-paginator-hover-color: #2e2e2e;
+
+  /* Posts */
+  --toc-highlight: rgb(116, 178, 243);
+  --tag-hover: rgb(43, 56, 62);
+  --tb-odd-bg: #252526; /* odd rows of the posts' table */
+  --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
+  --tb-border-color: var(--tb-odd-bg);
+  --footnote-target-bg: rgb(63, 81, 181);
+  --btn-share-color: #6c757d;
+  --btn-share-hover-color: #bfc1ca;
+  --card-bg: #1e1e1e;
+  --card-hovor-bg: #464d51;
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
+    rgb(137, 135, 135, 0.24) 0 0 0 1px;
+  --kbd-wrap-color: #6a6a6a;
+  --kbd-text-color: #d3d3d3;
+  --kbd-bg-color: #242424;
+  --prompt-text-color: rgb(216, 212, 212, 0.75);
+  --prompt-tip-bg: rgb(22, 60, 36, 0.64);
+  --prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
+  --prompt-info-bg: rgb(7, 59, 104, 0.8);
+  --prompt-info-icon-color: #0075d1;
+  --prompt-warning-bg: rgb(90, 69, 3, 0.88);
+  --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
+  --prompt-danger-bg: rgb(86, 28, 8, 0.8);
+  --prompt-danger-icon-color: #cd0202;
+
+  /* tags */
+  --tag-border: rgb(59, 79, 88);
+  --tag-shadow: rgb(32, 33, 33);
+  --dash-color: rgb(63, 65, 68);
+  --search-tag-bg: #292828;
+
+  /* categories */
+  --categories-border: rgb(64, 66, 69, 0.5);
+  --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;
+
+  /* archives */
+  --timeline-node-bg: rgb(150, 152, 156);
+  --timeline-color: rgb(63, 65, 68);
+  --timeline-year-dot-color: var(--timeline-color);
+
+  .light {
+    display: none;
+  }
+
+  /* categories */
+  .categories.card,
+  .list-group-item {
+    background-color: var(--card-bg);
+  }
+
+  .categories {
+    .card-header {
+      background-color: var(--card-header-bg);
+    }
+
+    .list-group-item {
+      border-left: none;
+      border-right: none;
+      padding-left: 2rem;
+      border-color: var(--categories-border);
+
+      &:last-child {
+        border-bottom-color: var(--card-bg);
+      }
+    }
+  }
+
+  #archives li:nth-child(odd) {
+    background-image: linear-gradient(
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30)
+    );
+  }
+
+  color-scheme: dark;
+
+  /* stylelint-disable-next-line selector-id-pattern */
+  #disqus_thread {
+    color-scheme: none;
+  }
+} /* dark-scheme */
diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
new file mode 100644
index 0000000..11f052c
--- /dev/null
+++ b/_sass/colors/typography-light.scss
@@ -0,0 +1,112 @@
+/*
+ * The syntax light mode typography colors
+ */
+
+@mixin light-scheme {
+  /* Framework color */
+  --main-bg: white;
+  --mask-bg: #c1c3c5;
+  --main-border-color: #f3f3f3;
+
+  /* Common color */
+  --text-color: #34343c;
+  --text-muted-color: #757575;
+  --text-muted-hightlight-color: inherit;
+  --heading-color: #2a2a2a;
+  --label-color: #585858;
+  --blockquote-border-color: #eeeeee;
+  --blockquote-text-color: #757575;
+  --link-color: #0056b2;
+  --link-underline-color: #dee2e6;
+  --button-bg: #ffffff;
+  --btn-border-color: #e9ecef;
+  --btn-backtotop-color: #686868;
+  --btn-backtotop-border-color: #f1f1f1;
+  --btn-box-shadow: #eaeaea;
+  --checkbox-color: #c5c5c5;
+  --checkbox-checked-color: #07a8f7;
+  --img-bg: radial-gradient(
+    circle,
+    rgb(255, 255, 255) 0%,
+    rgb(239, 239, 239) 100%
+  );
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgba(250, 250, 250, 0) 0%,
+    rgba(232, 230, 230, 1) 50%,
+    rgba(250, 250, 250, 0) 100%
+  );
+
+  /* Sidebar */
+  --site-title-color: rgb(113, 113, 113);
+  --site-subtitle-color: #717171;
+  --sidebar-bg: #f6f8fa;
+  --sidebar-border-color: #efefef;
+  --sidebar-muted-color: #545454;
+  --sidebar-active-color: #1d1d1d;
+  --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
+  --sidebar-btn-bg: white;
+  --sidebar-btn-color: #8e8e8e;
+  --avatar-border-color: white;
+
+  /* Topbar */
+  --topbar-bg: rgb(255, 255, 255, 0.7);
+  --topbar-text-color: rgb(78, 78, 78);
+  --search-border-color: rgb(240, 240, 240);
+  --search-icon-color: #c2c6cc;
+  --input-focus-border-color: #b8b8b8;
+
+  /* Home page */
+  --post-list-text-color: dimgray;
+  --btn-patinator-text-color: #555555;
+  --btn-paginator-hover-color: var(--sidebar-bg);
+
+  /* Posts */
+  --toc-highlight: #0550ae;
+  --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,
+    rgba(211, 209, 209, 0.15) 0 0 0 1px;
+  --footnote-target-bg: lightcyan;
+  --tb-odd-bg: #fbfcfd;
+  --tb-border-color: #eaeaea;
+  --dash-color: silver;
+  --kbd-wrap-color: #bdbdbd;
+  --kbd-text-color: var(--text-color);
+  --kbd-bg-color: white;
+  --prompt-text-color: rgb(46, 46, 46, 0.77);
+  --prompt-tip-bg: rgb(123, 247, 144, 0.2);
+  --prompt-tip-icon-color: #03b303;
+  --prompt-info-bg: #e1f5fe;
+  --prompt-info-icon-color: #0070cb;
+  --prompt-warning-bg: rgb(255, 243, 205);
+  --prompt-warning-icon-color: #ef9c03;
+  --prompt-danger-bg: rgb(248, 215, 218, 0.56);
+  --prompt-danger-icon-color: #df3c30;
+
+  /* Tags */
+  --tag-border: #dee2e6;
+  --tag-shadow: var(--btn-border-color);
+  --tag-hover: rgb(222, 226, 230);
+  --search-tag-bg: #f8f9fa;
+
+  [class^='prompt-'] {
+    --link-underline-color: rgb(219, 216, 216);
+  }
+
+  .dark {
+    display: none;
+  }
+
+  /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
+  /* Archive */
+  --timeline-color: rgba(0, 0, 0, 0.075);
+  --timeline-node-bg: #c2c6cc;
+  --timeline-year-dot-color: #ffffff;
+} /* light-scheme */
diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss
new file mode 100644
index 0000000..3a2e86b
--- /dev/null
+++ b/_sass/layout/archives.scss
@@ -0,0 +1,144 @@
+/*
+  Style for Archives
+*/
+
+#archives {
+  letter-spacing: 0.03rem;
+
+  $timeline-width: 4px;
+
+  %timeline {
+    content: '';
+    width: $timeline-width;
+    position: relative;
+    float: left;
+    background-color: var(--timeline-color);
+  }
+
+  .year {
+    height: 3.5rem;
+    font-size: 1.5rem;
+    position: relative;
+    left: 2px;
+    margin-left: -$timeline-width;
+
+    &::before {
+      @extend %timeline;
+
+      height: 72px;
+      left: 79px;
+      bottom: 16px;
+    }
+
+    &:first-child::before {
+      @extend %timeline;
+
+      height: 32px;
+      top: 24px;
+    }
+
+    /* Year dot */
+    &::after {
+      content: '';
+      display: inline-block;
+      position: relative;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      left: 21.5px;
+      border: 3px solid;
+      background-color: var(--timeline-year-dot-color);
+      border-color: var(--timeline-node-bg);
+      box-shadow: 0 0 2px 0 #c2c6cc;
+      z-index: 1;
+    }
+  }
+
+  ul {
+    li {
+      font-size: 1.1rem;
+      line-height: 3rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:nth-child(odd) {
+        background-color: var(--main-bg, #ffffff);
+        background-image: linear-gradient(
+          to left,
+          #ffffff,
+          #fbfbfb,
+          #fbfbfb,
+          #fbfbfb,
+          #ffffff
+        );
+      }
+
+      &::before {
+        @extend %timeline;
+
+        top: 0;
+        left: 77px;
+        height: 3.1rem;
+      }
+    }
+
+    &:last-child li:last-child::before {
+      height: 1.5rem;
+    }
+  } /* #archives ul */
+
+  .date {
+    white-space: nowrap;
+    display: inline-block;
+    position: relative;
+    right: 0.5rem;
+
+    &.month {
+      width: 1.4rem;
+      text-align: center;
+    }
+
+    &.day {
+      font-size: 85%;
+      font-family: Lato, sans-serif;
+    }
+  }
+
+  a {
+    /* post title in Archvies */
+    margin-left: 2.5rem;
+    position: relative;
+    top: 0.1rem;
+
+    &:hover {
+      border-bottom: none;
+    }
+
+    &::before {
+      /* the dot before post title */
+      content: '';
+      display: inline-block;
+      position: relative;
+      border-radius: 50%;
+      width: 8px;
+      height: 8px;
+      float: left;
+      top: 1.35rem;
+      left: 71px;
+      background-color: var(--timeline-node-bg);
+      box-shadow: 0 0 3px 0 #c2c6cc;
+      z-index: 1;
+    }
+  }
+} /* #archives */
+
+@media all and (max-width: 576px) {
+  #archives {
+    margin-top: -1rem;
+
+    ul {
+      letter-spacing: 0;
+    }
+  }
+}
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
new file mode 100644
index 0000000..330d3d3
--- /dev/null
+++ b/_sass/layout/categories.scss
@@ -0,0 +1,83 @@
+/*
+  Style for Tab Categories
+*/
+
+%category-icon-color {
+  color: gray;
+}
+
+.categories {
+  margin-bottom: 2rem;
+  border-color: var(--categories-border);
+
+  &.card,
+  .list-group {
+    @extend %rounded;
+  }
+
+  .card-header {
+    $radius: calc($base-radius - 1px);
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  i {
+    @extend %category-icon-color;
+
+    font-size: 86%; /* fontawesome icons */
+  }
+
+  .list-group-item {
+    border-left: none;
+    border-right: none;
+    padding-left: 2rem;
+
+    &:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+} /* .categories */
+
+.category-trigger {
+  width: 1.7rem;
+  height: 1.7rem;
+  border-radius: 50%;
+  text-align: center;
+  color: #6c757d !important;
+
+  i {
+    position: relative;
+    height: 0.7rem;
+    width: 1rem;
+    transition: transform 300ms ease;
+  }
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
+}
+
+/* only works on desktop */
+@media (hover: hover) {
+  .category-trigger:hover {
+    background-color: var(--categories-hover-bg);
+  }
+}
+
+.rotate {
+  transform: rotate(-90deg);
+}
diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss
new file mode 100644
index 0000000..9e43a91
--- /dev/null
+++ b/_sass/layout/category-tag.scss
@@ -0,0 +1,72 @@
+/*
+  Style for page Category and Tag
+*/
+
+.dash {
+  margin: 0 0.5rem 0.6rem 0.5rem;
+  border-bottom: 2px dotted var(--dash-color);
+}
+
+#page-category,
+#page-tag {
+  ul > li {
+    line-height: 1.5rem;
+    padding: 0.6rem 0;
+
+    /* dot */
+    &::before {
+      background: #999999;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      display: block;
+      content: '';
+      position: relative;
+      top: 0.6rem;
+      margin-right: 0.5rem;
+    }
+
+    /* post's title */
+    > a {
+      @extend %no-bottom-border;
+
+      font-size: 1.1rem;
+    }
+  }
+}
+
+/* tag icon */
+#page-tag h1 > i {
+  font-size: 1.2rem;
+}
+
+#page-category h1 > i {
+  font-size: 1.25rem;
+}
+
+#page-category,
+#page-tag,
+#access-lastmod {
+  a:hover {
+    @extend %link-hover;
+
+    margin-bottom: -1px; /* Avoid jumping */
+  }
+}
+
+@media all and (max-width: 576px) {
+  #page-category,
+  #page-tag {
+    ul > li {
+      &::before {
+        margin: 0 0.5rem;
+      }
+
+      > a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
new file mode 100644
index 0000000..7f9fd2e
--- /dev/null
+++ b/_sass/layout/home.scss
@@ -0,0 +1,189 @@
+/*
+  Style for Homepage
+*/
+
+#post-list {
+  margin-top: 2rem;
+
+  .card-wrapper {
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .card {
+    border: 0;
+    background: none;
+
+    %img-radius {
+      border-radius: $base-radius $base-radius 0 0;
+    }
+
+    .preview-img {
+      @extend %img-radius;
+
+      img {
+        @extend %img-radius;
+      }
+    }
+
+    .card-body {
+      height: 100%;
+      padding: 1rem;
+
+      .card-title {
+        @extend %text-clip;
+
+        color: var(--heading-color) !important;
+        font-size: 1.25rem;
+      }
+
+      %muted {
+        color: var(--text-muted-color) !important;
+      }
+
+      .card-text.content {
+        @extend %muted;
+
+        p {
+          @extend %text-clip;
+
+          line-height: 1.5;
+          margin: 0;
+        }
+      }
+
+      .post-meta {
+        @extend %muted;
+
+        i {
+          &:not(:first-child) {
+            margin-left: 1.5rem;
+          }
+        }
+
+        em {
+          @extend %normal-font-style;
+
+          color: inherit;
+        }
+
+        > div:first-child {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+} /* #post-list */
+
+.pagination {
+  color: var(--text-color);
+  font-family: Lato, sans-serif;
+  justify-content: space-evenly;
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  .page-item {
+    .page-link {
+      color: var(--btn-patinator-text-color);
+      padding: 0 0.6rem;
+      display: -webkit-box;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
+      border-radius: 0.5rem;
+      border: 0;
+      background-color: inherit;
+    }
+
+    &.active {
+      .page-link {
+        background-color: var(--btn-paginator-hover-color);
+      }
+    }
+
+    &:not(.active) {
+      .page-link {
+        &:hover {
+          box-shadow: inset var(--btn-border-color) 0 0 0 1px;
+        }
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      .page-link {
+        color: rgba(108, 117, 125, 0.57);
+      }
+    }
+  } /* .page-item */
+} /* .pagination */
+
+/* Tablet */
+@media all and (min-width: 768px) {
+  %img-radius {
+    border-radius: 0 $base-radius $base-radius 0;
+  }
+
+  #post-list {
+    .card {
+      .card-body {
+        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
+
+        .card-text {
+          display: inherit !important;
+        }
+
+        .post-meta {
+          i {
+            &:not(:first-child) {
+              margin-left: 1.75rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 830px) {
+  .pagination {
+    .page-item {
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Sidebar is visible */
+@media all and (min-width: 831px) {
+  #post-list {
+    margin-top: 2.5rem;
+  }
+
+  .pagination {
+    font-size: 0.85rem;
+    justify-content: center;
+
+    .page-item {
+      &:not(:last-child) {
+        margin-right: 0.7rem;
+      }
+    }
+
+    .page-index {
+      display: none;
+    }
+  } /* .pagination */
+}
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
new file mode 100644
index 0000000..112541d
--- /dev/null
+++ b/_sass/layout/post.scss
@@ -0,0 +1,370 @@
+/*
+  Post-specific style
+*/
+
+%btn-post-nav {
+  width: 50%;
+  position: relative;
+  border-color: var(--btn-border-color);
+}
+
+@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
+  content: '\2022';
+  padding-left: $pl;
+  padding-right: $pr;
+}
+
+header {
+  .post-desc {
+    @extend %heading;
+
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  .post-meta {
+    span + span::before {
+      @include dot;
+    }
+
+    em,
+    time {
+      @extend %text-highlight;
+    }
+
+    em {
+      a {
+        color: inherit;
+      }
+    }
+  }
+
+  h1 + .post-meta {
+    margin-top: 1.5rem;
+  }
+}
+
+.post-tail-wrapper {
+  @extend %text-sm;
+
+  margin-top: 6rem;
+  border-bottom: 1px double var(--main-border-color);
+
+  .license-wrapper {
+    line-height: 1.2rem;
+
+    > a {
+      @extend %text-highlight;
+
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+
+    span:last-child {
+      @extend %text-sm;
+    }
+  } /* .license-wrapper */
+
+  .post-meta a:not(:hover) {
+    @extend %link-underline;
+  }
+
+  .share-wrapper {
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    %icon-size {
+      font-size: 1.125rem;
+    }
+
+    .share-icons {
+      display: flex;
+
+      i {
+        color: var(--btn-share-color);
+
+        @extend %icon-size;
+      }
+
+      > * {
+        @extend %icon-size;
+
+        margin-left: 0.5rem;
+
+        &:hover {
+          i {
+            @extend %btn-share-hovor;
+          }
+        }
+      }
+
+      button {
+        padding: 0;
+        border: none;
+        line-height: inherit;
+
+        @extend %cursor-pointer;
+      }
+    } /* .share-icons */
+  } /* .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;
+
+  .post-tag {
+    &:hover {
+      @extend %link-hover;
+      @extend %tag-hover;
+      @extend %no-bottom-border;
+    }
+  }
+}
+
+.post-navigation {
+  .btn {
+    @extend %btn-post-nav;
+
+    &:not(:hover) {
+      color: var(--link-color);
+    }
+
+    &:hover {
+      &:not(.disabled)::before {
+        color: whitesmoke;
+      }
+    }
+
+    &.disabled {
+      @extend %btn-post-nav;
+
+      pointer-events: auto;
+      cursor: not-allowed;
+      background: none;
+      color: gray;
+    }
+
+    &.btn-outline-primary.disabled:focus {
+      box-shadow: none;
+    }
+
+    &::before {
+      color: var(--text-muted-color);
+      font-size: 0.65rem;
+      text-transform: uppercase;
+      content: attr(aria-label);
+    }
+
+    &:first-child {
+      border-radius: $base-radius 0 0 $base-radius;
+      left: 0.5px;
+    }
+
+    &:last-child {
+      border-radius: 0 $base-radius $base-radius 0;
+      right: 0.5px;
+    }
+  }
+
+  p {
+    font-size: 1.1rem;
+    line-height: 1.5rem;
+    margin-top: 0.3rem;
+    white-space: normal;
+  }
+} /* .post-navigation */
+
+@media (hover: hover) {
+  .post-navigation {
+    .btn,
+    .btn::before {
+      transition: all 0.35s ease-in-out;
+    }
+  }
+}
+
+@-webkit-keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+  }
+
+  to {
+    opacity: 1;
+    position: relative;
+    top: 0;
+  }
+}
+
+#toc-wrapper {
+  border-left: 1px solid rgba(158, 158, 158, 0.17);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 4rem;
+  transition: top 0.2s ease-in-out;
+  -webkit-animation: fade-up 0.8s;
+  animation: fade-up 0.8s;
+
+  ul {
+    list-style: none;
+    font-size: 0.85rem;
+    line-height: 1.25;
+    padding-left: 0;
+
+    li {
+      &:not(:last-child) {
+        margin: 0.4rem 0;
+      }
+
+      a {
+        padding: 0.2rem 0 0.2rem 1.25rem;
+      }
+    }
+
+    /* Overwrite TOC plugin style */
+
+    .toc-link {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        color: var(--toc-highlight);
+        text-decoration: none;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .is-active-link {
+      color: var(--toc-highlight) !important;
+      font-weight: 600;
+
+      &::before {
+        display: inline-block;
+        width: 1px;
+        left: -1px;
+        height: 1.25rem;
+        background-color: var(--toc-highlight) !important;
+      }
+    }
+
+    ul {
+      padding-left: 0.75rem;
+    }
+  }
+}
+
+/* --- Related Posts --- */
+
+#related-posts {
+  > h3 {
+    @include label(1.1rem, 600);
+  }
+
+  time {
+    @extend %normal-font-style;
+    @extend %text-xs;
+
+    color: var(--text-muted-color);
+  }
+
+  p {
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .card {
+    h4 {
+      @extend %text-clip;
+    }
+  }
+}
+
+/* stylelint-disable-next-line selector-id-pattern */
+#disqus_thread {
+  min-height: 8.5rem;
+}
+
+.utterances {
+  max-width: 100%;
+}
+
+%btn-share-hovor {
+  color: var(--btn-share-hover-color) !important;
+}
+
+.share-label {
+  @include label(inherit, 400, inherit);
+
+  &::after {
+    content: ':';
+  }
+}
+
+@media all and (max-width: 576px) {
+  .post-tail-bottom {
+    flex-wrap: wrap-reverse !important;
+
+    > div:first-child {
+      width: 100%;
+      margin-top: 1rem;
+    }
+  }
+}
+
+@media all and (max-width: 768px) {
+  .content > p > img {
+    max-width: calc(100% + 1rem);
+  }
+}
+
+/* Hide SideBar and TOC */
+@media all and (max-width: 849px) {
+  .post-navigation {
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+}
diff --git a/_sass/layout/tags.scss b/_sass/layout/tags.scss
new file mode 100644
index 0000000..4cf5d3b
--- /dev/null
+++ b/_sass/layout/tags.scss
@@ -0,0 +1,19 @@
+/*
+  Styles for Tab Tags
+*/
+
+.tag {
+  border-radius: 0.7em;
+  padding: 6px 8px 7px;
+  margin-right: 0.8rem;
+  line-height: 3rem;
+  letter-spacing: 0;
+  border: 1px solid var(--tag-border) !important;
+  box-shadow: 0 0 3px 0 var(--tag-shadow);
+
+  span {
+    margin-left: 0.6em;
+    font-size: 0.7em;
+    font-family: Oswald, sans-serif;
+  }
+}
diff --git a/_sass/main.bundle.scss b/_sass/main.bundle.scss
new file mode 100644
index 0000000..52e893f
--- /dev/null
+++ b/_sass/main.bundle.scss
@@ -0,0 +1,2 @@
+@import 'dist/bootstrap';
+@import 'main';
diff --git a/_sass/main.scss b/_sass/main.scss
new file mode 100644
index 0000000..1c2311d
--- /dev/null
+++ b/_sass/main.scss
@@ -0,0 +1,13 @@
+@import 'colors/typography-light';
+@import 'colors/typography-dark';
+@import 'addon/variables';
+@import 'variables-hook';
+@import 'addon/module';
+@import 'addon/syntax';
+@import 'addon/commons';
+@import 'layout/home';
+@import 'layout/post';
+@import 'layout/tags';
+@import 'layout/archives';
+@import 'layout/categories';
+@import 'layout/category-tag';
diff --git a/_sass/variables-hook.scss b/_sass/variables-hook.scss
new file mode 100644
index 0000000..f27e0eb
--- /dev/null
+++ b/_sass/variables-hook.scss
@@ -0,0 +1,3 @@
+/*
+  Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
+*/
diff --git a/assets/404.html b/assets/404.html
new file mode 100644
index 0000000..5b46cc8
--- /dev/null
+++ b/assets/404.html
@@ -0,0 +1,14 @@
+---
+layout: page
+title: "404: Page not found"
+permalink: /404.html
+
+redirect_from:
+  - /norobots/
+  - /assets/
+  - /posts/
+---
+
+{% include lang.html %}
+
+<p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>
diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
new file mode 100644
index 0000000..d20545b
--- /dev/null
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -0,0 +1,10 @@
+---
+---
+
+@import 'main
+{%- if jekyll.environment == 'production' -%}
+  .bundle
+{%- endif -%}
+';
+
+/* append your custom style below */
diff --git a/assets/feed.xml b/assets/feed.xml
new file mode 100644
index 0000000..0ab20e3
--- /dev/null
+++ b/assets/feed.xml
@@ -0,0 +1,54 @@
+---
+layout: compress
+permalink: /feed.xml
+# Atom Feed, reference: https://validator.w3.org/feed/docs/atom.html
+---
+
+{% capture source %}
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <id>{{ "/" | absolute_url }}</id>
+  <title>{{ site.title }}</title>
+  <subtitle>{{ site.description }}</subtitle>
+  <updated>{{ site.time | date_to_xmlschema }}</updated>
+  <author>
+    <name>{{ site.social.name }}</name>
+    <uri>{{ "/" | absolute_url }}</uri>
+  </author>
+  <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
+  <link rel="alternate" type="text/html" hreflang="{{ site.alt_lang | default: site.lang }}"
+    href="{{ '/' | absolute_url }}"/>
+  <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
+  <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>
+  <icon>{{ site.baseurl }}/assets/img/favicons/favicon.ico</icon>
+  <logo>{{ site.baseurl }}/assets/img/favicons/favicon-96x96.png</logo>
+
+{% for post in site.posts limit: 5 %}
+  {% assign post_absolute_url = post.url | absolute_url %}
+  <entry>
+    <title>{{ post.title }}</title>
+    <link href="{{ post_absolute_url }}" rel="alternate" type="text/html" title="{{ post.title | xml_escape }}" />
+    <published>{{ post.date | date_to_xmlschema }}</published>
+  {% if post.last_modified_at %}
+    <updated>{{ post.last_modified_at | date_to_xmlschema }}</updated>
+  {% else %}
+    <updated>{{ post.date | date_to_xmlschema }}</updated>
+  {% endif %}
+    <id>{{ post_absolute_url }}</id>
+    <content src="{{ post_absolute_url }}" />
+    <author>
+      <name>{{ post.author | default: site.social.name }}</name>
+    </author>
+
+  {% if post.categories %}
+    {% for category in post.categories %}
+    <category term="{{ category }}" />
+    {% endfor %}
+  {% endif %}
+
+  <summary>{% include post-description.html max_length=400 %}</summary>
+
+  </entry>
+{% endfor %}
+</feed>
+{% endcapture %}
+{{ source | replace: '&', '&amp;' }}
diff --git a/assets/img/favicons/android-chrome-512x512.png b/assets/img/favicons/android-chrome-512x512.png
new file mode 100644
index 0000000..a0cdd95
Binary files /dev/null and b/assets/img/favicons/android-chrome-512x512.png differ
diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml
new file mode 100644
index 0000000..a02a5c7
--- /dev/null
+++ b/assets/img/favicons/browserconfig.xml
@@ -0,0 +1,13 @@
+---
+layout: compress
+---
+
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="{{ '/assets/img/favicons/mstile-150x150.png' | relative_url }}" />
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>
diff --git a/assets/img/favicons/site.webmanifest b/assets/img/favicons/site.webmanifest
new file mode 100644
index 0000000..03c6113
--- /dev/null
+++ b/assets/img/favicons/site.webmanifest
@@ -0,0 +1,26 @@
+---
+layout: compress
+---
+
+{% assign favicon_path = "/assets/img/favicons" | relative_url %}
+
+{
+  "name": "{{ site.title }}",
+  "short_name": "{{ site.title }}",
+  "description": "{{ site.description }}",
+  "icons": [
+    {
+      "src": "{{ favicon_path }}/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "{{ favicon_path }}/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }],
+  "start_url": "{{ '/index.html' | relative_url }}",
+  "theme_color": "#2a1e6b",
+  "background_color": "#ffffff",
+  "display": "fullscreen"
+}
diff --git a/assets/js/data/mathjax.js b/assets/js/data/mathjax.js
new file mode 100644
index 0000000..ca3d0de
--- /dev/null
+++ b/assets/js/data/mathjax.js
@@ -0,0 +1,25 @@
+---
+layout: compress
+# WARNING: Don't use '//' to comment out code, use '{% comment %}' and '{% endcomment %}' instead.
+---
+
+{%- comment -%}
+  See: <https://docs.mathjax.org/en/latest/options/input/tex.html#tex-options>
+{%- endcomment -%}
+
+MathJax = {
+  tex: {
+    {%- comment -%} start/end delimiter pairs for in-line math {%- endcomment -%}
+    inlineMath: [
+      ['$', '$'],
+      ['\\(', '\\)']
+    ],
+    {%- comment -%} start/end delimiter pairs for display math {%- endcomment -%}
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[', '\\]']
+    ],
+    {%- comment -%} equation numbering {%- endcomment -%}
+    tags: 'ams'
+  }
+};
diff --git a/assets/js/data/search.json b/assets/js/data/search.json
new file mode 100644
index 0000000..2601ed0
--- /dev/null
+++ b/assets/js/data/search.json
@@ -0,0 +1,20 @@
+---
+layout: compress
+swcache: true
+---
+
+[
+  {% for post in site.posts %}
+  {
+    "title": {{ post.title | jsonify }},
+    "url": {{ post.url | relative_url | jsonify }},
+    "categories": {{ post.categories | join: ', ' | jsonify }},
+    "tags": {{ post.tags | join: ', ' | jsonify }},
+    "date": "{{ post.date }}",
+    {% include no-linenos.html content=post.content %}
+    {% assign _content = content | strip_html | strip_newlines %}
+    "snippet": {{ _content | truncate: 200 | jsonify }},
+    "content": {{ _content | jsonify }}
+  }{% unless forloop.last %},{% endunless %}
+  {% endfor %}
+]
diff --git a/assets/js/data/swconf.js b/assets/js/data/swconf.js
new file mode 100644
index 0000000..5c1ed29
--- /dev/null
+++ b/assets/js/data/swconf.js
@@ -0,0 +1,37 @@
+---
+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 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 %}
+};
diff --git a/assets/robots.txt b/assets/robots.txt
new file mode 100644
index 0000000..45c34e0
--- /dev/null
+++ b/assets/robots.txt
@@ -0,0 +1,10 @@
+---
+permalink: /robots.txt
+# The robots rules
+---
+
+User-agent: *
+
+Disallow: /norobots/
+
+Sitemap: {{ '/sitemap.xml' | absolute_url }}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
new file mode 100644
index 0000000..777e27b
--- /dev/null
+++ b/docs/CHANGELOG.md
@@ -0,0 +1,430 @@
+# Changelog
+
+## [7.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.5...v7.0.0) (2024-05-11)
+
+### ⚠ BREAKING CHANGES
+
+* optimize the resource hints (#1717)
+* rename media-url file and related parameters (#1651)
+* rename comment setting parameter (#1563)
+* **analytics:** add post pageviews for GoatCounter (#1543)
+
+### Features
+
+* add cloudflare web analytics ([#1723](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1723)) ([c17fba4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c17fba44f53767c9dfaa8d92cfc6e275e5977f8a))
+* add support for embed video files ([#1558](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1558)) ([9592146](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9592146ca392236e69ee358412ecc32ef1662127))
+* add support for giscus strict title matching ([#1614](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1614)) ([700fd5b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/700fd5bad7272dd950f861e8550215cd8fafb413))
+* **analytics:** add post pageviews for GoatCounter ([#1543](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1543)) ([b641b3f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b641b3f1f2e54bcfe96d8dff46d4f94186492d98))
+* **analytics:** add Umami and Matomo tracking codes ([#1658](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1658)) ([61bdca2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/61bdca2db45179cd0d1b4b885a4c4864e3ffa3c1))
+* change site verification settings ([#1561](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1561)) ([e436387](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e4363871b5be0608d2b92b8aff482825a8044c1b))
+* **deps:** move `MathJax` configuration to a separate file ([#1670](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1670)) ([44f552c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/44f552cbcee83d037de0e59496bf6bb19eea2691))
+* display theme version in footer ([#1611](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1611)) ([8349314](https://github.com/cotes2020/jekyll-theme-chirpy/commit/834931486dc3e5ed544ce4ff47cd1b2bc45f42fd))
+* **i18n:** allow `page.lang` to override `site.lang` ([#1586](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1586)) ([547b95c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/547b95cc7ae35018dadcc01b6eb1dc8c8943e67e))
+* make post description customizable ([#1602](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1602)) ([f865336](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f865336c896e0db34edf8482a53e0e5d8f07ff95))
+* **media:** support audio and video tag with multi sources ([#1618](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1618)) ([23be416](https://github.com/cotes2020/jekyll-theme-chirpy/commit/23be4162b3f8598db14dc5b39726932ccf2cdc23))
+
+### Bug Fixes
+
+* make TOC title and entries visible at the same time ([#1711](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1711)) ([e0950fc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e0950fc973d029dc65d0bc1bd68f3d11242527c8))
+* mode toggle not outlined when receiving keyboard focus ([#1690](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1690)) ([cd37f63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/cd37f63a0144e0499ea991d3309da064ad5eccea))
+* prevent footnote back arrow from becoming an emoji ([#1716](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1716)) ([8608147](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8608147fb5037804695d93496c62f96b9c41e9cd))
+* **pwa:** skip range requests in service worker ([#1672](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1672)) ([76d58fe](https://github.com/cotes2020/jekyll-theme-chirpy/commit/76d58fe0ffdc4bd1df35b60815e97560c3564700))
+* search result prompt is empty ([#1583](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1583)) ([8a2afae](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a2afae6cab8fc9639be0a866b71699c8a80084c))
+* use `https` for Weibo sharing URL ([#1612](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1612)) ([8e5fbb7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8e5fbb7a74d04a4b3cdde69bcc821f8ccd1a3bc0))
+
+### Improvements
+
+* improve \<hr> visibility in dark mode ([#1565](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1565)) ([4ddd5c4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4ddd5c437046a1e70cf396113e2351c452a25493))
+* lean bootstrap javascript ([#1734](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1734)) ([ddb48ed](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ddb48eda52827aae16aff720212d7b6d2d8647f9))
+* rename comment setting parameter ([#1563](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1563)) ([f8390d4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f8390d4384600fb015728b1b186570fa58ca216f))
+* replace jQuery with Vanilla JS ([#1681](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1681)) ([fe7afa3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe7afa379f0af0ca98a207f85bdc0fa98575b1ad))
+* simplify mode toggle script ([#1692](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1692)) ([d4a6d64](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d4a6d640bd6d4ab185faf96c0255369a9903ee1d))
+* tree shaking Bootstrap CSS ([#1736](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1736)) ([363a3d9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/363a3d936bbd688fa4f28527e85ef7dd3fe3a79b))
+
+### Changes
+
+* optimize the resource hints ([#1717](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1717)) ([dcb0add](https://github.com/cotes2020/jekyll-theme-chirpy/commit/dcb0add47bf1adf92215514f1ccfa4661d5215be))
+* rename media-url file and related parameters ([#1651](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1651)) ([9f8aeaa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9f8aeaadbfef9967a9b0a9dd323d8bed46e14d9f))
+
+## [6.5.5](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.4...v6.5.5) (2024-03-23)
+
+### Bug Fixes
+
+* **post:** correct the image URLs ([#1627](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1627)) ([2d649aa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2d649aae0e40a24db1ab0d46fa474294e96cb135))
+
+## [6.5.4](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.3...v6.5.4) (2024-03-22)
+
+### Bug Fixes
+
+* correct the attribute for the Twitter social image ([#1615](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1615)) ([cfe44f2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/cfe44f204bcec8e05f498512ec50878e626a124f))
+* **seo:** correct social preview image path inside `<meta>` tag ([#1623](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1623)) ([74cf57a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/74cf57aaacf6674057e6f33240a22f4888cfe88f))
+
+## [6.5.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.2...v6.5.3) (2024-03-07)
+
+### Changes
+
+* replace `polyfill.io` with `cdnjs` hosted link ([#1598](https://github.com/cotes2020/jekyll-theme-chirpy/pull/1598)) ([75a3d73](https://github.com/cotes2020/jekyll-theme-chirpy/commit/75a3d7399b257256a09d602cbe01062fe1cdf68d))
+
+## [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
+
+* **pwa:** installation failure caused by outdated cache entries ([4da7406](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4da7406dfea112a4a2b1db5615ecf2672be6694f))
+
+## [6.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.1.0...v6.2.0) (2023-09-10)
+
+### Features
+
+* **layout:** center the footer ([41b8f9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41b8f9f519e5f5f69e9a123b38b06bade2271a82))
+* **posts:** render heading 4 in TOC ([#1023](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1023)) ([229c2a2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/229c2a2e2b109fc2eca85be548f1dd97234e44c4))
+* **ui:** redesign the pagination button on home page ([62bcd60](https://github.com/cotes2020/jekyll-theme-chirpy/commit/62bcd601fcadc602c81672b1d4b937231396c3c0))
+* **ui:** update the twitter icon ([#1221](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1221)) ([aff7566](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aff75667749769644f990d3dc9b0720c7d96d14d))
+
+### Improvements
+
+* **core:** speed up the Jekyll build times ([#1163](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1163)) ([0d4103d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0d4103d47bc9cff93918bb09a2957737cc3c9fe0))
+* refactor using semantic HTML ([#1207](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1207)) ([505e314](https://github.com/cotes2020/jekyll-theme-chirpy/commit/505e314a3142c332e39365fbe2dac23df1bf0abe)), closes [#1196](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1196)
+* **ui:** improve code snippet design ([4f86b04](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4f86b04a8487ebbf4a6d0d70b0c3ece79e9269f3))
+* **ui:** improve web accessibility ([#447](https://github.com/cotes2020/jekyll-theme-chirpy/issues/447)) ([37c9764](https://github.com/cotes2020/jekyll-theme-chirpy/commit/37c976499ead51c1d88e8e8213366240a72adebc))
+
+## [6.1.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.1.0) (2023-07-02)
+
+### Features
+
+* **i18n:** add Thai locale file ([#1087](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1087)) ([a60e907](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a60e90791d24811caff78e21c71dc85d6a729438))
+
+### Bug Fixes
+
+* missing xml escape for `alt` of preview image ([#1113](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1113)) ([8b0fbf5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8b0fbf5a834276f273274e4d614edd71e339cbb0))
+* the cached image is covered by shimmer ([#1100](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1100)) ([df8ff54](https://github.com/cotes2020/jekyll-theme-chirpy/commit/df8ff546ec1c8d21a3d25e0124665001fcf756f3))
+* **ui:** min-height of `page` layout exceeds the mobile screen ([73af591](https://github.com/cotes2020/jekyll-theme-chirpy/commit/73af59194ab935d38b89d298fea0e96e13be7cb7))
+* **webfont:** resume semi-bold of font family `Source Sans Pro` ([c4da99c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c4da99c7ea5d6e32b1f1b815d7d8d6ae7b0f55de))
+
+### Improvements
+
+* **build:** use `jekyll-include-cache` plugin to reduce build time ([#1098](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1098)) ([4fe145e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4fe145e9809ee1b370d9891135939534751462d0)), closes [#1094](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1094)
+* CJK characters of the "Search Cancel" button will wrap ([#1105](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1105)) ([b6d1992](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b6d1992f85ec543220e826087dcc89870e7e2c00))
+* **ui:** avoid blank space at the bottom of the homepage preview image ([ce2f6f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ce2f6f5abef7a8b874e08d1f18c1fd002650dbf1))
+* **ui:** improve hover color of sidebar nav items in light mode ([728094d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/728094d1ba67a1e7c0a11e1c6c69bf87af9a767b))
+
+## [6.0.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.0.0...v6.0.1) (2023-05-19)
+
+### Bug Fixes
+
+* **home:** preview image missing `[alt]` and `img_path` ([#1044](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1044)) ([aba9468](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aba9468b5332802db961166889d4c4a84e404a2c))
+* **layout:** restore the margin bottom of the main area ([#1047](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1047)) ([eb40f51](https://github.com/cotes2020/jekyll-theme-chirpy/commit/eb40f51c84b011a7c301279527f544ad27efd5eb))
+* **post, page:** image link loses shimmer effect ([#1046](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1046)) ([3bd881d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3bd881da70d685d10659f47bfe0e79cd02e7af92))
+* **typography:** long string for update-list is not truncated ([#1050](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1050)) ([a51d31c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a51d31c55a37fbe034f0b0f699f4df0b6a14ba8f)), closes [#1049](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1049)
+
+## [6.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.1...v6.0.0) (2023-05-16)
+
+### ⚠ BREAKING CHANGES
+
+* rename assets origin configuration files
+
+### Features
+
+* add a hook to insert custom metadata in `head` tag ([#1015](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1015)) ([fe20341](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe203417d993508eedf5b9044fe53c4a566e44f9))
+* **i18n:** add sl-SI.yml with slovenian translations ([#989](https://github.com/cotes2020/jekyll-theme-chirpy/issues/989)) ([42a700a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/42a700aa37889faa32d7ec1f6776ce4b9d845dc4))
+* **i18n:** add Traditional Chinese (Taiwan) localization file ([#961](https://github.com/cotes2020/jekyll-theme-chirpy/issues/961)) ([d97f95f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d97f95fca0bcd450ea50709ffba0217f7e65d339))
+* **i18n:** added Swedish localization file ([#969](https://github.com/cotes2020/jekyll-theme-chirpy/issues/969)) ([fe70479](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe7047959e3694c6e603e764ded30dacd49e6aa9))
+* support hiding the modification date of a post ([#1020](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1020)) ([8da583d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8da583d403456f6460ec1a6ebcbb0c2ca8127ff6))
+* **ui:** improve code snippet design ([6d99f5c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6d99f5cc36a69e5ccff51f81ba448c798d92e12e))
+* **ui:** improve the design for top bar ([83f1c34](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83f1c34f92d85f3953ca9c9818be5399962bf1c9))
+* **ui:** new design footer content layout ([3210c59](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3210c59466150dc04b4e4bdfc1ffd0e38adcff43))
+* **ui:** redesign the sidebar ([83bbe4a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83bbe4ac939edfd1706e68c080562e3462f83519))
+* **ui:** show preview image in home page ([97b8dfe](https://github.com/cotes2020/jekyll-theme-chirpy/commit/97b8dfeed6ce7677f6472e28dc3b03f3c2968b12))
+
+### Bug Fixes
+
+* parameter parsing error in image URL ([#1022](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1022)) ([ee88cec](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ee88cec270ea5938f98913a3edf28a684cfbd6c0))
+* **rss:** double quotes in the post title will break the XML structure ([#965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/965)) ([1719d81](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1719d81d00b32b107c35b3903089be84a9b28a6c))
+
+### refactor
+
+* rename assets origin configuration files ([c283e77](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c283e7782fa9562d82d9855fd280a573fd58c75f))
+
+### Improvements
+
+* **assets:** reduce HTTP requests to CDN ([9d97120](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9d971201978e993a9af337d9cd5396a1ea225f00))
+* calculate heading font size dynamically ([#983](https://github.com/cotes2020/jekyll-theme-chirpy/issues/983)) ([52f5ee9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/52f5ee9cd3f92a6e8f25eaa203831546cda85db6))
+* **i18n:** set the global default locales to "en" ([#979](https://github.com/cotes2020/jekyll-theme-chirpy/issues/979)) ([61fdbcb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/61fdbcb83a3601ecae62ec230602b94a5eb832e1))
+* **tools:** avoid initialization interruption in single branch forks ([#992](https://github.com/cotes2020/jekyll-theme-chirpy/issues/992)) ([e90461a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e90461aa3c81633863db6a12c5924ddba33bd08e))
+* **ui:** improve categories color in dark mode ([414dd13](https://github.com/cotes2020/jekyll-theme-chirpy/commit/414dd132aed70f4bd96cb712d00eacc82d2753e9))
+* **ui:** improve hover effect for post preview cards ([7626e4d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7626e4d00544346a46b6e5ff2f3a99d234defe09))
+* **ui:** improve hover effect of trending tags ([34499f0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/34499f0c927ce8fea3705dc2f0f0e6805cabda43))
+* **ui:** improve inline code in light mode ([e38309f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e38309f3bd1302ffe60b682136b6efaf96f4d9ae))
+* **ui:** improve related posts design ([2918da9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2918da9f29465618d557c082ff3a2f23d7519049))
+* **ui:** improve the color of prompts in dark mode ([8cbbcfa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8cbbcfa26da0addd88affada23a65770250f2404))
+* **ui:** lighten the link color in light-mode ([7c23a4e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7c23a4ebc53b9e231c214e04f8ac0803cbcdb720))
+* **ui:** mute the marker in lists ([0c80552](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c80552d772b874e2a161f1270294faa3af18d4a))
+* **ui:** uniform the muted text color ([aadf939](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aadf9393d5c7f7528d453c4e68eba4f5cbb85bd9))
+* **ux:** improve LQIP fade in effect ([003e7b6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/003e7b60c93988a7bfae4c03a8346d4f8a5f0bb6))
+
+## [5.6.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.0...v5.6.1) (2023-03-30)
+
+### Bug Fixes
+
+* **deps:** `tocbot` has no initialization detection ([#957](https://github.com/cotes2020/jekyll-theme-chirpy/issues/957)) ([8225174](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8225174cb5e02fda7b3cc548ec821c876b0a5139))
+* mode-toggle leads to Disqus loading failure ([#945](https://github.com/cotes2020/jekyll-theme-chirpy/issues/945)) ([6fec411](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6fec411c18ca5689c467c7b216ddeda02df23623))
+* pageviews not updated immediately ([8b4f99c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8b4f99c87f9a9227f47e84fb39d7b0f551d6f4dd))
+
+## [5.6.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.2...v5.6.0) (2023-03-17)
+
+### Features
+
+* change TOC plugin to `tocbot` ([#774](https://github.com/cotes2020/jekyll-theme-chirpy/issues/774)) ([02b7bd5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/02b7bd5095a2affe5b4c5ed7b5b182baaf642ff3))
+* **i18n:** add Greek Language Support. ([#903](https://github.com/cotes2020/jekyll-theme-chirpy/issues/903)) ([712a9b2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/712a9b22401ce591cf4c0bb03fbdd1693fee30bb))
+* **ux:** turn home page posts into clickable cards ([#895](https://github.com/cotes2020/jekyll-theme-chirpy/issues/895)) ([b85f633](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b85f6330dea666350631c4461b742cdb54c5f052))
+
+### Bug Fixes
+
+* css selector string escaping vulnerability ([#888](https://github.com/cotes2020/jekyll-theme-chirpy/issues/888)) ([5c6ec9d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5c6ec9d06b6571e2c0efe6652078442dca8af477))
+* mathematics cannot scroll horizontally ([#760](https://github.com/cotes2020/jekyll-theme-chirpy/issues/760)) ([4681df7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4681df715118a37ae1e91b588de0adb67f4e331a))
+* notch status bar doesn't match theme color ([#918](https://github.com/cotes2020/jekyll-theme-chirpy/issues/918)) ([820ba62](https://github.com/cotes2020/jekyll-theme-chirpy/commit/820ba62e9e939090523a7077d01d01bd78ec84eb))
+* some console snippets will be incompletely copied ([e8e4901](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e8e4901e340dd7e5fc5f656dd3c7bcd6c97b886a))
+
+## [5.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.1...v5.5.2) (2023-01-30)
+
+### Bug Fixes
+
+* position of prompt icon is incorrect in paragraph on mobile ([5df953f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5df953f6c877e2aa3f1f4981c97a0b8007abe6d4))
+
+## [5.5.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.5.0...v5.5.1) (2023-01-29)
+
+### Bug Fixes
+
+* the icon position of the prompts in the list is incorrect ([0c9558d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c9558de8a01e9ab795778f351a8bbf4d6b21763))
+
+## [5.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.4.0...v5.5.0) (2023-01-29)
+
+### Features
+
+* **i18n:** add Arabic translation ([#857](https://github.com/cotes2020/jekyll-theme-chirpy/issues/857)) ([765af53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/765af53b77e5c63804784d5728f5970ae274c2c7))
+* **i18n:** add Czech language ([#833](https://github.com/cotes2020/jekyll-theme-chirpy/issues/833)) ([98d48f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/98d48f5da412276d4a0c99cd01a87b19349bc6bc))
+* **i18n:** add Finnish translations ([#843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/843)) ([d6d0318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d6d03183eaf94b44e037cc48b6e1c47cee183f6e))
+* **i18n:** add Italian translation ([#850](https://github.com/cotes2020/jekyll-theme-chirpy/issues/850)) ([9a011e1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9a011e14d66195d8b2fb9ec62f3e60a3e56cd032))
+
+### Bug Fixes
+
+*  copy command line incomplete(`.gp` part) ([41ed331](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41ed33145639415148aec8e85edc7a6fd0de0ca3))
+* correct encoding of spaces in share URLs ([#835](https://github.com/cotes2020/jekyll-theme-chirpy/issues/835)) ([f2d2858](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f2d285844e6e2979f2b0eec1d20073d3c05b6c0c))
+* post's image would cover the PWA update alert ([bd374dd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bd374dd383c50f89c8f018ecb4e25772eeb8f6d8))
+* prompt with nested blockquotes renders incorrectly ([#846](https://github.com/cotes2020/jekyll-theme-chirpy/issues/846)) ([babb4a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/babb4a0c5a58ceb2e4093bc465670accdd526c18))
+
+## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
+
+### Features
+
+* add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
+* add embed video support ([ed6dc53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ed6dc539eff7003a3765bcd8c31ae5e91a863d65))
+* add shimmer background when image loads ([ab16fdc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ab16fdc7fc26811130b98a1773beb62bff6182e8))
+* set preview image ratio to 1.91 : 1 ([4b6ccbc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4b6ccbcbccce27b9fcb035812efefe4eb69301cf))
+* support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
+* support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
+
+### Bug Fixes
+
+* `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
+* `og:image` will be incorrect if the image uses a cross-domain URL ([8de1abd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8de1abda6be3633982392178731431b0ddb1b52b))
+* refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
+* spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
+
+### Improvements
+
+* **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
+
+## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)
+
+### Bug Fixes
+
+* `mermaid` occasionally fails to initialize ([#536](https://github.com/cotes2020/jekyll-theme-chirpy/issues/536)) ([48f14e3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/48f14e39ac81bbfb3b9913ea3ee789d775b2d1ae))
+* **comment:** disqus doesn't follow theme mode switching ([b0d5956](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0d5956f5a0ed894984d6b1754efeba04d8bc966))
+* restore full-text search ([#741](https://github.com/cotes2020/jekyll-theme-chirpy/issues/741)) ([6774e0e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6774e0e1fb37cf467b14be481347412713763f05))
+* the image URL in the SEO-related tags is incomplete ([#754](https://github.com/cotes2020/jekyll-theme-chirpy/issues/754)) ([f6e9a3f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f6e9a3fccf7ab34db71f8aefaf86fdcc05861076))
+
+## [5.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.0...v5.3.1) (2022-10-25)
+
+### Bug Fixes
+
+* 404 page missing title in tablet/desktop view ([5511b28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5511b2883fd5a395fddfb642588d00c122f18da7))
+* prompt content overflows horizontally ([#705](https://github.com/cotes2020/jekyll-theme-chirpy/issues/705)) ([fb13e32](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fb13e3219b5eca0d2e4f86a1ecabfab75240369f))
+* **tools:** multiple configuration files will fail the test ([80cb0b3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/80cb0b371754e96772a7907877a8ce196398ba3d))
+
+### Improvements
+
+* **layout:** improve the min-height of main content ([#674](https://github.com/cotes2020/jekyll-theme-chirpy/issues/674)) ([49bb93c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/49bb93cc0c89ad9cfaad5edcf9cb28c3d5134575))
+* modify checkbox icon with `Liquid` ([1fd665b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1fd665bf4990c26ae23635c511c5abc9640184d1))
+* optimize the extra padding in lists ([#703](https://github.com/cotes2020/jekyll-theme-chirpy/issues/703)) ([39da11e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/39da11e3f3685f49321757576d2b87a48bf25db5)), closes [#702](https://github.com/cotes2020/jekyll-theme-chirpy/issues/702)
+* **posts:** improve core block bottom padding ([d2fb98b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2fb98b3e57f2f6c3fc3816551cd0721731adf40))
+* truncate post content for search results ([647eea8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/647eea8dbd716f9d3cb8330c3139fa753903f51d))
+* **typography:** optimize the line height of post content ([eac3f9b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/eac3f9b434ca77e3dc64eea9cedea7b93e7b306b))
+
+### Others
+
+* **giscus:** add `reactions-enabled` option ([#712](https://github.com/cotes2020/jekyll-theme-chirpy/issues/712)) ([70662a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/70662a0365e6b9378602dc0a57462ddad5aebcf5))
+* **locale:** restore options for changing date format ([#716](https://github.com/cotes2020/jekyll-theme-chirpy/issues/716)) ([f904e8c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f904e8cd48c343cc31e25859d9d50bfe2c056f41))
+* remove site config option `prefer_datetime_locale` ([6852ceb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6852ceb280927ff4e753a3e1131f2b396d9807d0))
+
+## [5.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.1...v5.3.0) (2022-09-23)
+
+### Features
+
+* add multiple authors to a post ([#677](https://github.com/cotes2020/jekyll-theme-chirpy/issues/677)) ([f1d9e99](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f1d9e99bc02d3cd0a6b0cd1beac545f0cc7a24f8)), closes [#675](https://github.com/cotes2020/jekyll-theme-chirpy/issues/675)
+* **i18n:** add Bulgarian support  ([#612](https://github.com/cotes2020/jekyll-theme-chirpy/issues/612)) ([2fed338](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2fed338ce6d078bf528c9717201fbc475f88cd22))
+* **i18n:** add German locale file ([#663](https://github.com/cotes2020/jekyll-theme-chirpy/issues/663)) ([940b281](https://github.com/cotes2020/jekyll-theme-chirpy/commit/940b2810e95065e30600ae8d5e4612e7183da60e))
+* **i18n:** add Hungarian locale file ([#597](https://github.com/cotes2020/jekyll-theme-chirpy/issues/597), [#598](https://github.com/cotes2020/jekyll-theme-chirpy/issues/598)) ([b032977](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b0329775fc24d0323e5cc04cda46ece8b4531802))
+* **i18n:** add Turkish language ([#631](https://github.com/cotes2020/jekyll-theme-chirpy/issues/631)) ([ad137fa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ad137fa2945b1870b9c1dd5e9212a5f4af7c3580))
+
+### Bug Fixes
+
+* add missing color to linkedin icon for share list ([#683](https://github.com/cotes2020/jekyll-theme-chirpy/issues/683)) ([0dcd39d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0dcd39d491c9c49e4acf7f75f83fe6e1d1839e37))
+* code contains spaces in headings ([#644](https://github.com/cotes2020/jekyll-theme-chirpy/issues/644)) ([3fa1bf3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3fa1bf305451f645a7f3aa93863b076463c8f165))
+* correct spelling of `panel` ([#686](https://github.com/cotes2020/jekyll-theme-chirpy/issues/686)) ([b288587](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b288587c1c3d113a1c52c2d25fb46cddda348961))
+* correct the i18n for tab titles ([0c5b697](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c5b697fd3b283b6a5c926742b61ed49d8688c18))
+* the `code` doesn't wrap inside the prompt ([#626](https://github.com/cotes2020/jekyll-theme-chirpy/issues/626)) ([378b65a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/378b65a0617787813519dde74d6f741f255eff3d))
+
+## [5.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.2.0...v5.2.1) (2022-06-17)
+
+### Bug Fixes
+
+* exclude CHANGELOG from output ([971fe03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/971fe03ec329ae49e7d60fe3af6101cfbd1acd6c))
+* **PWA:** sometimes update notification is not triggered ([96af729](https://github.com/cotes2020/jekyll-theme-chirpy/commit/96af7291ea5b2c5ed6372e7b6f7725e67c69f1ba))
+
+## [5.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.1.0...v5.2.0) (2022-06-09)
+
+### Features
+
+* add es-ES support to locales ([#533](https://github.com/cotes2020/jekyll-theme-chirpy/issues/533)) ([efe75ad](https://github.com/cotes2020/jekyll-theme-chirpy/commit/efe75adf2784956afb7a0b67f6634b146d9cb03b))
+* add fr-FR support to locales ([#582](https://github.com/cotes2020/jekyll-theme-chirpy/issues/582)) ([94e8144](https://github.com/cotes2020/jekyll-theme-chirpy/commit/94e81447afa457b1a6b7e8f487c47502803556d7))
+* add Vietnamese locale ([#517](https://github.com/cotes2020/jekyll-theme-chirpy/issues/517)) ([171463d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/171463d76da9b7bc25dd327b8f0a868ea79e388b))
+* add pt-BR support to locales ([c2c503f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c2c503f63336884282b6bda4ec0703d6ae76771b))
+* add option to turn off PWA ([#527](https://github.com/cotes2020/jekyll-theme-chirpy/issues/527)) ([106c981](https://github.com/cotes2020/jekyll-theme-chirpy/commit/106c981bac71e7434204a77e1f0c9c61d6eb1509))
+* **PWA:** add Service Worker update notification ([d127183](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d127183b9774f6321e409acdb66bf8a85d8814be))
+* support showing description of preview image ([2bd6efa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bd6efa95a174ac44e30a3af1e57e6f40d6e0e3a))
+
+### Bug Fixes
+
+* alt is not a valid attribute for 'a' tag ([58928db](https://github.com/cotes2020/jekyll-theme-chirpy/commit/58928dbc9068db4e4cda4371eeae1865920dce6a))
+* assets URL is missing `baseurl` in self-hosted mode ([#591](https://github.com/cotes2020/jekyll-theme-chirpy/issues/591)) ([54124d5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/54124d5134995fce52e4c2fc0a5d4d1743d6264d))
+* correct the `twitter:creator` of Twitter summary card ([96a16c8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/96a16c868ede51e7dfa412de63ffa1e5a49add7f))
+* correctly URL encode share links ([4c1c8d8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4c1c8d8b0eacecbbaa2d522bbdd6430f350ff760)), closes [#496](https://github.com/cotes2020/jekyll-theme-chirpy/issues/496)
+* follow paginate_path config for pagination ([6900d9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6900d9f2bc9380cbda4babf611c6eeff345291af))
+* force checkout of `gh-pages` branch ([#544](https://github.com/cotes2020/jekyll-theme-chirpy/issues/544)) ([5402523](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5402523ae52a3740bcc15df0b226b2612644945d))
+* horizontal scroll for long equations ([#545](https://github.com/cotes2020/jekyll-theme-chirpy/issues/545)) ([30787fc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/30787fc4cf151e955bb7afc26dfd859f1a06fce6))
+* p is not allowed in span ([4f590e2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4f590e2bba0639751771211bc0d357828ae70404))
+* remove whitespace from avatar URL ([#537](https://github.com/cotes2020/jekyll-theme-chirpy/issues/537)) ([0542b51](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0542b5149c8287dca60e37f46ee36f31b43455e4))
+* resume the preview image SEO tag ([#529](https://github.com/cotes2020/jekyll-theme-chirpy/issues/529)) ([b8d1bcd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b8d1bcd3dea0abd1afef7ef154a4501fbb18938d))
+* script code should be in head or body, not in between ([2103191](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2103191b2faf714a8e4418c7c347a1f942b51af8))
+* spurious header closing tags ([59e9557](https://github.com/cotes2020/jekyll-theme-chirpy/commit/59e955745f02f9b57c65af70b0979cd4a98bf53f))
+* table bypass refactoring when it contains IAL ([#519](https://github.com/cotes2020/jekyll-theme-chirpy/issues/519)) ([5d85ccb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5d85ccb9943aac88dbbefebe1c2234cdcbae5c53))
+* **theme mode:** `SCSS` syntax error ([#588](https://github.com/cotes2020/jekyll-theme-chirpy/issues/588)) ([76a1b6a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/76a1b6a068c369138422dcd18ba08ec8cc3749a6))
+* use `jsonify` to generate valid json ([#521](https://github.com/cotes2020/jekyll-theme-chirpy/issues/521)) ([dd9d5a7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/dd9d5a7207b746342d07176d8969dc4f2c380bf2))
+* when the `site.img_cdn` is set to the local path, the preview-image path loses the `baseurl` ([9cefe58](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9cefe58993d9ea3a3a28424e7ffd8e0911567c5c))
+
+### Improvements
+
+* avoid post pageviews from shifting while loading ([135a16f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/135a16f13ee783d9308669ff9a824847a73c951c))
+* avoid the layout shift for post datetime ([6d35f5f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6d35f5f8da044cfad071628bb53776de03efaae4))
+* **categories:** support singular and plural forms of locale ([#595](https://github.com/cotes2020/jekyll-theme-chirpy/issues/595)) ([35cadf9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/35cadf969dd0161ee62503e242c545f006f7072b))
+* improve the responsive design for ultrawide screens ([#540](https://github.com/cotes2020/jekyll-theme-chirpy/issues/540)) ([5d6e8c5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5d6e8c5ef6aa71b4d2600c5305f6e8ba540557f7))
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000..0bf4a9e
--- /dev/null
+++ b/docs/CODE_OF_CONDUCT.md
@@ -0,0 +1,73 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at `cotes.chung@gmail.com`. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
+
+For answers to common questions about this code of conduct, see
+<https://www.contributor-covenant.org/faq>
+
+[homepage]: https://www.contributor-covenant.org
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
new file mode 100644
index 0000000..63024c3
--- /dev/null
+++ b/docs/CONTRIBUTING.md
@@ -0,0 +1,109 @@
+# Contributing Guidelines
+
+_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 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.
+
+## Table of Contents
+
+- [General Rules](#general-rules)
+- [Questions and Requests for Help](#questions-and-requests-for-help)
+- [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 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.
+
+- 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] / [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 the project should be left on GitHub.
+
+**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
+
+We expect every reasonable question you ask to be answered appropriately. If you want a quick and timely response,
+please ask questions at [Jekyll Talk][jekyll-talk] and [StackOverflow][stack-overflow], where there are tons of
+enthusiastic geeks who will positively answer your challenging questions.
+
+If you can't get an answer in any of the above ways, then create a new [discussion][discus]. As long as it is not a
+duplicate and [RTFM][rtfm] / [STFW][stfw] issue, we will respond as soon as possible.
+
+## 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.
+
+1. Please figure out why the bug occurred, or locate the module in the project that caused this bug. Otherwise, there is
+a high probability that you are using/setting it incorrectly.
+
+2. If the issue is caused by you modifying the project code or some configuration of Jekyll, then please DO NOT
+report such "bugs".
+Chirpy is an open-source project, but that doesn't mean we will maintain other specific forks (such as yours).
+You can learn about Jekyll and modern Web development to solve problems caused by custom modifications.
+
+3. Make good use of your browser's incognito mode to troubleshoot if the problem is caused by caching.
+
+4. As a last option, you can create a new [Bug Report][bug-report] following the template to describe the details.
+If possible, providing a demo that reproduces the error will help us troubleshoot faster.
+
+## 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/Documentation
+
+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. 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. 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
+[issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue
+[pr]: https://github.com/cotes2020/jekyll-theme-chirpy/pulls
+[discus]: https://github.com/cotes2020/jekyll-theme-chirpy/discussions
+[ext-reading]: http://www.catb.org/~esr/faqs/smart-questions.html
+[jekyll-talk]: https://talk.jekyllrb.com/
+[stack-overflow]: https://stackoverflow.com/questions/tagged/jekyll
+[rtfm]: https://en.wikipedia.org/wiki/RTFM
+[stfw]: https://www.webster-dictionary.org/definition/STFW
+[gh-reactions]: https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/
+[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
diff --git a/docs/SECURITY.md b/docs/SECURITY.md
new file mode 100644
index 0000000..8d357fe
--- /dev/null
+++ b/docs/SECURITY.md
@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version    | Supported |
+| :--------- | :-------: |
+| >= `7.0.0` |     ✓     |
+| <= `6.0.0` |     ✗     |
+
+## Reporting a Vulnerability
+
+If you find a vulnerability, please report it to `cotes.chung@gmail.com`.
+We will try our best to respond within a week. Thank you for your time!
diff --git a/jekyll-theme-chirpy.gemspec b/jekyll-theme-chirpy.gemspec
new file mode 100644
index 0000000..88d5c42
--- /dev/null
+++ b/jekyll-theme-chirpy.gemspec
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-theme-chirpy"
+  spec.version       = "7.0.0"
+  spec.authors       = ["Cotes Chung"]
+  spec.email         = ["cotes.chung@gmail.com"]
+
+  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"
+
+  spec.files         = `git ls-files -z`.split("\x0").select { |f|
+    f.match(%r!^((_(includes|layouts|sass|(data\/(locales|origin)))|assets)\/|README|LICENSE)!i)
+  }
+
+  spec.metadata = {
+    "bug_tracker_uri"   => "https://github.com/cotes2020/jekyll-theme-chirpy/issues",
+    "documentation_uri" => "https://github.com/cotes2020/jekyll-theme-chirpy/#readme",
+    "homepage_uri"      => "https://cotes2020.github.io/chirpy-demo",
+    "source_code_uri"   => "https://github.com/cotes2020/jekyll-theme-chirpy",
+    "wiki_uri"          => "https://github.com/cotes2020/jekyll-theme-chirpy/wiki",
+    "plugin_type"       => "theme"
+  }
+
+  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.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"
+
+end
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..00f8545
--- /dev/null
+++ b/package.json
@@ -0,0 +1,177 @@
+{
+  "name": "jekyll-theme-chirpy",
+  "version": "7.0.0",
+  "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"
+  },
+  "author": "Cotes Chung",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cotes2020/jekyll-theme-chirpy/issues"
+  },
+  "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
+  "scripts": {
+    "build": "concurrently npm:build:*",
+    "build:css": "purgecss -c purgecss.config.js",
+    "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
+    "watch:js": "rollup -c --bundleConfigAsCjs -w",
+    "lint:scss": "stylelint _sass/**/*.scss",
+    "lint:fix:scss": "npm run lint:scss -- --fix",
+    "test": "npm run lint:scss"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/preset-env": "^7.24.5",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-yaml": "^4.1.2",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "concurrently": "^8.2.2",
+    "conventional-changelog-conventionalcommits": "^7.0.2",
+    "husky": "^9.0.11",
+    "purgecss": "^6.0.0",
+    "rollup": "^4.17.2",
+    "rollup-plugin-license": "^3.3.1",
+    "semantic-release": "^23.1.1",
+    "stylelint": "^16.5.0",
+    "stylelint-config-standard-scss": "^13.1.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"
+    }
+  },
+  "release": {
+    "branches": [
+      "production"
+    ],
+    "plugins": [
+      [
+        "@semantic-release/commit-analyzer",
+        {
+          "preset": "conventionalcommits"
+        }
+      ],
+      [
+        "@semantic-release/release-notes-generator",
+        {
+          "preset": "conventionalcommits",
+          "presetConfig": {
+            "types": [
+              {
+                "type": "feat",
+                "section": "Features"
+              },
+              {
+                "type": "fix",
+                "section": "Bug Fixes"
+              },
+              {
+                "type": "perf",
+                "section": "Improvements"
+              },
+              {
+                "type": "refactor",
+                "section": "Changes",
+                "hidden": true
+              }
+            ]
+          }
+        }
+      ],
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "docs/CHANGELOG.md",
+          "changelogTitle": "# Changelog"
+        }
+      ],
+      [
+        "@semantic-release/npm",
+        {
+          "npmPublish": false
+        }
+      ],
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "bash tools/release --prepare",
+          "publishCmd": "bash tools/release"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "docs",
+            "package.json",
+            "*.gemspec"
+          ],
+          "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  }
+}
diff --git a/purgecss.config.js b/purgecss.config.js
new file mode 100644
index 0000000..de370de
--- /dev/null
+++ b/purgecss.config.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const DIST_PATH = '_sass/dist';
+
+fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  fs.mkdirSync(DIST_PATH);
+});
+
+module.exports = {
+  content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
+  css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
+  keyframes: true,
+  variables: true,
+  output: `${DIST_PATH}/bootstrap.css`,
+  // The `safelist` should be changed appropriately for future development
+  safelist: {
+    standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
+    greedy: [/^col-/, /tooltip/]
+  }
+};
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..823401e
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,74 @@
+import babel from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+import license from 'rollup-plugin-license';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import fs from 'fs';
+import path from 'path';
+import yaml from '@rollup/plugin-yaml';
+
+const SRC_DEFAULT = '_javascript';
+const DIST_DEFAULT = 'assets/js/dist';
+const SRC_PWA = `${SRC_DEFAULT}/pwa`;
+
+const isProd = process.env.BUILD === 'production';
+
+if (fs.existsSync(DIST_DEFAULT)) {
+  fs.rm(DIST_DEFAULT, { recursive: true, force: true }, (err) => {
+    if (err) {
+      throw err;
+    }
+  });
+}
+
+function build(filename, opts = {}) {
+  const src = opts.src || SRC_DEFAULT;
+  const dist = opts.dist || DIST_DEFAULT;
+  const bannerUrl =
+    opts.bannerUrl || path.join(__dirname, SRC_DEFAULT, '_copyright');
+  const commentStyle = opts.commentStyle || 'ignored';
+
+  return {
+    input: [`${src}/${filename}.js`],
+    output: {
+      file: `${dist}/${filename}.min.js`,
+      format: 'iife',
+      name: 'Chirpy',
+      sourcemap: !isProd
+    },
+    watch: {
+      include: `${src}/**`
+    },
+    plugins: [
+      babel({
+        babelHelpers: 'bundled',
+        presets: ['@babel/env'],
+        plugins: ['@babel/plugin-transform-class-properties']
+      }),
+      nodeResolve(),
+      yaml(),
+      isProd && commentStyle === 'none' && terser(),
+      license({
+        banner: {
+          commentStyle,
+          content: { file: bannerUrl }
+        }
+      }),
+      isProd && commentStyle !== 'none' && terser()
+    ]
+  };
+}
+
+export default [
+  build('commons'),
+  build('home'),
+  build('categories'),
+  build('page'),
+  build('post'),
+  build('misc'),
+  build('app', { src: SRC_PWA }),
+  build('sw', {
+    src: SRC_PWA,
+    bannerUrl: path.join(__dirname, SRC_PWA, '_frontmatter'),
+    commentStyle: 'none'
+  })
+];
diff --git a/tmp._md b/tmp._md
new file mode 100644
index 0000000..cef3782
--- /dev/null
+++ b/tmp._md
@@ -0,0 +1,28 @@
+Hello,
+
+I’d like to make some offers on the items being liquidated (All in AUD)
+
+| ITEM                                                               | OFFER (AUD) | MSRP (TODO: REMOVE) | %   |
+| ------------------------------------------------------------------ | ----------- | ------------------- | --- |
+| TENMA power supply                                                 | 50          | 455                 |
+| Keysight orange multimeter                                         |             |
+| Keysight oscilloscope                                              |             | DSOX1202G           |
+| Weller soldering iron station and tips                             |             |
+| Soldering station brass wool and solder                            |             |
+| Tweezers                                                           |             |
+| Circuit boards on desk and stuff in the jaycar bag and jlcpcb box: |             |
+| Canon camera, bag and lenses                                       |             |
+| 3d printed cameras                                                 |             |
+| 3d printer and filament                                            |             |
+| Raspberry pi                                                       |             |
+
+TODO: CHECK IF THESE ARE NEEDED
+
+- Drill press
+- Monitors?
+- Laptops?
+- Gaming PC
+- Gaming keyboard and mouse
+- Servers?
+- Lead acid UPS?
+- One tube?
diff --git a/tools/init b/tools/init
new file mode 100644
index 0000000..ed478d7
--- /dev/null
+++ b/tools/init
@@ -0,0 +1,130 @@
+#!/usr/bin/env bash
+#
+# Init the environment for new user.
+
+set -eu
+
+# CLI Dependencies
+CLI=("git" "npm")
+
+ACTIONS_WORKFLOW=pages-deploy.yml
+
+RELEASE_HASH=$(git log --grep="chore(release):" -1 --pretty="%H")
+
+# temporary file suffixes that make `sed -i` compatible with BSD and Linux
+TEMP_SUFFIX="to-delete"
+
+_no_gh=false
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/init [options]"
+  echo
+  echo "Options:"
+  echo "     --no-gh              Do not deploy to Github."
+  echo "     -h, --help           Print this help information."
+}
+
+# BSD and GNU compatible sed
+_sedi() {
+  regex=$1
+  file=$2
+  sed -i.$TEMP_SUFFIX -E "$regex" "$file"
+  rm -f "$file".$TEMP_SUFFIX
+}
+
+_check_cli() {
+  for i in "${!CLI[@]}"; do
+    cli="${CLI[$i]}"
+    if ! command -v "$cli" &>/dev/null; then
+      echo "Command '$cli' not found! Hint: you should install it."
+      exit 1
+    fi
+  done
+}
+
+_check_status() {
+  if [[ -n $(git status . -s) ]]; then
+    echo "Error: Commit unstaged files first, and then run this tool again."
+    exit 1
+  fi
+}
+
+_check_init() {
+  if [[ $(git rev-parse HEAD^1) == "$RELEASE_HASH" ]]; then
+    echo "Already initialized."
+    exit 0
+  fi
+}
+
+check_env() {
+  _check_cli
+  _check_status
+  _check_init
+}
+
+reset_latest() {
+  git reset --hard "$RELEASE_HASH"
+  git clean -fd
+  git submodule update --init --recursive
+}
+
+init_files() {
+  if $_no_gh; then
+    rm -rf .github
+  else
+    ## Change the files of `.github/`
+    temp="$(mktemp -d)"
+    find .github/workflows -type f -name "*$ACTIONS_WORKFLOW*" -exec mv {} "$temp/$ACTIONS_WORKFLOW" \;
+    rm -rf .github && mkdir -p .github/workflows
+    mv "$temp/$ACTIONS_WORKFLOW" .github/workflows/"$ACTIONS_WORKFLOW"
+    rm -rf "$temp"
+
+    ## Cleanup image settings in site config
+    _sedi "s/(^timezone:).*/\1/;s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml
+  fi
+
+  # remove the other files
+  rm -rf _posts/*
+
+  # build assets
+  npm i && npm run build
+
+  # track the CSS/JS output
+  _sedi "/.*\/dist$/d" .gitignore
+}
+
+commit() {
+  git add -A
+  git commit -m "chore: initialize the environment" -q
+  echo -e "\n> Initialization successful!\n"
+}
+
+main() {
+  check_env
+  reset_latest
+  init_files
+  commit
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  --no-gh)
+    _no_gh=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
+  esac
+done
+
+main
diff --git a/tools/release b/tools/release
new file mode 100644
index 0000000..c2ea59e
--- /dev/null
+++ b/tools/release
@@ -0,0 +1,201 @@
+#!/usr/bin/env bash
+#
+# Requires: Git, NPM and RubyGems
+
+set -eu
+
+opt_pre=false # option for bump gem version
+opt_pkg=false # option for building gem package
+
+MAIN_BRANCH="master"
+RELEASE_BRANCH="production"
+
+GEM_SPEC="jekyll-theme-chirpy.gemspec"
+NODE_SPEC="package.json"
+CHANGELOG="docs/CHANGELOG.md"
+CONFIG="_config.yml"
+
+CSS_DIST="_sass/dist"
+JS_DIST="assets/js/dist"
+
+FILES=(
+  "$GEM_SPEC"
+  "$NODE_SPEC"
+  "$CHANGELOG"
+  "$CONFIG"
+)
+
+TOOLS=(
+  "git"
+  "npm"
+  "gem"
+)
+
+help() {
+  echo -e "A tool to release new version Chirpy gem.\nThis tool will:"
+  echo "  1. Build a new gem and publish it to RubyGems.org"
+  echo "  2. Merge the release branch into the default branch"
+  echo
+  echo "Usage:"
+  echo "  bash ./tools/release [options]"
+  echo
+  echo "Options:"
+  echo "  --prepare           Preparation for release"
+  echo "  -p, --package       Build a gem package only, for local packaging in case of auto-publishing failure"
+  echo "  -h, --help          Display this help message"
+}
+
+_check_cli() {
+  for i in "${!TOOLS[@]}"; do
+    cli="${TOOLS[$i]}"
+    if ! command -v "$cli" &>/dev/null; then
+      echo "> Command '$cli' not found!"
+      exit 1
+    fi
+  done
+}
+
+_check_git() {
+  $opt_pre || (
+    # 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
+  )
+
+  $opt_pkg || (
+    if [[ "$(git branch --show-current)" != "$RELEASE_BRANCH" ]]; then
+      echo "> Abort: Please run the tool in the '$RELEASE_BRANCH' branch."
+      exit 1
+    fi
+  )
+}
+
+_check_src() {
+  for i in "${!FILES[@]}"; do
+    _src="${FILES[$i]}"
+    if [[ ! -f $_src && ! -d $_src ]]; then
+      echo -e "> Error: Missing file \"$_src\"!\n"
+      exit 1
+    fi
+  done
+}
+
+init() {
+  _check_cli
+  _check_git
+  _check_src
+  echo -e "> npm install\n"
+  npm i
+}
+
+## Bump new version to gem-spec file
+_bump_version() {
+  _version="$(grep '"version":' "$NODE_SPEC" | sed 's/.*: "//;s/".*//')"
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_version/" "$GEM_SPEC"
+  echo "> Bump gem version to $_version"
+}
+
+_improve_changelog() {
+  # Replace multiple empty lines with a single empty line
+  sed -i '/^$/N;/^\n$/D' "$CHANGELOG"
+  # Escape left angle brackets of HTML tag in the changelog as they break the markdown structure. e.g., '<hr>'
+  sed -i -E 's/\s(<[a-z])/ \\\1/g' "$CHANGELOG"
+}
+
+prepare() {
+  _bump_version
+  _improve_changelog
+}
+
+## Build a Gem package
+build_gem() {
+  if $opt_pkg; then
+    BACKUP_PATH="$(mktemp -d)"
+    mkdir -p "$BACKUP_PATH"/css "$BACKUP_PATH"/js
+    [[ -d $CSS_DIST ]] && cp "$CSS_DIST"/* "$BACKUP_PATH"/css
+    [[ -d $JS_DIST ]] && cp "$JS_DIST"/* "$BACKUP_PATH"/js
+  fi
+
+  # Remove unnecessary theme settings
+  sed -i -E "s/(^timezone:).*/\1/;s/(^cdn:).*/\1/;s/(^avatar:).*/\1/" $CONFIG
+  rm -f ./*.gem
+
+  npm run build
+  # add CSS/JS distribution files to gem package
+  git add "$CSS_DIST" "$JS_DIST" -f
+
+  echo -e "\n> gem build $GEM_SPEC\n"
+  gem build "$GEM_SPEC"
+
+  echo -e "\n> Resume file changes ...\n"
+  git reset
+  git checkout .
+
+  if $opt_pkg; then
+    # restore the dist files for future development
+    mkdir -p "$CSS_DIST" "$JS_DIST"
+    cp "$BACKUP_PATH"/css/* "$CSS_DIST"
+    cp "$BACKUP_PATH"/js/* "$JS_DIST"
+    rm -rf "$BACKUP_PATH"
+  fi
+}
+
+# Push the gem to RubyGems.org (using $GEM_HOST_API_KEY)
+push_gem() {
+  gem push ./*.gem
+}
+
+## Merge the release branch into the default branch
+merge() {
+  git fetch origin "$MAIN_BRANCH"
+  git checkout -b "$MAIN_BRANCH" origin/"$MAIN_BRANCH"
+
+  git merge --no-ff --no-edit "$RELEASE_BRANCH" || (
+    git merge --abort
+    echo -e "\n> Conflict detected. Aborting merge.\n"
+    exit 0
+  )
+
+  git push origin "$MAIN_BRANCH"
+}
+
+main() {
+  init
+
+  if $opt_pre; then
+    prepare
+    exit 0
+  fi
+
+  build_gem
+  $opt_pkg && exit 0
+  push_gem
+  merge
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  --prepare)
+    opt_pre=true
+    shift
+    ;;
+  -p | --package)
+    opt_pkg=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
+  esac
+done
+
+main
diff --git a/tools/run b/tools/run
new file mode 100644
index 0000000..04f23f5
--- /dev/null
+++ b/tools/run
@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+#
+# Run jekyll serve and then launch the site
+
+prod=false
+command="bundle exec jekyll s -l"
+host="127.0.0.1"
+
+help() {
+  echo "Usage:"
+  echo
+  echo "   bash /path/to/run [options]"
+  echo
+  echo "Options:"
+  echo "     -H, --host [HOST]    Host to bind to."
+  echo "     -p, --production     Run Jekyll in 'production' mode."
+  echo "     -h, --help           Print this help information."
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -H | --host)
+    host="$2"
+    shift 2
+    ;;
+  -p | --production)
+    prod=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    echo -e "> Unknown option: '$opt'\n"
+    help
+    exit 1
+    ;;
+  esac
+done
+
+command="$command -H $host"
+
+if $prod; then
+  command="JEKYLL_ENV=production $command"
+fi
+
+echo -e "\n> $command\n"
+eval "$command"
diff --git a/tools/test b/tools/test
new file mode 100644
index 0000000..fe47d44
--- /dev/null
+++ b/tools/test
@@ -0,0 +1,89 @@
+#!/usr/bin/env bash
+#
+# Build and test the site content
+#
+# Requirement: html-proofer, jekyll
+#
+# Usage: See help information
+
+set -eu
+
+SITE_DIR="_site"
+
+_config="_config.yml"
+
+_baseurl=""
+
+help() {
+  echo "Build and test the site content"
+  echo
+  echo "Usage:"
+  echo
+  echo "   bash ./tools/test [options]"
+  echo
+  echo "Options:"
+  echo '     -c, --config   "<config_a[,config_b[...]]>"    Specify config file(s)'
+  echo "     -h, --help               Print this information."
+}
+
+read_baseurl() {
+  if [[ $_config == *","* ]]; then
+    # multiple config
+    IFS=","
+    read -ra config_array <<<"$_config"
+
+    # reverse loop the config files
+    for ((i = ${#config_array[@]} - 1; i >= 0; i--)); do
+      _tmp_baseurl="$(grep '^baseurl:' "${config_array[i]}" | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+
+      if [[ -n $_tmp_baseurl ]]; then
+        _baseurl="$_tmp_baseurl"
+        break
+      fi
+    done
+
+  else
+    # single config
+    _baseurl="$(grep '^baseurl:' "$_config" | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
+  fi
+}
+
+main() {
+  # clean up
+  if [[ -d $SITE_DIR ]]; then
+    rm -rf "$SITE_DIR"
+  fi
+
+  read_baseurl
+
+  # build
+  JEKYLL_ENV=production bundle exec jekyll b \
+    -d "$SITE_DIR$_baseurl" -c "$_config"
+
+  # test
+  bundle exec htmlproofer "$SITE_DIR" \
+    --disable-external \
+    --ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
+}
+
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -c | --config)
+    _config="$2"
+    shift
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
+  esac
+done
+
+main