chore(release): 7.6.0

## [7.6.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.5.0...v7.6.0) (2026-06-20)

### Features

* add edit this post link ([#2517](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2517)) ([6bd446c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6bd446ccdedbe37752cf24b1866e1e2dd9cb82c8))
* **theme:** persist user theme preferences ([#2756](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2756)) ([7496dd4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7496dd41fa053c4636a82027fe3fb3e38357e385))
* **ui:** optimize design of PWA update notification ([#2757](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2757)) ([5cc9dc6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5cc9dc66acb1eb9213988d3ac6de5cf5adf1a6f6))

### Bug Fixes

* **giscus:** synchronize theme state during lazy loading ([#2742](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2742)) ([ceb2a41](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ceb2a41463cbb6251fa257b640990a8d9717b0bb))
* prevent Firefox from opening blank page on `mailto` links ([#2642](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2642)) ([2685b91](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2685b91957d0207c2d31dab828430c78a2fcc3d0))
* **pwa:** avoid iOS status bar overlapping PWA content ([#2173](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2173)) ([3823212](https://github.com/cotes2020/jekyll-theme-chirpy/commit/38232120b729de653bfb42909a8dad047559438d))

### Improvements

* **ui:** prevent vertical flickering caused by subtitle loading ([2db0535](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2db053553bcf9606fc80c4a86959d0dd25d0446a))

.github/FUNDING.yml

@@ -1,2 +0,0 @@
-ko_fi: coteschung
-custom: https://sponsor.cotes.page

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -53,7 +53,7 @@ body:
       value: |
         - Ruby: <!-- run `ruby -v` -->
         - Jekyll: <!-- run `bundle exec jekyll -v` -->
-        - Chirpy: <!-- run `bundle info jekyll-theme-chirpy` -->
+        - Chirpy: <!-- run `bundle info --version jekyll-theme-chirpy` -->
     validations:
       required: true
 

.github/dependabot.yml

@@ -15,7 +15,8 @@ updates:
     schedule:
       interval: "weekly"
   - package-ecosystem: "github-actions"
-    directory: "/"
+    directories:
+      - "/.github/workflows/**"
     groups:
       gh-actions:
         update-types:

.github/workflows/cd.yml

@@ -2,27 +2,26 @@ name: CD
 
 on:
   push:
-    branches:
-      - production
-    tags-ignore:
-      - "**"
+    branches: [production]
+    tags-ignore: ["**"]
 
 jobs:
   release:
+    if: ${{ ! startsWith(github.event.head_commit.message, 'chore(release)') }}
     permissions:
       contents: write
       issues: write
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
 
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3
+          ruby-version: 3.4
           bundler-cache: true
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: lts/*
 

.github/workflows/ci.yml

@@ -1,17 +1,25 @@
-name: "CI"
+name: CI
+
 on:
   push:
     branches:
-      - "master"
-      - "hotfix/**"
+      - master
+      - "hotfix/*"
     paths-ignore:
       - ".github/**"
       - "!.github/workflows/ci.yml"
-      - ".gitignore"
+      - .gitignore
       - "docs/**"
-      - "README.md"
-      - "LICENSE"
+      - README.md
+      - LICENSE
   pull_request:
+    paths-ignore:
+      - ".github/**"
+      - "!.github/workflows/ci.yml"
+      - .gitignore
+      - "docs/**"
+      - README.md
+      - LICENSE
 
 jobs:
   build:
@@ -19,11 +27,11 @@ jobs:
 
     strategy:
       matrix:
-        ruby: ["3.1", "3.2", "3.3"]
+        ruby: ["3.3", "3.4"]
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0 # for posts's lastmod
 
@@ -34,7 +42,7 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: lts/*
 

.github/workflows/codeql.yml

@@ -24,11 +24,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: "${{ matrix.language }}"
           config-file: .github/codeql/codeql-config.yml
@@ -36,9 +36,9 @@ jobs:
       # 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
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: "/language:${{ matrix.language }}"

.github/workflows/commitlint.yml

@@ -1,9 +1,15 @@
 name: Lint Commit Messages
-on: pull_request
+
+on:
+  push:
+    branches:
+      - master
+      - "hotfix/*"
+  pull_request:
 
 jobs:
   commitlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
       - uses: wagoid/commitlint-github-action@v6

.github/workflows/lint-js.yml

@@ -0,0 +1,30 @@
+name: Lint JS
+
+on:
+  push:
+    paths:
+      - "_javascript/**/*.js"
+      - ".github/workflows/scripts/**/*.js"
+      - "*.js"
+  pull_request:
+    paths:
+      - "_javascript/**/*.js"
+      - ".github/workflows/scripts/*.js"
+      - "*.js"
+
+jobs:
+  lint-js:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Lint JS
+        run: npm run lint:js

.github/workflows/lint-scss.yml

@@ -0,0 +1,26 @@
+name: Lint SCSS
+
+on:
+  push:
+    paths:
+      - "_sass/**/*.scss"
+  pull_request:
+    paths:
+      - "_sass/**/*.scss"
+
+jobs:
+  lint-scss:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm i
+
+      - name: Lint SCSS
+        run: npm run lint:scss

.github/workflows/pr-filter.yml

@@ -0,0 +1,25 @@
+name: PR Filter
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+jobs:
+  check-template:
+    if: github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v7
+
+      - name: Check PR Content
+        id: intercept
+        uses: actions/github-script@v9
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { default: filter } = await import('${{ github.workspace }}/.github/workflows/scripts/pr-filter.js');
+            await filter({ github, context, core });

.github/workflows/publish.yml

@@ -10,6 +10,7 @@ on:
         required: true
       BUILDER:
         required: true
+  workflow_dispatch:
 
 jobs:
   launch:

.github/workflows/scripts/pr-filter.js

@@ -0,0 +1,36 @@
+function hasTypes(markdown) {
+  return /## Type of change/.test(markdown) && /-\s\[x\]/i.test(markdown);
+}
+
+function hasDescription(markdown) {
+  return (
+    /## Description/.test(markdown) &&
+    !/## Description\s*\n\s*(##|\s*$)/.test(markdown)
+  );
+}
+
+export default async ({ github, context, core }) => {
+  const pr = context.payload.pull_request;
+  const body = pr.body === null ? '' : pr.body;
+  const markdown = body.replace(/<!--[\s\S]*?-->/g, '');
+  const action = context.payload.action;
+
+  const isValid =
+    markdown !== '' && hasTypes(markdown) && hasDescription(markdown);
+
+  if (!isValid) {
+    await github.rest.pulls.update({
+      ...context.repo,
+      pull_number: pr.number,
+      state: 'closed'
+    });
+
+    await github.rest.issues.createComment({
+      ...context.repo,
+      issue_number: pr.number,
+      body: `Oops, it seems you've ${action} an invalid pull request. No worries, we'll close it for you.`
+    });
+
+    core.setFailed('PR content does not meet template requirements.');
+  }
+};

.github/workflows/stale.yml

@@ -9,7 +9,7 @@ permissions:
   pull-requests: write
 
 env:
-  STALE_LABEL: stale
+  STALE_LABEL: inactive
   EXEMPT_LABELS: "pending,planning,in progress"
   MESSAGE: >
     This conversation has been automatically marked as stale because it has not had recent activity.
@@ -20,7 +20,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         with:
           # 60 days before marking issues/PRs stale
           days-before-close: -1 # does not close automatically

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

@@ -28,7 +28,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
         with:
           fetch-depth: 0
           # submodules: true
@@ -37,12 +37,12 @@ jobs:
 
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v6
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.3
+          ruby-version: 3.4
           bundler-cache: true
 
       - name: Build site
@@ -57,7 +57,7 @@ jobs:
             \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
 
       - name: Upload site artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v5
         with:
           path: "_site${{ steps.pages.outputs.base_path }}"
 
@@ -70,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v5

.github/workflows/style-lint.yml

@@ -1,23 +0,0 @@
-name: "Style Lint"
-
-on:
-  push:
-    branches: ["master", "hotfix/**"]
-    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: lts/*
-      - run: npm i
-      - run: npm test

.gitignore

@@ -23,5 +23,10 @@ package-lock.json
 !.vscode/tasks.json
 
 # Misc
-_sass/dist
+_sass/vendors
 assets/js/dist
+
+# Hidden system files
+*~
+.DS_Store
+Thumbs.db

.stylelintrc.json

@@ -0,0 +1,29 @@
+{
+  "ignoreFiles": ["_sass/vendors/**"],
+  "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,
+    "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"
+  }
+}

Gemfile

@@ -6,9 +6,9 @@ gemspec
 
 gem "html-proofer", "~> 5.0", group: :test
 
-platforms :mingw, :x64_mingw, :mswin, :jruby do
+platforms :windows, :jruby do
   gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"
 end
 
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+gem "wdm", "~> 0.2.0", :platforms => [:windows]

README.md

@@ -6,11 +6,11 @@
 
   A minimal, responsive, and feature-rich Jekyll theme for technical writing.
 
-  [![CI](https://img.shields.io/github/actions/workflow/status/cotes2020/jekyll-theme-chirpy/ci.yml?logo=github)][ci] 
-  [![Codacy Badge](https://img.shields.io/codacy/grade/4e556876a3c54d5e8f2d2857c4f43894?logo=codacy)][codacy] 
-  [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy?color=goldenrod)][license] 
-  [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?&logo=RubyGems&logoColor=ghostwhite&label=gem&color=orange)][gem] 
-  [![Open in Dev Containers](https://img.shields.io/badge/Dev_Containers-Open-deepskyblue?logo=linuxcontainers)][open-container]
+  [![CI][badge-ci]][ci] 
+  [![Codacy Badge][badge-codacy]][codacy] 
+  [![GitHub license][badge-license]][license] 
+  [![Gem Version][badge-gem]][gem] 
+  [![Open in Dev Containers][badge-open-container]][open-container]
 
   [**Live Demo** →][demo]
 
@@ -20,54 +20,48 @@
 
 ## Features
 
-- Dark Theme
-- Localized UI language
-- Pinned Posts on Home Page
-- Hierarchical Categories
-- Trending Tags
-- Table of Contents
-- Last Modified Date
-- Syntax Highlighting
-- Mathematical Expressions
-- Mermaid Diagrams & Flowcharts
-- Dark Mode Images
-- Embed Media
-- Comment Systems
-- Built-in Search
-- Atom Feeds
-- PWA
-- Web Analytics
-- SEO & Performance Optimization
+- **Design & UX** - Responsive layout, Dark/Light modes, Localized UI language,
+  and Dark mode images.
+- **Content Management** - Pinned posts, Hierarchical categories, Trending tags,
+  Auto-generated Table of Contents, and Last modified dates.
+- **Rich Text Support** - Syntax highlighting, Mathematical expressions, Mermaid
+  diagrams & flowcharts, and Embedded media.
+- **Interactivity & Outreach** - Built-in search, Multiple comment systems, and
+  Atom feeds.
+- **System & Optimization** - PWA support, integrated Web analytics, and
+  advanced SEO performance.
 
 ## Documentation
 
-To learn how to use, develop, and upgrade the project, please refer to the [Wiki][wiki].
+To learn how to use, develop, and upgrade the project, please refer to the
+[Wiki][wiki].
 
 ## Contributing
 
-Contributions (_pull requests_, _issues_, and _discussions_) are what make the open-source community such an amazing place
-to learn, inspire, and create. Any contributions you make are greatly appreciated.
-For details, see the "[Contributing Guidelines][contribute-guide]".
+Contributions (_pull requests_, _issues_, and _discussions_) are what make the
+open-source community such an amazing place to learn, inspire, and create. Any
+contributions you make are greatly appreciated.
+For details, please refer to our [Contributing Guidelines][contribute-guide].
 
 ## Credits
 
-### Contributors
+This project is built on the [Jekyll][jekyllrb] ecosystem and integrates a
+collection of [excellent libraries][lib]. Its avatar and favicon are sourced
+from [ClipartMAX][clipartmax].
 
-Thanks to [all the contributors][contributors] involved in the development of the project!
+Furthermore, thanks to everyone who contributed to the development of this project!
 
-[![all-contributors](https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16)][contributors]
-<sub> — Made with [contrib.rocks](https://contrib.rocks)</sub>
-
-### Third-Party Assets
-
-This project is built on the [Jekyll][jekyllrb] ecosystem and some [great libraries][lib], and is developed using [VS Code][vscode] as well as tools provided by [JetBrains][jetbrains] under a non-commercial open-source software license.
-
-The avatar and favicon for the project's website are from [ClipartMAX][clipartmax].
+[![all-contributors][contributors-avatar]][contributors]
 
 ## License
 
-This project is published under [MIT License][license].
+This project is licensed under the [MIT License][license].
 
+[badge-ci]: https://img.shields.io/github/actions/workflow/status/cotes2020/jekyll-theme-chirpy/ci.yml?logo=github
+[badge-codacy]: https://img.shields.io/codacy/grade/4e556876a3c54d5e8f2d2857c4f43894?logo=codacy
+[badge-license]: https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy?color=goldenrod
+[badge-gem]: https://img.shields.io/gem/v/jekyll-theme-chirpy?&logo=RubyGems&logoColor=ghostwhite&label=gem&color=orange
+[badge-open-container]: https://img.shields.io/badge/Dev_Containers-Open-deepskyblue?logo=linuxcontainers
 [gem]: https://rubygems.org/gems/jekyll-theme-chirpy
 [ci]: https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml?query=event%3Apush+branch%3Amaster
 [codacy]: https://app.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade
@@ -79,6 +73,5 @@ This project is published under [MIT License][license].
 [wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md
 [contributors]: https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors
+[contributors-avatar]: https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16&max=112
 [lib]: https://github.com/cotes2020/chirpy-static-assets
-[vscode]: https://code.visualstudio.com/
-[jetbrains]: https://www.jetbrains.com/?from=jekyll-theme-chirpy

_config.yml

@@ -8,7 +8,7 @@ theme: jekyll-theme-chirpy
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
-# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker
+# Change to your timezone › https://zones.arilyn.cc
 timezone: Asia/Shanghai
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
@@ -36,6 +36,7 @@ social:
   # It will be displayed as the default author of the posts and the copyright owner in the Footer
   name: your_full_name
   email: example@domain.com # change to your email address
+  fediverse_handle: # fill in your fediverse handle. E.g. "@username@domain.com"
   links:
     # The first element serves as the copyright owner's link
     - https://twitter.com/username # change to your Twitter homepage
@@ -107,6 +108,16 @@ social_preview_image: # string, local or CORS resources
 # boolean type, the global switch for TOC in posts.
 toc: true
 
+actions:
+  # Display "Edit this post" action on each post page to encourage contributions.
+  edit_post:
+    enabled: false # set to true to display the "Edit this post" action.
+    url: "" # repository base URL, e.g. https://github.com/cotes2020/jekyll-theme-chirpy/edit/master
+    # Use dynamic or static URL for the edit link.
+    # If `static_url` is false, the post's path will be appended to the `url` above as the final edit link.
+    # Set to true if the URL should remain unchanged, which means each post will share the same edit link.
+    static_url: false # [ true | false ]
+
 comments:
   # Global switch for the post-comment system. Keeping it empty means disabled.
   provider: # [disqus | utterances | giscus]
@@ -212,8 +223,9 @@ exclude:
   - tools
   - README.md
   - LICENSE
+  - purgecss.js
   - "*.config.js"
-  - package*.json
+  - "package*.json"
 
 jekyll-archives:
   enabled: [categories, tags]

_data/locales/ar.yml

@@ -46,9 +46,14 @@ not_found:
   statement: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
 
 notification:
-  update_found: يتوفر اصدار جديد للمحتوى.
+  update_found: يتوفر محتوى جديد
   update: تحديث
 
+theme:
+  light: فاتح
+  dark: داكن
+  system: النظام
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: دقيقة
     prompt: قراءة
+  edit: حرر هذا المنشور
   relate_posts: إقرأ المزيد
   share: شارك
   button:

_data/locales/bg-BG.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Съжалявам, но на този URL адрес няма налично съдържание.
 
 notification:
-  update_found: Налична е нова версия на съдържанието.
+  update_found: Има ново съдържание
   update: Обнови
 
+theme:
+  light: Светла
+  dark: Тъмна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: мин
     prompt: четиво
+  edit: Редактирай тази публикация
   relate_posts: Още за четене
   share: Споделете
   button:

_data/locales/ca-ES.yml

@@ -0,0 +1,90 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Entrada
+  category: Categoria
+  tag: Etiqueta
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Inici
+  categories: Categories
+  tags: Etiquetes
+  archives: Arxiu
+  about: Sobre
+
+# the text displayed in the search bar & search results
+search:
+  hint: Cercar
+  cancel: Cancel·lar
+  no_results: Ups! No s'han trobat resultats.
+
+panel:
+  lastmod: Actualitzat recentment
+  trending_tags: Etiquetes populars
+  toc: Taula de continguts
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Aquesta entrada està llicenciada sota :LICENSE_NAME per l'autor.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alguns drets reservats.
+  verbose: >-
+    Excepte que s'indiqui explícitament, les entrades d'aquest blog estan llicenciades
+    sota la llicència Creative Commons Attribution 4.0 International (CC BY 4.0) per l'autor.
+
+meta: Fet amb :PLATFORM utilitzant el tema :THEME
+
+not_found:
+  statement: Ho sentim, hem perdut aquesta URL o apunta a alguna cosa que no existeix.
+
+notification:
+  update_found: Hi ha contingut nou disponible
+  update: Actualitzar
+
+theme:
+  light: Clar
+  dark: Fosc
+  system: Sistema
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Per
+  posted: Publicat
+  updated: Actualitzat
+  words: paraules
+  pageview_measure: visites
+  read_time:
+    unit: min
+    prompt: " de lectura"
+  edit: Edita aquesta entrada
+  relate_posts: Entrades relacionades
+  share: Compartir
+  button:
+    next: Següent
+    previous: Anterior
+    copy_code:
+      succeed: Copiat!
+    share_link:
+      title: Copiar enllaç
+      succeed: Enllaç copiat!
+
+# 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: categories
+  post_measure: entrades

_data/locales/cs-CZ.yml

@@ -46,9 +46,14 @@ not_found:
   statement: 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_found: Je tu nový obsah
   update: Aktualizace
 
+theme:
+  light: Světlý
+  dark: Tmavý
+  system: Systém
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: minut
     prompt: čtení
+  edit: Uprav tento příspěvek
   relate_posts: Další čtení
   share: Sdílet
   button:

_data/locales/da-DK.yml

@@ -0,0 +1,92 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Opslag
+  category: Kategori
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Hjem
+  categories: Kategorier
+  tags: Tags
+  archives: Arkiv
+  about: Om siden
+
+# the text displayed in the search bar & search results
+search:
+  hint: søg
+  cancel: Afbryd
+  no_results: Ups! Ingen resultater fundet.
+
+panel:
+  lastmod: Senest opdateret
+  trending_tags: Populære tags
+  toc: Indhold
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Dette opslag er licenseret under :LICENSE_NAME af forfatteren.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Nogle rettigheder forbeholdes.
+  verbose: >-
+    Medmindre andet er angivet, er opslag på denne side beskyttet
+    under Creative Commons Attribution 4.0 International (CC BY 4.0) licensen af forfatteren.
+
+# meta: Using the :THEME theme for :PLATFORM.
+
+not_found:
+  statement: Beklager, vi har malpaceret denne URL, eller den peger på et sted, som ikke findes.
+
+notification:
+  update_found: Der er nyt indhold
+  update: Opdater
+
+theme:
+  light: Lys
+  dark: Mørk
+  system: System
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Af
+  posted: Udgivet
+  updated: Opdateret
+  words: ord
+  pageview_measure: visninger
+  read_time:
+    unit: min
+    prompt: læsetid
+  edit: Rediger dette opslag
+  relate_posts: Læs videre
+  share: Del
+  button:
+    next: Nyere
+    previous: Ældre
+    copy_code:
+      succeed: Kopieret!
+    share_link:
+      title: Kopier link
+      succeed: Link kopieret!
+
+# 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:
+    singular: kategori
+    plural: kategorier
+  post_measure: opslag

_data/locales/de-DE.yml

@@ -45,9 +45,14 @@ not_found:
   statement: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
 
 notification:
-  update_found: Eine neue Version ist verfügbar.
+  update_found: Neue Inhalte verfügbar
   update: Neue Version
 
+theme:
+  light: Hell
+  dark: Dunkel
+  system: System
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: Minuten
     prompt: Lesezeit
+  edit: Diesen Eintrag bearbeiten
   relate_posts: Weiterlesen
   share: Teilen
   button:

_data/locales/dv‑MV.yml

@@ -0,0 +1,96 @@
+# The layout text of site in Dhivehi (Maldives)
+
+# ----- 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:
+  statement: ސޯރީ، މި ޔޫ.އާރއެލް މަށެވެއްނެ ނުވަތަ އެކަމެއް ނުވެއެވެ.
+
+notification:
+  update_found: އައު ކޮންޓެންޓެއް ފެނިއްޖެ
+  update: އޮޕްޑޭޓް
+
+theme:
+  light: އަލި
+  dark: އަނދިރި
+  system: ސިސްޓަމް
+
+# ----- Posts related labels -----
+
+post:
+  written_by: ލެކްއޯލް
+  posted: ޕޯސްޓްކުރެވި
+  updated: އޮޕްޑޭޓްކުރެވި
+  words: ބަސް
+  pageview_measure: ބަނޑުކުރާ
+  read_time:
+    unit: މިނެޓް
+    prompt: އިސްކާރު
+  edit: މި ޕޯސްޓް އެޑިޓް ކުރު
+  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:
+  category_measure:
+    singular: ނަތީޖާ
+    plural: ނަތީޖާތައް
+  post_measure:
+    singular: ޕޯސްޓް
+    plural: ޕޯސްޓްތައް

_data/locales/el-GR.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
 
 notification:
-  update_found: Υπάρχει διαθέσιμη μια νέα έκδοση του περιεχομένου.
+  update_found: Νέο περιεχόμενο διαθέσιμο
   update: Ενημέρωση
 
+theme:
+  light: Φωτεινό
+  dark: Σκοτεινό
+  system: Σύστημα
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: Λεπτά
     prompt: διαβάσματος
+  edit: Επεξεργασία αυτής της δημοσίευσης
   relate_posts: Περισσότερα
   share: Κοινοποιήστε
   button:

_data/locales/en.yml

@@ -46,9 +46,14 @@ not_found:
   statement: 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_found: New content available
   update: Update
 
+theme:
+  light: Light
+  dark: Dark
+  system: System
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: read
+  edit: Edit this post
   relate_posts: Further Reading
   share: Share
   button:

_data/locales/es-ES.yml

@@ -46,9 +46,14 @@ not_found:
   statement: 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_found: Hay contenido nuevo
   update: Actualizar
 
+theme:
+  light: Claro
+  dark: Oscuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: " de lectura"
+  edit: Edita esta entrada
   relate_posts: Lecturas adicionales
   share: Compartir
   button:

_data/locales/fa-IR.yml

@@ -0,0 +1,97 @@
+# 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:
+  statement: متأسفیم، لینک زیر معتبر نیست یا به صفحه‌ای که وجود ندارد اشاره می‌کند.
+
+notification:
+  update_found: محتوای جدیدی پیدا شد
+  update: به‌روزرسانی
+
+theme:
+  light: روشن
+  dark: تیره
+  system: سیستم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: نوشته شده توسط
+  posted: منتشر شده
+  updated: به‌روزرسانی شده
+  words: کلمه
+  pageview_measure: بازدید
+  read_time:
+    unit: "دقیقه "
+    prompt: " زمان مطالعه"
+  edit: ویرایش این پست
+  relate_posts: بیشتر بخوانید
+  share: اشتراک‌گذاری
+  button:
+    next: جدیدتر
+    previous: قدیمی‌تر
+    copy_code:
+      succeed: کپی شد!
+    share_link:
+      title: کپی لینک
+      succeed: لینک با موفقیت کپی شد!
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: دسته‌بندی
+    plural: دسته‌بندی‌
+  post_measure:
+    singular: پست
+    plural: پست‌

_data/locales/fi-FI.yml

@@ -45,9 +45,14 @@ not_found:
   statement: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
 
 notification:
-  update_found: Uusi versio sisällöstä on saatavilla.
+  update_found: Uutta sisältöä löytyi
   update: Päivitä
 
+theme:
+  light: Vaalea
+  dark: Tumma
+  system: Järjestelmä
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: minuuttia
     prompt: lukea
+  edit: Muokkaa tätä julkaisua
   relate_posts: Jatka lukemista
   share: Jaa
   button:

_data/locales/fr-FR.yml

@@ -14,7 +14,7 @@ tabs:
   categories: Catégories
   tags: Tags
   archives: Archives
-  about: A propos de
+  about: À propos
 
 # the text displayed in the search bar & search results
 search:
@@ -32,12 +32,12 @@ copyright:
   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/
+    link: https://creativecommons.org/licenses/by/4.0/deed.fr
 
   # Displayed in the footer
   brief: Certains droits réservés.
   verbose: >-
-    Sauf mention contraire, les articles de ce site sont publiés sous licence
+    Sauf mention contraire, les articles de ce site sont publiés
     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
@@ -46,9 +46,14 @@ not_found:
   statement: 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_found: Nouveau contenu trouvé
   update: Mise à jour
 
+theme:
+  light: Clair
+  dark: Sombre
+  system: Système
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: lire
+  edit: Modifier cet article
   relate_posts: Autres lectures
   share: Partager
   button:

_data/locales/hu-HU.yml

@@ -14,24 +14,23 @@ tabs:
   categories: Kategóriák
   tags: Címkék
   archives: Archívum
-  about: Rólam
+  about: Bemutatkozás
 
 # 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.
+  no_results: Hoppá! 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.
+    template: A bejegyzést a szerző :LICENSE_NAME licenc alatt engedélyezte.
     name: CC BY 4.0
     link: https://creativecommons.org/licenses/by/4.0/
 
@@ -42,15 +41,20 @@ copyright:
     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
+meta: Készítve :THEME témával a :PLATFORM platformra.
 
 not_found:
   statement: 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_found: Új tartalom található
   update: Frissítés
 
+theme:
+  light: Világos
+  dark: Sötét
+  system: Rendszer
+
 # ----- Posts related labels -----
 
 post:
@@ -62,6 +66,7 @@ post:
   read_time:
     unit: perc
     prompt: elolvasni
+  edit: Szerkesztés
   relate_posts: További olvasnivaló
   share: Megosztás
   button:
@@ -73,7 +78,21 @@ post:
       title: Link másolása
       succeed: Link sikeresen másolva!
 
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y. %B. %e."
+    dayjs: "YYYY. MMMM D."
+  archives:
+    strftime: "%B"
+    dayjs: "MMM"
+
 # categories page
 categories:
-  category_measure: kategória
-  post_measure: bejegyzés
+  category_measure:
+    singular: kategória
+    plural: kategória
+  post_measure:
+    singular: bejegyzés
+    plural: bejegyzés

_data/locales/id-ID.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
 
 notification:
-  update_found: Versi konten baru tersedia.
+  update_found: Konten baru tersedia
   update: Perbarui
 
+theme:
+  light: Terang
+  dark: Gelap
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: menit
     prompt: baca
+  edit: Sunting entri ini
   relate_posts: Postingan Lainya
   share: Bagikan
   button:

_data/locales/it-IT.yml

@@ -45,9 +45,14 @@ not_found:
   statement: 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_found: Nuovi contenuti trovati
   update: Aggiornamento
 
+theme:
+  light: Chiaro
+  dark: Scuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: min
     prompt: lettura
+  edit: Modifica questo post
   relate_posts: Continua a leggere
   share: Condividi
   button:

_data/locales/ja-JP.yml

@@ -0,0 +1,90 @@
+# 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: 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: :PLATFORM 用の :THEME を使用しています。
+
+not_found:
+  statement: このURLは存在しないものを指し示しています。
+
+notification:
+  update_found: 新しいコンテンツがあります
+  update: 更新
+
+theme:
+  light: ライト
+  dark: ダーク
+  system: システム
+
+# ----- Posts related labels -----
+
+post:
+  written_by: 投稿者
+  posted: 投稿日
+  updated: 更新日
+  words: 語
+  pageview_measure: 回閲覧
+  read_time:
+    unit: 分
+    prompt: で読めます
+  edit: この投稿を編集
+  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: 投稿

_data/locales/ko-KR.yml

@@ -46,9 +46,14 @@ not_found:
   statement: 해당 URL은 존재하지 않습니다.
 
 notification:
-  update_found: 새 버전의 콘텐츠를 사용할 수 있습니다.
+  update_found: 새 콘텐츠가 있습니다
   update: 업데이트
 
+theme:
+  light: 라이트
+  dark: 다크
+  system: 시스템
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: 분
     prompt: 읽는 시간
+  edit: 이 글 편집
   relate_posts: 관련된 글
   share: 공유하기
   button:

_data/locales/ku-IQ.yml

@@ -0,0 +1,97 @@
+# The layout text of site in Kurdish (Sorani)
+
+# ----- 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:
+  statement: ببوورە، ئەم بەستەرە نادۆزرێتەوە یان ئاماژە بە شتێک دەکات کە بوونی نییە.
+
+notification:
+  update_found: ناوەڕۆکی نوێ بەردەستە
+  update: نوێکردنەوە
+
+theme:
+  light: ڕووناک
+  dark: تاریک
+  system: سیستەم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: نووسەر
+  posted: بڵاوکراوەتەوە
+  updated: نوێکراوەتەوە
+  words: وشە
+  pageview_measure: بینین
+  read_time:
+    unit: خولەک
+    prompt: خوێندنەوە
+  edit: ئەم بابەتە دەستکاری بکە
+  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 %b, %Y"
+    dayjs: "DD MMM, YYYY"
+  archives:
+    strftime: "%b"
+    dayjs: "MMM"
+
+# categories page
+categories:
+  category_measure:
+    singular: هاوپۆل
+    plural: هاوپۆل
+  post_measure:
+    singular: بابەت
+    plural: بابەت

_data/locales/my-MM.yml

@@ -46,9 +46,14 @@ not_found:
   statement: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
 
 notification:
-  update_found: အကြောင်းအရာဗားရှင်းအသစ်ကို ရနိုင်ပါပြီ။
+  update_found: အကြောင်းအရာအသစ် တွေ့ရှိပါသည်
   update: အပ်ဒိတ်
 
+theme:
+  light: အလင်း
+  dark: အမှောင်
+  system: စနစ်
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: မိနစ်
     prompt: ဖတ်ပါမည်
+  edit: ဤပို့စ်ကို တည်းဖြတ်ပါ
   relate_posts: နောက်ထပ်ဖတ်ရန်
   share: မျှဝေရန်
   button:

_data/locales/nl-NL.yml

@@ -0,0 +1,96 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categorie
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Startpagina
+  categories: Categorieën
+  tags: Tags
+  archives: Archief
+  about: Over
+
+# the text displayed in the search bar & search results
+search:
+  hint: Zoek
+  cancel: Annuleer
+  no_results: Oops! Geen resultaat gevonden.
+
+panel:
+  lastmod: Recent Bijgewerkt
+  trending_tags: Trending Tags
+  toc: Inhoud
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Alle posts zijn onder :LICENSE_NAME gepubliceerd door de auteur.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Sommige rechten voorbehouden.
+  verbose: >-
+    Tenzij anders vermeld, alle posts zijn onder de
+    Creative Commons Attribution 4.0 International (CC BY 4.0) gepubliceerd door de auteur.
+
+meta: Gebruikt :THEME
+
+not_found:
+  statement: Sorry, we hebben de URL verkeerd geplaatst of hij verwijst naar iets dat niet bestaat.
+
+notification:
+  update_found: Nieuwe inhoud gevonden
+  update: Update
+
+theme:
+  light: Licht
+  dark: Donker
+  system: Systeem
+
+# ----- Posts related labels -----
+post:
+  written_by: Door
+  posted: Posted
+  updated: Bijgewerkt
+  words: woorden
+  pageview_measure: Gelezen
+  read_time:
+    unit: min
+    prompt: lees
+  edit: Bewerk dit bericht
+  relate_posts: Verder Lezen
+  share: Deel
+  button:
+    next: Volgende
+    previous: Vorige
+    copy_code:
+      succeed: Gekopieerd!
+    share_link:
+      title: Link kopiëren
+      succeed: Succesvol gekopieerd!
+
+# 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: categorie
+    plural: categorieën
+  post_measure:
+    singular: post
+    plural: posts

_data/locales/ps‑AF.yml

@@ -0,0 +1,96 @@
+# The layout text of site in Pashto (Afghanistan)
+
+# ----- 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:
+  statement: بښنه غواړو، دغه URL ناسم دی یا هغه څه ته اشاره کوي چې شتون نه لري.
+
+notification:
+  update_found: نوې منځپانګه شتون لري
+  update: تازه
+
+theme:
+  light: روښانه
+  dark: تیاره
+  system: سیستم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: لیکوال
+  posted: خپره شوې
+  updated: تازه شوې
+  words: کلمې
+  pageview_measure: کتنې
+  read_time:
+    unit: دقیقې
+    prompt: لوستل
+  edit: دغه لیکنه سمول
+  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:
+  category_measure:
+    singular: وېشنيزه
+    plural: وېشنيزې
+  post_measure:
+    singular: لیکنه
+    plural: لیکنې

_data/locales/pt-BR.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Desculpe, a página não foi encontrada.
 
 notification:
-  update_found: Uma nova versão do conteúdo está disponível.
+  update_found: Novo conteúdo encontrado
   update: atualização
 
+theme:
+  light: Claro
+  dark: Escuro
+  system: Sistema
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: " de leitura"
+  edit: Editar esta postagem
   relate_posts: Leia também
   share: Compartilhar
   button:

_data/locales/ru-RU.yml

@@ -45,9 +45,14 @@ not_found:
   statement: Извините, мы перепутали URL-адрес или он указывает на что-то несуществующее.
 
 notification:
-  update_found: Доступна новая версия контента.
+  update_found: Найден новый контент
   update: Обновить
 
+theme:
+  light: Светлая
+  dark: Темная
+  system: Системная
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: мин.
     prompt: чтения
+  edit: Редактировать этот пост
   relate_posts: Похожие посты
   share: Поделиться
   button:

_data/locales/sl-SI.yml

@@ -46,9 +46,14 @@ not_found:
   statement: 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_found: Nova vsebina je na voljo
   update: Posodobi #Update
 
+theme:
+  light: Svetla
+  dark: Temna
+  system: Sistemska
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: beri #read
+  edit: Uredi to objavo #Edit this post
   relate_posts: Nadaljnje branje #Further Reading
   share: Deli #Share
   button:

_data/locales/sv-SE.yml

@@ -46,9 +46,14 @@ not_found:
   statement: 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_found: Nytt innehåll hittades
   update: Uppdatera sidan
 
+theme:
+  light: Ljust
+  dark: Mörkt
+  system: System
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: min
     prompt: läsning
+  edit: Redigera detta inlägg
   relate_posts: Mer läsning
   share: Dela
   button:

_data/locales/th.yml

@@ -46,9 +46,14 @@ not_found:
   statement: ขออภัย เราวาง URL นั้นไว้ผิดที่ หรือมันชี้ไปยังสิ่งที่ไม่มีอยู่
 
 notification:
-  update_found: มีเวอร์ชันใหม่ของเนื้อหา
+  update_found: พบเนื้อหาใหม่
   update: อัปเดต
 
+theme:
+  light: สว่าง
+  dark: มืด
+  system: ระบบ
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: นาที
     prompt: อ่าน
+  edit: แก้ไขโพสต์นี้
   relate_posts: อ่านต่อ
   share: แชร์
   button:

_data/locales/tr-TR.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Ü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_found: Yeni içerik bulundu
   update: Güncelle
 
+theme:
+  light: Açık
+  dark: Koyu
+  system: Sistem
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: dakikada
     prompt: okunabilir
+  edit: Bu gönderiyi düzenle
   relate_posts: Benzer Gönderiler
   share: Paylaş
   button:

_data/locales/uk-UA.yml

@@ -46,9 +46,14 @@ not_found:
   statement: Вибачте, це посилання вказує на ресурс, що не існує.
 
 notification:
-  update_found: Доступна нова версія вмісту.
+  update_found: Знайдено новий вміст
   update: Оновлення
 
+theme:
+  light: Світла
+  dark: Темна
+  system: Системна
+
 # ----- Posts related labels -----
 
 post:
@@ -60,6 +65,7 @@ post:
   read_time:
     unit: хвилин
     prompt: читання
+  edit: Редагувати цей пост
   relate_posts: Вас також може зацікавити
   share: Поділитися
   button:

_data/locales/ur-PK.yml

@@ -0,0 +1,96 @@
+# The layout text of site in Urdu (Pakistan)
+
+# ----- 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:
+  statement: معذرت، یہ URL غلط ہے یا جس چیز کی طرف اشارہ کر رہا ہے وہ موجود نہیں۔
+
+notification:
+  update_found: نیا مواد مل گیا
+  update: اپ ڈیٹ
+
+theme:
+  light: روشن
+  dark: تاریک
+  system: سسٹم
+
+# ----- Posts related labels -----
+
+post:
+  written_by: از
+  posted: شائع شدہ
+  updated: اپ ڈیٹ شدہ
+  words: لفظ
+  pageview_measure: مشاہدات
+  read_time:
+    unit: منٹ
+    prompt: پڑھیں
+  edit: اس تحریر میں ترمیم کریں
+  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:
+  category_measure:
+    singular: زمرہ
+    plural: زمروں
+  post_measure:
+    singular: تحریر
+    plural: تحریریں

_data/locales/vi-VN.yml

@@ -45,9 +45,14 @@ not_found:
   statement: 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_found: Đã tìm thấy nội dung mới
   update: Cập nhật
 
+theme:
+  light: Sáng
+  dark: Tối
+  system: Hệ thống
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: phút
     prompt: đọc
+  edit: Chỉnh sửa bài viết này
   relate_posts: Bài viết liên quan
   share: Chia sẻ
   button:

_data/locales/zh-CN.yml

@@ -45,9 +45,14 @@ not_found:
   statement: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
 
 notification:
-  update_found: 发现新版本的内容。
+  update_found: 发现新内容
   update: 更新
 
+theme:
+  light: 浅色
+  dark: 深色
+  system: 跟随系统
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: 分钟
     prompt: 阅读
+  edit: 编辑此文
   relate_posts: 相关文章
   share: 分享
   button:

_data/locales/zh-TW.yml

@@ -45,9 +45,14 @@ not_found:
   statement: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
 
 notification:
-  update_found: 發現新版本更新。
+  update_found: 發現新內容
   update: 更新
 
+theme:
+  light: 淺色
+  dark: 深色
+  system: 跟隨系統
+
 # ----- Posts related labels -----
 
 post:
@@ -59,6 +64,7 @@ post:
   read_time:
     unit: 分鐘
     prompt: 閱讀
+  edit: 編輯此文
   relate_posts: 相關文章
   share: 分享
   button:

_data/origin/cors.yml

@@ -19,36 +19,39 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
 
 # Libraries
 
+bootstrap:
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css
+
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7/css/all.min.css
 
 search:
-  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
+  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/:LOCALE.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.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
+  css: https://cdn.jsdelivr.net/npm/glightbox@3/dist/css/glightbox.min.css
+  js: https://cdn.jsdelivr.net/npm/glightbox@3/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
+  css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2/dist/loading-attribute-polyfill.min.css
+  js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2/dist/loading-attribute-polyfill.umd.min.js
 
 clipboard:
-  js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
+  js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
 
 mathjax:
-  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js
+  js: https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js

_data/share.yml

@@ -18,7 +18,7 @@ platforms:
   #
   # - type: Linkedin
   #   icon: "fab fa-linkedin"
-  #   link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
+  #   link: "https://www.linkedin.com/feed/?shareActive=true&shareUrl=URL"
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"

_includes/analytics/cloudflare.html

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

_includes/analytics/fathom.html

@@ -2,6 +2,5 @@
 <script
   src="https://cdn.usefathom.com/script.js"
   data-site="{{ site.analytics.fathom.id }}"
-  defer>
-</script>
-<!-- End Fathom Code -->
+  defer
+></script>

_includes/analytics/google.html

@@ -1,7 +1,7 @@
 <!-- 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) {
+  document.addEventListener('DOMContentLoaded', () => {
     window.dataLayer = window.dataLayer || [];
     function gtag() {
       dataLayer.push(arguments);

_includes/analytics/matomo.html

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

_includes/comments/disqus.html

@@ -1,38 +1,25 @@
-<!-- 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">
+<script>
   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);
-        })();
+  function addDisqus() {
+    let disqusThread = document.createElement('div');
+    let paragraph = document.createElement('p');
 
-        disqus_observer.disconnect();
-      }
-    },
-    { threshold: [0] }
-  );
+    disqusThread.id = 'disqus_thread';
+    paragraph.className = 'text-center text-muted small';
+    paragraph.innerHTML = 'Comments powered by <a href="https://disqus.com/">Disqus</a>.';
+    disqusThread.appendChild(paragraph);
 
-  disqus_observer.observe(document.getElementById('disqus_thread'));
+    const footer = document.querySelector('footer');
+    footer.insertAdjacentElement("beforebegin", disqusThread);
+  }
 
   {%- comment -%} Auto switch theme {%- endcomment -%}
-  function reloadDisqus() {
-    if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
+  function reloadDisqus(event) {
+    if (event.source === window && event.data && event.data.id === Theme.eventId) {
       {%- comment -%} Disqus hasn't been loaded {%- endcomment -%}
       if (typeof DISQUS === 'undefined') {
         return;
@@ -44,7 +31,27 @@
     }
   }
 
-  if (document.getElementById('mode-toggle')) {
-    window.addEventListener('message', reloadDisqus);
+  addDisqus();
+
+  if (Theme.isToggleable) {
+    addEventListener('message', reloadDisqus);
   }
+
+  {%- comment -%} Lazy loading {%- endcomment -%}
+  var disqusObserver = new IntersectionObserver(
+    function (entries) {
+      if (entries[0].isIntersecting) {
+        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);
+
+        disqusObserver.disconnect();
+      }
+    },
+    { threshold: [0] }
+  );
+
+  disqusObserver.observe(document.getElementById('disqus_thread'));
 </script>

_includes/comments/giscus.html

@@ -1,21 +1,8 @@
 <!-- https://giscus.app/ -->
-<script type="text/javascript">
+<script>
   (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;
-    }
+    const themeMap = Theme.newThemeMap('light', 'dark_dimmed');
+    const initTheme = themeMap[Theme.resolvedTheme];
 
     let lang = '{{ site.comments.giscus.lang | default: lang }}';
     {%- comment -%} https://github.com/giscus/giscus/tree/main/locales {%- endcomment -%}
@@ -41,30 +28,37 @@
       async: ''
     };
 
-    let giscusScript = document.createElement('script');
+    let giscusNode = document.createElement('script');
     Object.entries(giscusAttributes).forEach(([key, value]) =>
-      giscusScript.setAttribute(key, value)
+      giscusNode.setAttribute(key, value)
     );
-    document.getElementById('tail-wrapper').appendChild(giscusScript);
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement("beforebegin", giscusNode);
 
     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;
+      if (event.source === window && event.data && event.data.id === Theme.eventId) {
+        const newTheme = themeMap[Theme.resolvedTheme];
 
         const message = {
           setConfig: {
-            theme: theme
+            theme: newTheme
           }
         };
 
-        const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
-        giscus.postMessage({ giscus: message }, origin);
+        const iframe = document.querySelector('.giscus-frame');
+
+        if (!iframe) {
+          return;
+        }
+
+        if (iframe.classList.contains('giscus-frame--loading')) {
+          let url = new URL(iframe.src);
+          url.searchParams.set('theme', newTheme);
+          iframe.src = url.toString();
+        }
+
+        iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
       }
     });
   })();

_includes/comments/utterances.html

@@ -1,49 +1,38 @@
 <!-- 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">
+<script>
   (function () {
     const origin = 'https://utteranc.es';
-    const lightTheme = 'github-light';
-    const darkTheme = 'github-dark';
-    let initTheme = lightTheme;
-    const html = document.documentElement;
+    const themeMap = Theme.newThemeMap('github-light', 'github-dark');
+    const initTheme = themeMap[Theme.resolvedTheme];
 
-    if (
-      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
-      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      initTheme = darkTheme;
-    }
+    let script = document.createElement('script');
+    script.src = 'https://utteranc.es/client.js';
+    script.setAttribute('repo', '{{ site.comments.utterances.repo }}');
+    script.setAttribute('issue-term', '{{ site.comments.utterances.issue_term }}');
+    script.setAttribute('theme', initTheme);
+    script.crossOrigin = 'anonymous';
+    script.async = true;
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement('beforebegin', script);
 
     addEventListener('message', (event) => {
-      let theme;
+      let newTheme;
 
-      {%- 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;
+      {%- comment -%}
+        Credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347>
+      {%- endcomment -%}
+      if (event.source === window && event.data && event.data.id === Theme.eventId) {
+        newTheme = themeMap[Theme.resolvedTheme];
+
+        const message = {
+          type: 'set-theme',
+          theme: newTheme
+        };
+
+        const utterances = document.querySelector('.utterances-frame').contentWindow;
+        utterances.postMessage(message, origin);
       }
-
-      const message = {
-        type: 'set-theme',
-        theme: theme
-      };
-
-      const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
-      utterances.postMessage(message, origin);
     });
   })();
 </script>

_includes/datetime.html

@@ -1,6 +1,6 @@
 <!--
   Date format snippet
-  See: ${JS_ROOT}/utils/locale-dateime.js
+  See: ${JS_ROOT}/modules/components/locale-datetime.js
 -->
 
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}

_includes/embed/audio.html

@@ -9,7 +9,7 @@
 {% endunless %}
 
 <p>
-  <audio class="embed-audio" controls>
+  <audio class="embed-audio file" controls>
     {% assign extension = src | split: '.' | last %}
     {% assign types = extension | concat: types %}
 

_includes/embed/spotify.html

@@ -0,0 +1,22 @@
+{% assign size = 352 %}
+{% assign theme = '' %}
+
+{% if include.compact %}
+  {% assign size = 152 %}
+{% endif %}
+
+{% if include.dark %}
+  {% assign theme = '?theme=0' %}
+{% endif %}
+
+<iframe
+  class="embed-audio spotify"
+  src="https://open.spotify.com/embed/track/{{ include.id | append: theme }}"
+  height="{{ size }}"
+  frameBorder="0"
+  allowfullscreen=""
+  allowtransparency="true"
+  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+  loading="lazy"
+>
+</iframe>

_includes/favicons.html

@@ -5,15 +5,10 @@
 
 {% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
+<link rel="icon" type="image/png" href="{{ favicon_path }}/favicon-96x96.png" sizes="96x96">
+<link rel="icon" type="image/svg+xml" href="{{ favicon_path }}/favicon.svg">
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
 <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">

_includes/head.html

@@ -2,8 +2,6 @@
   <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"
@@ -50,11 +48,24 @@
 
   {{ seo_tags }}
 
+  {%- if site.social.fediverse_handle %}
+    <!-- Fediverse handle/creator -->
+    <meta name="fediverse:creator" content="{{ site.social.fediverse_handle }}">
+  {% endif %}
+
   <title>
     {%- unless page.layout == 'home' -%}
-      {{ page.title | append: ' | ' }}
+      {%- capture title -%}
+        {%- if page.collection == 'tabs' -%}
+          {%- assign tab_key = page.title | downcase -%}
+          {{- site.data.locales[include.lang].tabs[tab_key] -}}
+        {%- else -%}
+          {{- page.title -}}
+        {%- endif -%}
+      {%- endcapture -%}
+      {{- title | append: ' | ' -}}
     {%- endunless -%}
-    {{ site.title }}
+    {{- site.title -}}
   </title>
 
   {% include_cached favicons.html %}
@@ -70,7 +81,7 @@
 
   <!-- Bootstrap -->
   {% unless jekyll.environment == 'production' %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ site.data.origin.cors.bootstrap.css }}">
   {% endunless %}
 
   <!-- Theme style -->
@@ -97,11 +108,30 @@
     <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
-  <!-- JavaScript -->
+  <!-- Scripts -->
 
-  {% unless site.theme_mode %}
-    {% include mode-toggle.html %}
-  {% endunless %}
+  <script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
+
+  {% include js-selector.html lang=lang %}
+
+  {% if jekyll.environment == 'production' %}
+    <!-- PWA -->
+    {% if site.pwa.enabled %}
+      <script
+        defer
+        src="{{ '/app.min.js' | relative_url }}?baseurl={{ site.baseurl | default: '' }}&register={{ site.pwa.cache.enabled }}"
+      ></script>
+    {% endif %}
+
+    <!-- Web Analytics -->
+    {% for analytics in site.analytics %}
+      {% capture str %}{{ analytics }}{% endcapture %}
+      {% assign platform = str | split: '{' | first %}
+      {% if site.analytics[platform].id and site.analytics[platform].id != empty %}
+        {% include analytics/{{ platform }}.html %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
 
   {% include metadata-hook.html %}
 </head>

_includes/js-selector.html

@@ -62,12 +62,11 @@
 
 {% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
 
-<script src="{{ script | relative_url }}"></script>
+<script defer 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 %}
 
@@ -84,23 +83,3 @@
     {% 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' | 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 %}

_includes/jsdelivr-combine.html

@@ -1,6 +1,6 @@
 {% assign urls = include.urls | split: ',' %}
 
-{% assign combined_urls = nil %}
+{% assign combined_urls = null %}
 
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
@@ -15,12 +15,12 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-    <script src="{{ url }}"></script>
+    <script defer src="{{ url }}"></script>
   {% else %}
-    <script src="{{ url | relative_url }}"></script>
+    <script defer src="{{ url | relative_url }}"></script>
   {% endif %}
 {% endfor %}
 
 {% if combined_urls %}
-  <script src="{{ combined_urls }}"></script>
+  <script defer src="{{ combined_urls }}"></script>
 {% endif %}

_includes/language-alias.html

@@ -1,9 +1,7 @@
 {% 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: '' %}
@@ -20,13 +18,13 @@
   {% when 'coffeescript', 'coffee', 'coffee-script' %}
     {{ 'CoffeeScript' }}
   {% when 'cs', 'csharp' %}
-   {{ 'C#' }}
+    {{ 'C#' }}
   {% when 'erl' %}
     {{ 'Erlang' }}
   {% when 'graphql' %}
-   {{ 'GraphQL' }}
+    {{ 'GraphQL' }}
   {% when 'haskell', 'hs' %}
-   {{ 'Haskell' }}
+    {{ 'Haskell' }}
   {% when 'javascript', 'js' %}
     {{ 'JavaScript' }}
   {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
@@ -39,22 +37,22 @@
     {{ 'Objective-C' }}
   {% when 'perl', 'pl' %}
     {{ 'Perl' }}
-  {% when 'php','php3','php4','php5' %}
+  {% when 'php', 'php3', 'php4', 'php5' %}
     {{ 'PHP' }}
   {% when 'py' %}
     {{ 'Python' }}
   {% when 'rb' %}
     {{ 'Ruby' }}
-  {% when 'rs','no_run','ignore','should_panic' %}
+  {% when 'rs', 'no_run', 'ignore', 'should_panic' %}
     {{ 'Rust' }}
   {% when 'bash', 'zsh', 'ksh', 'sh' %}
     {{ 'Shell' }}
   {% when 'st', 'squeak' %}
     {{ 'Smalltalk' }}
-  {% when 'tex'%}
+  {% when 'tex' %}
     {{ 'TeX' }}
   {% when 'latex' %}
-    {{ 'LaTex' }}
+    {{ 'LaTeX' }}
   {% when 'ts', 'typescript' %}
     {{ 'TypeScript' }}
   {% when 'vb', 'visualbasic' %}

_includes/media-url.html

@@ -17,7 +17,7 @@
     {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
     {% assign url = include.subpath | default: '' | append: '/' | append: url %}
 
-    {%- comment -%} Prepend CND URL {%- endcomment -%}
+    {%- comment -%} Prepend CDN URL {%- endcomment -%}
     {% if site.cdn %}
       {% assign url = site.cdn | append: '/' | append: url %}
     {% endif %}

_includes/mermaid.html

@@ -1,62 +0,0 @@
-<!-- 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>

_includes/mode-toggle.html

@@ -1,116 +0,0 @@
-<!-- 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>

_includes/no-linenos.html

@@ -1,10 +0,0 @@
-{% 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 %}

_includes/notification.html

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

_includes/pageviews/goatcounter.html

@@ -1,19 +1,21 @@
 <!-- Display GoatCounter pageviews -->
 <script>
-  let pv = document.getElementById('pageviews');
+  document.addEventListener('DOMContentLoaded', () => {
+    const 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`;
+    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) => {
-        const count = data.count.replace(/\s/g, '');
-        pv.innerText = new Intl.NumberFormat().format(count);
-      })
-      .catch((error) => {
-        pv.innerText = '1';
-      });
-  }
+      fetch(url)
+        .then((response) => response.json())
+        .then((data) => {
+          const count = data.count.replace(/\D/g, '');
+          pv.innerText = new Intl.NumberFormat().format(count);
+        })
+        .catch((error) => {
+          pv.innerText = '1';
+        });
+    }
+  });
 </script>

_includes/post-description.html

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

_includes/post-edit.html

@@ -0,0 +1,23 @@
+<!-- Link to edit the post to contribute. -->
+
+{% assign enabled = site.actions.edit_post.enabled %}
+{% assign url = site.actions.edit_post.url %}
+{% assign static_url = site.actions.edit_post.static_url %}
+
+{% unless static_url %}
+  {% assign url = url | append: '/' | append: page.path %}
+{% endunless %}
+
+{% if enabled %}
+  <div class="post-edit">
+    {% assign edit = site.data.locales[include.lang].post.edit %}
+    <a
+      href="{{ url }}"
+      target="_blank"
+      rel="noopener"
+    >
+      <i class="fa fa-pen fa-fw me-1"></i>
+      <span>{{ edit }}</span>
+    </a>
+  </div>
+{% endif %}

_includes/post-paginator.html

@@ -1,4 +1,4 @@
-<!-- The paginator for post list on HomgPage. -->
+<!-- The paginator for post list on HomePage. -->
 
 <nav aria-label="Page Navigation">
   <ul class="pagination align-items-center mt-4 mb-0">

_includes/post-summary.html

@@ -0,0 +1,39 @@
+{%- comment -%}
+  Get the post's description or body content.
+
+  Arguments:
+    full_text: If true, return the full content. Default is false.
+    max_length: The maximum length of the returned content. Default is 200.
+{%- endcomment -%}
+
+{%- if post.description and include.full_text != true -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- comment -%} Remove the line numbers from the code snippet. {%- endcomment -%}
+
+  {%- assign content = post.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 -%}
+
+  {%- assign content = content
+    | markdownify
+    | strip_html
+    | newline_to_br
+    | replace: '<br />', ' '
+    | strip_newlines
+    | strip
+  -%}
+
+  {%- unless include.full_text -%}
+    {%- assign max_length = include.max_length | default: 200 -%}
+    {%- assign content = content | truncate: max_length -%}
+  {%- endunless -%}
+
+  {{- content -}}
+{%- endif -%}

_includes/refactor-content.html

@@ -88,9 +88,41 @@
     {% endfor %}
 
     <!-- take out classes -->
+    {% assign _wrapper_class = '' %}
+
     {% if _class %}
-      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
-      {% assign _left = _left | remove: _old_class %}
+      {% assign _remain = _class %}
+      {% assign _class_array = _class | split: ' ' %}
+
+      {% for c in _class_array %}
+        {% assign _pick = false %}
+
+        {% case c %}
+          {% when 'preview-img', 'normal', 'left', 'right', 'light', 'dark' %}
+            {% assign _pick = true %}
+          {% else %}
+            {% if c contains '-' %}
+              {% assign start = c | split: '-' | first %}
+              {% if start == 'w' %}
+                {% assign _pick = true %}
+              {% endif %}
+            {% endif %}
+        {% endcase %}
+
+        {% if _pick %}
+          {% assign _remain = _remain | remove: c | strip %}
+          {% assign _wrapper_class = _wrapper_class | append: ' ' | append: c %}
+        {% endif %}
+      {% endfor %}
+
+      {% unless _wrapper_class == '' %}
+        {% capture _old_class %}class="{{ _class }}"{% endcapture %}
+        {% assign _left = _left | remove: _old_class %}
+        {% unless _remain == '' %}
+          {% capture _new_class %}class="{{ _remain }}"{% endcapture %}
+          {% assign _left = _left | append: _new_class %}
+        {% endunless %}
+      {% endunless %}
     {% endif %}
 
     {% assign _final_src = null %}
@@ -110,7 +142,7 @@
 
     {% if _lqip %}
       {% assign _lazyload = false %}
-      {% assign _class = _class | append: ' blur' %}
+      {% assign _wrapper_class = _wrapper_class | append: ' blur' %}
 
       {% unless _lqip contains 'data:' %}
         {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
@@ -121,7 +153,7 @@
       {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
 
     {% else %}
-      {% assign _class = _class | append: ' shimmer' %}
+      {% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
     {% endif %}
 
     <!-- lazy-load images -->
@@ -131,7 +163,7 @@
 
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _wrapper_class | append: '">' %}
 
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
@@ -141,7 +173,7 @@
       {% assign _parent = _right | slice: 1, 4 %}
 
       {% if _parent == '</a>' %}
-        <!-- add class to exist <a> tag -->
+        <!-- add class to existing <a> tag -->
         {% assign _size = _img_content | size | minus: 1 %}
         {% capture _class %}
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
@@ -153,8 +185,8 @@
         {% assign _wrapper_start = _final_src
           | default: _src
           | prepend: '<a href="'
-          | append: '" class="popup img-link '
-          | append: _class
+          | append: '" class="popup img-link'
+          | append: _wrapper_class
           | append: '">'
         %}
 

_includes/related-posts.html

@@ -82,7 +82,7 @@
               {% 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>
+                <p>{% include post-summary.html %}</p>
               </div>
             </div>
           </a>

_includes/search-loader.html

@@ -12,36 +12,38 @@
         {tags}
       </div>
     </header>
-    <p>{snippet}</p>
+    <p>{content}</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>`;
+  {% comment %} Note: dependent library will be loaded in `js-selector.html` {% endcomment %}
+  document.addEventListener('DOMContentLoaded', () => {
+    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>`;
+        if (prop === 'tags') {
+          if (value === '') {
+            return `${value}`;
+          } else {
+            return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+          }
         }
       }
-    }
+    });
   });
 </script>

_includes/search-results.html

@@ -3,7 +3,7 @@
 <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 %}
+      {% include_cached trending-tags.html lang=include.lang %}
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

_includes/sidebar.html

@@ -11,9 +11,7 @@
       {%- endif -%}
     </a>
 
-    <h1 class="site-title">
-      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </h1>
+    <a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a>
     <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
   </header>
   <!-- .profile-wrapper -->
@@ -42,11 +40,53 @@
     </ul>
   </nav>
 
-  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
-    {% unless site.theme_mode %}
-      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
-        <i class="fas fa-adjust"></i>
-      </button>
+  <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
+    {% unless site.theme_mode == 'light' or site.theme_mode == 'dark' %}
+      {%- capture icon_system -%}
+        <i class="fa-solid fa-display" data-theme-mode="system"></i>
+      {%- endcapture -%}
+
+      {%- capture icon_light -%}
+        <i class="fa-regular fa-sun" data-theme-mode="light"></i>
+      {%- endcapture -%}
+
+      {%- capture icon_dark -%}
+        <i class="fa-regular fa-moon" data-theme-mode="dark"></i>
+      {%- endcapture -%}
+
+      <div class="btn-group dropup">
+        <button
+          type="button"
+          class="btn btn-link nav-link"
+          aria-label="Switch Mode"
+          id="mode-toggle"
+          data-bs-toggle="dropdown"
+        >
+          {{- icon_light -}}
+          {{- icon_dark -}}
+          {{- icon_system -}}
+        </button>
+        <ul class="dropdown-menu rounded-3 mb-1 p-1">
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="light">
+              {{- icon_light -}}
+              {{- site.data.locales[lang].theme.light -}}
+            </button>
+          </li>
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="dark">
+              {{- icon_dark -}}
+              {{- site.data.locales[lang].theme.dark -}}
+            </button>
+          </li>
+          <li>
+            <button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="system">
+              {{- icon_system -}}
+              {{- site.data.locales[lang].theme.system -}}
+            </button>
+          </li>
+        </ul>
+      </div>
 
       {% if site.data.contact.size > 0 %}
         <span class="icon-border"></span>
@@ -54,15 +94,23 @@
     {% endunless %}
 
     {% for entry in site.data.contact %}
+      {%- assign url = null -%}
+
       {% case entry.type %}
         {% when 'github', 'twitter' %}
+          {%- unless site[entry.type].username -%}
+            {%- continue -%}
+          {%- endunless -%}
           {%- capture url -%}
             https://{{ entry.type }}.com/{{ site[entry.type].username }}
           {%- endcapture -%}
         {% when 'email' %}
-          {% assign email = site.social.email | split: '@' %}
+          {%- unless site.social.email -%}
+            {%- continue -%}
+          {%- endunless -%}
+          {%- assign email = site.social.email | split: '@' -%}
           {%- capture url -%}
-            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
+            javascript:void(location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
           {%- endcapture -%}
         {% when 'rss' %}
           {% assign url = '/feed.xml' | relative_url %}

_includes/toc-status.html

@@ -0,0 +1,10 @@
+{% comment %}
+  Determine TOC state and return it through variable "enable_toc"
+{% endcomment %}
+
+{% 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 %}

_includes/toc.html

@@ -1,13 +1,9 @@
-{% 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 %}
+{% include toc-status.html %}
 
 {% 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>
+  <div class="toc-border-cover z-3"></div>
+  <section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4 pb-4">
+    <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}

_includes/topbar.html

@@ -1,6 +1,6 @@
 <!-- The Top Bar -->
 
-<header id="topbar-wrapper" aria-label="Top Bar">
+<header id="topbar-wrapper" class="flex-shrink-0" aria-label="Top Bar">
   <div
     id="topbar"
     class="d-flex align-items-center justify-content-between px-lg-3 h-100"
@@ -40,7 +40,7 @@
     </nav>
     <!-- endof #breadcrumb -->
 
-    <button type="button" id="sidebar-trigger" class="btn btn-link">
+    <button type="button" id="sidebar-trigger" class="btn btn-link" aria-label="Sidebar">
       <i class="fas fa-bars fa-fw"></i>
     </button>
 
@@ -55,7 +55,7 @@
       {% endif %}
     </div>
 
-    <button type="button" id="search-trigger" class="btn btn-link">
+    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
       <i class="fas fa-search fa-fw"></i>
     </button>
 

_javascript/categories.js

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

_javascript/home.js

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

_javascript/misc.js

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

_javascript/modules/components.js

@@ -3,4 +3,8 @@ 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';
+export { initToc } from './components/toc';
+export { loadMermaid } from './components/mermaid';
+export { modeWatcher } from './components/mode-toggle';
+export { back2top } from './components/back-to-top';
+export { loadTooltip } from './components/tooltip-loader';

_javascript/modules/components/img-popup.js

@@ -4,12 +4,11 @@
  * Dependencies: https://github.com/biati-digital/glightbox
  */
 
-const html = document.documentElement;
 const lightImages = '.popup:not(.dark)';
 const darkImages = '.popup:not(.light)';
 let selector = lightImages;
 
-function updateImages(current, reverse) {
+function swapImages(current, reverse) {
   if (selector === lightImages) {
     selector = darkImages;
   } else {
@@ -20,7 +19,7 @@ function updateImages(current, reverse) {
     reverse = GLightbox({ selector: `${selector}` });
   }
 
-  [current, reverse] = [reverse, current];
+  return [reverse, current];
 }
 
 export function imgPopup() {
@@ -33,27 +32,22 @@ export function imgPopup() {
     document.querySelector('.popup.dark') === null
   );
 
-  if (
-    (html.hasAttribute('data-mode') &&
-      html.getAttribute('data-mode') === 'dark') ||
-    (!html.hasAttribute('data-mode') &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
+  if (Theme.isDark) {
     selector = darkImages;
   }
 
   let current = GLightbox({ selector: `${selector}` });
 
-  if (hasDualImages && document.getElementById('mode-toggle')) {
+  if (hasDualImages && Theme.isToggleable) {
     let reverse = null;
 
     window.addEventListener('message', (event) => {
       if (
         event.source === window &&
         event.data &&
-        event.data.direction === ModeToggle.ID
+        event.data.id === Theme.eventId
       ) {
-        updateImages(current, reverse);
+        [current, reverse] = swapImages(current, reverse);
       }
     });
   }

_javascript/modules/components/mermaid.js

@@ -0,0 +1,64 @@
+/**
+ * Mermaid-js loader
+ */
+
+const MERMAID = 'mermaid';
+const themeMap = Theme.newThemeMap('default', 'dark');
+
+function refreshTheme(event) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.id === Theme.eventId
+  ) {
+    // Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
+    const mermaidList = document.getElementsByClassName(MERMAID);
+
+    [...mermaidList].forEach((elem) => {
+      const svgCode = elem.previousSibling.children.item(0).textContent;
+      elem.textContent = svgCode;
+      elem.removeAttribute('data-processed');
+    });
+
+    const newTheme = themeMap[Theme.resolvedTheme];
+
+    mermaid.initialize({ theme: newTheme });
+    mermaid.init(null, `.${MERMAID}`);
+  }
+}
+
+function setNode(elem) {
+  const svgCode = elem.textContent;
+  const backup = elem.parentElement;
+  backup.classList.add('d-none');
+  // Create mermaid node
+  const mermaid = document.createElement('pre');
+  mermaid.classList.add(MERMAID);
+  const text = document.createTextNode(svgCode);
+  mermaid.appendChild(text);
+  backup.after(mermaid);
+}
+
+export function loadMermaid() {
+  if (
+    typeof mermaid === 'undefined' ||
+    typeof mermaid.initialize !== 'function'
+  ) {
+    return;
+  }
+
+  const initTheme = themeMap[Theme.resolvedTheme];
+
+  let mermaidConf = {
+    theme: initTheme
+  };
+
+  const basicList = document.getElementsByClassName('language-mermaid');
+  [...basicList].forEach(setNode);
+
+  mermaid.initialize(mermaidConf);
+
+  if (Theme.isToggleable) {
+    window.addEventListener('message', refreshTheme);
+  }
+}

_javascript/modules/components/mode-toggle.js

@@ -0,0 +1,46 @@
+/**
+ * Sets up the mode toggle dropdown, allowing users to switch between light, dark, and system themes.
+ *
+ * Dependencies:
+ *  - Theme (${JS_ROOT}/theme.js)
+ */
+
+import 'bootstrap/js/src/dropdown.js';
+
+const ACTIVE_CLASS = 'active';
+const dropdown = document.querySelector('#mode-toggle + .dropdown-menu');
+const activeMode = Theme.isSystemTheme
+  ? Theme.Mode.SYSTEM
+  : Theme.resolvedTheme;
+
+export function modeWatcher() {
+  if (!Theme.isToggleable) {
+    return;
+  }
+
+  dropdown.querySelectorAll('.dropdown-item').forEach((option) => {
+    const mode = option.dataset.themeMode;
+    if (mode === activeMode) {
+      option.classList.add(ACTIVE_CLASS);
+      return;
+    }
+  });
+
+  dropdown.addEventListener('click', (event) => {
+    const current = event.target.closest('.dropdown-item');
+
+    if (!current) {
+      return;
+    }
+
+    const lastActive = dropdown.querySelector(`.${ACTIVE_CLASS}`);
+
+    if (lastActive === current) {
+      return;
+    }
+
+    lastActive.classList.remove(ACTIVE_CLASS);
+    current.classList.add(ACTIVE_CLASS);
+    Theme.update(current.dataset.themeMode);
+  });
+}

_javascript/modules/components/mode-watcher.js

@@ -1,14 +0,0 @@
-/**
- * Add listener for theme mode toggle
- */
-const toggle = document.getElementById('mode-toggle');
-
-export function modeWatcher() {
-  if (!toggle) {
-    return;
-  }
-
-  toggle.addEventListener('click', () => {
-    modeToggle.flipMode();
-  });
-}

_javascript/modules/components/search-display.js

@@ -1,5 +1,5 @@
 /**
- * This script make #search-result-wrapper switch to unload or shown automatically.
+ * This script makes #search-result-wrapper switch to unload or shown automatically.
  */
 
 const btnSbTrigger = document.getElementById('sidebar-trigger');

_javascript/modules/components/sidebar.js

@@ -1,27 +0,0 @@
-/**
- * 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);
-}

_javascript/modules/components/toc.js

@@ -1,15 +1,36 @@
-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
-    });
+import { TocMobile as mobile } from './toc/toc-mobile';
+import { TocDesktop as desktop } from './toc/toc-desktop';
 
-    document.getElementById('toc-wrapper').classList.remove('d-none');
+const desktopMode = matchMedia('(min-width: 1200px)');
+
+function refresh(e) {
+  if (e.matches) {
+    if (mobile.popupOpened) {
+      mobile.hidePopup();
+    }
+
+    desktop.refresh();
+  } else {
+    mobile.refresh();
   }
 }
+
+function init() {
+  if (document.querySelector('main>article[data-toc="true"]') === null) {
+    return;
+  }
+
+  // Avoid create multiple instances of Tocbot. Ref: <https://github.com/tscanlin/tocbot/issues/203>
+  if (desktopMode.matches) {
+    desktop.init();
+  } else {
+    mobile.init();
+  }
+
+  const $tocWrapper = document.getElementById('toc-wrapper');
+  $tocWrapper.classList.remove('invisible');
+
+  desktopMode.onchange = refresh;
+}
+
+export { init as initToc };