chore(release): 0.4.2

* fix(toc): update height to use 100dvh for better responsiveness

* fix(toc): adjust backdrop color and add blur effect for improved visibility

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,51 +1,55 @@
-name: "Bug Report 错误报告"
-description: "Create a bug report 创建一个错误报告"
-title: "[BUG] Some problem ..."
-labels: ["bug"]
+name: Bug Report
+description: Create a report to help us improve
+title: '[Bug report] '
 body:
-  - type: textarea
-    id: describe
+  - type: markdown
     attributes:
-      label: Describe the bug 描述你遇到的错误
-      description: |
-        A clear and concise description of what the bug is.
-        一段简短的对于你遇到的错误的描述。
+      value: |
+        Thanks for taking the time to fill out this bug report!
   - type: textarea
-    id: expected
+    id: bug-description
     attributes:
-      label: Expected behavior 期待的行为
-      description: |
-        A clear and concise description of what you expected to happen.
-        一段简短的对于你期待的行为的描述。
-  - type: textarea
-    id: screenshots
+      label: Description
+      description: A clear and concise description of what the bug is. If applicable, add screenshots to help explain your problem. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: input
+    id: reproduction
     attributes:
-      label: Screenshots 屏幕截图
-      description: |
-       If applicable, add screenshots to help explain your problem.
-       如果可以的话，提供屏幕截图对解决问题很有帮助。
+      label: Reproduction
+      description: Please provide a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required.
+      placeholder: Reproduction
+    validations:
+      required: true
+  - type: dropdown
+    id: installation-method
+    attributes:
+      label: Installation Method
+      description: Select the installation method you used.
+      options:
+        - Hugo Module
+        - Git Submodule
+        - Git Clone
+        - Manual
+        - Other
+    validations:
+      required: true
   - type: textarea
     id: environment
     attributes:
-      label: Build Environment 构建环境
+      label: Build Environment
       description: |
         Please try to use Hugo **extended** version before opening the issue.
-        请在创建 issue 之前尝试使用 Hugo **extended** 版本。
       placeholder: |
-        - OS: [e.g. Windows 10, macOS, Ubuntu]
         - Theme version/commit [e.g. 0.2.0, 2ccba79]
-        - Hugo version [e.g. 0.69.0]
-  - type: textarea
-    id: preview
-    attributes:
-      label: Preview Environment 预览环境
-      placeholder: |
-        - OS: [e.g. Windows 10, macOS, Ubuntu, iOS, Android]
-        - Browser [e.g. Chrome, Safari, Firefox]
+        - Hugo version [e.g. 0.147.0]
+        - OS: [e.g. Windows 10, macOS, Ubuntu]
+    validations:
+      required: true
   - type: textarea
     id: additional
     attributes:
-      label: Additional Information 补充信息
+      label: Additional Information
       description: |
-        Configuration files or front matter code ...
-        配置文件或者前置参数的代码……
+        Configuration files or front matter code snippets that may help us understand the issue.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,9 +1,8 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
-  - name: Questions 问题讨论
+  - name: Questions
     url: https://github.com/hugo-fixit/FixIt/discussions/new
-    about: Please ask questions in Discussion. 请在讨论中提问。
-
-  - name: Theme Documentation 主题文档
-    url: https://fixit.lruihao.cn/documentation/
-    about: Please read the documentation carefully. 请先仔细阅读主题文档。
+    about: Please ask questions in Discussion.
+  - name: Theme Documentation
+    url: https://fixit.lruihao.cn/
+    about: Please read the documentation carefully.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,22 +1,35 @@
-name: "Feature request 功能请求"
-description: "Suggest an idea for this project 为这个项目提供一个建议"
-title: "[FEATURE] Some feature"
-labels: ["enhancement"]
+name: Feature Request
+description: Suggest an idea for this project
+title: '[Feature request] '
 body:
-    - type: textarea
-      id: describe
-      attributes:
-        label: Describe the feature you want 描述你的功能需求
-        description: |
-            Please submit new issues for different features.
-            请针对不同的功能建议提交新的 issue。
-        placeholder: |
-          I recommend adding this feature ...
-          我希望添加这样的一个功能……
-    - type: textarea
-      id: reference
-      attributes:
-        label: Useful reference 有价值的参考
-        description: |
-          If available, provide useful links to fulfill the feature. 
-          如果可以的话，提供实现这个功能的相关参考链接。
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for your interest in the project and taking the time to fill out this feature request!
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Clear and concise description of the problem
+      description: As a user or developer using FixIt, what feature your want in details. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Feature description
+    validations:
+      required: true
+  - type: textarea
+    id: suggested-solution
+    attributes:
+      label: Suggested solution
+      description: We could provide following implementation...
+      placeholder: Suggested solution
+    validations:
+      required: true
+  - type: textarea
+    id: alternative
+    attributes:
+      label: Alternative
+      description: Clear and concise description of any alternative solutions or features you've considered.
+      placeholder: Alternative solution
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,24 @@
+<!-- Thank you for contributing! -->
+
+### Description
+
+<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
+
+### Before submitting the PR, please make sure you do the following <!-- (put an "X" next to an item) -->
+
+- [ ] Read the [Contributing Guidelines](https://github.com/hugo-fixit/FixIt/blob/main/CONTRIBUTING.md).
+- [ ] Provide a description in this PR that addresses **what** the PR is solving. If this PR is going to solve an existing issue, please reference the issue (e.g. `close #123`).
+
+### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
+
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Other
+
+### Screenshots
+
+<!-- If your PR includes UI changes, please provide before/after screenshots. If there are any other images that add context to the PR, add them here as well -->
+
+**Before**
+
+**After**

.github/configs/codeql.yml

@@ -1,5 +1,4 @@
-name: "CodeQL config"
+name: CodeQL config
 
 paths-ignore:
   - assets/lib/**
-  - docs/**

.github/copilot-instructions.md

@@ -0,0 +1,315 @@
+# FixIt 编码标准和指导原则
+
+本文档定义了 FixIt 主题项目的编码标准、最佳实践和开发指导原则。所有贡献者和 AI 助手在参与项目开发时都应遵循这些规范。
+
+## 项目概述
+
+FixIt 是一个面向 Hugo 静态网站生成器的现代化、响应式主题。项目基于以下技术栈：
+
+- **Hugo**: 静态网站生成器（≥ 0.147.7）
+- **SCSS**: CSS 预处理器，用于样式开发
+- **JavaScript**: ES6+ 标准，用于前端交互功能
+- **Go Templates**: Hugo 模板引擎
+- **Node.js**: 开发环境和构建工具
+- **pnpm**: 包管理器
+
+## 目录结构约定
+
+```
+FixIt/
+├── apps/               # 最小化站点
+│   ├── demo/           # 演示站点
+│   └── test/           # 测试站点
+├── archetypes/         # 内容模板
+├── assets/             # 主题资源文件
+│   ├── css/            # SCSS 样式文件
+│   ├── js/             # JavaScript 文件
+│   ├── images/         # 图像资源
+│   └── lib/            # 第三方库
+├── i18n/               # 国际化翻译文件
+├── layouts/            # Hugo 模板文件
+│   ├── _markup/        # Hugo 渲染钩子
+│   ├── _partials/      # 可复用模板组件
+│   └── _shortcodes/    # 自定义短代码
+├── packages/           # 主题相关包
+├── static/             # 静态文件
+├── hugo.toml           # 主题默认配置
+└── package.json        # npm 脚本和依赖
+```
+
+## SCSS/CSS 编码规范
+
+### 文件组织结构
+
+1. **主入口文件**: `assets/css/style.scss`
+2. **变量文件**: `assets/css/_variables.scss` - 全局变量定义
+3. **覆写文件**: `assets/css/_override.scss` - 用户自定义覆写
+4. **组织结构**:
+   - `_core/`: 核心样式（基础、布局、媒体查询等）
+   - `_mixin/`: SCSS mixins 和函数
+   - `_page/`: 页面特定样式
+   - `_partials/`: 组件样式
+   - `_shortcodes/`: 短代码样式
+
+### 命名约定
+
+1. **CSS 类名**: 使用 BEM 方法论或语义化命名
+
+   ```scss
+   .header-desktop {}
+   .menu-item {}
+   .single-title {}
+   .post-tag {}
+   ```
+
+2. **SCSS 变量**: 使用连字符分隔，语义化命名
+
+   ```scss
+   $global-font-family: system-ui, sans-serif;
+   $code-background-color: #f6f8fa;
+   $header-height: 3.5rem;
+   ```
+
+3. **CSS 自定义属性**: 使用前缀约定
+
+   ```scss
+   $prefix: fi-;
+   $rootPrefix: --fi-;
+   ```
+
+### 样式组织原则
+
+1. **主题切换支持**: 使用 CSS 变量实现主题切换
+
+   ```scss
+   .element {
+     color: var(#{$rootPrefix}global-font-color);
+   }
+   ```
+
+2. **Mixin 使用**: 提高代码复用性
+
+   ```scss
+   @include border-radius($global-border-radius);
+   @include transition(all 0.2s ease);
+   @include blur;
+   ```
+
+### 代码质量要求
+
+1. **缩进**: 使用 2 个空格
+2. **注释**: 为复杂逻辑添加注释
+3. **颜色**: 使用变量而非硬编码颜色值
+4. **单位**: 优先使用相对单位（rem、em、%）
+
+## JavaScript 编码规范
+
+### 代码风格
+
+1. **ES6+ 标准**: 使用现代 JavaScript 语法
+2. **模块化**: 使用 ES6 模块系统
+
+### 文件组织
+
+1. **主题核心**: `assets/js/theme.js` - 主题核心逻辑
+2. **工具函数**: `assets/js/util.js` - 通用工具函数
+3. **特定功能**: 按功能划分独立模块
+
+### 编码实例
+
+```javascript
+// 使用 ES6 类
+export default class Util {
+  copyText(text) {
+    // ...
+  }
+}
+
+// 主题类组织
+class FixIt {
+  constructor() {
+    this.config = window.config
+    this.util = new Util()
+  }
+
+  init() {
+    this.initTheme()
+    this.initComponents()
+  }
+}
+```
+
+### 最佳实践
+
+1. **错误处理**: 使用 try-catch 处理异常
+2. **异步操作**: 优先使用 async/await
+3. **事件处理**: 合理使用事件委托
+4. **性能优化**: 避免不必要的 DOM 操作
+
+## Hugo 模板规范
+
+### 模板组织
+
+1. **布局模板**: `layouts/` 目录下的主要模板
+2. **局部模板**: `layouts/_partials/` 下的可复用组件
+3. **短代码**: `layouts/_shortcodes/` 下的内容短代码
+
+### 编码约定
+
+1. **变量命名**: 使用驼峰命名法
+
+   ```go-html-template
+   {{- $footerConfig := .Site.Params.footer -}}
+   {{- $fingerprint := .Site.Store.Get "fingerprint" -}}
+   ```
+
+2. **注释规范**: 使用 Hugo 注释语法
+
+   ```go-html-template
+   {{- /* 这是模板注释 */ -}}
+   {{- /*
+     多行注释
+     可以跨越多行
+    */ -}}
+   ```
+
+3. **条件判断**: 清晰的条件结构
+
+   ```go-html-template
+   {{- if ne $config.enable false -}}
+     <!-- 内容 -->
+   {{- end -}}
+   ```
+
+4. **循环遍历**: 合理使用 range
+
+   ```go-html-template
+   {{- range $index, $value := .Site.Languages -}}
+     <!-- 处理逻辑 -->
+   {{- end -}}
+   ```
+
+### 国际化处理
+
+1. **翻译函数**: 使用 `T` 函数
+
+   ```go-html-template
+   {{ T "header.switchTheme" }}
+   ```
+
+2. **多语言支持**: 考虑多语言环境
+
+   ```go-html-template
+   {{- if hugo.IsMultilingual -}}
+     <!-- 多语言逻辑 -->
+   {{- end -}}
+   ```
+
+## 开发工作流程
+
+### 环境设置
+
+1. **前置要求**:
+   - Node.js (≥ 20.0.0)
+   - Hugo Extended (≥ 0.147.7)
+   - pnpm (包管理器)
+
+2. **开发命令**:
+
+   ```bash
+   pnpm dev:demo      # 启动 demo 站点开发服务器
+   pnpm dev:test      # 启动 test 站点开发服务器
+   pnpm dev:docs      # 启动文档开发服务器（需有 fixit-docs 作为同级目录）
+   pnpm build:demo    # 构建 demo 站点
+   pnpm build:test    # 构建 test 站点
+   pnpm build         # 一键构建所有站点
+   pnpm preview       # 预览构建后的站点（需先构建）
+   ```
+
+### 代码质量
+
+1. **代码审查**: 提交前进行自我审查
+2. **测试验证**: 在多个环境中测试功能
+3. **文档更新**: 必要时更新相关文档
+4. **向后兼容**: 确保更改不破坏现有功能
+
+### Git 提交规范
+
+遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范：
+
+```
+feat: 新增功能
+fix: 修复 bug
+docs: 文档更新
+style: 代码格式调整
+refactor: 代码重构
+test: 测试相关
+chore: 构建过程或工具相关
+```
+
+## 性能优化指导
+
+### CSS 性能
+
+1. **选择器优化**: 避免过深的嵌套
+2. **媒体查询**: 合理组织响应式断点
+3. **动画优化**: 使用 transform 和 opacity
+4. **资源压缩**: 生产环境启用压缩
+
+### JavaScript 性能
+
+1. **延迟加载**: 非关键脚本使用 defer
+2. **事件优化**: 合理使用防抖和节流
+3. **内存管理**: 及时清理事件监听器
+4. **模块化**: 按需加载功能模块
+
+### Hugo 模板性能
+
+1. **缓存策略**: 合理使用 Hugo 缓存机制
+2. **资源处理**: 优化图片和静态资源
+3. **构建优化**: 减少不必要的模板处理
+
+## 可访问性要求
+
+1. **语义化 HTML**: 使用正确的 HTML 标签
+2. **ARIA 属性**: 为复杂组件添加 ARIA 支持
+3. **键盘导航**: 确保键盘可访问性
+4. **颜色对比**: 满足 WCAG 对比度要求
+5. **屏幕阅读器**: 提供适当的文本替代
+
+## 浏览器兼容性
+
+1. **目标浏览器**: 支持现代浏览器
+2. **渐进增强**: 基础功能向下兼容
+3. **特性检测**: 使用特性检测而非浏览器检测
+4. **Polyfill**: 必要时提供 polyfill 支持
+
+## 安全考虑
+
+1. **XSS 防护**: 正确处理用户输入
+2. **CSRF 保护**: 表单提交安全
+3. **内容安全**: 合理设置 CSP 策略
+4. **依赖安全**: 定期更新依赖包
+
+## 文档要求
+
+1. **代码注释**: 复杂逻辑必须注释
+2. **API 文档**: 公共方法需要文档
+3. **使用示例**: 提供清晰的使用示例
+4. **更新日志**: 重要更改记录在 CHANGELOG
+
+## 第三方库管理
+
+1. **依赖选择**: 优先选择轻量、维护活跃的库
+2. **版本管理**: 及时更新安全补丁
+3. **许可证**: 确保许可证兼容性
+4. **定制化**: 必要时进行本地化修改
+
+## 贡献指导
+
+1. **讨论优先**: 重大更改前先讨论
+2. **小步迭代**: 避免大规模重构
+3. **测试覆盖**: 新功能需要充分测试
+4. **文档同步**: 功能和文档同时更新
+
+遵循这些编码标准将有助于维护代码质量，提高开发效率，并确保项目的长期可维护性。

.github/dependabot.yml

@@ -1,34 +1,48 @@
 # To get started with Dependabot version updates, you'll need to specify which
 # package ecosystems to update and where the package manifests are located.
 # Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: npm # See documentation for possible values
+    directory: / # Location of package manifests
     schedule:
-      interval: "monthly"
+      interval: monthly
     open-pull-requests-limit: 1000
     assignees:
-      - "Lruihao"
+      - Lruihao
     labels:
-      - "dependencies"
-  - package-ecosystem: "github-actions"
-    directory: "/"
+      - dependencies
+    ignore:
+      - dependency-name: '@types/node'
+        update-types:
+          - 'version-update:semver-major'
+    groups:
+      npm-development:
+        dependency-type: development
+        update-types:
+          - minor
+          - patch
+      npm-production:
+        dependency-type: production
+        update-types:
+          - patch
+  - package-ecosystem: github-actions
+    directory: /
     schedule:
-      interval: "monthly"
+      interval: monthly
     open-pull-requests-limit: 1000
     assignees:
-      - "Lruihao"
+      - Lruihao
     labels:
-      - "dependencies"
-  - package-ecosystem: "gitsubmodule"
-    directory: "/"
+      - dependencies
+  - package-ecosystem: gitsubmodule
+    directory: /
     schedule:
-      interval: "weekly"
+      interval: weekly
     open-pull-requests-limit: 1000
     assignees:
-      - "Lruihao"
+      - Lruihao
     labels:
-      - "dependencies"
+      - dependencies

.github/release.yml

@@ -0,0 +1,19 @@
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+    authors:
+      - dependabot
+  categories:
+    - title: New features
+      labels:
+        - feature
+    - title: Enhancement
+      labels:
+        - enhancement
+    - title: Fixes
+      labels:
+        - bug
+    - title: Other Changes
+      labels:
+        - '*'

.github/workflows/build.yml

@@ -1,21 +0,0 @@
-name: Hugo build check
-on:
-  pull_request:
-    branches: [ main ]
-  workflow_dispatch:
-jobs:
-  Actions-Hugo-Check:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out repository code
-        uses: actions/checkout@v4
-        with:
-          submodules: recursive  # Fetch Hugo themes (true OR recursive)
-          fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
-      - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v3
-        with:
-          hugo-version: ${{ vars.HUGO_VERSION || 'latest' }}
-          extended: true
-      - name: Build Hugo static files
-        run: hugo --source=demo --gc --minify --logLevel info

.github/workflows/codeql-analysis.yml

@@ -9,7 +9,7 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: CodeQL
 
 on:
   push:
@@ -19,7 +19,7 @@ on:
     branches:
       - main
   schedule:
-    - cron: "30 18 * * 5"
+    - cron: '30 18 * * 5'
 
 jobs:
   analyze:
@@ -29,44 +29,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ "javascript" ]
+        language: [javascript]
         # CodeQL supports [ "cpp", "csharp", "go", "java", "javascript", "python" ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Check out repository code
-      uses: actions/checkout@v4
-      with:
-        submodules: true  # Fetch Hugo themes (true OR recursive)
-        fetch-depth: 0         # Fetch all history for .GitInfo and .Lastmod
+      - name: Check out repository code
+        uses: actions/checkout@v6
+        with:
+          submodules: true # Fetch Hugo themes (true OR recursive)
+          fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        config-file: ./.github/configs/codeql.yml
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v4
+        with:
+          languages: ${{ matrix.language }}
+          config-file: ./.github/configs/codeql.yml
         # If you wish to specify custom queries, you can do so here or in a config file.
         # By default, queries listed here will override any specified in a config file.
         # Prefix the list here with "+" to use these queries and those in the config file.
         # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, 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
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, 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@v4
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      # - run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v4

.github/workflows/fixit-component-list.yml

@@ -5,14 +5,16 @@ on:
   workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
 permissions:
   contents: write # To write the generated contents to the readme
+  pull-requests: write # To create a pull request
 
 jobs:
   generate-component-list:
+    if: github.repository == 'hugo-fixit/FixIt'
     name: Update this repo's README with the list of hugo-fixit theme components
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Generate hugo-fixit component list
         uses: hugo-fixit/action-component-list@v1
         env:
@@ -21,8 +23,18 @@ jobs:
           comment_tag_name: HUGO_FIXIT_COMPONENTS
           readme_path: 'README.md,README.zh-cn.md'
           template: "- [{$repo.name}]({$repo.html_url})\\\n  {$repo.description}"
-      - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v5
+      # - name: Commit changes
+      #   uses: stefanzweifel/git-auto-commit-action@v5
+      #   with:
+      #     commit_message: 'docs(readme): update hugo-fixit component list'
+      #     commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v8
         with:
-          commit_message: ':memo: Docs: update hugo-fixit component list'
-          commit_author: 'github-actions[bot] <github-actions[bot]@users.noreply.github.com>'
+          title: Update hugo-fixit component list
+          commit-message: 'docs(readme): update hugo-fixit component list'
+          body: This PR updates the hugo-fixit component list in the README.
+          base: main
+          branch: update-component-list
+          labels: documentation
+          reviewers: Lruihao

.github/workflows/release.yml

@@ -1,46 +1,49 @@
-# This is a basic workflow to help you get started with Actions
-
 name: Release for new tag
 
-# Controls when the action will run.
 on:
-  # Triggers the workflow on push or pull request events but only for the main branch
   push:
     tags:
       - 'v*.*.*'
-
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
+  release:
     runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
-          fetch-depth: 0    # Fetch all history for generating release notes
+          fetch-depth: 0 # Fetch all history for generating release notes
 
+      - uses: pnpm/action-setup@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 18
-      
-      - name: Install dependencies and generate release notes
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Install fixit-cli
+        run: pnpm install -g fixit-cli
+      - name: Split theme configuration
         run: |
-          npm install
-          npm run release -- --starting-version ${{ github.ref_name }}
+          fixit split
+          tar -zcvf config_toml.tar.gz config
+          rm -rf config
+          fixit split -y
+          tar -zcvf config_yaml.tar.gz config
+          rm -rf config
+
+      - name: Generate release notes
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm changelog --starting-version ${{ github.ref_name }}
           sed -i '1,4d' CHANGELOG.md
 
       - name: GitHub Release
         uses: softprops/action-gh-release@v2
         with:
-          # Creates a draft release. Defaults to false
           draft: true
           body_path: CHANGELOG.md
+          files: |
+            config_toml.tar.gz
+            config_yaml.tar.gz

.gitignore

@@ -8,9 +8,12 @@ jsconfig.json
 
 # NPM
 node_modules/
+.eslintcache
 
 # VSCode
-.vscode
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
 
 # OS Files
 ## Windows
@@ -26,3 +29,4 @@ $RECYCLE.BIN/
 .directory
 
 CHANGELOG.md
+.stash/

.husky/pre-commit

@@ -1 +0,0 @@
-npx fixit-releaser version --dev

.npmrc

@@ -1,2 +1,3 @@
 tag-version-prefix="v"
-message=":bookmark: Chore(release): %s"
+ignore-workspace-root-check=true
+message="chore(release): %s"

.nvmrc

@@ -1 +1 @@
-v18
+v20

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "budparr.language-hugo-vscode",
+    "kaellarkin.hugo-shortcode-syntax",
+    "lruihao.hugo-partials-refs",
+    "tamasfe.even-better-toml"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,85 @@
+{
+  "todo-tree.tree.scanMode": "workspace only",
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "format/*",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-order",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off",
+      "fixable": true
+    },
+    {
+      "rule": "*semi",
+      "severity": "off",
+      "fixable": true
+    }
+  ],
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "go-html-template",
+    "javascript",
+    "typescript",
+    "html",
+    "markdown",
+    "json",
+    "json5",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "css",
+    "scss"
+  ]
+}

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities

CONTRIBUTING.md

@@ -2,6 +2,22 @@
 
 Make sure that you follow [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) while contributing and engaging in the discussions.
 
+## Prerequisites
+
+Before you start contributing, make sure you have the following tools installed:
+
+- **Node.js** (>= 20.0.0) - Required for package management and build tools
+- **Hugo Extended** (>= 0.147.7) - The static site generator
+- **pnpm** - Package manager (recommended)
+
+You can check your installed versions:
+
+```bash
+node --version
+hugo version
+pnpm --version
+```
+
 ## How to contribute to this project
 
 First, fork this repository by clicking the fork button.
@@ -15,76 +31,91 @@ git clone https://github.com/hugo-fixit/FixIt.git && cd FixIt
 Then, install the dev dependencies.
 
 ```bash
-npm install
+pnpm install
 ```
 
 And now you are ready to go!
 
-Here are some useful commands.
+Here are some useful commands for development:
+
+### Development
 
 ```bash
-# run a local debugging server with watch
-npm run server
-# run a local debugging server with watch in production environment
-npm run server:production
+# Start demo site development server
+pnpm dev:demo
+# Start test site development server
+pnpm dev:test
+# Start documentation development server (requires fixit-docs as sibling directory)
+pnpm dev:docs
 ```
 
-If you want to do docs-related theme changes, the simplest way is to have both `FixIt` and `fixit-docs` cloned as sibling directories, and then run:
+> [!TIP]
+>
+> - Add `-e production` to the development command to check the production environment, e.g. `pnpm dev:test -e production`.
+> - For documentation-related theme changes, it is recommended to clone both `FixIt` and `fixit-docs` as sibling directories.
+
+### Building
 
 ```bash
-npm run server:docs
+# Build demo site
+pnpm build:demo
+# Build test site
+pnpm build:test
+# Build all sites
+pnpm build
 ```
 
+### Preview
+
+```bash
+# Preview the built site locally (requires build first)
+pnpm preview
+```
+
+## Project Structure
+
+Understanding the project structure will help you contribute more effectively:
+
+```
+FixIt/
+├── apps/               # Minimal sites
+│   ├── demo/           # Demo site
+│   └── test/           # Test site
+├── archetypes/         # Content templates
+├── assets/             # Theme assets
+│   ├── css/            # SCSS stylesheets
+│   ├── js/             # JavaScript files
+│   ├── images/         # Image assets
+│   └── lib/            # Third-party libraries
+├── i18n/               # Internationalization files
+├── layouts/            # Hugo template files
+│   ├── _markup/        # Hugo render hooks
+│   ├── _partials/      # Reusable template components
+│   └── _shortcodes/    # Custom shortcodes
+├── packages/           # Theme-related packages
+├── static/             # Static files
+├── hugo.toml           # Default theme configuration
+└── package.json        # npm scripts and dependencies
+```
+
+## Development Workflow
+
+1. **Make your changes** in the appropriate directories
+2. **Test locally** using `pnpm dev` or `pnpm test`
+3. **Check different environments** with production builds
+4. **Verify documentation** changes with `pnpm dev:docs` (if applicable)
+5. **Commit your changes** following the commit message format below
+
+## Pull Request Guidelines
+
+- Create a feature branch from `main`
+- Make your changes with clear, focused commits
+- Test your changes thoroughly
+- Update documentation if needed
+- Submit a pull request with a clear description
+
 Finally, create a new pull request at <https://github.com/hugo-fixit/FixIt/pulls> to submit your contribution 🎉
 
-## Git standard for developers
+## Git Commit Guidelines
 
-### Branches
-
-| Branch         | Description                                            |
-| :------------- | :----------------------------------------------------- |
-| main           | _The development branch, may contain unstable updates_ |
-| single feature | _The branch to enhancements or fixes_                  |
-
-### Merge events
-
-| event          | merge                                 |
-| :------------- | :------------------------------------ |
-| PR             | **others:main => main:** `--rebase`   |
-| single feature | **feature branch => main:** `--merge` |
-
-### Commit message
-
-#### Format
-
-`[{emoji} ]{type}[({scope})]: {subject within 50 words}[ (#{issue/pull request})]`
-
-example:
-
-- :tada: Feat: add shortcode fixit-encryptor shortcode (#123)
-- :arrow_up: Chore(libs): update Artalk from 2.2.12 to 2.3.4 (#150)
-
-#### Emoji
-
-- <https://gitmoji.dev>
-- [vscode plugin](https://github.com/maixiaojie/git-emoji-zh.git)
-- utools plugin `GitEmoji`
-
-#### Message
-
-| Emoji                                         | Type     | Example                                                      | Description (No Ambiguous)                                                                                                               |
-| :-------------------------------------------- | :------- | :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
-| :tada:<br>:sparkles:                          | Feat     | Feat: add {feature}                                          | new feature                                                                                                                              |
-| :truck:                                       |          | Feat: adjust/migrate {feature name}, {change details}        | For the adjustment feature, it is necessary to describe the current situation (before) and after adjustment (after)                      |
-| :fire:                                        |          | Feat: delete {feature name}, {deletion reason}               | If the feature is deleted, the reason for deletion must be explained                                                                     |
-| :bug: <br>:construction: <br>:rotating_light: | Fix      | Fix: fix {bug description}                                   | Fix known bugs                                                                                                                           |
-| :art: <br>:lipstick: <br>:pencil2:            | Style    | Style: Typesetting/CSS style {optimizing content}            | Changes that do not affect code operation, such as code layout and style change                                                          |
-| :recycle:                                     | Refactor | Refactor: override {feature name}                            | It is neither a new function nor a code change to fix a bug. Simply rewriting the code of a function does not affect the function result |
-| :zap:                                         | Perf     | Perf: improve performance {function name}, {improve content} | Optimize code performance                                                                                                                |
-| :rewind:                                      | Revert   | Revert: restore version {commit message of restore version}  | Restore the version of one commit                                                                                                        |
-| :pencil:<br>:pencil2:                         | Docs     | Docs: revise comments/update documents                       | Adjustment of documents and notes                                                                                                        |
-| :wrench:                                      | Chore    | Chore: update plugin version                                 | Changes in the construction process or auxiliary tools                                                                                   |
-
-> [!note]
-> The change log is automatically generated based on the commit message.\
-> Use `Chore` type or add `(ignore)` scope to ignore including in.
+We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages. This enables automatic changelog generation using our custom template: [conventional.hbs](https://github.com/Lruihao/auto-changelog-plus/blob/main/settings/conventional.hbs).

LICENSE

@@ -2,7 +2,7 @@ The MIT License (MIT)
 
 Copyright (c) 2018 LIUZHICHAO.COM
 Copyright (c) 2019-2020 DILLONZQ.COM
-Copyright (c) 2021-2025 Lruihao (https://lruihao.cn)
+Copyright (c) 2021-present Lruihao (https://lruihao.cn)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -13,7 +13,7 @@
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
-  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=german">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">deutsch</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
 </div>
@@ -24,26 +24,22 @@
 
 > It is based on the original [LoveIt](https://github.com/dillonzq/LoveIt) Theme, [KeepIt](https://github.com/Fastbyte01/KeepIt) Theme and [LeaveIt](https://github.com/liuzc/LeaveIt) Theme.
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.141.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
-[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
+[![Build](https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Build&logo=vercel)](https://demo.fixit.lruihao.cn/)
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat&label=Release&logo=github&include_prereleases)](https://github.com/hugo-fixit/FixIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.147.7-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat&label=License)](/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/hugo-fixit/FixIt?style=social)](https://github.com/hugo-fixit/FixIt)
+[![Gitee star of FixIt](https://gitee.com/lruihao/FixIt/badge/star.svg)](https://gitee.com/lruihao/FixIt/stargazers)
 
 ## Live Preview
 
 <p align="center">
-  💟 <a href="https://fixit.lruihao.cn">Production</a> | ❇️ <a href="https://pre.fixit.lruihao.cn">Preview</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+  💟 <a href="https://fixit.lruihao.cn">Docs</a> | ❇️ <a href="https://demo.fixit.lruihao.cn/test/">Test</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
 <br>
 <br>
   More FixIt examples <a href="https://fixit.lruihao.cn/showcase/">here</a>.
 </p>
 
-## Why choose FixIt
-
-I don't know why 🤷.
-
-<!-- Too lazy to write... -->
-
 ## Usage
 
 ### Documentation
@@ -131,12 +127,12 @@ Click the following links to generate a new repository with template:
 
 ### Extended Features
 
-- **AI Summary**, **AI Search** and **AI Chatbot** supported by [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z)
+- **AI Summary**, **AI Search** and **AI Chatbot** supported by [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330)
 - **PWA (Progressive Web App)** supported
 - **Sub Menu** supported
 - **Content Encryption** supported (Pages, Partial)
 - **Friends** page embedded template
-- **Search** supported by [algolia](https://www.algolia.com/), [Fuse.js](https://fusejs.io/), CSE or [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z)
+- **Search** supported by [algolia](https://www.algolia.com/), [Fuse.js](https://fusejs.io/), CSE or [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330)
 - **Custom Search Engine (CSE)** supported by [Google](https://programmablesearchengine.google.com/)
 - **Twemoji** supported
 - Automatically **highlighting** code
@@ -145,14 +141,16 @@ Click the following links to generate a new repository with template:
 - Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 - Extended Markdown syntax for **ruby annotation**
 - Extended Markdown syntax for **fraction**
-- **Mathematical formula** supported by [KaTeX](https://katex.org/)
+- Multiple **admonitions** shortcode or **alerts** extended Markdown syntax
+- **Tabs** and **Tab** shortcode with multiple design styles
+- **Mathematical formula** supported by [KaTeX](https://katex.org/) or [MathJax](https://www.mathjax.org)
 - **Diagrams** code fences extended and shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 - **Interactive data visualization** shortcode and code fences extended supported by [ECharts](https://echarts.apache.org/)
 - **Timeline** code fences extended and shortcode supported
+- **File tree** code fences extended and shortcode supported
 - **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 - **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
 - **Bilibili player** and **Douyin player** shortcode
-- Kinds of **admonitions** shortcode
 - **Custom style** shortcode
 - **Custom script** shortcode
 - Open more **custom blocks**
@@ -186,6 +184,8 @@ FixIt supports multilingual and i18n. For more information, see the [Content Man
 - Romanian
 - Vietnamese
 - Hindi
+- Japanese
+- Korean
 
 </details>
 
@@ -200,9 +200,11 @@ The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo t
 - [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
   🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
 - [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
-  🐟 一个 canvas 实现的小鱼游动动画效果。
+  🐟 A canvas implemented animation effect of small fish swimming.
 - [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
   Mobile devtools component powered by vConsole and eruda.
+- [cmpt-santa-hat](https://github.com/hugo-fixit/cmpt-santa-hat)\
+  A Christmas Easter Egg by JavaScript.
 - [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
   🌐 A component for site automatic translation.
 - [component-projects](https://github.com/hugo-fixit/component-projects)\
@@ -214,9 +216,13 @@ The FixIt theme balances **simplicity** and **extensibility** with extra [Hugo t
 - [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
   A Hugo theme component with asciinema-embed shortcode.
 - [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
-  一个含有 caniuse shortcode 的 Hugo 主题组件。
+  A Hugo theme component with caniuse shortcode.
 - [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
   🔖 Embed bookmark of FixIt Docs.
+- [shortcode-missing-translation](https://github.com/hugo-fixit/shortcode-missing-translation)\
+  A Hugo theme component with missing-translation shortcode.
+- [shortcode-mmt-netease](https://github.com/hugo-fixit/shortcode-mmt-netease)\
+  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
 - [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
   A Hugo theme component with reward-log or sponsor-log shortcode.
 <!-- HUGO_FIXIT_COMPONENTS:END -->
@@ -252,10 +258,12 @@ Also, we welcome Issue or PR to our [official-components](https://github.com/hug
 
 ## Acknowledgements
 
-Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/contributors) for their support!
+Thanks to the support of [all contributors](https://github.com/hugo-fixit/FixIt/graphs/contributors)!
+
+Thanks to the [Hugo DoIt](https://github.com/HEIGE-PCloud/DoIt) theme and [Hexo NexT](https://github.com/next-theme/hexo-theme-next) theme for inspiration and reference.
 
 <details>
-<summary>Thanks to the authors of following resources included in the theme:</summary>
+<summary>Thanks to all the open source projects used in the FixIt theme.</summary>
 
 - [normalize.css](https://github.com/necolas/normalize.css)
 - [Font Awesome](https://fontawesome.com/)
@@ -271,6 +279,7 @@ Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/cont
 - [Sharer.js](https://github.com/ellisonleao/sharer.js)
 - [TypeIt](https://typeitjs.com/)
 - [KaTeX](https://katex.org/)
+- [MathJax](https://www.mathjax.org)
 - [mermaid](https://github.com/mermaid-js/mermaid)
 - [ECharts](https://echarts.apache.org/)
 - [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
@@ -287,18 +296,12 @@ Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/cont
 - [Waline](https://waline.js.org/)
 - [Twikoo](https://twikoo.js.org/)
 - [github-corners](https://github.com/tholman/github-corners)
-- [giscus](https://giscus.app/)
+- [giscus](https://giscus.app/zh-CN)
 - [crypto-js](https://github.com/brix/crypto-js)
 - [pace](https://github.com/CodeByZach/pace)
 - [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
-
-</details>
-
-<details>
-<summary>The FixIt also draws on some features of the following projects, and thanks to their authors as well:</summary>
-
-- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
-- [NexT](https://github.com/next-theme/hexo-theme-next)
+- [`<tab-container>` element](https://github.com/github/tab-container-element)
+- [`<json-viewer>` element](https://github.com/Lruihao/json-viewer-element)
 
 </details>
 
@@ -306,17 +309,17 @@ Thanks to all the [contributors](https://github.com/hugo-fixit/FixIt/graphs/cont
 
 FixIt is licensed under the **MIT** license. Check the [LICENSE file](/LICENSE) for details.
 
-## Sponsor
+## Sponsor Support
 
-If you enjoy the theme, please consider buying me a coffee ☕️. Thanks!
+If you enjoy the theme, please consider buying me a cup of coffee ☕️. Thanks!
 
-- [Wechat](/images/wechatpay.jpg)
+- [WeChat Pay](/images/wechatpay.jpg)
 - [Alipay](/images/alipay.jpg)
 - [PayPal](https://paypal.me/Lruihao)
 
-Thanks to the following sponsors for their support:
+Thanks to the following sponsors for their great support:
 
-- [translate.js](https://github.com/xnx3/translate) Sponsoring [Enterprise Translation Channel](https://translate.zvo.cn/4087.html).
+- [translate.js](https://github.com/xnx3/translate) sponsored [Enterprise Translation Channel](https://translate.zvo.cn/4087.html).
 
 ## Author
 

README.zh-cn.md

@@ -13,7 +13,7 @@
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=russian">Русский язык</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=spanish">Español</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=hindi">हिन्दी</a> |
-  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=german">deutsch</a> |
+  <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=deutsch">deutsch</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=korean">한국어</a> |
   <a href="https://fixit.lruihao.cn/ecosystem/hugo-fixit/fixit/?lang=japanese">しろうと</a>
 </div>
@@ -24,26 +24,22 @@
 
 > 它的原型基于 [LoveIt](https://github.com/dillonzq/LoveIt) 主题，[KeepIt](https://github.com/Fastbyte01/KeepIt) 主题和 [LeaveIt](https://github.com/liuzc/LeaveIt) 主题。
 
-[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat)](https://github.com/hugo-fixit/FixIt/releases)
-[![Hugo](https://img.shields.io/badge/Hugo-%5E0.141.0-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
-[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat)](/LICENSE)
-[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/hugo-fixit/FixIt)
+[![Build](https://img.shields.io/github/deployments/hugo-fixit/FixIt/Production?style=flat&label=Build&logo=vercel)](https://demo.fixit.lruihao.cn/)
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/hugo-fixit/FixIt?style=flat&label=Release&logo=github&include_prereleases)](https://github.com/hugo-fixit/FixIt/releases)
+[![Hugo](https://img.shields.io/badge/Hugo-%5E0.147.7-ff4088?style=flat&logo=hugo)](https://gohugo.io/)
+[![License](https://img.shields.io/github/license/hugo-fixit/FixIt?style=flat&label=License)](/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/hugo-fixit/FixIt?style=social)](https://github.com/hugo-fixit/FixIt)
+[![Gitee star of FixIt](https://gitee.com/lruihao/FixIt/badge/star.svg)](https://gitee.com/lruihao/FixIt/stargazers)
 
 ## 即时预览
 
 <p align="center">
-  💟 <a href="https://fixit.lruihao.cn/zh-cn/">Production</a> | ❇️ <a href="https://pre.fixit.lruihao.cn/zh-cn/">Preview</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
+  💟 <a href="https://fixit.lruihao.cn">Docs</a> | ❇️ <a href="https://demo.fixit.lruihao.cn/test/">Test</a> | 🚼 <a href="https://demo.fixit.lruihao.cn">Demo</a> | 🆕 <a href="https://hugo-fixit.github.io/hugo-fixit-starter/">Starter</a>
 <br>
 <br>
   更多 FixIt 的例子参见 <a href="https://fixit.lruihao.cn/zh-cn/showcase/">这里</a>。
 </p>
 
-## 为什么选择 FixIt
-
-我也不知道为什么 🤷。
-
-<!-- 懒的写…… -->
-
 ## 使用指南
 
 ### 主题文档
@@ -82,10 +78,6 @@ pnpx fixit-cli create my-blog
 [lruihao-blog]: https://github.com/Lruihao/hugo-blog
 [lruihao-blog:generate]: https://github.com/Lruihao/hugo-blog/generate
 
-### 镜像
-
-Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
-
 ## 特色
 
 <details>
@@ -135,28 +127,30 @@ Gitee 镜像仓库：<https://gitee.com/lruihao/FixIt>
 
 ### 扩展功能
 
-- 支持基于 [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
+- 支持基于 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的 **AI 摘要**、**AI 搜索** 和 **AI 智能客服**
 - 支持**渐进式网页应用**
 - 支持**二级菜单**
 - 支持**内容加密**（页面、局部）
 - 支持**友情链接**的页面模板
-- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.tianli0.top/?InviteID=IRE1S88Z) 的**搜索**
+- 支持基于 [algolia](https://www.algolia.com/)、[Fuse.js](https://fusejs.io/)、 **CSE** 或 [PostChat](https://ai.zhheo.com/console/login?InviteID=85041330) 的**搜索**
 - 支持基于 [Google](https://programmablesearchengine.google.com/) 的**自定义搜索引擎 (CSE)**
 - 支持 **Twemoji**
 - 支持**代码高亮**
 - 一键**复制代码**到剪贴板
 - 支持基于 [lightgallery](https://github.com/sachinchoolur/lightgallery) 的**图片画廊**
-- 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
-- 支持**上标注释**的扩展 Markdown 语法
-- 支持**分数**的扩展 Markdown 语法
-- 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
+- 支持 **[Font Awesome](https://fontawesome.com/) 图标**的 Markdown 扩展语法
+- 支持**上标注释**的 Markdown 扩展语法
+- 支持**分数**的 Markdown 扩展语法
+- 支持多种 **admonitions** shortcode 或 **alerts** 的 Markdown 扩展语法
+- 支持**标签页**的 shortcode，提供多种设计样式
+- 支持基于 [KaTeX](https://katex.org/) 或 [MathJax](https://www.mathjax.org) 的**数学公式**
 - 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
 - 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
 - 支持 **Timeline** 的代码块扩展语法和 shortcode
+- 支持 **文件树** 的代码块扩展语法和 shortcode
 - 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
 - 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
 - 支持 **Bilibili 视频** 和 **抖音视频** shortcode
-- 支持多种**注释**的 shortcode
 - 支持**自定义样式**的 shortcode
 - 支持**自定义脚本**的 shortcode
 - 支持**自定义模板块**
@@ -190,6 +184,8 @@ FixIt 主题多语言基本配置及自动翻译等详见 [内容管理](https:/
 - 罗马尼亚语
 - 越南语
 - 印地语
+- 日语
+- 韩语
 
 </details>
 
@@ -204,9 +200,11 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
 - [fixit-bundle](https://github.com/hugo-fixit/fixit-bundle)\
   🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component.
 - [cmpt-flyfish](https://github.com/hugo-fixit/cmpt-flyfish)\
-  🐟 一个 canvas 实现的小鱼游动动画效果。
+  🐟 A canvas implemented animation effect of small fish swimming.
 - [cmpt-mdevtools](https://github.com/hugo-fixit/cmpt-mdevtools)\
   Mobile devtools component powered by vConsole and eruda.
+- [cmpt-santa-hat](https://github.com/hugo-fixit/cmpt-santa-hat)\
+  A Christmas Easter Egg by JavaScript.
 - [cmpt-translate](https://github.com/hugo-fixit/cmpt-translate)\
   🌐 A component for site automatic translation.
 - [component-projects](https://github.com/hugo-fixit/component-projects)\
@@ -218,9 +216,13 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
 - [shortcode-asciinema](https://github.com/hugo-fixit/shortcode-asciinema)\
   A Hugo theme component with asciinema-embed shortcode.
 - [shortcode-caniuse](https://github.com/hugo-fixit/shortcode-caniuse)\
-  一个含有 caniuse shortcode 的 Hugo 主题组件。
+  A Hugo theme component with caniuse shortcode.
 - [shortcode-docs-bookmark](https://github.com/hugo-fixit/shortcode-docs-bookmark)\
   🔖 Embed bookmark of FixIt Docs.
+- [shortcode-missing-translation](https://github.com/hugo-fixit/shortcode-missing-translation)\
+  A Hugo theme component with missing-translation shortcode.
+- [shortcode-mmt-netease](https://github.com/hugo-fixit/shortcode-mmt-netease)\
+  🎶 A Hugo theme component with a NetEase Cloud random comment shortcode.
 - [shortcode-rewards](https://github.com/hugo-fixit/shortcode-rewards)\
   A Hugo theme component with reward-log or sponsor-log shortcode.
 <!-- HUGO_FIXIT_COMPONENTS:END -->
@@ -258,8 +260,10 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
 
 感谢 [所有贡献者](https://github.com/hugo-fixit/FixIt/graphs/contributors) 的支持！
 
+感谢 [Hugo DoIt](https://github.com/HEIGE-PCloud/DoIt) 主题和 [Hexo NexT](https://github.com/next-theme/hexo-theme-next) 主题给予的灵感和借鉴。
+
 <details>
-<summary>FixIt 主题中用到了以下项目，感谢它们的作者：</summary>
+<summary>感谢 FixIt 主题中使用的所有开源项目。</summary>
 
 - [normalize.css](https://github.com/necolas/normalize.css)
 - [Font Awesome](https://fontawesome.com/)
@@ -275,6 +279,7 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
 - [Sharer.js](https://github.com/ellisonleao/sharer.js)
 - [TypeIt](https://typeitjs.com/)
 - [KaTeX](https://katex.org/)
+- [MathJax](https://www.mathjax.org)
 - [mermaid](https://github.com/mermaid-js/mermaid)
 - [ECharts](https://echarts.apache.org/)
 - [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
@@ -295,14 +300,8 @@ FixIt 主题旨在在**简洁性**和**可扩展性**之间取得平衡。为此
 - [crypto-js](https://github.com/brix/crypto-js)
 - [pace](https://github.com/CodeByZach/pace)
 - [xxhash-wasm](https://github.com/jungomi/xxhash-wasm)
-
-</details>
-
-<details>
-<summary>FixIt 主题还借鉴了以下项目的部分功能，同样感谢它们的作者：</summary>
-
-- [DoIt](https://github.com/HEIGE-PCloud/DoIt)
-- [NexT](https://github.com/next-theme/hexo-theme-next)
+- [`<tab-container>` element](https://github.com/github/tab-container-element)
+- [`<json-viewer>` element](https://github.com/Lruihao/json-viewer-element)
 
 </details>
 

SECURITY.md

@@ -2,17 +2,72 @@
 
 ## Supported Versions
 
-| Version       | Supported          |
-| :-----------: | :----------------: |
-| 0.3.x         | :white_check_mark: |
+Only the latest version receives active maintenance and security updates:
 
-legacy and transitional versions:
+| Version | Hugo Version      | LoveIt Compat      | Supported          |
+| :-----: | :---------------: | :----------------: | :----------------: |
+| 0.4.x   | >= 0.147.7        | N/A                | :white_check_mark: |
+| 0.3.x   | 0.112.0 ~ 0.146.0 | N/A                | :x:                |
+| 0.2.x   | 0.62.0 ~ 0.110.0  | :white_check_mark: | :x:                |
+| 0.1.x   | Unknown           | :white_check_mark: | :x:                |
 
-| Version       | Supported          | LoveIt Compatibility |
-| :-----------: | :----------------: | :------------------: |
-| 0.1.x         | :x:                | :white_check_mark:   |
-| 0.2.x         | :x:                | :white_check_mark:   |
+## Security Considerations
+
+### Theme Security Features
+
+- **Content Security Policy (CSP)** support
+- **Subresource Integrity (SRI)** for external resources
+- **XSS protection** through Hugo's built-in escaping
+- **Safe HTML rendering** with configurable markup
+- **Secure defaults** for all theme configurations
+
+### Best Practices
+
+1. **Keep Hugo Updated**: Always use the latest stable Hugo version
+2. **Regular Updates**: Update the theme regularly to get security patches
+3. **Content Validation**: Validate user-generated content before publishing
+4. **HTTPS Only**: Always deploy sites with HTTPS enabled
+
+### Known Security Considerations
+
+- External CDN resources should be reviewed before enabling
+- User-generated content requires proper sanitization
+- Third-party integrations (comments, analytics) should be configured securely
 
 ## Reporting a Vulnerability
 
-If you want to report a vulnerability, create a new issue at https://github.com/hugo-fixit/FixIt/issues. Any vulnerabilities will be fixed as soon as possible.
+We take security seriously and appreciate your help in keeping FixIt secure.
+
+### How to Report
+
+1. **Create an Issue**: Report vulnerabilities at https://github.com/hugo-fixit/FixIt/issues
+2. **Private Disclosure**: For sensitive security issues, email the maintainers directly
+3. **Include Details**: Provide clear steps to reproduce the vulnerability
+
+### What to Include
+
+- **Description**: Clear description of the vulnerability
+- **Impact**: Potential impact and severity
+- **Reproduction**: Step-by-step instructions to reproduce
+- **Environment**: Hugo version, theme version, and platform details
+- **Solution**: Suggested fix if you have one
+
+### Response Timeline
+
+- **Acknowledgment**: Within 48 hours
+- **Initial Assessment**: Within 1 week
+- **Status Updates**: Weekly updates on progress
+- **Resolution**: Security fixes are prioritized and released as soon as possible
+
+### Disclosure Policy
+
+- We follow responsible disclosure practices
+- We will coordinate with you on the disclosure timeline
+
+## Security Resources
+
+- [Hugo Security Model](https://gohugo.io/about/security/)
+- [OWASP Web Security Testing Guide](https://owasp.org/www-project-web-security-testing-guide/)
+- [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)
+
+<!-- This security policy was enhanced and generated with assistance from GitHub Copilot AI -->

apps/demo/hugo.toml

@@ -8,15 +8,14 @@
 # -------------------------------------------------------------------------------------
 
 title = "Hugo FixIt Demo"
-baseURL = "http://example.org/"
-# Change the default theme to be use when building the site with Hugo
+baseURL = "https://demo.fixit.lruihao.cn/"
 # theme = "FixIt"
 
 [markup]
-  _merge = "shallow"
+_merge = "shallow"
 
 [outputs]
-  _merge = "shallow"
+_merge = "shallow"
 
 # -------------------------------------------------------------------------------------
 # Taxonomies Configuration
@@ -24,7 +23,7 @@ baseURL = "http://example.org/"
 # -------------------------------------------------------------------------------------
 
 [taxonomies]
-  _merge = "shallow"
+_merge = "shallow"
 
 # -------------------------------------------------------------------------------------
 # Theme Core Configuration
@@ -32,6 +31,6 @@ baseURL = "http://example.org/"
 # -------------------------------------------------------------------------------------
 
 [params]
-  # FixIt theme version
-  version = "0.3.X" # e.g. "0.2.X", "0.2.15", "v0.2.15" etc.
-  # ...
+# FixIt theme version
+version = "0.3.X" # e.g. "0.2.X", "0.2.15", "v0.2.15" etc.
+# ...

apps/demo/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@hugo-fixit/demo",
+  "private": true,
+  "scripts": {
+    "build": "hugo --themesDir ../../.. --theme $PWD/../.. --gc --minify --logLevel info",
+    "dev": "hugo server --themesDir ../../.. --theme $PWD/../.. -D --disableFastRender --navigateToChanged --ignoreCache -O"
+  }
+}

apps/test/assets/filetree/example.json

@@ -0,0 +1,72 @@
+[
+  {
+    "name": "src-json",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "components",
+        "type": "dir",
+        "children": [
+          {
+            "name": "Header.tsx",
+            "type": "file"
+          },
+          {
+            "name": "Footer.tsx",
+            "type": "file"
+          }
+        ]
+      },
+      {
+        "name": "utils",
+        "type": "dir",
+        "children": [
+          {
+            "name": "helper.ts",
+            "type": "file"
+          },
+          {
+            "name": "validator.ts",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "public",
+    "type": "dir",
+    "children": [
+      {
+        "name": "favicon.ico",
+        "type": "file"
+      },
+      {
+        "name": "images",
+        "type": "dir",
+        "children": [
+          {
+            "name": "logo.png",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "package.json",
+    "type": "file"
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": "tsconfig.json",
+    "type": "file"
+  }
+]

apps/test/content/posts/_index.md

@@ -0,0 +1,4 @@
+---
+title: All Tests
+titleIcon: fa-solid fa-flask
+---

apps/test/content/posts/alert-and-admonition-test.md

@@ -0,0 +1,165 @@
+---
+title: Alerts and Admonition Syntax Test
+date: 2025-09-05T16:57:58+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+  - Shortcodes
+tags:
+  - Alerts
+  - Admonition
+---
+
+This article comprehensively tests the **Alerts** Markdown syntax extension and **Admonition** shortcode functionality in the FixIt theme.
+
+<!--more-->
+
+## Basic Alerts Syntax
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+## Extended Alerts Syntax
+
+### Custom Titles
+
+> [!NOTE] FixIt
+> A clean, elegant but advanced Hugo theme.
+
+> [!TIP] This is a title-only alert.
+
+### Foldable Alerts
+
+Create foldable alerts by adding a plus (+) or minus (-) directly after the type identifier:
+
+> [!WARNING]+ Radiation Hazard
+> Do not approach or handle without protective gear.
+
+> [!QUESTION]- Are alerts foldable?
+> Yes! In a foldable alert, the contents are hidden when collapsed.
+
+### Nested Alerts
+
+Alerts can be nested in multiple levels:
+
+> [!question] Can alerts be nested?
+> > [!todo] Yes! They can be nested.
+> > > [!example] You can even use multiple layers of nesting.
+
+### Content-only Alerts
+
+> [!TIP]~
+> This is a content-only alert without a title.
+
+### Supported types
+
+> [!note]+
+> This is a note type alert example.
+
+> [!abstract]-
+> This is an abstract type alert example. Aliases: `summary`, `tldr`
+
+> [!info]-
+> This is an info type alert example.
+
+> [!todo]-
+> This is a todo type alert example.
+
+> [!tip]-
+> This is a tip type alert example. Aliases: `hint`, `important`
+
+> [!success]-
+> This is a success type alert example. Aliases: `check`, `done`
+
+> [!question]-
+> This is a question type alert example. Aliases: `help`, `faq`
+
+> [!warning]-
+> This is a warning type alert example. Aliases: `caution`, `attention`
+
+> [!failure]-
+> This is a failure type alert example. Aliases: `fail`, `missing`
+
+> [!danger]-
+> This is a danger type alert example. Aliases: `error`
+
+> [!bug]-
+> This is a bug type alert example.
+
+> [!example]-
+> This is an example type alert example.
+
+> [!quote]-
+> This is a quote type alert example. Aliases: `cite`
+
+## Admonition Shortcode
+
+{{< admonition >}}
+This is the default note type admonition.
+{{< /admonition >}}
+
+{{< admonition abstract "" false  >}}
+This is the default abstract type admonition. Aliases: `summary`, `tldr`
+{{< /admonition >}}
+
+{{< admonition info "" false >}}
+This is the default info type admonition.
+{{< /admonition >}}
+
+{{< admonition todo "" false >}}
+This is the default todo type admonition.
+{{< /admonition >}}
+
+{{< admonition tip "" false >}}
+This is the default tip type admonition. Aliases: `hint`, `important`
+{{< /admonition >}}
+
+{{< admonition success "" false >}}
+This is the default success type admonition. Aliases: `check`, `done`
+{{< /admonition >}}
+
+{{< admonition question "" false >}}
+This is the default question type admonition. Aliases: `help`, `faq`
+{{< /admonition >}}
+
+{{< admonition warning "" false >}}
+This is the default warning type admonition. Aliases: `caution`, `attention`
+{{< /admonition >}}
+
+{{< admonition failure "" false >}}
+This is the default failure type admonition. Aliases: `fail`, `missing`
+{{< /admonition >}}
+
+{{< admonition danger "" false >}}
+This is the default danger type admonition. Aliases: `error`
+{{< /admonition >}}
+
+{{< admonition bug "" false >}}
+This is the default bug type admonition.
+{{< /admonition >}}
+
+{{< admonition example "" false >}}
+This is the default example type admonition.
+{{< /admonition >}}
+
+{{< admonition quote "" false >}}
+This is the default quote type admonition. Aliases: `cite`
+{{< /admonition >}}
+
+## Special Types
+
+> [!center]
+> This paragraph is **center-aligned**.

apps/test/content/posts/aplayer-test/Wavelength.lrc

@@ -0,0 +1,3 @@
+[00:00.00]APlayer audio1
+[00:04.01]is
+[00:08.02]amazing

apps/test/content/posts/aplayer-test/index.md

@@ -0,0 +1,28 @@
+---
+title: APlayer Test
+date: 2025-10-21T11:00:04+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - APlayer
+---
+
+Testing APlayer shortcode in FixIt theme.
+
+<!--more-->
+
+{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=3 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
+  {{< audio name="Wavelength1" artist="oldmanyoung1" url="Wavelength.mp3" cover="Wavelength.webp" lrc="Wavelength.lrc" />}}
+  {{< audio name="Wavelength2" artist="oldmanyoung2" url="Wavelength.mp3" cover="Wavelength.webp" />}}
+{{< /aplayer >}}
+
+{{< aplayer fixed=false mini=false autoplay=false theme="#b7daff" loop="all" order="list" preload="auto" volume=0.7 mutex=true lrcType=1 listFolded=false listMaxHeight="" storageName="aplayer-setting" >}}
+  {{< audio name="Wavelength1" artist="oldmanyoung1" url="Wavelength.mp3" cover="Wavelength.webp" />}}
+  {{< audio name="Wavelength2" artist="oldmanyoung2" url="Wavelength.mp3" cover="Wavelength.webp" >}}
+    [00:00.00]APlayer audio2
+    [00:04.01]is
+    [00:08.02]amazing
+  {{< /audio >}}
+{{< /aplayer >}}

apps/test/content/posts/codeblock-test.md

@@ -0,0 +1,227 @@
+---
+title: Code Block Test
+date: 2025-11-28T15:16:35+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Code Block
+---
+
+Testing code block in FixIt theme.
+
+<!--more-->
+<!-- markdownlint-disable-file blanks-around-lists ul-style ul-indent code-block-style -->
+
+```fixit
+🎉🥚 in development mode!
+```
+
+## Multiple modes
+
+```js {mode="classic"}
+// Classic mode
+function add(a, b) {
+  return a + b
+}
+```
+
+```js {mode="mac"}
+// Mac mode
+function add(a, b) {
+  return a + b
+}
+```
+
+```js {mode="simple"}
+// Simple mode
+function add(a, b) {
+  return a + b
+}
+```
+
+## Code title
+
+```{title="Quine Clock"}
+(r=()=>setInterval(t=>{for(j=o="\n",y=5;y--;document.body["inn"
++"erHTML"]="<pre>&lt"+(S="script>\n")+o+"\n\n&lt/"+S)for(x=-01;
+63-!y>x++;o+=`(r=${r})()`[j++].fontcolor(c?'#FF0':"#444"))c=x/2
+%4<3&&parseInt("odRFacb67o2vi5gmOZmwFNteohbOh3sw".slice(i="9"<(
+D=Date()[16+(x/8|0)])?30:D*3,i+3),36)&1<<(x/2|0)%4+3*y},100))()
+```
+
+## Code File Name
+
+```js {name="hello.js"}
+function hello(x = 'world') {
+  console.log(`Hello, ${x}!`)
+}
+
+hello()
+// Hello, world!
+hello('FixIt')
+// Hello, FixIt!
+```
+
+## Collapsed/Expanded
+
+```
+eval(z = 'p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
+4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
+9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
+r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
+eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
+(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
+th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0>cos(o=\
+new Date/1e3/*      .Q#########Md#.###OP  A@ , */+x/PI)&&(e[~\
+~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
++60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
+x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
+]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
+it(B = "\\\\")./*           G####B" #       */join(B+B).split\
+(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
++61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
+03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//
+```
+
+````md
+```lang {.is-collapsed}
+// This code block will be collapsed by default.
+```
+````
+
+````md
+```lang {.is-expanded}
+// This code block will be expanded regardless of its length.
+```
+````
+
+## No wrapper
+
+Set `wrapper=false` to disable code wrapper.
+
+```js {wrapper=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+```js {wrapper=false, lineNos=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+## lineNos=false
+
+```js {lineNos=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+## lineNumbersInTable=false
+
+> [!WARNING]
+> Not recommended!
+
+```js {lineNumbersInTable=false}
+function add(a, b) {
+  return a + b
+}
+```
+
+## Diff Code
+
+```diff
+- theme = "LoveIt"
++ theme = "FixIt"
+! enhancements and fixes
+```
+
+## Long Code
+
+```html
+<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+```
+
+    <p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
+
+## Code block inside other blocks
+
+> [!NOTE]+
+>
+> ```js {mode="classic"}
+> function add(a, b) {
+>   return a + b
+> }
+> ```
+
+{{< typeit code=java >}}
+public class HelloWorld {
+    public static void main(String []args) {
+        System.out.println("Hello World");
+    }
+}
+{{< /typeit >}}
+
+{{< details "Code Block inside Details" >}}
+
+```js {mode="classic"}
+function add(a, b) {
+  return a + b
+}
+```
+
+{{< /details >}}
+
+## Highlighting
+
+Highlighting in code fences is enabled by default.
+
+```js {linenostart=287,hl_lines=[2,"8-10"]}
+/**
+ * check if a string is a JS object string
+ * @example isObjectLiteral("{a:1,b:2}") // true
+ * @param {string} str string to check
+ * @returns {boolean} whether the string is a JS object string
+ */
+function isObjectLiteral(str) {
+  if (typeof str !== 'string') {
+    return false
+  }
+  str = str.replace(/\s+/g, ' ').trim().replace(/;$/, '')
+  if (str.startsWith('{') && str.endsWith('}')) {
+    return true
+  }
+  return false
+}
+```
+
+Highlighting in shortcode highlight.
+
+{{< highlight javascript "hl_lines=2 8-10,linenostart=287" >}}
+/**
+ * check if a string is a JS object string
+ * @example isObjectLiteral("{a:1,b:2}") // true
+ * @param {string} str string to check
+ * @returns {boolean} whether the string is a JS object string
+ */
+function isObjectLiteral(str) {
+  if (typeof str !== 'string') {
+    return false
+  }
+  str = str.replace(/\s+/g, ' ').trim().replace(/;$/, '')
+  if (str.startsWith('{') && str.endsWith('}')) {
+    return true
+  }
+  return false
+}
+{{< /highlight >}}
+
+## Gist Embed
+
+{{< env "production" >}}
+{{< gist Lruihao fb8b2d0353465c4d40bf74818db80710 >}}
+{{< /env >}}

apps/test/content/posts/encryption-test/index.md

@@ -0,0 +1,179 @@
+---
+title: Encryption Test
+date: 2022-05-21T22:31:22+08:00
+description: Test for encrypting content.
+password: 1212
+message: Password is 1212
+collections:
+  - Tests
+categories:
+  - Features
+tags:
+  - Encryption
+---
+
+<!--more-->
+
+I was shy, so I hid.
+
+## Ruby
+
+[Hugo]^(An open-source static site generator)
+
+## Math
+
+$$ \ce{CO2 + C -> 2 CO} $$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+## style
+
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
+{{< /style >}}
+
+## Script
+
+{{< script >}}
+console.log('before decrypting');
+
+document.addEventListener('DOMContentLoaded', () => {
+  fixit.decryptor.addEventListener('decrypted', function() {
+    console.log('after decrypting')
+  })
+});
+{{< /script >}}
+
+## Mermaid
+
+```mermaid
+graph LR;
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
+## Echarts
+
+```echarts
+title:
+    text: Summary Line Chart
+    top: 2%
+    left: center
+tooltip:
+    trigger: axis
+legend:
+    data:
+        - Email Marketing
+        - Affiliate Advertising
+        - Video Advertising
+        - Direct View
+        - Search Engine
+    top: 10%
+grid:
+    left: 5%
+    right: 5%
+    bottom: 5%
+    top: 20%
+    containLabel: true
+toolbox:
+    feature:
+        saveAsImage:
+            title: Save as Image
+xAxis:
+    type: category
+    boundaryGap: false
+    data:
+        - Monday
+        - Tuesday
+        - Wednesday
+        - Thursday
+        - Friday
+        - Saturday
+        - Sunday
+yAxis:
+    type: value
+series:
+    - name: Email Marketing
+      type: line
+      stack: Total
+      data:
+          - 120
+          - 132
+          - 101
+          - 134
+          - 90
+          - 230
+          - 210
+    - name: Affiliate Advertising
+      type: line
+      stack: Total
+      data:
+          - 220
+          - 182
+          - 191
+          - 234
+          - 290
+          - 330
+          - 310
+    - name: Video Advertising
+      type: line
+      stack: Total
+      data:
+          - 150
+          - 232
+          - 201
+          - 154
+          - 190
+          - 330
+          - 410
+    - name: Direct View
+      type: line
+      stack: Total
+      data:
+          - 320
+          - 332
+          - 301
+          - 334
+          - 390
+          - 330
+          - 320
+    - name: Search Engine
+      type: line
+      stack: Total
+      data:
+          - 820
+          - 932
+          - 901
+          - 934
+          - 1290
+          - 1330
+          - 1320
+```
+
+## Typeit
+
+{{< typeit code=javascript >}}
+console.log('before decrypting');
+
+document.addEventListener('DOMContentLoaded', () => {
+  fixit.decryptor.addEventListener('decrypted', function() {
+    console.log('after decrypting')
+  })
+});
+{{< /typeit >}}
+
+## fixit-encryptor
+
+All the following shortcodes passwords are `1212`.
+
+{{% fixit-encryptor "1212" %}}
+{{< typeit >}}如果你愿意一层一层一层地剥开我的心{{< /typeit >}}
+{{% fixit-encryptor "1212" %}}
+{{< typeit >}}你会发现 你会讶异{{< /typeit >}}
+{{% fixit-encryptor "1212" %}}
+{{< typeit >}}你是我最压抑最深处的秘密{{< /typeit >}}
+{{% /fixit-encryptor %}}
+{{% /fixit-encryptor %}}
+{{% /fixit-encryptor %}}

apps/test/content/posts/exact-color-match-test.md

@@ -0,0 +1,45 @@
+---
+title: Exact Color Match Test
+date: 2025-08-17T17:20:00+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Color Preview
+---
+
+## 📝 Syntax
+
+| Color | Syntax             | Example                    | Output               |
+| ----- | ------------------ | -------------------------- | -------------------- |
+| HEX   | `` `#RRGGBB` ``    | `` `#0969DA` ``            | `#0969DA`            |
+| RGB   | `` `rgb(R,G,B)` `` | `` `rgb(9, 105, 218)` ``   | `rgb(9, 105, 218)`   |
+| HSL   | `` `hsl(H,S,L)` `` | `` `hsl(212, 92%, 45%)` `` | `hsl(212, 92%, 45%)` |
+
+e.g. The background color is `#ffffff` for light mode and `#000000` for dark mode.
+
+## ✅ Color Preview
+
+Pure color values (no leading/trailing characters):
+
+- `#0969DA`
+- `#096`
+- `#FF0000`
+- `#00FF00`
+- `rgb(255, 0, 0)`
+- `rgb(0, 255, 0)`
+- `hsl(240, 100%, 50%)`
+- `hsl(120, 100%, 50%)`
+
+## ❌ Regular Code
+
+With leading or trailing characters:
+
+- `test #0969DA`
+- `#0969DA test`
+- `color: #0969DA`
+- ` #0969DA` (leading space)
+- `#0969DA ` (trailing space)
+- `background-color: rgb(255, 0, 0)`
+- `using hsl(240, 100%, 50%) color`

apps/test/content/posts/file-tree-test/data/example.toml

@@ -0,0 +1,59 @@
+[[filetree]]
+name = "src-toml"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "components"
+type = "dir"
+
+[[filetree.children.children]]
+name = "Header.tsx"
+type = "file"
+
+[[filetree.children.children]]
+name = "Footer.tsx"
+type = "file"
+
+[[filetree.children]]
+name = "utils"
+type = "dir"
+
+[[filetree.children.children]]
+name = "helper.ts"
+type = "file"
+
+[[filetree.children.children]]
+name = "validator.ts"
+type = "file"
+
+[[filetree]]
+name = "public"
+type = "dir"
+
+[[filetree.children]]
+name = "favicon.ico"
+type = "file"
+
+[[filetree.children]]
+name = "images"
+type = "dir"
+
+[[filetree.children.children]]
+name = "logo.png"
+type = "file"
+
+[[filetree]]
+name = "package.json"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+
+[[filetree]]
+name = "tsconfig.json"
+type = "file"

apps/test/content/posts/file-tree-test/index.md

@@ -0,0 +1,273 @@
+---
+title: File Tree Test
+date: 2026-01-10T03:00:48+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - file-tree
+---
+
+This article tests the **File Tree** shortcode functionality in the FixIt theme.
+
+<!--more-->
+<!-- markdownlint-disable-file MD007 MD024 MD032 -->
+
+## Content Modes
+
+### Shortcode body
+
+#### JSON format
+
+{{< file-tree >}}
+[
+  {
+    "name": "src",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "app.ts",
+        "type": "file"
+      }
+    ]
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": ".gitignore",
+    "type": "file"
+  }
+]
+{{< /file-tree >}}
+
+#### YAML format
+
+{{< file-tree folderSlash=true >}}
+- name: project-root
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: config.ts
+          type: file
+    - name: tests
+      type: dir
+      children:
+        - name: unit.test.ts
+          type: file
+    - name: package.json
+      type: file
+    - name: tsconfig.json
+      type: file
+{{< /file-tree >}}
+
+#### TOML format
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "app.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+### File data
+
+#### TOML format
+
+{{< file-tree file="data/example.toml" />}}
+
+TOML with folder slash and level 3:
+
+{{< file-tree file="data/example.toml" level=3 folderSlash=true />}}
+
+#### JSON format
+
+{{< file-tree file="filetree/example.json" />}}
+
+JSON with folder slash and level 2:
+
+{{< file-tree file="filetree/example.json" level=2 folderSlash=true />}}
+
+#### YAML format
+
+Trying the file not found case (should fallback to next mode):
+
+{{< file-tree file="data/nonexistent.yaml" data="example" />}}
+
+### Site data
+
+#### Basic usage
+
+{{< file-tree data="example" />}}
+
+#### Fully expanded
+
+{{< file-tree data="example" level=-1 />}}
+
+#### Limited expansion
+
+{{< file-tree data="example" level=1 />}}
+
+#### With folder slash
+
+{{< file-tree data="example" folderSlash=true />}}
+
+#### With level and folder slash
+
+{{< file-tree data="example" level=2 folderSlash=true />}}
+
+#### Collapsed with ignore
+
+{{< file-tree data="example" level=0 ignoreList="README.md" />}}
+
+## Filesystem Mode
+
+### Basic paths
+
+{{< file-tree />}}
+
+{{< file-tree "." />}}
+
+{{< file-tree "content" />}}
+
+{{< file-tree name="{path}" />}}
+
+{{< file-tree name="FixIt/apps/test" />}}
+
+{{< file-tree path="posts" name="{path}" />}}
+
+### Named parameters
+
+{{< file-tree path="data" level=2 />}}
+
+### Expansion levels
+
+{{< file-tree "assets" 0 />}}
+
+{{< file-tree path="assets" level=2 folderSlash=true />}}
+
+{{< file-tree "assets" -1 />}}
+
+### With ignore lists
+
+{{< file-tree ignoreList=".hugo_build.lock, public, resources, node_modules" level=2 folderSlash=true />}}
+
+### root not exist
+
+path="nonexistent/path"
+
+{{< file-tree "nonexistent/path" />}}
+
+## Code Block Rendering
+
+### Basic code block
+
+YAML format:
+
+```file-tree
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: main.js
+          type: file
+        - name: utils.js
+          type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+```
+
+### TOML format
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+### With parameters
+
+```file-tree {level=2 folderSlash=true ignoreList="config.local.js"}
+- name: project
+  type: dir
+  children:
+    - name: config
+      type: dir
+      children:
+        - name: config.js
+          type: file
+        - name: config.local.js
+          type: file
+    - name: src
+      type: dir
+      children:
+        - name: index.js
+          type: file
+    - name: .gitignore
+      type: file
+```
+
+### Fully expanded
+
+```file-tree {level=-1 folderSlash=true}
+- name: backend
+  type: dir
+  children:
+    - name: api
+      type: dir
+      children:
+        - name: routes
+          type: dir
+          children:
+            - name: users.js
+              type: file
+            - name: posts.js
+              type: file
+        - name: controllers
+          type: dir
+          children:
+            - name: userController.js
+              type: file
+    - name: database
+      type: dir
+      children:
+        - name: models
+          type: dir
+        - name: migrations
+          type: dir
+    - name: app.js
+      type: file
+```

apps/test/content/posts/fontawesome-test.md

@@ -0,0 +1,79 @@
+---
+title: Font Awesome Test
+date: 2025-11-28T08:30:39+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Font Awesome
+---
+
+Test for rendering Font Awesome icons.
+
+<!--more-->
+
+## Size
+
+:(fa-solid fa-camera fa-xs):
+:(fa-solid fa-camera fa-sm):
+:(fa-solid fa-camera fa-lg):
+:(fa-solid fa-camera fa-1x):
+:(fa-solid fa-camera fa-2x):
+:(fa-solid fa-camera fa-3x):
+:(fa-solid fa-camera fa-5x):
+:(fa-solid fa-camera fa-7x):
+:(fa-solid fa-camera fa-10x):
+
+## Fixed width
+
+:(fa-solid fa-skating fa-2x): Skating\
+:(fa-solid fa-skiing fa-2x): Skiing\
+:(fa-solid fa-skiing-nordic fa-2x): Nordic Skiing
+
+## List icon
+
+:(fa-regular fa-check-square): Eat a hamburger\
+:(fa-regular fa-square): Get a girlfriend
+
+:(fa-regular fa-check-circle): Go to beach\
+:(fa-regular fa-circle): Go to Tibet
+
+## Rotate
+
+:(fa-solid fa-snowboarding):
+:(fa-solid fa-snowboarding fa-rotate-90):
+:(fa-solid fa-snowboarding fa-rotate-180):
+:(fa-solid fa-snowboarding fa-rotate-270):
+
+## Flip
+
+:(fa-solid fa-snowboarding):
+:(fa-solid fa-snowboarding fa-flip-horizontal):
+:(fa-solid fa-snowboarding fa-flip-vertical):
+:(fa-solid fa-snowboarding fa-flip-both):
+
+## Animation
+
+:(fa-solid fa-spinner):
+:(fa-solid fa-spinner fa-spin):
+:(fa-solid fa-spinner fa-pulse):
+:(fa-solid fa-circle-notch fa-spin):
+:(fa-solid fa-circle-notch fa-pulse):
+:(fa-solid fa-sync fa-spin):
+:(fa-solid fa-sync fa-pulse):
+:(fa-solid fa-cog fa-spin):
+:(fa-solid fa-cog fa-pulse):
+
+## Float
+
+:(fa-solid fa-quote-left fa-pull-left):
+
+hey guys!
+{.text-center}
+
+:(fa-solid fa-quote-right fa-pull-right):
+
+## Border
+
+:(fa-brands fa-apple fa-border fa-10x):

apps/test/content/posts/json-viewer-test.md

@@ -0,0 +1,84 @@
+---
+title: JSON Viewer Test
+date: 2025-10-14T12:29:06+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - json
+---
+
+Testing JSON viewer in FixIt theme.
+
+```json {boxed=false}
+{
+  "foo": "bar"
+}
+```
+
+<!--more-->
+
+## JSON Viewer
+
+```json
+{
+  "name": "John Doe",
+  "age": 30,
+  "isEmployed": true,
+  "address": {
+    "street": "123 Main St",
+    "city": "Anytown",
+    "state": "CA",
+    "postalCode": "12345"
+  },
+  "phoneNumbers": [
+    {
+      "type": "home",
+      "number": "555-1234"
+    },
+    {
+      "type": "work",
+      "number": "555-5678"
+    }
+  ],
+  "children": [],
+  "spouse": null
+}
+```
+
+disabled copy:
+
+```json {copyable=false}
+{
+  "foo": "bar"
+}
+```
+
+## JSON Code
+
+```json {enable=false}
+{
+  "name": "John Doe",
+  "age": 30,
+  "isEmployed": true,
+  "address": {
+    "street": "123 Main St",
+    "city": "Anytown",
+    "state": "CA",
+    "postalCode": "12345"
+  },
+  "phoneNumbers": [
+    {
+      "type": "home",
+      "number": "555-1234"
+    },
+    {
+      "type": "work",
+      "number": "555-5678"
+    }
+  ],
+  "children": [],
+  "spouse": null
+}
+```

apps/test/content/posts/katex-test.md

@@ -0,0 +1,73 @@
+---
+title: KaTeX Test
+date: 2025-09-15T21:05:17+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Math
+---
+
+Testing $\KaTeX$ rendering in FixIt theme.
+
+<!--more-->
+
+## Inline Formulas
+
+$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
+
+## Formula Blocks
+
+$$ c = \pm\sqrt{a^2 + b^2} $$
+
+\[f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\]
+
+$$
+\begin{equation*}
+  \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
+\end{equation*}
+$$
+
+$$
+\begin{equation}
+  \mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
+\end{equation}
+$$
+
+$$
+\begin{align}
+  a&=b+c \\
+  d+e&=f
+\end{align}
+$$
+
+$$
+\begin{alignat}{2}
+   10&x+&3&y = 2 \\
+   3&x+&13&y = 4
+\end{alignat}
+$$
+
+$$
+\begin{gather}
+   a=b \\
+   e=b+c
+\end{gather}
+$$
+
+$$
+\begin{CD}
+   A @>a>> B \\
+@VbVV @AAcA \\
+   C @= D
+\end{CD}
+$$
+
+## Chemical Equations
+
+$$ \ce{CO2 + C -> 2 CO} $$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$

apps/test/content/posts/mathjax-test.md

@@ -0,0 +1,119 @@
+---
+title: MathJax Test
+date: 2025-09-15T21:05:17+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+tags:
+  - Math
+math:
+  type: mathjax
+  mathjax:
+    macros:
+      bold: ["{\\bf #1}", 1] # usage: $\bold{math}$
+    loader:
+      load: ["ui/safe", "[tex]/physics", "[custom]/xypic.js"]
+      paths:
+        custom: "https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/"
+    packages:
+      "[+]": ["physics", "xypic"]
+    tex:
+      physics:
+        italicdiff: false
+        arrowdel: false
+---
+
+Testing $\text{MathJax}$ rendering in FixIt theme.
+
+<!--more-->
+
+## Inline Formulas
+
+$c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
+
+## Formula Blocks
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+\[ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \]
+
+$$
+\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)
+$$
+
+\[
+\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS
+\]
+
+$$
+\vec{\nabla} \times \vec{F} =
+            \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i}
+          + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j}
+          + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}
+$$
+
+$$
+\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
+$$
+
+$$
+(\nabla_X Y)^k = X^i (\nabla_i Y)^k =
+           X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)
+$$
+
+## Chemical Equations
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+## Custom Macros
+
+$\bold{Custom}$ macro $\KaTeX$ in $\text{MathJax}$
+
+$$
+\def\RR{{\bf R}}
+\def\bolda#1{{\bf #1}}
+\RR = \bolda{R}
+$$
+
+$$
+\newcommand{\water}{{\rm H_{2}O}}
+\water = \text{H}_2\text{O}
+$$
+
+$$
+\newcommand{\hello}[1][World]{Hello, #1!}
+\hello \quad \hello[FixIt]
+$$
+
+$$
+\let\oldphi=\phi
+\let\oldtheta=\theta
+\renewcommand{\phi}{\varphi}
+\renewcommand{\theta}{\vartheta}
+\phi, \oldphi, \theta, \oldtheta
+$$
+
+## Custom Extensions
+
+A `physics` package example:
+
+$$
+\mqty(a & b \\ c & d) = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
+$$
+
+An `xypic` package example:
+
+$$
+\begin{xy}
+\xymatrix {
+U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
+ & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
+ & Y \ar[r]^g & Z
+}
+\end{xy}
+$$

apps/test/content/posts/mermaid-diagrams-test.md

@@ -0,0 +1,550 @@
+---
+title: Mermaid Diagrams Test
+date: 2025-08-20T10:00:00+08:00
+collections:
+  - Tests
+categories:
+  - Markdown
+  - Shortcodes
+tags:
+  - Mermaid
+  - Diagrams
+---
+
+The FixIt theme supports two ways to use Mermaid: code block syntax and shortcode syntax.
+
+## Flowchart
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]
+```
+
+<!--more-->
+
+## Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+## Gantt Chart
+
+{{< mermaid >}}
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+{{< /mermaid >}}
+
+## Class Diagram
+
+```mermaid
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+```
+
+## State Diagram
+
+```mermaid
+stateDiagram-v2
+    [_] --> Still
+    Still --> [_]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+## Entity Relationship Diagram
+
+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+    CUSTOMER {
+        string name
+        string custNumber
+        string sector
+    }
+    ORDER {
+        int orderNumber
+        string deliveryAddress
+    }
+    LINE-ITEM {
+        string productCode
+        int quantity
+        float pricePerUnit
+    }
+```
+
+## User Journey
+
+{{< mermaid >}}
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+{{< /mermaid >}}
+
+## Git Graph
+
+```mermaid
+gitGraph
+    commit
+    branch hotfix
+    checkout hotfix
+    commit
+    branch develop
+    checkout develop
+    commit id:"ash" tag:"abc"
+    branch featureB
+    checkout featureB
+    commit type:HIGHLIGHT
+    checkout main
+    checkout hotfix
+    commit type:NORMAL
+    checkout develop
+    commit type:REVERSE
+    checkout featureB
+    commit
+    checkout main
+    merge hotfix
+    checkout featureB
+    commit
+    checkout develop
+    branch featureA
+    commit
+    checkout develop
+    merge hotfix
+    checkout featureA
+    commit
+    checkout featureB
+    commit
+    checkout develop
+    merge featureA
+    branch release
+    checkout release
+    commit
+    checkout main
+    commit
+    checkout release
+    merge main
+    checkout develop
+    merge release
+```
+
+## Pie Chart
+
+{{< mermaid >}}
+pie title What Voldemort doesn't have?
+    "FRIENDS" : 2
+    "FAMILY" : 3
+    "NOSE" : 45
+{{< /mermaid >}}
+
+## Quadrant Chart
+
+```mermaid
+quadrantChart
+    title Reach and influence
+    x-axis Low Reach --> High Reach
+    y-axis Low Influence --> High Influence
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+```
+
+## Timeline
+
+```mermaid
+timeline
+    title History of Social Media Platform
+
+    2002 : LinkedIn
+    2003 : MySpace
+         : Skype
+    2004 : Facebook
+         : Gmail
+    2005 : Youtube
+    2006 : Twitter
+    2007 : FourSquare
+    2008 : Github
+    2010 : Instagram
+    2011 : Snapchat
+    2012 : Discord
+```
+
+## Mindmap
+
+```mermaid
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+```
+
+## XY Chart
+
+{{< mermaid >}}
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+{{< /mermaid >}}
+
+## Requirement Diagram
+
+```mermaid
+requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+```
+
+## C4 Architecture
+
+```mermaid
+C4Context
+      title System Context diagram for Internet Banking System
+      Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+
+          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+          System_Boundary(b2, "BankBoundary2") {
+            System(SystemA, "Banking System A")
+            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+          }
+
+          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+          Boundary(b3, "BankBoundary3", "boundary") {
+            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+          }
+        }
+      }
+
+      BiRel(customerA, SystemAA, "Uses")
+      BiRel(SystemAA, SystemE, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
+      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+
+      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+```
+
+## ZenUML
+
+{{< mermaid >}}
+zenuml
+    title Demo
+    Alice->John: Hello John, how are you?
+    John->Alice: Great!
+    Alice->John: See you later!
+{{< /mermaid >}}
+
+## Sankey Diagram
+
+```mermaid
+---
+config:
+  sankey:
+    showValues: false
+---
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,Ngas,40.719
+Gas reserves,Ngas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+Ngas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+```
+
+## Block Diagram
+
+{{< mermaid >}}
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+{{< /mermaid >}}
+
+## Packet Diagram
+
+```mermaid
+packet-beta
+title Sample packet
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+96-99: "Data Offset"
+100-105: "Reserved"
+106: "URG"
+107: "ACK"
+108: "PSH"
+109: "RST"
+110: "SYN"
+111: "FIN"
+112-127: "Window"
+128-143: "Checksum"
+144-159: "Urgent Pointer"
+160-191: "Options and Padding"
+192-223: "Data (variable length)"
+```
+
+## Kanban
+
+```mermaid
+kanban
+    Todo
+        [Create a git repository]
+        [Write some code]
+        [Commit the code]
+
+    In Progress
+        [Push to main]
+
+    Done
+        [Merge PR]
+```
+
+## Architecture Diagram
+
+```mermaid
+architecture-beta
+    group api(cloud)[API]
+
+    service db(database)[Database] in api
+    service disk1(disk)[Storage] in api
+    service disk2(disk)[Storage] in api
+    service server(server)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
+
+## Radar Chart
+
+```mermaid
+---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+```
+
+## Treemap
+
+```mermaid
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
+treemap-beta
+"Budget"
+    "Operations"
+        "Salaries": 700000
+        "Equipment": 200000
+        "Supplies": 100000
+    "Marketing"
+        "Advertising": 400000
+        "Events": 100000
+```
+
+---
+
+The above test cases cover the main Mermaid diagram types, including:
+
+**Core Diagrams:**
+
+- Flowcharts, Sequence Diagrams, Gantt Charts
+- Class Diagrams, State Diagrams, Entity Relationship Diagrams
+- User Journey, Git Graph, Pie Charts
+
+**Advanced Diagrams:**
+
+- Quadrant Charts, Timeline, Mindmaps
+- XY Charts, Requirement Diagrams, C4 Architecture
+- ZenUML, Sankey, Block Diagrams
+
+**Experimental Diagrams (🔥):**
+
+- Packet, Kanban, Architecture
+- Radar Charts, Treemap
+
+Each diagram type provides examples using both code block and shortcode syntax.

apps/test/content/posts/script-style-test.md

@@ -0,0 +1,29 @@
+---
+title: Custom Script & Style Test
+date: 2025-09-16T09:57:28+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - Script
+  - Style
+---
+
+Testing custom script and style by shortcode in FixIt theme.
+
+<!--more-->
+
+## Script
+
+{{< script >}}
+console.log('Hello FixIt!');
+{{< /script >}}
+
+See the output in the console of the developer tool.
+
+## Style
+
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
+{{< /style >}}

apps/test/content/posts/tabs-comprehensive-test.md

@@ -0,0 +1,219 @@
+---
+title: Tabs Comprehensive Test Cases
+date: 2025-09-09T10:00:00+08:00
+collections:
+
+- Tests
+categories:
+- Shortcodes
+tags:
+- Tabs
+- UI Components
+---
+
+Testing various configurations and nested scenarios for the Tabs shortcode.
+
+{{< tabs >}}
+{{% tab title="Test Cases" %}}See Types section for various test cases.{{% /tab %}}
+{{% tab title="Nested Tabs" %}}See Nested Tabs section for examples.{{% /tab %}}
+{{< /tabs >}}
+
+<!--more-->
+
+## Types
+
+### Underline (Default)
+
+<!-- placement: top, bottom, left, right -->
+
+{{< tabs placement="top" >}}
+{{% tab title="Tab 1" %}}Content for underline style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for underline style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for underline style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+### Pill
+
+<!-- placement: top, bottom, left, right -->
+
+{{< tabs type="pill" placement="top" >}}
+{{% tab title="Tab 1" %}}Content for pill style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for pill style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for pill style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+### Card
+
+<!-- placement: top, bottom, left, right -->
+
+{{< tabs type="card" placement="top" >}}
+{{% tab title="Tab 1" %}}Content for card style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for card style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for card style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+### Segment
+
+{{< tabs type="segment" >}}
+{{% tab title="Tab 1" %}}Content for segment style tab 1{{% /tab %}}
+{{% tab title="Tab 2" %}}Content for segment style tab 2{{% /tab %}}
+{{% tab title="Tab 3" %}}Content for segment style tab 3{{% /tab %}}
+{{< /tabs >}}
+
+## Nested Tabs
+
+{{< tabs defaultTab=0 >}}
+
+{{% tab title="Outer Tab 1" %}}
+This is the first outer tab with simple content.
+
+**Features:**
+
+- Basic text content
+- No nested components
+- Simple layout
+{{% /tab %}}
+
+{{% tab title="Outer Tab 2" %}}
+This outer tab contains nested tabs inside:
+
+{{< tabs type="pill" defaultTab=1 >}}
+
+{{% tab title="Inner A" %}}
+Nested tab A content with **bold text** and _italic text_.
+
+```javascript
+console.log('Hello from nested tab A!')
+```
+
+{{% /tab %}}
+
+{{% tab title="Inner B" %}}
+Nested tab B content with a list:
+
+1. First item
+2. Second item
+3. Third item
+
+> This is a blockquote inside a nested tab.
+{{% /tab %}}
+
+{{% tab title="Inner C" %}}
+Nested tab C with a table:
+
+| Feature    | Status | Notes                  |
+| :--------- | :----- | :--------------------- |
+| Responsive | ✅     | Works on all devices   |
+| Accessible | ✅     | Screen reader friendly |
+| Fast       | ✅     | Optimized performance  |
+
+{{% /tab %}}
+
+{{< /tabs >}}
+
+{{% /tab %}}
+
+{{% tab title="Outer Tab 3" %}}
+This tab contains vertical nested tabs:
+
+{{< tabs type="card" vertical=true >}}
+
+{{% tab title="Vertical A" %}}
+Content for vertical nested tab A.
+
+- Feature 1
+- Feature 2
+- Feature 3
+{{% /tab %}}
+
+{{% tab title="Vertical B" %}}
+Content for vertical nested tab B.
+
+```css
+.example {
+  color: #333;
+  background: #f5f5f5;
+  padding: 1rem;
+}
+```
+
+{{% /tab %}}
+
+{{< /tabs >}}
+
+{{% /tab %}}
+
+{{< /tabs >}}
+
+## Others
+
+### Mermaid Diagram inside Tabs
+
+{{< tabs >}}
+{{% tab title="Flowchart" %}}
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]
+```
+
+{{% /tab %}}
+{{% tab title="Gantt Chart" %}}
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+```
+
+{{% /tab %}}
+{{< /tabs >}}
+
+### File Tree inside Tabs
+
+{{< tabs >}}
+{{% tab title="File Tree Shortcode" %}}
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+{{% /tab %}}
+{{% tab title="File Tree Code Block" %}}
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+{{% /tab %}}
+{{< /tabs >}}

apps/test/data/filetree/example.yml

@@ -0,0 +1,38 @@
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: components
+          type: dir
+          children:
+            - name: Header.tsx
+              type: file
+            - name: Footer.tsx
+              type: file
+        - name: utils
+          type: dir
+          children:
+            - name: helper.ts
+              type: file
+            - name: validator.ts
+              type: file
+    - name: public
+      type: dir
+      children:
+        - name: favicon.ico
+          type: file
+        - name: images
+          type: dir
+          children:
+            - name: logo.png
+              type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+    - name: tsconfig.json
+      type: file

apps/test/hugo.toml

@@ -0,0 +1,51 @@
+# -------------------------------------------------------------------------------------
+# Hugo Configuration
+# See: https://gohugo.io/configuration/all/
+# -------------------------------------------------------------------------------------
+
+title = "Hugo FixIt TEST"
+baseURL = "https://demo.fixit.lruihao.cn/test/"
+ignoreLogs = [ "warning-file-tree" ]
+
+[permalinks]
+
+[permalinks.page]
+posts = "/units/:slugorcontentbasename"
+
+[permalinks.section]
+posts = "/units/"
+
+[markup]
+_merge = "shallow"
+
+[outputs]
+_merge = "shallow"
+
+# -------------------------------------------------------------------------------------
+# Taxonomies Configuration
+# See: https://gohugo.io/content-management/taxonomies/#configure-taxonomies
+# -------------------------------------------------------------------------------------
+
+[taxonomies]
+_merge = "shallow"
+
+# -------------------------------------------------------------------------------------
+# Theme Core Configuration
+# See: https://fixit.lruihao.cn/documentation/basics/#theme-configuration
+# -------------------------------------------------------------------------------------
+
+[params]
+version = "0.3.X"
+
+[params.page]
+collectionList = true
+collectionNavigation = true
+
+[params.author]
+name = "Lruihao"
+email = ""
+link = "https://lruihao.cn"
+avatar = "https://lruihao.cn/images/avatar.jpg"
+
+[params.mermaid]
+zenuml = "https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs"

apps/test/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@hugo-fixit/test",
+  "private": true,
+  "scripts": {
+    "build": "hugo --themesDir ../../.. --theme $PWD/../.. --gc --minify --logLevel info",
+    "dev": "hugo server --themesDir ../../.. --theme $PWD/../.. -D --disableFastRender --navigateToChanged --ignoreCache -O"
+  }
+}

archetypes/friends.md

@@ -28,7 +28,7 @@ comment: false
 
 Comment like this:
 
-````markdown
+````markdown {mode=mac}
 ```yaml
 - nickname: <your nickname>
   avatar: <your avatar>
@@ -37,10 +37,8 @@ Comment like this:
 ```
 ````
 
-{{< admonition info "Notice" true >}}
-
-1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
-2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
-3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.
-
-{{< /admonition >}}
+> [!NOTE]
+>
+> 1. If you want to exchange link, please leave a comment as the above format. (personal non-commercial blogs / websites only)
+> 2. :(fa-solid fa-exclamation-triangle): Website failure, stop maintenance and improper content may be unlinked!
+> 3. Those websites that do not respect other people's labor achievements, reprint without source, or malicious acts, please do not come to exchange.

archetypes/post-bundle/index.md

@@ -11,7 +11,6 @@ author:
   avatar:
 description:
 keywords:
-license:
 comment: false
 weight: 0
 tags:
@@ -28,13 +27,10 @@ resources:
     src: featured-image.jpg
   - name: featured-image-preview
     src: featured-image-preview.jpg
-toc: true
-math: false
-lightgallery: false
 password:
 message:
 repost:
-  enable: true
+  enable: false
   url:
 
 # See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter

archetypes/posts.md

@@ -11,7 +11,6 @@ author:
   avatar:
 description:
 keywords:
-license:
 comment: false
 weight: 0
 tags:
@@ -23,18 +22,12 @@ hiddenFromSearch: false
 hiddenFromRelated: false
 hiddenFromFeed: false
 summary:
-resources:
-  - name: featured-image
-    src: featured-image.jpg
-  - name: featured-image-preview
-    src: featured-image-preview.jpg
-toc: true
-math: false
-lightgallery: false
+featuredImagePreview:
+featuredImage:
 password:
 message:
 repost:
-  enable: true
+  enable: false
   url:
 
 # See details front matter: https://fixit.lruihao.cn/documentation/content-management/introduction/#front-matter

archetypes/search.md

@@ -2,4 +2,6 @@
 title: {{ T "assets.search" }}
 layout: search
 date: {{ .Date }}
+description:
+keywords:
 ---

assets/css/_core/_base.scss

@@ -26,14 +26,9 @@ html {
 }
 
 body {
-  background-color: $global-background-color;
-  color: $global-font-color;
+  background-color: var(#{$rootPrefix}global-background-color);
+  color: var(#{$rootPrefix}global-font-color);
   @include overflow-wrap(break-word);
-
-  [data-theme='dark'] & {
-    color: $global-font-color-dark;
-    background-color: $global-background-color-dark;
-  }
 }
 
 iframe {
@@ -54,6 +49,45 @@ abbr[title] {
   text-decoration-skip-ink: none;
 }
 
+img {
+  object-fit: cover;
+}
+
+img,video {
+  max-width: 100%;
+  height: auto;
+}
+
+dialog {
+  padding: 0;
+}
+
+details {
+  &.center {
+    summary {
+      text-align: center;
+    }
+  }
+}
+
+%code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: $code-font-size;
+  line-height: $code-font-size;
+  font-family: $code-font-family;
+  color: $code-color;
+  background-color: var(#{$rootPrefix}code-inline-background-color);
+  text-decoration: inherit;
+  @include border-radius($global-border-radius);
+  @include overflow-wrap(break-word);
+  @include line-break(auto);
+
+  [data-theme='dark'] & {
+    color: $code-color-dark;
+  }
+}
+
 @include link(true, true);
 
 @import '../_partials/scrollbar';

assets/css/_core/_breadcrumb.scss

@@ -1,12 +1,21 @@
 .breadcrumb-container {
   padding-inline: 1rem;
   font-size: 0.75rem;
-  background-color: $global-background-color;
+  background-color: var(#{$rootPrefix}global-background-color);
+  display: flex;
+  gap: 0.5rem;
   @include z-index(1);
   @extend .print-d-none;
 
-  [data-theme='dark'] & {
-    background-color: $global-background-color-dark;
+  &:has(~ main[data-reverse]) {
+    flex-direction: row-reverse;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    padding-inline: 0.5rem;
   }
 
   &.sticky {
@@ -34,15 +43,11 @@
         content: attr(data-separator);
         display: inline-block;
         padding-inline: 0.5rem;
-        color: $global-font-secondary-color;
-
-        [data-theme='dark'] & {
-          color: $global-font-secondary-color-dark;
-        }
+        color: var(#{$rootPrefix}global-font-secondary-color);
       }
 
       &.active {
-        color: var(--#{$prefix}secondary);
+        color: var(#{$rootPrefix}secondary);
       }
     }
   }

assets/css/_core/_common.scss

@@ -41,7 +41,7 @@
 
 @each $color, $value in $theme-colors {
   .text-#{$color} {
-    color: var(--#{$prefix}#{$color}) !important;
+    color: var(#{$rootPrefix}#{$color}) !important;
   }
 }
 

assets/css/_core/_header.scss

@@ -27,6 +27,7 @@ header {
 }
 
 .header-title {
+  font-size: $header-title-font-size;
   font-family: $header-title-font-family;
   font-weight: bold;
   margin-right: 0.5rem;
@@ -39,8 +40,9 @@ header {
   .logo {
     min-height: 1.5em;
     height: 1.5em;
-    vertical-align: middle;
     width: auto;
+    vertical-align: top;
+    transform: translateY(calc(#{$header-height} / 2 - 50%));
   }
 
   .header-title-text {
@@ -72,14 +74,10 @@ header {
   .menu-item {
     list-style: none;
 
-    & .dropdown-icon {
+    .dropdown-icon {
       margin-left: 0.25rem;
       font-size: .875em;
-      color: $global-font-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-color-dark;
-      }
+      color: var(#{$rootPrefix}global-font-color);
 
       &.open::before {
         content: "\f078";
@@ -110,11 +108,6 @@ header {
     .menu-link:hover i {
       @include transform(perspective(1rem) translateZ(0.2rem));
     }
-
-    &.language-switch,
-    &.theme-switch {
-      cursor: pointer;
-    }
   }
 }
 
@@ -163,14 +156,13 @@ header {
   .open &,
   &.mobile {
     input {
-      color: $global-font-color;
+      color: var(#{$rootPrefix}global-font-color);
       background-color: $search-background-color;
       padding: 0 2rem 0 2rem;
     }
 
     [data-theme='dark'] & {
       input {
-        color: $global-font-color-dark;
         background-color: $search-background-color-dark;
       }
 
@@ -180,11 +172,7 @@ header {
     @include placeholder($global-font-secondary-color);
 
     .search-button {
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
-      }
+      color: var(#{$rootPrefix}global-font-secondary-color);
     }
 
     .search-clear:hover {
@@ -200,11 +188,7 @@ header {
 .theme-switch {
   i {
     @include transform(rotate(225deg));
-    @include transition(transform 0.4s ease);
-  }
-
-  &:hover i {
-    @include transform(rotate(45deg));
+    @include transition(all 0.4s ease);
   }
 }
 
@@ -235,7 +219,6 @@ header {
     }
 
     .header-title {
-      font-size: $header-title-font-size;
       height: 100%;
     }
 
@@ -245,11 +228,16 @@ header {
       flex-wrap: nowrap;
       float: right;
 
-      >.menu-item {
+      > .menu-item {
         &:hover .sub-menu {
           display: block;
           @include transform(translateX(-0.5rem));
         }
+        &.theme-switch {
+          &:hover i {
+            @include transform(rotate(45deg));
+          }
+        }
         &.language-switch:hover .sub-menu {
           @include transform(translateX(calc(1.75rem - 100%)));
         }
@@ -330,19 +318,18 @@ header {
       @include transition(margin-top 0.3s ease);
 
       .header-title {
-        font-size: $header-title-font-size;
         max-width: 80%;
       }
 
-      .menu-toggle {
-        line-height: 4rem;
-        cursor: pointer;
-        @include transition(width 0.3s ease);
+      .theme-switch {
+        line-height: 1.25em;
+      }
 
+      .menu-toggle {
         span {
           display: block;
           background: $global-font-color;
-          width: 1.5rem;
+          width: 20px;
           height: 2px;
           @include border-radius(3px);
           @include transition(all 0.3s ease-in-out);
@@ -352,17 +339,13 @@ header {
           }
         }
 
-        span:nth-child(1) {
-          margin-bottom: 0.5rem;
-        }
-
-        span:nth-child(3) {
-          margin-top: 0.5rem;
+        span:not(:last-child) {
+          margin-bottom: 6px;
         }
 
         &.active {
           span:nth-child(1) {
-            @include transform(rotate(45deg) translate(0.4rem, 0.5rem));
+            @include transform(translateY(8px) rotate(45deg));
           }
 
           span:nth-child(2) {
@@ -370,7 +353,7 @@ header {
           }
 
           span:nth-child(3) {
-            @include transform(rotate(-45deg) translate(0.4rem, -0.5rem));
+            @include transform(translateY(-8px) rotate(-45deg));
           }
         }
       }
@@ -561,11 +544,7 @@ header {
 
   .dropdown-menu {
     right: 0 !important;
-    background-color: $global-background-color;
-
-    [data-theme='dark'] & {
-      background-color: $global-background-color-dark;
-    }
+    background-color: var(#{$rootPrefix}global-background-color);
 
     .suggestions {
       overflow-y: auto;
@@ -588,25 +567,18 @@ header {
           font-size: 0.875rem;
           float: right;
           text-align: right;
-          color: $global-font-secondary-color;
-
-          [data-theme='dark'] & {
-            color: $global-font-secondary-color-dark;
-          }
+          color: var(#{$rootPrefix}global-font-secondary-color);
         }
 
         .suggestion-context {
           line-height: 1.25rem;
           @include box(vertical);
           -webkit-line-clamp: 2;
+          line-clamp: 2;
           overflow: hidden;
           text-overflow: ellipsis;
           @include overflow-wrap(break-word);
-          color: $global-font-secondary-color;
-
-          [data-theme='dark'] & {
-            color: $global-font-secondary-color-dark;
-          }
+          color: var(#{$rootPrefix}global-font-secondary-color);
         }
 
         em {
@@ -649,11 +621,7 @@ header {
       padding: 0.5rem 1rem;
       float: right;
       font-size: 0.8rem;
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] {
-        color: $global-font-secondary-color-dark;
-      }
+      color: var(#{$rootPrefix}global-font-secondary-color);
 
       @include link(false, false);
 

assets/css/_core/_layout.scss

@@ -11,20 +11,21 @@
     aside {
       flex: 1;
       padding: 0.5rem;
+      max-width: 500px;
 
       &:not(:has(~ aside)) {
         display: none;
       }
     }
 
-    &.container {
+    &.fi-container {
       display: flex;
       align-items: flex-start;
       justify-content: center;
       padding-inline: 1rem;
       gap: 0.5rem;
 
-      &.container-reverse {
+      &[data-reverse] {
         flex-direction: row-reverse;
       }
 

assets/css/_core/_media.scss

@@ -1,9 +1,11 @@
 @media only screen and (min-width: 1441px) {
   %page-style {
     width: ROUND(60%, 2px);
+    max-width: 1200px;
 
     [data-page-style='wide'] & {
       width: ROUND(64%, 2px);
+      max-width: 1600px;
     }
 
     [data-page-style='narrow'] & {
@@ -22,6 +24,37 @@
   }
 }
 
+@media only screen and (min-width: 1201px) {
+  .single .content {
+    :is(.code-block, .diagram-container) {
+      :is(.code-copy-btn, .diagram-copy-btn) {
+        display: none;
+        opacity: 0;
+        transform: scale(0.9);
+        transition:
+          display 0.25s allow-discrete,
+          opacity 0.25s,
+          transform 0.25s,
+          color 0.1s,
+          background-color 0.1s,
+          box-shadow 0.1s,
+          border-color 0.1s;
+      }
+      &:hover {
+        :is(.code-copy-btn, .diagram-copy-btn) {
+          display: block;
+          opacity: 1;
+          transform: scale(1);
+          @starting-style {
+            opacity: 0;
+            transform: scale(0.9);
+          }
+        }
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 1200px) {
   %page-style {
     width: ROUND(52%, 2px);
@@ -40,12 +73,51 @@
   }
 }
 
+@media only screen and (max-width: 1200px) and (min-width: 961px) {
+  .wrapper {
+    main {
+      // Hide empty aside and expand article when only one aside is empty
+      aside:first-child:empty:has(~ aside:not(:empty)),
+      aside:first-child:not(:empty) ~ aside#toc-auto:empty {
+        display: none;
+      }
+  
+      aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
+      aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
+        flex: 3;
+      }
+    }
+
+    // Adjust breadcrumb flex when asides are empty
+    &:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+    &:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 960px) {
   %page-style {
     width: ROUND(80%, 2px) !important;
   }
   
-  aside {
+  aside,
+  .breadcrumb-container::before,
+  .breadcrumb-container::after {
     display: none !important;
   }
 
@@ -67,13 +139,24 @@
       top: 0;
     }
     // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-desktop='auto']) &+.container .content [id] {
-      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
+    body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
+      scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
     }
   }
 
   [data-header-desktop='normal'] .page .content [id] {
-    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+  [data-header-desktop='normal'] {
+    #toc-auto,
+    .aside-collection {
+      top: 0;
+    }
+  }
+  [data-header-desktop='sticky'] {
+    .page .content .highlight.code-block .code-header {
+      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+    }
   }
 }
 
@@ -95,13 +178,24 @@
       top: 0;
     }
     // adjust the scroll margin top of the content anchors on the page
-    body:not([data-header-mobile='auto']) &+.container .content [id] {
-      scroll-margin-top: calc(var(--#{$prefix}scroll-mt) + var(--#{$prefix}breadcrumb-height));
+    body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
+      scroll-margin-top: calc(var(#{$rootPrefix}scroll-mt) + var(#{$rootPrefix}breadcrumb-height));
     }
   }
 
   [data-header-mobile='normal'] .page .content [id] {
-    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
+  }
+  [data-header-mobile='normal'] {
+    #toc-auto,
+    .aside-collection {
+      top: 0;
+    }
+  }
+  [data-header-mobile='sticky'] {
+    .page .content .highlight.code-block .code-header {
+      top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
+    }
   }
   
   %page-style {
@@ -109,8 +203,7 @@
   }
 
   .page {
-    .categories-card,
-    .collections-card {
+    .taxonomy-cards {
       .card-item {
         width: 100%;
       }
@@ -129,6 +222,23 @@
 }
 
 @media only print {
+
+  // 确保打印时没有 scrollbar
+  :root {
+    #{$rootPrefix}scrollbar-width: none !important;
+  }
+
+  *::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  .scrollbar-thin {
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+  }
+  
   @page {
     size: A4 portrait;
     margin: 1.27cm;

assets/css/_core/_patch.scss

@@ -27,9 +27,11 @@
   @media only screen and (min-width: 1441px) {
     %page-style {
       width: 60%;
+      max-width: 1200px;
   
       [data-page-style='wide'] & {
         width: 64%;
+         max-width: 1600px;
       }
   
       [data-page-style='narrow'] & {
@@ -66,3 +68,8 @@
     }
   }
 }
+
+// fix ZenUML intersection height error
+#zenuml-intersection-detector-container {
+  display: none;
+}

assets/css/_core/_root.scss

@@ -2,41 +2,68 @@
   // Note: Custom variable values only support SassScript inside `#{}`.
   // TODO migrate SCSS variables to CSS variables
 
-  --#{$prefix}global-font-color: #{$global-font-color};
-  --#{$prefix}global-border-color: #{$global-border-color};
+  interpolate-size: allow-keywords;
+
+  // Global colors variables
+  #{$rootPrefix}global-background-color: #{$global-background-color};
+  #{$rootPrefix}global-font-color: #{$global-font-color};
+  #{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color};
+  #{$rootPrefix}global-border-color: #{$global-border-color};
+  #{$rootPrefix}global-link-color: #{$global-link-color};
+  #{$rootPrefix}global-link-hover-color: #{$global-link-hover-color};
+
+  // Scroll margin top and Stack sticky top related
+  #{$rootPrefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
+
+  // Set breadcrumb height to 0px if breadcrumb is disabled
+  #{$rootPrefix}breadcrumb-height: 0px;
+
+  // hr / divider style
+  #{$rootPrefix}hr-background-color: #{darken($global-border-color, 5%)};
+  #{$rootPrefix}hr-active-color: #{lighten($single-link-hover-color, 4%)};
+  #{$rootPrefix}divider-edge-weak: linear-gradient(to right, transparent, var(#{$rootPrefix}divider-bg, #d0d0d5), transparent);
+
+  // Scrollbar related variables
+  #{$rootPrefix}scrollbar-thumb-color: #{$scrollbar-color};
+  #{$rootPrefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
+  #{$rootPrefix}scrollbar-track-color: transparent;
+  #{$rootPrefix}scrollbar-width: thin;
+  #{$rootPrefix}scrollbar-width-legacy: 12px;
+
+  // Code related variables
+  #{$rootPrefix}code-inline-background-color: rgba(175, 184, 193, 0.2);
+  #{$rootPrefix}code-block-background-color: #{$code-background-color};
+  #{$rootPrefix}code-header-color: #{$code-header-color};
+  #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 5%)};
+  #{$rootPrefix}code-highlight-color: #{$code-highlight-color};
+  #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color, 5%)};
 
   // Theme colors variables
   @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{$value};
+    #{$rootPrefix}#{$color}: #{$value};
   }
-
-  // Scroll margin top and Stack sticky top related
-  --#{$prefix}scroll-mt: calc(#{$header-height} + #{$global-scroll-margin-top});
-
-  // Set breadcrumb height to 0px if breadcrumb is disabled
-  --#{$prefix}breadcrumb-height: 0px;
-
-  // hr style
-  --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
-  --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
-
-  // Scrollbar related variables
-  --#{$prefix}scrollbar-thumb-color: #{$scrollbar-color};
-  --#{$prefix}scrollbar-thumb-hover-color: #{$scrollbar-hover-color};
-  --#{$prefix}scrollbar-track-color: transparent;
-  --#{$prefix}scrollbar-width: thin;
-  --#{$prefix}scrollbar-width-legacy: 12px;
 }
 
 // Dark theme
 [data-theme=dark] {
-  --#{$prefix}global-font-color: #{$global-font-color-dark};
-  --#{$prefix}global-border-color: #{$global-border-color-dark};
+  #{$rootPrefix}global-background-color: #{$global-background-color-dark};
+  #{$rootPrefix}global-font-color: #{$global-font-color-dark};
+  #{$rootPrefix}global-font-secondary-color: #{$global-font-secondary-color-dark};
+  #{$rootPrefix}global-border-color: #{$global-border-color-dark};
+  #{$rootPrefix}global-link-color: #{$global-link-color-dark};
+  #{$rootPrefix}global-link-hover-color: #{$global-link-hover-color-dark};
+
+  #{$rootPrefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
+  #{$rootPrefix}hr-active-color: #{darken($global-link-hover-color-dark, 4%)};
+
+  #{$rootPrefix}code-inline-background-color: rgba(99, 110, 123, 0.4);
+  #{$rootPrefix}code-block-background-color: #{$code-background-color-dark};
+  #{$rootPrefix}code-header-color: #{$code-header-color-dark};
+  #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 5%)};
+  #{$rootPrefix}code-highlight-color: #{$code-highlight-color-dark};
+  #{$rootPrefix}gist-meta-background-color: #{darken($code-background-color-dark, 5%)};
 
   @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}: #{darken($value, 5%)};
+    #{$rootPrefix}#{$color}: #{darken($value, 5%)};
   }
-
-  --#{$prefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
-  --#{$prefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
 }

assets/css/_mixin/_blur.scss

@@ -1,4 +1,5 @@
 @mixin blur {
+  // TODO refactor blur with backdrop-filter
   .blur & {
     @include filter(blur(1.5px));
   }

assets/css/_mixin/_compatibility.scss

@@ -83,6 +83,7 @@
   -webkit-appearance: $value;
 }
 
+// TODO Superseded by text-wrap: wrap; in modern browsers
 @mixin overflow-wrap($value) {
   word-wrap: $value;
   overflow-wrap: $value;

assets/css/_mixin/_details.scss

@@ -1,15 +0,0 @@
-@mixin details-transition-open {
-  @include transition(max-height 0.2s cubic-bezier(0, 1, 0, 1) -0.1s);
-}
-
-@mixin details-transition-close {
-  @include transition(max-height 0.2s cubic-bezier(0.5, 0, 1, 0) 0s);
-}
-
-details {
-  &.center {
-    summary {
-      text-align: center;
-    }
-  }
-}

assets/css/_mixin/_index.scss

@@ -1,6 +1,6 @@
+@import '_blur';
 @import '_compatibility';
 @import '_link';
-@import '_blur';
-@import '_details';
+@import '_loading';
 @import '_scrollbar-width';
 @import '_z-index';

assets/css/_mixin/_link.scss

@@ -3,6 +3,7 @@
  * @param {Boolean} $light use global link color
  * @param {Boolean} $dark use global link color dark
  * @param {String} $decoration text-decoration, default none
+ * TODO refactor to use CSS variables
  */
 @mixin link($light, $dark, $decoration: none) {
   a,

assets/css/_mixin/_loading.scss

@@ -0,0 +1,15 @@
+// Loading Mixin for before/after pseudo element
+@mixin loading {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(1rem);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(#{$rootPrefix}loading-img);
+  background-size: 60px;
+  @include z-index(0, 10);
+}

assets/css/_mixin/_scrollbar-width.scss

@@ -1,4 +1,4 @@
 @mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
-  --#{$prefix}scrollbar-width: #{$width};
-  --#{$prefix}scrollbar-width-legacy: #{$widthLegacy};
+  #{$rootPrefix}scrollbar-width: #{$width};
+  #{$rootPrefix}scrollbar-width-legacy: #{$widthLegacy};
 }

assets/css/_page/_home.scss

@@ -62,11 +62,7 @@
       font-weight: normal;
       margin: 0;
       padding: 0.5rem;
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
-      }
+      color: var(#{$rootPrefix}global-font-secondary-color);
     }
   }
 }
@@ -82,7 +78,7 @@
 
   .summary {
     padding-block: 1rem;
-    color: var(--#{$prefix}global-font-color);
+    color: var(#{$rootPrefix}global-font-color);
 
     &:not(:last-of-type)::after {
       content: '';
@@ -92,8 +88,8 @@
       transform: translateY(18px);
       background: repeating-linear-gradient(
         135deg,
-        var(--#{$prefix}hr-background-color) 0px,
-        var(--#{$prefix}hr-background-color) 4px,
+        var(#{$rootPrefix}hr-background-color) 0px,
+        var(#{$rootPrefix}hr-background-color) 4px,
         transparent 4px,
         transparent 8px
       );
@@ -133,21 +129,12 @@
 
     .content {
       margin-top: 0.3rem;
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
-      }
-
+      color: var(#{$rootPrefix}global-font-secondary-color);
       @include link(false, true);
 
       b,
       strong {
-        color: $global-font-secondary-color;
-
-        [data-theme='dark'] & {
-          color: $global-font-secondary-color-dark;
-        }
+        color: var(#{$rootPrefix}global-font-secondary-color);
       }
     }
 

assets/css/_page/_index.scss

@@ -4,7 +4,7 @@
 
   .content {
     [id] {
-      scroll-margin-top: var(--#{$prefix}scroll-mt);
+      scroll-margin-top: var(#{$rootPrefix}scroll-mt);
     }
   }
 

assets/css/_page/_single.scss

@@ -1,6 +1,8 @@
 @import '../_partials/_single/toc';
 @import '../_partials/_single/fixit-decryptor';
 @import '../_partials/_single/collections';
+@import '../_partials/_single/related';
+@import '../_partials/_single/color-preview';
 
 .single {
   .single-title {
@@ -15,14 +17,14 @@
       width: max-content;
       transform: rotate(30deg);
       margin-right: 0.25em;
-      color: var(--#{$prefix}danger);
+      color: var(#{$rootPrefix}danger);
     }
 
     .icon-repost {
       display: inline-block;
       width: max-content;
       margin-right: 0.25em;
-      color: var(--#{$prefix}success);
+      color: var(#{$rootPrefix}success);
     }
   }
 
@@ -35,7 +37,7 @@
 
   .post-meta {
     font-size: 0.875rem;
-    color: $global-font-secondary-color;
+    color: var(#{$rootPrefix}global-font-secondary-color);
 
     .comment-visitors,
     .comment-count {
@@ -46,10 +48,6 @@
       display: inline-block;
     }
 
-    [data-theme='dark'] & {
-      color: $global-font-secondary-color-dark;
-    }
-
     @include link(false, true);
 
     .author {
@@ -89,16 +87,16 @@
     content: attr(data-end-flag);
     display: block;
     text-align: center;
-    color: $global-font-secondary-color;
     font-size: 15px;
     padding: 5px;
+    color: var(#{$rootPrefix}global-font-secondary-color);
   }
 
   hr {
     position: relative;
     height: 1em;
     margin-block: 1em;
-    background: linear-gradient(to right, var(--#{$prefix}hr-background-color) 50%, transparent 50%);
+    background: linear-gradient(to right, var(#{$rootPrefix}hr-background-color) 50%, transparent 50%);
     background-size: 10px 2px;
     background-position: center;
     background-repeat: repeat-x;
@@ -107,8 +105,6 @@
     &.awesome-hr {
       &::before {
         display: inline-block;
-        font-weight: 600;
-        font-family: 'Font Awesome 6 Free';
         text-rendering: auto;
         -webkit-font-smoothing: antialiased;
         position: absolute;
@@ -116,11 +112,13 @@
         top: 50%;
         transform: translateY(-50%);
         z-index: 1;
-        color: var(--#{$prefix}hr-before-color);
-        content: '\f0c4';
+        color: var(#{$rootPrefix}hr-active-color);
         font-size: 20px;
         line-height: 1;
         transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
+        font-family: var(--fa-family-classic);
+        font-weight: 600;
+        content: '\f0c4';
       }
     
       &:hover::before {
@@ -154,7 +152,7 @@
       font-size: 0.85em;
     }
 
-    > .heading-element {
+    .heading-element {
       display: flex;
       font-weight: bold;
       line-height: 1.25;
@@ -165,11 +163,6 @@
         font-weight: bolder;
       }
 
-      code {
-        padding: 0 .2em;
-        font-size: inherit;
-      }
-
       &:hover,
       &:target {
         > .heading-mark {
@@ -239,31 +232,31 @@
 
     // Task lists
     li[data-task] {
-      color: var(--#{$prefix}task-color);
+      color: var(#{$rootPrefix}task-color);
       .checkbox-icon {
         margin-right: 0.25em;
-        color: var(--#{$prefix}checkbox-color);
+        color: var(#{$rootPrefix}checkbox-color);
       }
     }
     li[data-task='x'],
     li[data-task='-'] {
-      --#{$prefix}task-color: var(--#{$prefix}secondary);
+      #{$rootPrefix}task-color: var(#{$rootPrefix}secondary);
       text-decoration: line-through rgba(145, 145, 145, 0.6);
     }
     li[data-task='x'] {
-      --#{$prefix}checkbox-color: var(--#{$prefix}primary);
+      #{$rootPrefix}checkbox-color: var(#{$rootPrefix}primary);
     }
     li[data-task='-'] {
       opacity: 0.6;
     }
     li[data-task='/'] {
-      --#{$prefix}task-color: var(--#{$prefix}success);
+      #{$rootPrefix}task-color: var(#{$rootPrefix}success);
     }
     li[data-task='!'] {
-      --#{$prefix}checkbox-color: var(--#{$prefix}danger);
+      #{$rootPrefix}checkbox-color: var(#{$rootPrefix}danger);
     }
     li[data-task='?'] {
-      --#{$prefix}checkbox-color: var(--#{$prefix}warning);
+      #{$rootPrefix}checkbox-color: var(#{$rootPrefix}warning);
     }
 
     dl {
@@ -276,31 +269,23 @@
     }
 
     ruby {
-      background: $code-background-color;
+      background-color: var(#{$rootPrefix}code-block-background-color);
 
       rt {
-        color: $global-font-secondary-color;
-      }
-
-      [data-theme='dark'] & {
-        background: $code-background-color-dark;
-
-        rt {
-          color: $global-font-secondary-color-dark;
-        }
+        color: var(#{$rootPrefix}global-font-secondary-color);
       }
     }
 
     mark {
       padding: 0.14em 0.28em;
-      background-color: var(--#{$prefix}mark-background-color, mark);
-      color: var(--#{$prefix}mark-color, marktext);
+      background-color: var(#{$rootPrefix}mark-background-color, mark);
+      color: var(#{$rootPrefix}mark-color, marktext);
       @include border-radius($global-border-radius);
 
       @each $color, $value in $theme-colors {
         &.mark-#{$color} {
-          --#{$prefix}mark-color: #fff;
-          --#{$prefix}mark-background-color: var(--#{$prefix}#{$color});
+          #{$rootPrefix}mark-color: #fff;
+          #{$rootPrefix}mark-background-color: var(#{$rootPrefix}#{$color});
         }
       }
     }
@@ -308,10 +293,10 @@
     .table-wrapper {
       position: relative;
       overflow-x: auto;
-      --#{$prefix}scrollbar-thumb-color: #{$table-background-color};
+      #{$rootPrefix}scrollbar-thumb-color: #{$table-background-color};
 
       [data-theme='dark'] & {
-        --#{$prefix}scrollbar-thumb-color: #{$table-background-color-dark};
+        #{$rootPrefix}scrollbar-thumb-color: #{$table-background-color-dark};
       }
 
       > table {
@@ -366,36 +351,9 @@
 
     img {
       max-width: 100%;
-      min-height: 1em;
-
-      &:not([height]) {
-        height: auto;
-      }
-
-      &[loading='lazy'][srcset]:not([data-lazyloaded]) {
-        &:not(.suffix-invalid__small) {
-          width: var(--width-small, var(--width));
-          aspect-ratio: var(--aspect-ratio-small, var(--aspect-ratio));
-        }
-
-        &:not(.suffix-invalid) {
-          @media (min-resolution: 1.01dppx) and (max-resolution: 1.5dppx) {
-            width: calc(var(--width) / 1.5);
-            aspect-ratio: var(--aspect-ratio);
-          }
-        }
-
-        &:not(.suffix-invalid__large) {
-          @media (min-resolution: 1.51dppx) {
-            width: calc(var(--width-large, var(--width)) / 2);
-            aspect-ratio: var(--aspect-ratio-large, var(--aspect-ratio));
-          }
-        }
-      }
-
-      &.version {
-        height: 1.25em;
-        vertical-align: text-bottom;
+      // SVG performs differently in Safari compared to other browsers
+      &:not([src*='.svg']) {
+        min-height: 1em;
       }
     }
     svg {
@@ -419,6 +377,7 @@
       img {
         display: block;
         margin: 0 auto;
+        height: auto;
         overflow: hidden;
       }
     }
@@ -473,7 +432,7 @@
       }
       
       hr {
-        background-color: var(--#{$prefix}hr-background-color);
+        background-color: var(#{$rootPrefix}hr-background-color);
         height: 1px;
         margin-block: 1em;
       }
@@ -501,7 +460,7 @@
     kbd {
       display: inline-block;
       padding: 0 0.25rem;
-      background-color: $global-background-color;
+      background-color: var(#{$rootPrefix}global-background-color);
       border: 1px solid $global-border-color;
       font-size: 0.8rem;
       font-family: $code-font-family;
@@ -510,25 +469,53 @@
       @include box-shadow(inset 0 -1px 0 $global-border-color);
 
       [data-theme='dark'] & {
-        background-color: $global-background-color-dark;
         border: 1px solid $global-border-color-dark;
         color: $code-color-dark;
         @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
       }
     }
 
-    // Katex styles
+    // KaTeX styles
     .katex-display {
       max-width: 100%;
       overflow-x: auto;
-      padding-block: 2px;
+      overflow-y: hidden;
+    }
+    .katex-error {
+      padding: 0.14em 0.28em;
+      background-color: mark;
+      cursor: help;
+      @include border-radius($global-border-radius);
     }
 
-    @import '../_partials/_single/alert';
-    @import '../_partials/_single/code';
-    @import '../_shortcodes';
+    // MathJax styles
+    mjx-container[jax='CHTML'][display='true'] {
+      max-width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      // fix the color of xypic diagrams
+      mjx-xypic {
+        g {
+          stroke: currentColor !important;
+        }
+        mjx-xypic-object {
+          color: currentColor !important;
+          fill: currentColor !important;
+        }
+      }
+    }
+
+    json-viewer[boxed] + json-viewer[boxed] {
+      margin-top: 0.5rem;
+    }
   }
 
+  // TODO Reorganization import
+  @import '../_shortcodes';
+  @import '../_partials/_single/alert';
+  @import '../_partials/_single/code';
+  @import '../_partials/_single/diagram-copy-btn';
   @import '../_partials/_single/reward';
   @import '../_partials/_single/footer';
   @import '../_partials/_single/comment';

assets/css/_partials/_archive/_tags.scss

@@ -1,8 +1,6 @@
 .tag-cloud-tags {
   margin: 10px 0;
 
-  @include link(true, true);
-
   a {
     display: inline-block;
     position: relative;
@@ -16,21 +14,13 @@
       @include transform(scale(1.2));
 
       sup {
-        color: $global-font-color;
+        color: var(#{$rootPrefix}global-font-color);
         @include transition(all ease-out 0.3s);
-
-        [data-theme='dark'] & {
-          color: $global-font-color-dark;
-        }
       }
     }
 
     sup {
-      color: $global-font-secondary-color;
-
-      [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
-      }
+      color: var(#{$rootPrefix}global-font-secondary-color);
     }
   }
 }
@@ -40,18 +30,14 @@
   $tag-cloud-color-dark: mix($tag-cloud-end-dark, $tag-cloud-start-dark, $grade * 10);
 
   .tag-cloud-#{$grade} {
-    color: $tag-cloud-color!important;
+    color: $tag-cloud-color;
     font-size: var(--tag-font);
-    margin: 10px!important;
+    margin: 10px !important;
 
     &:active,
     &:focus,
     &:hover {
-      color: $global-link-hover-color!important;
-
-      [data-theme='dark'] & {
-        color: $global-link-hover-color-dark;
-      }
+      color: var(#{$rootPrefix}global-link-hover-color) !important;
 
       sup {
         opacity: 1;
@@ -59,7 +45,7 @@
     }
 
     [data-theme='dark'] & {
-      color: $tag-cloud-color-dark!important;
+      color: $tag-cloud-color-dark;
     }
 
     sup {

assets/css/_partials/_archive/_terms.scss

@@ -1,5 +1,4 @@
-.categories-card,
-.collections-card {
+.taxonomy-cards {
   margin: 0 auto;
   display: flex;
   align-items: flex-start;
@@ -55,30 +54,14 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-
-  &:hover {
-    color: $global-link-hover-color;
-    background-color: transparent;
-  }
-
-  [data-theme='dark'] & {
-    color: $global-link-color-dark;
-
-    &:hover {
-      color: $global-link-hover-color-dark;
-    }
-  }
+  @include link(true, true);
 }
 
 .archive-item-date {
   text-align: right;
-  color: $global-font-secondary-color;
+  color: var(#{$rootPrefix}global-font-secondary-color);
   white-space: nowrap;
   font-variant-numeric: tabular-nums lining-nums;
-
-  [data-theme='dark'] & {
-    color: $global-font-secondary-color-dark;
-  }
 }
 
 .more-post {

assets/css/_partials/_code-syntax/_dark.scss

@@ -0,0 +1,104 @@
+/* Maintained by @Lruihao for FixIt theme */
+
+// /* Background */ .bg { }
+// /* PreWrapper */ .chroma { }
+// /* LineLink */ .chroma .lnlinks { }
+// /* LineTableTD */ .chroma .lntd { }
+// /* LineTable */ .chroma .lntable { }
+// /* LineHighlight */ .chroma .hl { }
+// /* LineNumbersTable */ .chroma .lnt { }
+// /* LineNumbers */ .chroma .ln { }
+// /* Line */ .chroma .line { }
+/* Error */ .chroma .err { color: $code-error-color; }
+/* Keyword */ .chroma .k { color:#f47067 }
+/* KeywordConstant */ .chroma .kc { color:#6cb6ff }
+/* KeywordDeclaration */ .chroma .kd { color:#f47067 }
+/* KeywordNamespace */ .chroma .kn { color:#f47067 }
+/* KeywordPseudo */ .chroma .kp { color:#f47067 }
+/* KeywordReserved */ .chroma .kr { color:#f47067 }
+/* KeywordType */ .chroma .kt { color:#f47067 }
+/* Name */ .chroma .n { color:$code-color-dark }
+/* NameAttribute */ .chroma .na { color:#6cb6ff }
+/* NameBuiltin */ .chroma .nb { color:#dcbdfb }
+/* NameBuiltinPseudo */ .chroma .bp { color:$code-color-dark }
+/* NameClass */ .chroma .nc { color:#dcbdfb }
+/* NameConstant */ .chroma .no { color:#6cb6ff }
+/* NameDecorator */ .chroma .nd { color:#dcbdfb }
+/* NameEntity */ .chroma .ni { color:#6cb6ff }
+/* NameException */ .chroma .ne { color:#6cb6ff }
+/* NameFunction */ .chroma .nf { color:#dcbdfb }
+/* NameFunctionMagic */ .chroma .fm { color:#6cb6ff }
+/* NameLabel */ .chroma .nl { color:#6cb6ff }
+/* NameNamespace */ .chroma .nn { color:#f47067 }
+/* NameOther */ .chroma .nx { color:#dcbdfb }
+/* NameProperty */ .chroma .py { color:#6cb6ff }
+/* NameTag */ .chroma .nt { color:#8ddb8c }
+/* NameVariable */ .chroma .nv { color:#f69d50 }
+/* NameVariableClass */ .chroma .vc { color:#6cb6ff }
+/* NameVariableGlobal */ .chroma .vg { color:#6cb6ff }
+/* NameVariableInstance */ .chroma .vi { color:#6cb6ff }
+/* NameVariableMagic */ .chroma .vm { color:#6cb6ff }
+/* Literal */ .chroma .l { color:#6cb6ff }
+/* LiteralDate */ .chroma .ld { color:#96d0ff }
+/* LiteralString */ .chroma .s { color:#96d0ff }
+/* LiteralStringAffix */ .chroma .sa { color:#96d0ff }
+/* LiteralStringBacktick */ .chroma .sb { color:#96d0ff }
+/* LiteralStringChar */ .chroma .sc { color:#96d0ff }
+/* LiteralStringDelimiter */ .chroma .dl { color:#96d0ff }
+/* LiteralStringDoc */ .chroma .sd { color:#96d0ff }
+/* LiteralStringDouble */ .chroma .s2 { color:#96d0ff }
+/* LiteralStringEscape */ .chroma .se { color:#96d0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color:#96d0ff }
+/* LiteralStringInterpol */ .chroma .si { color:#96d0ff }
+/* LiteralStringOther */ .chroma .sx { color:#96d0ff }
+/* LiteralStringRegex */ .chroma .sr { color:#96d0ff }
+/* LiteralStringSingle */ .chroma .s1 { color:#96d0ff }
+/* LiteralStringSymbol */ .chroma .ss { color:#96d0ff }
+/* LiteralNumber */ .chroma .m { color:#6cb6ff }
+/* LiteralNumberBin */ .chroma .mb { color:#6cb6ff }
+/* LiteralNumberFloat */ .chroma .mf { color:#6cb6ff }
+/* LiteralNumberHex */ .chroma .mh { color:#6cb6ff }
+/* LiteralNumberInteger */ .chroma .mi { color:#6cb6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#6cb6ff }
+/* LiteralNumberOct */ .chroma .mo { color:#6cb6ff }
+/* Operator */ .chroma .o { color:#f47067 }
+/* OperatorWord */ .chroma .ow { color:#f47067 }
+/* Punctuation */ .chroma .p { color:$code-color-dark }
+/* Comment */ .chroma .c { color:#768390 }
+/* CommentHashbang */ .chroma .ch { color:#768390 }
+/* CommentMultiline */ .chroma .cm { color:#768390 }
+/* CommentSingle */ .chroma .c1 { color:#768390 }
+/* CommentSpecial */ .chroma .cs { color:#768390 }
+/* CommentPreproc */ .chroma .cp { color:#6cb6ff }
+/* CommentPreprocFile */ .chroma .cpf { color:#768390 }
+/* Generic */ .chroma .g { color:$code-color-dark }
+/* GenericDeleted */ .chroma .gd { color:#ffd8d3 }
+/* GenericEmph */ .chroma .ge { color:$code-color-dark; font-style:italic }
+/* GenericError */ .chroma .gr { color:$code-error-color }
+/* GenericHeading */ .chroma .gh { color:$code-color-dark }
+/* GenericInserted */ .chroma .gi { color:#b4f1b4 }
+/* GenericOutput */ .chroma .go { color:$code-color-dark }
+/* GenericPrompt */ .chroma .gp { color:$code-color-dark }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:$code-color-dark }
+/* GenericTraceback */ .chroma .gt { color:$code-error-color }
+/* GenericUnderline */ .chroma .gl { color:$code-color-dark; text-decoration: underline; }
+/* TextWhitespace */ .chroma .w { color:$code-color-dark }
+/* Other */ .chroma .x { color:$code-color-dark }
+
+/* Language Diff */
+.chroma .language-diff {
+  /* GenericDeleted */
+  .gd {
+    background-color: #78191b;
+  }
+  /* GenericInserted */
+  .gi {
+    background-color: #1b4721;
+  }
+  .gs {
+    font-weight: normal;
+    color: #ffddb0;
+    background-color: #682d0f;
+  }
+}

assets/css/_partials/_code-syntax/_github-dark-dimmed.scss

@@ -0,0 +1,175 @@
+/**
+ * GitHub Dark Dimmed
+ * Copyright (c) 2012 - current GitHub, Inc.
+ * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
+ * Maintained by @Lruihao for FixIt theme
+ * Created on 2022-03-01
+ * Updated on 2024-07-14
+ */
+& {
+  // Blob colors
+  #{$rootPrefix}color-blob-num: #778491;
+  #{$rootPrefix}color-blob-code-inner: #c5d1de;
+  // Syntax colors
+  #{$rootPrefix}color-prettylights-syntax-comment: #768390;
+  #{$rootPrefix}color-prettylights-syntax-constant: #6cb6ff;
+  #{$rootPrefix}color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+  #{$rootPrefix}color-prettylights-syntax-entity: #dcbdfb;
+  #{$rootPrefix}color-prettylights-syntax-storage-modifier-import: #adbac7;
+  #{$rootPrefix}color-prettylights-syntax-entity-tag: #8ddb8c;
+  #{$rootPrefix}color-prettylights-syntax-keyword: #f47067;
+  #{$rootPrefix}color-prettylights-syntax-string: #96d0ff;
+  #{$rootPrefix}color-prettylights-syntax-variable: #f69d50;
+  #{$rootPrefix}color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+  #{$rootPrefix}color-prettylights-syntax-brackethighlighter-angle: #768390;
+  #{$rootPrefix}color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+  #{$rootPrefix}color-prettylights-syntax-invalid-illegal-bg: #922323;
+  #{$rootPrefix}color-prettylights-syntax-carriage-return-text: #cdd9e5;
+  #{$rootPrefix}color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+  #{$rootPrefix}color-prettylights-syntax-string-regexp: #8ddb8c;
+  #{$rootPrefix}color-prettylights-syntax-markup-list: #eac55f;
+  #{$rootPrefix}color-prettylights-syntax-markup-heading: #316dca;
+  #{$rootPrefix}color-prettylights-syntax-markup-italic: #adbac7;
+  #{$rootPrefix}color-prettylights-syntax-markup-bold: #adbac7;
+  #{$rootPrefix}color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+  #{$rootPrefix}color-prettylights-syntax-markup-deleted-bg: #78191b;
+  #{$rootPrefix}color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+  #{$rootPrefix}color-prettylights-syntax-markup-inserted-bg: #1b4721;
+  #{$rootPrefix}color-prettylights-syntax-markup-changed-text: #ffddb0;
+  #{$rootPrefix}color-prettylights-syntax-markup-changed-bg: #682d0f;
+  #{$rootPrefix}color-prettylights-syntax-markup-ignored-text: #adbac7;
+  #{$rootPrefix}color-prettylights-syntax-markup-ignored-bg: #255ab2;
+  #{$rootPrefix}color-prettylights-syntax-meta-diff-range: #dcbdfb;
+  #{$rootPrefix}color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+
+  .blob-num {
+    color: var(#{$rootPrefix}color-blob-num);
+  }
+  .blob-code-inner {
+    color: var(#{$rootPrefix}color-blob-code-inner);
+  }
+
+  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-comment);
+  }
+
+  .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
+  .pl-s .pl-v /* string variable */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-constant);
+  }
+
+  .pl-e /* entity */,
+  .pl-en /* entity.name */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-entity);
+  }
+
+  .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
+  .pl-s .pl-s1 /* string source */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-storage-modifier-import);
+  }
+
+  .pl-ent /* entity.name.tag, markup.quote */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-entity-tag);
+  }
+
+  .pl-k /* keyword, storage, storage.type */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-keyword);
+  }
+
+  .pl-s /* string */,
+  .pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
+  .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+  .pl-sr /* string.regexp */,
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */,
+  .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
+  .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-string);
+  }
+
+  .pl-v /* variable */,
+  .pl-smw /* sublimelinter.mark.warning */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-variable);
+  }
+
+  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-brackethighlighter-unmatched);
+  }
+
+  .pl-ii /* invalid.illegal */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-invalid-illegal-text);
+    background-color: var(#{$rootPrefix}color-prettylights-syntax-invalid-illegal-bg);
+  }
+
+  .pl-c2 /* carriage-return */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-carriage-return-text);
+    background-color: var(#{$rootPrefix}color-prettylights-syntax-carriage-return-bg);
+  }
+
+  .pl-c2::before /* carriage-return */ {
+    content: '^M';
+  }
+
+  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+    font-weight: bold;
+    color: var(#{$rootPrefix}color-prettylights-syntax-string-regexp);
+  }
+
+  .pl-ml /* markup.list */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-list);
+  }
+
+  .pl-mh /* markup.heading */,
+  .pl-mh .pl-en /* markup.heading entity.name */,
+  .pl-ms /* meta.separator */ {
+    font-weight: bold;
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-heading);
+  }
+
+  .pl-mi /* markup.italic */ {
+    font-style: italic;
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-italic);
+  }
+
+  .pl-mb /* markup.bold */ {
+    font-weight: bold;
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-bold);
+  }
+
+  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-deleted-text);
+    background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-inserted-text);
+    background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-inserted-bg);
+  }
+
+  .pl-mc /* markup.changed, punctuation.definition.changed */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-changed-text);
+    background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-changed-bg);
+  }
+
+  .pl-mi2 /* markup.ignored, markup.untracked */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-markup-ignored-text);
+    background-color: var(#{$rootPrefix}color-prettylights-syntax-markup-ignored-bg);
+  }
+
+  .pl-mdr /* meta.diff.range */ {
+    font-weight: bold;
+    color: var(#{$rootPrefix}color-prettylights-syntax-meta-diff-range);
+  }
+
+  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-brackethighlighter-angle);
+  }
+
+  .pl-sg /* sublimelinter.gutter-mark */ {
+    color: var(#{$rootPrefix}color-prettylights-syntax-sublimelinter-gutter-mark);
+  }
+
+  .pl-corl /* constant.other.reference.link, string.other.link */ {
+    text-decoration: underline;
+    color: var(#{$rootPrefix}color-prettylights-syntax-constant-other-reference-link);
+  }
+}

assets/css/_partials/_code-syntax/_index.scss

@@ -0,0 +1,29 @@
+/**
+ * Code syntax highlighting for Chroma
+ *
+ * To generate syntax highlighting styles from the command line,
+ * See https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles
+ * For example:
+ *   hugo gen chromastyles --style=github > assets/css/_partials/_code-syntax/light.scss
+ *   hugo gen chromastyles --style=github-dark > assets/css/_partials/_code-syntax/dark.scss
+ */
+.highlight {
+  /* LineLink */
+  .lnlinks {
+    outline: none;
+    text-decoration: none;
+    color: inherit;
+  }
+  /* LineHighlight */
+  .hl {
+    display: block;
+    background-color: var(#{$rootPrefix}code-highlight-color);
+    box-shadow: -0.75rem 0 0 var(#{$rootPrefix}code-highlight-color), 0.75rem 0 0 var(#{$rootPrefix}code-highlight-color);
+  }
+
+  @import '../_code-syntax/light';
+
+  [data-theme='dark'] & {
+    @import '../_code-syntax/dark';
+  }
+}

assets/css/_partials/_code-syntax/_light.scss

@@ -0,0 +1,104 @@
+/* Maintained by @Lruihao for FixIt theme */
+
+// /* Background */ .bg { }
+// /* PreWrapper */ .chroma { }
+// /* LineLink */ .chroma .lnlinks { }
+// /* LineTableTD */ .chroma .lntd { }
+// /* LineTable */ .chroma .lntable { }
+// /* LineHighlight */ .chroma .hl { }
+// /* LineNumbersTable */ .chroma .lnt { }
+// /* LineNumbers */ .chroma .ln { }
+// /* Line */ .chroma .line { display:flex; }
+/* Error */ .chroma .err { color: $code-error-color; font-style: italic; border-bottom: 1px dotted $code-error-color;}
+/* Keyword */ .chroma .k { color:#cf222e }
+/* KeywordConstant */ .chroma .kc { color:#0550ae }
+/* KeywordDeclaration */ .chroma .kd { color:#cf222e }
+/* KeywordNamespace */ .chroma .kn { color:#cf222e }
+/* KeywordPseudo */ .chroma .kp { color:#cf222e }
+/* KeywordReserved */ .chroma .kr { color:#cf222e }
+/* KeywordType */ .chroma .kt { color:#cf222e }
+/* Name */ .chroma .n { color:$code-color }
+/* NameAttribute */ .chroma .na { color:#0550ae }
+/* NameBuiltin */ .chroma .nb { color:#0550ae }
+/* NameBuiltinPseudo */ .chroma .bp { color:$code-color }
+/* NameClass */ .chroma .nc { color:#8250df }
+/* NameConstant */ .chroma .no { color:#cf222e }
+/* NameDecorator */ .chroma .nd { color:#8250df }
+/* NameEntity */ .chroma .ni { color:#0550ae }
+/* NameException */ .chroma .ne { color:#0550ae }
+/* NameFunction */ .chroma .nf { color:#0550ae }
+/* NameFunctionMagic */ .chroma .fm { color:#0550ae }
+/* NameLabel */ .chroma .nl { color:#0550ae }
+/* NameNamespace */ .chroma .nn { color:#8250df }
+/* NameOther */ .chroma .nx { color:#0550ae }
+/* NameProperty */ .chroma .py { color:#0550ae }
+/* NameTag */ .chroma .nt { color:#116329 }
+/* NameVariable */ .chroma .nv { color:#953800 }
+/* NameVariableClass */ .chroma .vc { color:#0550ae }
+/* NameVariableGlobal */ .chroma .vg { color:#0550ae }
+/* NameVariableInstance */ .chroma .vi { color:#0550ae }
+/* NameVariableMagic */ .chroma .vm { color:#0550ae }
+/* Literal */ .chroma .l { color:#0550ae }
+/* LiteralDate */ .chroma .ld { color:#0a3069 }
+/* LiteralString */ .chroma .s { color:#0a3069 }
+/* LiteralStringAffix */ .chroma .sa { color:#0a3069 }
+/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 }
+/* LiteralStringChar */ .chroma .sc { color:#0a3069 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 }
+/* LiteralStringDoc */ .chroma .sd { color:#0a3069 }
+/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 }
+/* LiteralStringEscape */ .chroma .se { color:#0a3069 }
+/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 }
+/* LiteralStringInterpol */ .chroma .si { color:#0a3069 }
+/* LiteralStringOther */ .chroma .sx { color:#0a3069 }
+/* LiteralStringRegex */ .chroma .sr { color:#0a3069 }
+/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 }
+/* LiteralStringSymbol */ .chroma .ss { color:#0a3069 }
+/* LiteralNumber */ .chroma .m { color:#0550ae }
+/* LiteralNumberBin */ .chroma .mb { color:#0550ae }
+/* LiteralNumberFloat */ .chroma .mf { color:#0550ae }
+/* LiteralNumberHex */ .chroma .mh { color:#0550ae }
+/* LiteralNumberInteger */ .chroma .mi { color:#0550ae }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae }
+/* LiteralNumberOct */ .chroma .mo { color:#0550ae }
+/* Operator */ .chroma .o { color:#cf222e }
+/* OperatorWord */ .chroma .ow { color:#cf222e }
+/* Punctuation */ .chroma .p { color:$code-color }
+/* Comment */ .chroma .c { color:#6e7781 }
+/* CommentHashbang */ .chroma .ch { color:#6e7781 }
+/* CommentMultiline */ .chroma .cm { color:#6e7781 }
+/* CommentSingle */ .chroma .c1 { color:#6e7781 }
+/* CommentSpecial */ .chroma .cs { color:#6e7781 }
+/* CommentPreproc */ .chroma .cp { color:#0550ae }
+/* CommentPreprocFile */ .chroma .cpf { color:#6e7781 }
+/* Generic */ .chroma .g { color:$code-color }
+/* GenericDeleted */ .chroma .gd { color:#82071e }
+/* GenericEmph */ .chroma .ge { color:$code-color; font-style:italic }
+/* GenericError */ .chroma .gr { color:$code-error-color }
+/* GenericHeading */ .chroma .gh { color:$code-color }
+/* GenericInserted */ .chroma .gi { color:#116329 }
+/* GenericOutput */ .chroma .go { color:$code-color }
+/* GenericPrompt */ .chroma .gp { color:$code-color }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:$code-color }
+/* GenericTraceback */ .chroma .gt { color:$code-error-color }
+/* GenericUnderline */ .chroma .gl { color:$code-color; text-decoration: underline; }
+/* TextWhitespace */ .chroma .w { color:$code-color }
+/* Other */ .chroma .x { color:$code-color }
+
+/* Language Diff */
+.chroma .language-diff {
+  /* GenericDeleted */
+  .gd {
+    background-color: #ffebe9;
+  }
+  /* GenericInserted */
+  .gi {
+    background-color: #dafbe1;
+  }
+  .gs {
+    font-weight: normal;
+    color: #953800;
+    background-color: #ffd8b5;
+  }
+}

assets/css/_partials/_details.scss

@@ -1,30 +1,32 @@
 .details {
   > .details-summary {
     @include border-radius($global-border-radius);
+    @include transition(border-radius 0.2s ease 0.2s);
 
     &:hover {
       cursor: pointer;
     }
 
     i.details-icon {
-      color: $global-font-secondary-color;
-      @include transition(transform 0.2s ease);
+      color: var(#{$rootPrefix}global-font-secondary-color);
+      @include transition(all 0.2s ease);
 
-      [data-theme='dark'] & {
-        color: $global-font-secondary-color-dark;
+      &:hover {
+        color: var(#{$rootPrefix}global-font-color);
       }
     }
   }
 
   > .details-content {
-    max-height: 0;
+    height: 0;
     overflow-y: hidden;
-    @include details-transition-open;
+    @include transition(height 0.5s ease-out);
   }
 
   &.open {
     > .details-summary {
       @include border-radius($global-border-radius $global-border-radius 0 0);
+      @include transition(border-radius 0s);
 
       i.details-icon {
         @include transform(rotate(90deg));
@@ -32,9 +34,8 @@
     }
 
     > .details-content {
-      max-height: 100%;
+      height: auto;
       @include border-radius(0 0 $global-border-radius $global-border-radius);
-      @include details-transition-close;
     }
   }
 

assets/css/_partials/_maps/_code-highlight.scss

@@ -1,157 +0,0 @@
-// Color map of the code highlight
-$code-highlight-color-map: (
-  /* Error */ 'err': $code-error-color,
-  /* Keyword */ 'k': #cf222e,
-  /* KeywordConstant */ 'kc': #0550ae,
-  /* KeywordDeclaration */ 'kd': #cf222e,
-  /* KeywordNamespace */ 'kn': #cf222e,
-  /* KeywordPseudo */ 'kp': #cf222e,
-  /* KeywordReserved */ 'kr': #cf222e,
-  /* KeywordType */ 'kt': #cf222e,
-  /* Name */ 'n': $code-color,
-  /* NameAttribute */ 'na': #0550ae,
-  /* NameBuiltin */ 'nb': #0550ae,
-  /* NameBuiltinPseudo */ 'bp': $code-color,
-  /* NameClass */ 'nc': #8250df,
-  /* NameConstant */ 'no': #cf222e,
-  /* NameDecorator */ 'nd': #8250df,
-  /* NameEntity */ 'ni': #0550ae,
-  /* NameException */ 'ne': #0550ae,
-  /* NameFunction */ 'nf': #0550ae,
-  /* NameFunctionMagic */ 'fm': #0550ae,
-  /* NameLabel */ 'nl': #0550ae,
-  /* NameNamespace */ 'nn': #8250df,
-  /* NameOther */ 'nx': #0550ae,
-  /* NameProperty */ 'py': #0550ae,
-  /* NameTag */ 'nt': #116329,
-  /* NameVariable */ 'nv': #953800,
-  /* NameVariableClass */ 'vc': #0550ae,
-  /* NameVariableGlobal */ 'vg': #0550ae,
-  /* NameVariableInstance */ 'vi': #0550ae,
-  /* NameVariableMagic */ 'vm': #0550ae,
-  /* Literal */ 'l': #0550ae,
-  /* LiteralDate */ 'ld': #0a3069,
-  /* LiteralString */ 's': #0a3069,
-  /* LiteralStringAffix */ 'sa': #0a3069,
-  /* LiteralStringBacktick */ 'sb': #0a3069,
-  /* LiteralStringChar */ 'sc': #0a3069,
-  /* LiteralStringDelimiter */ 'dl': #0a3069,
-  /* LiteralStringDoc */ 'sd': #0a3069,
-  /* LiteralStringDouble */ 's2': #0a3069,
-  /* LiteralStringEscape */ 'se': #0a3069,
-  /* LiteralStringHeredoc */ 'sh': #0a3069,
-  /* LiteralStringInterpol */ 'si': #0a3069,
-  /* LiteralStringOther */ 'sx': #0a3069,
-  /* LiteralStringRegex */ 'sr': #0a3069,
-  /* LiteralStringSingle */ 's1': #0a3069,
-  /* LiteralStringSymbol */ 'ss': #0a3069,
-  /* LiteralNumber */ 'm': #0550ae,
-  /* LiteralNumberBin */ 'mb': #0550ae,
-  /* LiteralNumberFloat */ 'mf': #0550ae,
-  /* LiteralNumberHex */ 'mh': #0550ae,
-  /* LiteralNumberInteger */ 'mi': #0550ae,
-  /* LiteralNumberIntegerLong */ 'il': #0550ae,
-  /* LiteralNumberOct */ 'mo': #0550ae,
-  /* Operator */ 'o': #cf222e,
-  /* OperatorWord */ 'ow': #cf222e,
-  /* Punctuation */ 'p': $code-color,
-  /* Comment */ 'c': #6e7781,
-  /* CommentHashbang */ 'ch': #6e7781,
-  /* CommentMultiline */ 'cm': #6e7781,
-  /* CommentSingle */ 'c1': #6e7781,
-  /* CommentSpecial */ 'cs': #6e7781,
-  /* CommentPreproc */ 'cp': #0550ae,
-  /* CommentPreprocFile */ 'cpf': #6e7781,
-  /* Generic */ 'g': $code-color,
-  /* GenericDeleted */ 'gd': #82071e,
-  /* GenericEmph */ 'ge': $code-color,
-  /* GenericError */ 'gr': $code-error-color,
-  /* GenericHeading */ 'gh': $code-color,
-  /* GenericInserted */ 'gi': #116329,
-  /* GenericOutput */ 'go': $code-color,
-  /* GenericPrompt */ 'gp': $code-color,
-  /* GenericStrong */ 'gs': $code-color,
-  /* GenericSubheading */ 'gu': $code-color,
-  /* GenericTraceback */ 'gt': $code-error-color,
-  /* GenericUnderline */ 'gl': $code-color,
-  /* TextWhitespace */ 'w': $code-color,
-  /* Other */ 'x': $code-color
-) !default;
-$code-highlight-color-map-dark: (
-  /* Error */ 'err': $code-error-color,
-  /* Keyword */ 'k': #f47067,
-  /* KeywordConstant */ 'kc': #6cb6ff,
-  /* KeywordDeclaration */ 'kd': #f47067,
-  /* KeywordNamespace */ 'kn': #f47067,
-  /* KeywordPseudo */ 'kp': #f47067,
-  /* KeywordReserved */ 'kr': #f47067,
-  /* KeywordType */ 'kt': #f47067,
-  /* Name */ 'n': $code-color-dark,
-  /* NameAttribute */ 'na': #6cb6ff,
-  /* NameBuiltin */ 'nb': #dcbdfb,
-  /* NameBuiltinPseudo */ 'bp': $code-color-dark,
-  /* NameClass */ 'nc': #dcbdfb,
-  /* NameConstant */ 'no': #6cb6ff,
-  /* NameDecorator */ 'nd': #dcbdfb,
-  /* NameEntity */ 'ni': #6cb6ff,
-  /* NameException */ 'ne': #6cb6ff,
-  /* NameFunction */ 'nf': #dcbdfb,
-  /* NameFunctionMagic */ 'fm': #6cb6ff,
-  /* NameLabel */ 'nl': #6cb6ff,
-  /* NameNamespace */ 'nn': #f47067,
-  /* NameOther */ 'nx': #dcbdfb,
-  /* NameProperty */ 'py': #6cb6ff,
-  /* NameTag */ 'nt': #8ddb8c,
-  /* NameVariable */ 'nv': #f69d50,
-  /* NameVariableClass */ 'vc': #6cb6ff,
-  /* NameVariableGlobal */ 'vg': #6cb6ff,
-  /* NameVariableInstance */ 'vi': #6cb6ff,
-  /* NameVariableMagic */ 'vm': #6cb6ff,
-  /* Literal */ 'l': #6cb6ff,
-  /* LiteralDate */ 'ld': #96d0ff,
-  /* LiteralString */ 's': #96d0ff,
-  /* LiteralStringAffix */ 'sa': #96d0ff,
-  /* LiteralStringBacktick */ 'sb': #96d0ff,
-  /* LiteralStringChar */ 'sc': #96d0ff,
-  /* LiteralStringDelimiter */ 'dl': #96d0ff,
-  /* LiteralStringDoc */ 'sd': #96d0ff,
-  /* LiteralStringDouble */ 's2': #96d0ff,
-  /* LiteralStringEscape */ 'se': #96d0ff,
-  /* LiteralStringHeredoc */ 'sh': #96d0ff,
-  /* LiteralStringInterpol */ 'si': #96d0ff,
-  /* LiteralStringOther */ 'sx': #96d0ff,
-  /* LiteralStringRegex */ 'sr': #96d0ff,
-  /* LiteralStringSingle */ 's1': #96d0ff,
-  /* LiteralStringSymbol */ 'ss': #96d0ff,
-  /* LiteralNumber */ 'm': #6cb6ff,
-  /* LiteralNumberBin */ 'mb': #6cb6ff,
-  /* LiteralNumberFloat */ 'mf': #6cb6ff,
-  /* LiteralNumberHex */ 'mh': #6cb6ff,
-  /* LiteralNumberInteger */ 'mi': #6cb6ff,
-  /* LiteralNumberIntegerLong */ 'il': #6cb6ff,
-  /* LiteralNumberOct */ 'mo': #6cb6ff,
-  /* Operator */ 'o': #f47067,
-  /* OperatorWord */ 'ow': #f47067,
-  /* Punctuation */ 'p': $code-color-dark,
-  /* Comment */ 'c': #768390,
-  /* CommentHashbang */ 'ch': #768390,
-  /* CommentMultiline */ 'cm': #768390,
-  /* CommentSingle */ 'c1': #768390,
-  /* CommentSpecial */ 'cs': #768390,
-  /* CommentPreproc */ 'cp': #6cb6ff,
-  /* CommentPreprocFile */ 'cpf': #768390,
-  /* Generic */ 'g': $code-color-dark,
-  /* GenericDeleted */ 'gd': #ffd8d3,
-  /* GenericEmph */ 'ge': $code-color-dark,
-  /* GenericError */ 'gr': $code-error-color,
-  /* GenericHeading */ 'gh': $code-color-dark,
-  /* GenericInserted */ 'gi': #b4f1b4,
-  /* GenericOutput */ 'go': $code-color-dark,
-  /* GenericPrompt */ 'gp': $code-color-dark,
-  /* GenericStrong */ 'gs': $code-color-dark,
-  /* GenericSubheading */ 'gu': $code-color-dark,
-  /* GenericTraceback */ 'gt': $code-error-color,
-  /* GenericUnderline */ 'gl': $code-color-dark,
-  /* TextWhitespace */ 'w': $code-color-dark,
-  /* Other */ 'x': $code-color-dark
-) !default;

assets/css/_partials/_maps/_code-type.scss

@@ -1,235 +1,285 @@
-// Code type map
+/**
+ * Map of code identifiers/languages to Chroma supported languages.
+ *
+ * @generator https://github.com/hugo-fixit/.tools/blob/main/tampermonkey/code-type-map-fetcher.user.js
+ */
 $code-type-map: (
-  // Chroma supported languages
-  // @generator https://github.com/hugo-fixit/.tools/blob/main/tampermonkey/code-type-map-fetcher.user.js
+  "1s": "OnesEnterprise",
+  "1s\\:enterprise": "OnesEnterprise",
   "abap": "ABAP",
+  "abl": "OpenEdge ABL",
   "abnf": "ABNF",
-  "as": "ActionScript",
+  "aconf": "ApacheConf",
   "actionscript": "ActionScript",
-  "as3": "ActionScript 3",
   "actionscript3": "ActionScript 3",
   "ada": "Ada",
-  "ada95": "Ada",
   "ada2005": "Ada",
+  "ada95": "Ada",
+  "agda": "Agda",
+  "ahk": "AutoHotkey",
   "al": "AL",
-  "ng2": "Angular2",
+  "alloy": "Alloy",
   "antlr": "ANTLR",
-  "apacheconf": "ApacheConf",
-  "aconf": "ApacheConf",
   "apache": "ApacheConf",
+  "apacheconf": "ApacheConf",
   "apl": "APL",
   "applescript": "AppleScript",
+  "aql": "ArangoDB AQL",
   "arduino": "Arduino",
+  "arexx": "Rexx",
   "armasm": "ArmAsm",
+  "as": "ActionScript",
+  "as3": "ActionScript 3",
+  "asm": "GAS",
+  "atl": "ATL",
+  "autohotkey": "AutoHotkey",
+  "autoit": "AutoIt",
   "awk": "Awk",
-  "gawk": "Awk",
-  "mawk": "Awk",
-  "nawk": "Awk",
+  "b3d": "BlitzBasic",
   "ballerina": "Ballerina",
-  "make": "Base Makefile",
-  "makefile": "Base Makefile",
-  "mf": "Base Makefile",
-  "bsdmake": "Base Makefile",
   "bash": "Bash",
-  "sh": "Bash",
-  "ksh": "Bash",
-  "zsh": "Bash",
-  "shell": "Bash",
-  "bash-session": "BashSession",
-  "console": "BashSession",
-  "shell-session": "BashSession",
+  "bash-session": "Bash Session",
+  "basic": "QBasic",
   "bat": "Batchfile",
   "batch": "Batchfile",
-  "dosbatch": "Batchfile",
-  "winbatch": "Batchfile",
+  "beef": "Beef",
+  "bf": "Brainfuck",
   "bib": "BibTeX",
   "bibtex": "BibTeX",
   "bicep": "Bicep",
+  "bind": "Dns",
   "blitzbasic": "BlitzBasic",
-  "b3d": "BlitzBasic",
-  "bplus": "BlitzBasic",
   "bnf": "BNF",
+  "bplus": "BlitzBasic",
+  "bqn": "BQN",
   "brainfuck": "Brainfuck",
-  "bf": "Brainfuck",
+  "bsdmake": "Makefile",
   "c": "C",
-  "csharp": "C#",
   "c\\#": "C#",
-  "cpp": "C++",
   "c\\+\\+": "C++",
-  "caddyfile": "Caddyfile",
   "caddy": "Caddyfile",
-  "caddyfile-directives": "Caddyfile Directives",
-  "caddyfile-d": "Caddyfile Directives",
   "caddy-d": "Caddyfile Directives",
+  "caddyfile": "Caddyfile",
+  "caddyfile-d": "Caddyfile Directives",
+  "caddyfile-directives": "Caddyfile Directives",
   "capnp": "Cap'n Proto",
   "cassandra": "Cassandra CQL",
-  "cql": "Cassandra CQL",
+  "cassette": "VHS",
   "ceylon": "Ceylon",
-  "cfengine3": "CFEngine3",
   "cf3": "CFEngine3",
-  "cfs": "cfstatement",
+  "cfengine3": "CFEngine3",
+  "cfg": "INI",
+  "cfs": "Cfstatement",
   "chai": "ChaiScript",
   "chaiscript": "ChaiScript",
+  "chapel": "Chapel",
   "cheetah": "Cheetah",
-  "spitfire": "Cheetah",
-  "clojure": "Clojure",
+  "chpl": "Chapel",
+  "cl": "Common Lisp",
   "clj": "Clojure",
+  "clojure": "Clojure",
   "cmake": "CMake",
   "cobol": "COBOL",
+  "coffee": "CoffeeScript",
   "coffee-script": "CoffeeScript",
   "coffeescript": "CoffeeScript",
-  "coffee": "CoffeeScript",
   "common-lisp": "Common Lisp",
-  "cl": "Common Lisp",
-  "lisp": "Common Lisp",
+  "console": "Bash Session",
+  "containerfile": "Docker",
   "coq": "Coq",
+  "core": "Core",
+  "cpp": "C++",
+  "cql": "Cassandra CQL",
   "cr": "Crystal",
   "crystal": "Crystal",
+  "csh": "Tcsh",
+  "csharp": "C#",
   "css": "CSS",
+  "csv": "CSV",
+  "cucumber": "Gherkin",
+  "cue": "CUE",
   "cython": "Cython",
-  "pyx": "Cython",
-  "pyrex": "Cython",
   "d": "D",
   "dart": "Dart",
+  "dax": "Dax",
+  "desktop": "Desktop file",
+  "desktop_entry": "Desktop file",
   "diff": "Diff",
-  "udiff": "Diff",
   "django": "Django/Jinja",
-  "jinja": "Django/Jinja",
   "docker": "Docker",
   "dockerfile": "Docker",
+  "dosbatch": "Batchfile",
+  "dosini": "INI",
   "dtd": "DTD",
+  "duby": "Ruby",
   "dylan": "Dylan",
   "ebnf": "EBNF",
+  "edn": "Clojure",
+  "elisp": "EmacsLisp",
   "elixir": "Elixir",
-  "ex": "Elixir",
-  "exs": "Elixir",
   "elm": "Elm",
   "emacs": "EmacsLisp",
-  "elisp": "EmacsLisp",
   "emacs-lisp": "EmacsLisp",
   "erlang": "Erlang",
+  "ex": "Elixir",
+  "exs": "Elixir",
+  "f90": "Fortran",
   "factor": "Factor",
   "fennel": "Fennel",
-  "fnl": "Fennel",
   "fish": "Fish",
   "fishshell": "Fish",
+  "fnl": "Fennel",
   "forth": "Forth",
   "fortran": "Fortran",
   "fortranfixed": "FortranFixed",
   "fsharp": "FSharp",
   "gas": "GAS",
-  "asm": "GAS",
-  "gdscript": "GDScript",
+  "gawk": "Awk",
   "gd": "GDScript",
+  "gd3": "GDScript3",
+  "gdscript": "GDScript",
+  "gdscript3": "GDScript3",
+  "gemini": "Gemtext",
+  "gemtext": "Gemtext",
   "genshi": "Genshi",
-  "kid": "Genshi",
-  "xml\\+genshi": "Genshi",
-  "xml\\+kid": "Genshi",
-  "html\\+genshi": "Genshi HTML",
-  "html\\+kid": "Genshi HTML",
   "genshitext": "Genshi Text",
-  "cucumber": "Gherkin",
-  "Cucumber": "Gherkin",
   "gherkin": "Gherkin",
-  "Gherkin": "Gherkin",
+  "gleam": "Gleam",
   "glsl": "GLSL",
+  "gmi": "Gemtext",
+  "gmni": "Gemtext",
   "gnuplot": "Gnuplot",
   "go": "Go",
-  "golang": "Go",
   "go-html-template": "Go HTML Template",
+  "go-template": "Go Template",
   "go-text-template": "Go Text Template",
+  "golang": "Go",
+  "gql": "GraphQL",
   "graphql": "GraphQL",
   "graphqls": "GraphQL",
-  "gql": "GraphQL",
   "groff": "Groff",
-  "nroff": "Groff",
-  "man": "Groff",
   "groovy": "Groovy",
+  "gsed": "Sed",
   "handlebars": "Handlebars",
-  "hbs": "Handlebars",
+  "hare": "Hare",
   "haskell": "Haskell",
-  "hs": "Haskell",
-  "hx": "Haxe",
   "haxe": "Haxe",
-  "hxsl": "Haxe",
-  "hcl": "HCL",
+  "hbs": "Handlebars",
+  "hcl": "Terraform",
   "hexdump": "Hexdump",
   "hlb": "HLB",
+  "hlsl": "HLSL",
+  "holyc": "HolyC",
+  "hs": "Haskell",
   "html": "HTML",
+  "html\\+genshi": "Genshi HTML",
+  "html\\+kid": "Genshi HTML",
   "http": "HTTP",
+  "hx": "Haxe",
+  "hxsl": "Haxe",
   "hylang": "Hy",
-  "idris": "Idris",
   "idr": "Idris",
+  "idris": "Idris",
   "igor": "Igor",
   "igorpro": "Igor",
   "ini": "INI",
-  "cfg": "INI",
-  "dosini": "INI",
   "io": "Io",
+  "iscdhcpd": "ISCdhcpd",
   "j": "J",
+  "janet": "Janet",
   "java": "Java",
-  "js": "JavaScript",
+  "java-properties": "Properties",
   "javascript": "JavaScript",
-  "json": "JSON",
-  "julia": "Julia",
+  "jinja": "Django/Jinja",
   "jl": "Julia",
+  "js": "JavaScript",
+  "json": "JSON",
+  "jsonata": "JSONata",
+  "jsonnet": "Jsonnet",
+  "jsx": "React",
+  "julia": "Julia",
   "jungle": "Jungle",
+  "kid": "Genshi",
   "kotlin": "Kotlin",
-  "lighty": "Lighttpd configuration file",
+  "ksh": "Bash",
+  "latex": "TeX",
+  "lean": "Lean4",
+  "lean4": "Lean4",
   "lighttpd": "Lighttpd configuration file",
+  "lighty": "Lighttpd configuration file",
+  "lisp": "Common Lisp",
   "llvm": "LLVM",
   "lua": "Lua",
+  "luau": "Lua",
+  "m2": "Modula-2",
+  "make": "Makefile",
+  "makefile": "Makefile",
   "mako": "Mako",
-  "md": "Markdown",
-  "mkd": "Markdown",
+  "man": "Groff",
+  "mariadb": "MySQL",
   "mason": "Mason",
+  "materialize": "Materialize SQL dialect",
   "mathematica": "Mathematica",
-  "mma": "Mathematica",
-  "nb": "Mathematica",
   "matlab": "Matlab",
-  "mcfunction": "mcfunction",
+  "mawk": "Awk",
+  "mcf": "MCFunction",
+  "mcfunction": "MCFunction",
+  "md": "Markdown",
   "meson": "Meson",
   "meson\\.build": "Meson",
   "metal": "Metal",
+  "mf": "Makefile",
   "minizinc": "MiniZinc",
-  "MZN": "MiniZinc",
-  "mzn": "MiniZinc",
+  "mkd": "Markdown",
   "mlir": "MLIR",
+  "mma": "Mathematica",
   "modula2": "Modula-2",
-  "m2": "Modula-2",
+  "mojo": "Mojo",
   "monkeyc": "MonkeyC",
+  "moon": "MoonScript",
+  "moonscript": "MoonScript",
   "morrowind": "MorrowindScript",
   "mwscript": "MorrowindScript",
   "myghty": "Myghty",
   "mysql": "MySQL",
-  "mariadb": "MySQL",
+  "mzn": "MiniZinc",
+  "mzsql": "Materialize SQL dialect",
   "nasm": "NASM",
+  "natural": "Natural",
+  "nawk": "Awk",
+  "nb": "Mathematica",
+  "ndisasm": "NDISASM",
   "newspeak": "Newspeak",
+  "ng2": "Angular2",
   "nginx": "Nginx configuration file",
   "nim": "Nim",
   "nimrod": "Nim",
-  "nixos": "Nix",
   "nix": "Nix",
-  "objective-c": "Objective-C",
-  "objectivec": "Objective-C",
+  "nixos": "Nix",
+  "no-highlight": "Plaintext",
+  "nroff": "Groff",
+  "nsh": "NSIS",
+  "nsi": "NSIS",
+  "nsis": "NSIS",
+  "nu": "Nu",
   "obj-c": "Objective-C",
   "objc": "Objective-C",
+  "objective-c": "Objective-C",
+  "objectivec": "Objective-C",
+  "objectpascal": "ObjectPascal",
   "ocaml": "OCaml",
   "octave": "Octave",
+  "odin": "Odin",
   "ones": "OnesEnterprise",
   "onesenterprise": "OnesEnterprise",
-  "1S": "OnesEnterprise",
-  "1S:Enterprise": "OnesEnterprise",
   "openedge": "OpenEdge ABL",
-  "abl": "OpenEdge ABL",
-  "progress": "OpenEdge ABL",
   "openedgeabl": "OpenEdge ABL",
   "openscad": "OpenSCAD",
   "org": "Org Mode",
   "orgmode": "Org Mode",
   "pacmanconf": "PacmanConf",
   "perl": "Perl",
-  "pl": "Perl",
+  "perl6": "Raku",
   "php": "PHP",
   "php3": "PHP",
   "php4": "PHP",
@@ -237,136 +287,165 @@ $code-type-map: (
   "phtml": "PHTML",
   "pig": "Pig",
   "pkgconfig": "PkgConfig",
-  "plpgsql": "PL/pgSQL",
-  "text": "plaintext",
-  "plain": "plaintext",
-  "no-highlight": "plaintext",
-  "plutus-core": "Plutus Core",
+  "pl": "Perl",
+  "pl6": "Raku",
+  "plain": "Plaintext",
   "plc": "Plutus Core",
+  "plpgsql": "PL/pgSQL",
+  "plutus-core": "Plutus Core",
   "pony": "Pony",
-  "postgresql": "PostgreSQL SQL dialect",
+  "posh": "PowerShell",
   "postgres": "PostgreSQL SQL dialect",
-  "postscript": "PostScript",
+  "postgresql": "PostgreSQL SQL dialect",
   "postscr": "PostScript",
+  "postscript": "PostScript",
   "pov": "POVRay",
   "powerquery": "PowerQuery",
-  "pq": "PowerQuery",
   "powershell": "PowerShell",
-  "posh": "PowerShell",
-  "ps1": "PowerShell",
-  "psm1": "PowerShell",
-  "psd1": "PowerShell",
+  "pq": "PowerQuery",
+  "progress": "OpenEdge ABL",
   "prolog": "Prolog",
+  "promela": "Promela",
   "promql": "PromQL",
-  "protobuf": "Protocol Buffer",
   "proto": "Protocol Buffer",
+  "protobuf": "Protocol Buffer",
+  "prql": "PRQL",
+  "ps1": "PowerShell",
+  "psd1": "PowerShell",
+  "psl": "PSL",
+  "psm1": "PowerShell",
   "puppet": "Puppet",
-  "python": "Python",
+  "pwsh": "PowerShell",
   "py": "Python",
-  "sage": "Python",
-  "python3": "Python",
-  "py3": "Python",
-  "python2": "Python 2",
   "py2": "Python 2",
+  "py3": "Python",
+  "pyrex": "Cython",
+  "python": "Python",
+  "python2": "Python 2",
+  "python3": "Python",
+  "pyx": "Cython",
   "qbasic": "QBasic",
-  "basic": "QBasic",
-  "qml": "QML",
   "qbs": "QML",
-  "splus": "R",
-  "s": "R",
+  "qml": "QML",
   "r": "R",
   "racket": "Racket",
-  "rkt": "Racket",
   "ragel": "Ragel",
-  "perl6": "Raku",
-  "pl6": "Raku",
   "raku": "Raku",
-  "jsx": "react",
-  "react": "react",
+  "rb": "Ruby",
+  "react": "React",
   "reason": "ReasonML",
   "reasonml": "ReasonML",
-  "registry": "reg",
-  "rst": "reStructuredText",
-  "rest": "reStructuredText",
-  "restructuredtext": "reStructuredText",
+  "registry": "Reg",
+  "rego": "Rego",
+  "rest": "ReStructuredText",
+  "restructuredtext": "ReStructuredText",
   "rexx": "Rexx",
-  "arexx": "Rexx",
-  "rb": "Ruby",
-  "ruby": "Ruby",
-  "duby": "Ruby",
-  "rust": "Rust",
+  "rkt": "Racket",
   "rs": "Rust",
+  "rst": "ReStructuredText",
+  "ruby": "Ruby",
+  "rust": "Rust",
+  "s": "R",
+  "sage": "Python",
   "sas": "SAS",
   "sass": "Sass",
   "scala": "Scala",
   "scheme": "Scheme",
-  "scm": "Scheme",
   "scilab": "Scilab",
+  "scm": "Scheme",
   "scss": "SCSS",
+  "sed": "Sed",
+  "sh": "Bash",
+  "shell": "Bash",
+  "shell-session": "Bash Session",
   "sieve": "Sieve",
+  "smali": "Smali",
   "smalltalk": "Smalltalk",
-  "squeak": "Smalltalk",
-  "st": "Smalltalk",
   "smarty": "Smarty",
+  "sml": "Standard ML",
+  "snbt": "SNBT",
   "snobol": "Snobol",
   "sol": "Solidity",
   "solidity": "Solidity",
+  "sp": "SourcePawn",
   "sparql": "SPARQL",
+  "spec": "RPMSpec",
+  "spitfire": "Cheetah",
+  "splus": "R",
   "sql": "SQL",
-  "squidconf": "SquidConf",
-  "squid\\.conf": "SquidConf",
+  "sqlrpgle": "RPGLE",
+  "squeak": "Smalltalk",
   "squid": "SquidConf",
-  "sml": "Standard ML",
+  "squid\\.conf": "SquidConf",
+  "squidconf": "SquidConf",
+  "ssed": "Sed",
+  "st": "Smalltalk",
   "stylus": "Stylus",
+  "sv": "Systemverilog",
   "svelte": "Svelte",
   "swift": "Swift",
   "systemd": "SYSTEMD",
-  "systemverilog": "systemverilog",
-  "sv": "systemverilog",
+  "systemverilog": "Systemverilog",
+  "t-sql": "Transact-SQL",
   "tablegen": "TableGen",
+  "tal": "Tal",
+  "tape": "VHS",
   "tasm": "TASM",
   "tcl": "Tcl",
   "tcsh": "Tcsh",
-  "csh": "Tcsh",
   "termcap": "Termcap",
   "terminfo": "Terminfo",
   "terraform": "Terraform",
-  "tf": "Terraform",
   "tex": "TeX",
-  "latex": "TeX",
+  "text": "Plaintext",
+  "tf": "Terraform",
   "thrift": "Thrift",
   "toml": "TOML",
   "tradingview": "TradingView",
-  "tv": "TradingView",
+  "ts": "TypeScript",
   "tsql": "Transact-SQL",
-  "t-sql": "Transact-SQL",
+  "tsx": "TypeScript",
   "turing": "Turing",
   "turtle": "Turtle",
+  "tv": "TradingView",
   "twig": "Twig",
-  "ts": "TypeScript",
-  "tsx": "TypeScript",
   "typescript": "TypeScript",
   "typoscript": "TypoScript",
   "typoscriptcssdata": "TypoScriptCssData",
   "typoscripthtmldata": "TypoScriptHtmlData",
-  "v": "verilog",
+  "typst": "Typst",
+  "udiff": "Diff",
+  "uxntal": "Tal",
+  "v": "Verilog",
+  "vala": "Vala",
+  "vapi": "Vala",
+  "vb\\.net": "VB.net",
+  "vbnet": "VB.net",
+  "verilog": "Verilog",
+  "vhdl": "VHDL",
+  "vhs": "VHS",
+  "vim": "VimL",
   "vlang": "V",
   "vsh": "V shell",
   "vshell": "V shell",
-  "vb\\.net": "VB.net",
-  "vbnet": "VB.net",
-  "verilog": "verilog",
-  "vhdl": "VHDL",
-  "vim": "VimL",
-  "vue": "vue",
-  "vuejs": "vue",
+  "vtt": "WebVTT",
+  "vue": "Vue",
+  "vuejs": "Vue",
+  "wgsl": "WebGPU Shading Language",
   "whiley": "Whiley",
+  "winbatch": "Batchfile",
   "xml": "XML",
+  "xml\\+genshi": "Genshi",
+  "xml\\+kid": "Genshi",
   "xorg\\.conf": "Xorg",
   "yaml": "YAML",
   "yang": "YANG",
+  "z80": "Z80 Assembly",
   "zed": "Zed",
   "zig": "Zig",
+  "zone": "Dns",
+  "zsh": "Bash",
+  "🔥": "Mojo",
   // Custom code type
   "markdown": "Markdown",
   "yml": "YAML"

assets/css/_partials/_scrollbar.scss

@@ -1,15 +1,15 @@
 /* Modern browsers with `scrollbar-*` support (high priority) */
 @supports (scrollbar-width: auto) {
   * {
-    scrollbar-color: var(--#{$prefix}scrollbar-thumb-color) var(--#{$prefix}scrollbar-track-color);;
-    scrollbar-width: var(--#{$prefix}scrollbar-width);
+    scrollbar-color: var(#{$rootPrefix}scrollbar-thumb-color) var(#{$rootPrefix}scrollbar-track-color);;
+    scrollbar-width: var(#{$rootPrefix}scrollbar-width);
   }
 }
 
 /* Legacy browsers with `::-webkit-scrollbar-*` support */
 ::-webkit-scrollbar {
-  height: var(--#{$prefix}scrollbar-width-legacy);
-  width: var(--#{$prefix}scrollbar-width-legacy);
+  height: var(#{$rootPrefix}scrollbar-width-legacy);
+  width: var(#{$rootPrefix}scrollbar-width-legacy);
   overflow: visible;
 }
 ::-webkit-scrollbar-button {
@@ -17,16 +17,16 @@
   width: 0;
 }
 ::-webkit-scrollbar-corner {
-  background-color: var(--#{$prefix}scrollbar-track-color);
+  background-color: var(#{$rootPrefix}scrollbar-track-color);
 }
 ::-webkit-scrollbar-thumb {
-  background-color: var(--#{$prefix}scrollbar-thumb-color);
+  background-color: var(#{$rootPrefix}scrollbar-thumb-color);
   &:hover {
-    background-color: var(--#{$prefix}scrollbar-thumb-hover-color);
+    background-color: var(#{$rootPrefix}scrollbar-thumb-hover-color);
   }
 }
 ::-webkit-scrollbar-track {
-  background-color: var(--#{$prefix}scrollbar-track-color);
+  background-color: var(#{$rootPrefix}scrollbar-track-color);
 }
 ::-webkit-scrollbar-thumb,
 ::-webkit-scrollbar-track {

assets/css/_partials/_single/_alert.scss

@@ -2,7 +2,7 @@
   padding: 0.5rem 1rem;
   margin-block: 1rem;
   color: inherit;
-  border-left: 0.25em solid var(--#{$prefix}alert-border-color);
+  border-left: 0.25em solid var(#{$rootPrefix}alert-border-color);
 
   > :first-child {
     margin-top: 0;
@@ -17,7 +17,7 @@
     align-items: center;
     line-height: 1;
     margin-bottom: 1rem;
-    color: var(--#{$prefix}alert-color);
+    color: var(#{$rootPrefix}alert-color);
 
     > svg.icon {
       width: initial;
@@ -28,16 +28,16 @@
 
   @each $type, $item in $alert-color-map {
     &.alert-#{$type} {
-      --#{$prefix}alert-border-color: #{map-get($item, border-color)};
-      --#{$prefix}alert-color: #{map-get($item, color)};
+      #{$rootPrefix}alert-border-color: #{map-get($item, border-color)};
+      #{$rootPrefix}alert-color: #{map-get($item, color)};
     }
   }
 
   [data-theme='dark'] & {
     @each $type, $item in $alert-color-map-dark {
       &.alert-#{$type} {
-        --#{$prefix}alert-border-color: #{map-get($item, border-color)};
-        --#{$prefix}alert-color: #{map-get($item, color)};
+        #{$rootPrefix}alert-border-color: #{map-get($item, border-color)};
+        #{$rootPrefix}alert-color: #{map-get($item, color)};
       }
     }
   }

assets/css/_partials/_single/_code.scss

@@ -1,42 +1,29 @@
 // inline code
 code {
-  padding: 0.2em 0.4em;
-  margin: 0;
-  font-size: $code-font-size;
-  font-family: $code-font-family;
-  color: $code-color;
-  background-color: rgba(175, 184, 193, 0.2);
-  text-decoration: inherit;
-  @include border-radius($global-border-radius);
-  @include overflow-wrap(break-word);
-  @include line-break(auto);
-
-  [data-theme='dark'] & {
-    color: $code-color-dark;
-    background-color: rgba(99, 110, 123, 0.4);
-  }
+  @extend %code;
 }
 
 // indented code
-pre:not(.mermaid[data-processed='true']) {
+pre {
   margin: 0;
   line-height: 1.45em;
-  padding: 0.5rem;
+  padding: 0.5rem 0.75rem;
   overflow: auto;
-  font-size: $code-font-size;
+  font-size: $code-block-font-size;
   font-family: $code-font-family;
+  background-color: var(#{$rootPrefix}code-block-background-color);
   @include border-radius($global-border-radius);
   @include tab-size(4);
 
-  background-color: $code-background-color;
-
-  [data-theme='dark'] & {
-    background-color: $code-background-color-dark;
+  + pre {
+    margin-top: 0.5rem;
   }
 
   code {
     padding: 0;
     background-color: transparent;
+    font-size: inherit;
+    line-height: inherit;
     @include border-radius(0);
     @include max-content(min-width);
 
@@ -54,32 +41,123 @@ pre:not(.mermaid[data-processed='true']) {
 
 .highlight,
 .gist {
-  font-size: $code-font-size;
+  font-size: $code-block-font-size;
   font-family: $code-font-family;
+  #{$rootPrefix}scrollbar-thumb-color: inherit;
 
-  .table-wrapper {
-    --#{$prefix}scrollbar-thumb-color: initial;
-    > table,
-    > table thead,
-    > table tr,
-    > table td {
-      margin: 0;
-      padding: 0;
-      border: none !important;
-      white-space: nowrap;
-    }
+  table {
+    width: 100%;
+    max-width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  table,
+  table thead,
+  table tr,
+  table td {
+    margin: 0;
+    padding: 0;
+    border: none;
   }
 }
 
-// block fenced code
+// Code fences blocks or highlight shortcodes
 .highlight {
   margin: 0.5rem 0;
+  position: relative;
+  @include border-radius($global-border-radius);
 
-  > .chroma {
+  // lineNumbersInTable=true
+  > div.chroma {
     position: relative;
+    background-color: var(#{$rootPrefix}code-block-background-color);
+    @include border-radius($global-border-radius);
 
+    &:is(pre):has(.ln) {
+      padding: 0.5rem;
+    }
+
+    .lntable {
+      overflow: auto;
+      display: block;
+      background-color: var(#{$rootPrefix}code-block-background-color);
+      @include border-radius($global-border-radius);
+
+      td {
+        vertical-align: top;
+        padding: 0;
+      }
+
+      pre {
+        outline-offset: -1px;
+        @include border-radius(0);
+      }
+
+      // line numbers
+      .lntd:first-child {
+        position: sticky;
+        left: 0;
+      }
+      // code content
+      .lntd:last-child {
+        width: 100%;
+        code {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  // line numbers (lineNumbersInTable=false)
+  .ln {
+    padding-right: 0.75rem;
+    display: inline-block;
+    text-align: right;
+    position: sticky;
+    left: 0;
+  }
+  // Line numbers
+  .lnt,
+  .ln {
+    color: var(#{$rootPrefix}global-font-secondary-color);
+    @include user-select(none);
+  }
+
+  &:not(.code-block) {
+    .lntd:last-child pre.chroma {
+      padding-left: 0;
+    }
+  }
+
+  // code fences blocks wrapped
+  &.code-block {
+    .code-wrapper {
+      overflow: hidden;
+      height: auto;
+      position: relative;
+      counter-reset: codeNos calc(var(#{$rootPrefix}line-start) - 1);
+      @include border-radius($global-border-radius);
+      @include transition(height 0.5s ease-out);
+      @include border-radius($global-border-radius);
+      // attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
+      // non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
+      #{$rootPrefix}max-shown-lines: attr(data-max number, 10);
+      #{$rootPrefix}line-start: attr(data-line-start number, 1);
+      #{$rootPrefix}line-digit: attr(data-line-digit number, 1);
+    }
+
+    // code preview
+    &:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
+      .code-wrapper {
+        height: calc(1.45em * var(#{$rootPrefix}max-shown-lines) + var(#{$rootPrefix}code-expand-offset, 0.5rem));
+      }
+      &[data-mode='mac'] .code-wrapper {
+        #{$rootPrefix}code-expand-offset: 1.875rem + 0.5rem;
+      }
+    }
+    
     .code-header {
-      --#{$prefix}bg-code-header: #{darken($code-background-color, 3%)};
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -88,37 +166,40 @@ pre:not(.mermaid[data-processed='true']) {
       font-family: $global-font-family;
       font-weight: bold;
       line-height: 1.4em;
-      color: $code-info-color;
-      background-color: var(--#{$prefix}bg-code-header);
-      @include border-radius($global-border-radius);
-      @include transition(border-radius 0.2s ease);
+      color: var(#{$rootPrefix}code-header-color);
+      background-color: var(#{$rootPrefix}code-header-background-color);
+      position: sticky;
+      top: var(#{$rootPrefix}breadcrumb-height);
+      @include z-index(0, 1);
+      @include border-radius($global-border-radius $global-border-radius 0 0);
+      @include transition(border-radius 0s);
 
-      // delayed loading table-wrapper
-      & + .table-wrapper {
-        max-height: 0;
+      + .code-wrapper {
         @include border-radius(0 0 $global-border-radius $global-border-radius);
-        @include details-transition-open;
-      }
 
-      [data-theme='dark'] & {
-        color: $code-info-color-dark;
-        --#{$prefix}bg-code-header: #{darken($code-background-color-dark, 3%)};
+        > pre.chroma {
+          @include border-radius(0 0 $global-border-radius $global-border-radius);
+        }
       }
 
       &:hover {
         cursor: pointer;
       }
 
-      .ellipses,
-      .edit,
-      .copy {
-        @extend .print-d-none;
-      }
-
       .code-title {
         width: 100%;
         padding: 0.4rem;
 
+        &::after {
+          padding-left: 0.2rem;
+          content: attr(data-name, var(#{$rootPrefix}code-type, 'Code'));
+        }
+
+        // filename for code block
+        &[data-name]::after {
+          @include overflow-wrap(break-word);
+        }
+
         .arrow {
           padding: 0 0.2rem;
           @include transition(transform 0.2s ease);
@@ -128,219 +209,265 @@ pre:not(.mermaid[data-processed='true']) {
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
-          background-color: var(--#{$prefix}bg-code-header);
+          background-color: var(#{$rootPrefix}code-header-background-color);
           padding-inline: 1em;
-          max-width: 80%;
+          max-width: calc(100% - 200px);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          @include z-index(0, 1);
+          @include z-index(0, 2);
         }
       }
 
-      .code-title::after {
-        padding-left: 0.2rem;
-        content: 'Code';
-      }
-
-      .ellipses {
-        padding: 0.4rem;
-      }
-
-      .edit,
-      .copy {
+      .ellipses-btn {
         display: none;
         padding: 0.4rem;
+      }
 
-        &:hover {
-          cursor: pointer;
-          color: $global-link-hover-color;
+      [role='button'] {
+        padding: 0.4rem;
+        @extend .print-d-none;
+      }
 
-          [data-theme='dark'] & {
-            color: $global-link-hover-color-dark;
-          }
-        }
+      .copy-btn[data-copied] .fa-clone {
+        --fa: "\f00c";
+        font-weight: 900;
+        color: var(#{$rootPrefix}global-link-hover-color);
       }
 
       @each $type, $text in $code-type-map {
-        &.language-#{$type} .code-title::after {
-          content: $text;
+        &.language-#{to-lower-case($type)} {
+          #{$rootPrefix}code-type: $text;
         }
       }
     }
 
-    // delayed loading table-wrapper
-    .table-wrapper {
-      overflow: hidden;
-      @include border-radius($global-border-radius);
+    &.line-wrapping .line-wrap-btn,
+    &:not(.line-nos-hidden) .line-nos-btn,
+    .code-header [role='button']:hover,
+    &:has([contenteditable='true']) .edit-btn {
+      color: var(#{$rootPrefix}global-link-hover-color);
     }
 
-    table {
-      border-spacing: 0;
-      width: auto;
-      overflow: auto;
-      display: block;
-      background-color: $code-background-color;
+    .code-expand-btn {
+      width: 100%;
+      padding-block: 1rem;
+      text-align: center;
+      position: absolute;
+      bottom: 0;
+      background: linear-gradient(
+        180deg,
+        rgba($code-background-color, 0) 0%,
+        rgba($code-background-color, 0.9) 60%,
+        $code-background-color 100%
+      );
+      @include z-index(0, 1);
+      @include border-radius(0 0 $global-border-radius $global-border-radius);
 
       [data-theme='dark'] & {
-        background-color: $code-background-color-dark;
+        background: linear-gradient(
+          180deg,
+          rgba($code-background-color-dark, 0) 0%,
+          rgba($code-background-color-dark, 0.9) 60%,
+          $code-background-color-dark 100%
+        );
       }
 
-      td {
-        vertical-align: top;
-        padding: 0;
+      .fa-angles-down {
+        opacity: 0;
+        animation-name: fadeOutDown;
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+        animation-delay: 0.3s;
+        @include transition(transform 0.2s ease);
       }
-
-      pre {
-        padding: 0.25rem;
-        outline-offset: -1px;
-        @include border-radius(0);
-      }
-
-      /* lineNumbersInTable=false */
-      .ln {
-        min-width: 1.25rem;
-      }
-
-      // ========== lineNumbersInTable ========== //
-      // line numbers
-      .lntd:first-child {
-        min-width: 1.6rem;
-        text-align: right;
-        position: sticky;
-        left: 0;
-
-        pre {
-          @include user-select(none);
-        }
-      }
-      // code content
-      .lntd:last-child {
-        width: 100%;
-
-        pre {
-          padding-left: 0.5rem;
-          padding-right: 0.5rem;
-        }
-        code {
-          width: 100%;
-        }
-      }
-      // ========== lineNumbersInTable ========== //
     }
 
-    &.open {
+    .code-copy-btn {
+      @extend .diagram-copy-btn;
+    }
+
+    // classic mode code block collapsed
+    &.is-collapsed {
       .code-header {
-        --#{$prefix}bg-code-header: #{darken($code-background-color, 6%)};
-        @include border-radius($global-border-radius $global-border-radius 0 0);
+        #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)};
+        @include border-radius($global-border-radius);
+        @include transition(border-radius 0.2s ease 0.2s);
 
         [data-theme='dark'] & {
-          --#{$prefix}bg-code-header: #{darken($code-background-color-dark, 6%)};
+          #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)};
         }
-      }
 
-      .table-wrapper {
-        max-height: 100%;
-        @include details-transition-close;
+        + .code-wrapper {
+          height: 0;
+        }
       }
 
       .arrow {
-        @include transform(rotate(90deg));
+        @include transform(rotate(-90deg));
       }
 
-      .ellipses {
-        display: none;
-      }
-
-      .edit,
-      .copy {
+      .ellipses-btn {
         display: inline;
       }
+
+      .code-header [role='button']:not(.ellipses-btn),
+      .code-expand-btn {
+        display: none;
+      }
     }
-  }
 
-  /* LineHighlight */
-  .hl {
-    display: block;
-    background-color: $code-hightlight-color;
-    box-shadow: -0.5rem 0 0 $code-hightlight-color, 0.5rem 0 0 $code-hightlight-color;
+    // code preview expanded
+    &.is-expanded {
+      margin-bottom: 1rem;
+      &:has([contenteditable='true']) .code-expand-btn {
+        display: none;
+      }
+      .code-expand-btn {
+        background: transparent;
+        padding-block: 0;
+        transform: translateY(1rem);
 
-    [data-theme='dark'] & {
-      background-color: $code-hightlight-color-dark;
-      box-shadow: -0.5rem 0 0 $code-hightlight-color-dark, 0.5rem 0 0 $code-hightlight-color-dark;
+        .fa-angles-down {
+          animation-name: fadeOutRotate;
+
+          @keyframes fadeOutRotate {
+            0% {
+              opacity: 1;
+              transform: rotate(180deg);
+            }
+            100% {
+              opacity: 0;
+              transform: rotate(180deg) translate3d(0, 100%, 0);
+            }
+          }
+        }
+      }
     }
-  }
-  /* GenericUnderline */
-  .gl {
-    text-decoration: underline;
-  }
-  /* GenericStrong */
-  .gs {
-    font-weight: bold;
-  }
-  /* GenericEmph */
-  .ge {
-    font-style: italic;
-  }
-  /* lineNumbersInTable=false */
-  .ln {
-    padding-right: 0.5rem;
-    display: inline-block;
-    min-width: 1.1rem;
-    text-align: right;
-  }
-  /* LineNumbers */
-  .lnt,
-  .ln {
-    color: $global-font-secondary-color;
 
-    [data-theme='dark'] & {
-      color: $global-font-secondary-color-dark;
+    // hide original line numbers
+    &.line-nos-hidden {
+      > .chroma .lntable {
+        width: 100%;
+        display: table;
+      }
+      .lntd:first-child,
+      .ln {
+        display: none;
+      }
     }
-  }
 
-  // ========== Higtlight Color ========== //
+    // line wrapping
+    &.line-wrapping {
+      > .chroma .lntable {
+        width: 100%;
+        display: table;
 
-  /* Error */
-  .err {
-    font-style: italic;
-    border-bottom: 1px dotted $code-error-color;
-  }
-  /* GenericDeleted */
-  .gd {
-    background-color: #ffebe9;
+        // hide original line numbers
+        .lntd:first-child {
+          display: none;
+        }
+      }
+      .lntd:last-child pre.chroma,
+      .code-wrapper > pre.chroma {
+        max-width: 100%;
+        box-sizing: border-box;
 
-    [data-theme='dark'] & {
-      background-color: #78191b;
+        code {
+          text-wrap: wrap;
+          word-break: break-all;
+          overflow-wrap: break-word;
+        }
+      }
     }
-  }
-  /* GenericInserted */
-  .gi {
-    background-color: #dafbe1;
 
-    [data-theme='dark'] & {
-      background-color: #1b4721;
+    // line numbers (pseudo-elements) for code blocks
+    &.line-wrapping:not(.line-nos-hidden) .lntd:last-child pre.chroma,
+    &:not(.line-nos-hidden) .code-wrapper > pre.chroma:not(:has(.ln)) {
+      > code > .line {
+        display: flex;
+
+        &::before {
+          counter-increment: codeNos;
+          content: counter(codeNos);
+          white-space: nowrap;
+          text-align: right;
+          min-width: calc(var(#{$rootPrefix}line-digit) * 1ch);
+          padding-inline: 0.75rem;
+          flex-shrink: 0;
+          color: var(#{$rootPrefix}global-font-secondary-color);
+          background-color: var(#{$rootPrefix}code-block-background-color);
+        }
+
+        // highlight for line numbers
+        &.hl::before {
+          background-color: transparent;
+        }
+      }
     }
-  }
 
-  @each $class, $color in $code-highlight-color-map {
-    .#{$class} {
-      color: $color;
+    // add sticky effect for line numbers when lineNos=false
+    &:not(.line-nos-hidden) .code-wrapper > pre.chroma > code > .line::before {
+      position: sticky;
+      left: 0;
     }
-  }
 
-  [data-theme='dark'] & {
-    @each $class, $color in $code-highlight-color-map-dark {
-      .#{$class} {
-        color: $color;
+    // when line numbers shown
+    &:not(.line-nos-hidden) {
+      .lntd:last-child pre.chroma,
+      .code-wrapper > pre.chroma:not(:has(.ln)) {
+        padding-left: 0;
+      }
+    }
+
+    // add border for non-classic mode
+    &:not([data-mode='classic']) {
+      border: 1px solid darken($code-background-color, 3%);
+
+      [data-theme='dark'] & {
+        border-color: darken($code-background-color-dark, 3%);
+      }
+    }
+
+    &[data-mode='mac'] {
+      pre.chroma {
+        padding-top: 1.875rem;
+
+        &::after {
+          background: var(#{$rootPrefix}mac-red, #fc625d);
+          box-shadow: 20px 0 var(#{$rootPrefix}mac-yellow, #fdbc40), 40px 0 var(#{$rootPrefix}mac-green, #35cd4b);
+          left: 8px;
+          top: 8px;
+          position: absolute;
+          border-radius: 50%;
+          content: ' ';
+          height: 12px;
+          width: 12px;
+
+          [data-theme='dark'] & {
+            #{$rootPrefix}mac-red-dark: #ff5f56;
+            #{$rootPrefix}mac-yellow-dark: #febc2e;
+            #{$rootPrefix}mac-green-dark: #28c840;
+          }
+        }
+      }
+    }
+
+    &[data-mode='simple'] {
+      pre.chroma {
+        padding-block: 0.875rem;
       }
     }
   }
-  // ========== Higtlight Color ========== //
 }
 
+@import '../_code-syntax/index';
+
 // gist shortcode
 .gist {
+  background-color: var(#{$rootPrefix}code-block-background-color);
+  @include border-radius($global-border-radius $global-border-radius 0 0);
+  
   .gist-file,
   .gist-data,
   .gist-meta {
@@ -348,30 +475,37 @@ pre:not(.mermaid[data-processed='true']) {
   }
 
   .gist-data {
-    background-color: transparent;
+    background-color: inherit;
+
+    .blob-wrapper {
+      padding-block: 0.5rem;
+
+      table.highlight {
+        background-color: inherit;
+        overflow: initial;
+
+        td.blob-num {
+          position: sticky;
+          left: 0;
+          background-color: var(#{$rootPrefix}code-block-background-color);
+          @include z-index(0, 1);
+        }
+
+        td.blob-code {
+          padding-left: 2px !important;
+        }
+      }
+    }
   }
 
   .gist-meta {
     padding: 0.4rem 0.8rem;
     @include link(false, false);
-    background-color: darken($code-background-color, 5%);
-
-    [data-theme='dark'] & {
-      background-color: darken($code-background-color-dark, 5%);
-    }
-  }
-
-  .table-wrapper {
-    .highlight {
-      background-color: $code-background-color;
-
-      [data-theme='dark'] & {
-        background-color: $code-background-color-dark;
-      }
-    }
+    @include border-radius(0 0 $global-border-radius $global-border-radius);
+    background-color: var(#{$rootPrefix}gist-meta-background-color);
   }
 
   [data-theme='dark'] & {
-    @import './github-dark-dimmed';
+    @import '../_code-syntax/github-dark-dimmed';
   }
 }

assets/css/_partials/_single/_collections.scss

@@ -86,7 +86,7 @@
 // Collection aside container
 .aside-collection {
   position: sticky;
-  top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height));
+  top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
   box-sizing: border-box;
   @include overflow-wrap(break-word);
   @include blur;
@@ -136,7 +136,7 @@
 
     .collection-count {
       flex-shrink: 0;
-      color: var(--#{$prefix}secondary);
+      color: var(#{$rootPrefix}secondary);
     }
 
     .details-icon {

assets/css/_partials/_single/_color-preview.scss

@@ -0,0 +1,22 @@
+// Color preview styles for inline code
+.color-code {
+  position: relative;
+  #{$rootPrefix}color-code-size: 0.64em;
+
+  .color-preview {
+    display: inline-block;
+    width: var(#{$rootPrefix}color-code-size);
+    height: var(#{$rootPrefix}color-code-size);
+    border-radius: 50%;
+    margin-right: 0.25em;
+    vertical-align: middle;
+    border: 1px solid;
+    border-color: var(#{$rootPrefix}color-preview-border-color, #d1d9e0b3);
+    pointer-events: none;
+    transform: translateY(-1px);
+
+    [data-theme='dark'] & {
+      #{$rootPrefix}color-preview-border-color: #3d444db3;
+    }
+  }
+}

assets/css/_partials/_single/_diagram-copy-btn.scss

@@ -0,0 +1,56 @@
+// Diagram container
+.diagram-container {
+  position: relative;
+  margin-block: 0.5rem;
+}
+
+// Diagram copy button styles
+.diagram-copy-btn {
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  line-height: 1;
+  padding: 0.5rem;
+  user-select: none;
+  border: 1px solid;
+  border-radius: 6px;
+  color: var(#{$rootPrefix}dcb-color, #25292e);
+  border-color: var(#{$rootPrefix}dcb-border-color, #d1d9e0);
+  background-color: var(#{$rootPrefix}dcb-background-color, #f6f8fa);
+  box-shadow: var(#{$rootPrefix}dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
+  transition-duration: 0.1s;
+  transition-property: color, background-color, box-shadow, border-color;
+  @include z-index(0, 1);
+  @extend .print-d-none;
+
+  [data-theme='dark'] & {
+    #{$rootPrefix}dcb-color: #d1d7e0;
+    #{$rootPrefix}dcb-border-color: #3d444d;
+    #{$rootPrefix}dcb-background-color: #2a313c;
+    #{$rootPrefix}dcb-box-shadow: 0px 0px 0px 0px #000000;
+  }
+
+  &:hover {
+    #{$rootPrefix}dcb-border-color: #d1d9e0;
+    #{$rootPrefix}dcb-background-color: #eff2f5;
+
+    [data-theme='dark'] & {
+      #{$rootPrefix}dcb-border-color: #3d444d;
+      #{$rootPrefix}dcb-background-color: #2f3742;
+    }
+  }
+
+  .fa-clone {
+    font-size: 1rem;
+  }
+
+  &[data-copied] {
+    .fa-clone {
+      --fa: '\f00c';
+      --fa-style: 900;
+      color: var(#{$rootPrefix}global-link-hover-color);
+    }
+  }
+}

assets/css/_partials/_single/_fixit-decryptor.scss

@@ -1,7 +1,7 @@
 .fixit-decryptor-container {
   font-family: $global-font-family;
   text-align: center;
-  margin-block: var(--fixit-decryptor-margin-block);
+  margin-block: var(#{$rootPrefix}decryptor-margin-block);
 
   .fixit-decryptor-loading {
     vertical-align: middle;
@@ -13,7 +13,7 @@
     display: none;
     box-sizing: border-box;
     outline: none;
-    color: $global-font-color;
+    color: var(#{$rootPrefix}global-font-color);
     border: 1px solid darken($global-border-color, 15%);
     border-radius: $global-border-radius;
     @include transition(all 0.1s ease-out);
@@ -23,18 +23,16 @@
     &:focus,
     &:hover {
       color: darken($global-link-hover-color, 6%);
-      border-color: $global-link-hover-color;
+      border-color: var(#{$rootPrefix}global-link-hover-color);
       box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);
 
       [data-theme='dark'] & {
         color: lighten($global-link-hover-color-dark, 6%);
-        border-color: $global-link-hover-color-dark;
         box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
       }
     }
 
     [data-theme='dark'] & {
-      color: $global-font-color-dark;
       border-color: lighten($global-border-color-dark, 15%);
       box-shadow: 0px 0px 5px 0px lighten($global-border-color-dark, 15%);
     }
@@ -45,11 +43,7 @@
     height: 3rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    background-color: $global-background-color;
-
-    [data-theme='dark'] & {
-      background-color: $global-background-color-dark;
-    }
+    background-color: var(#{$rootPrefix}global-background-color);
   }
 
   .fixit-decryptor-btn,
@@ -90,7 +84,7 @@ fixit-encryptor {
 // fixit-encryptor for for the encrypted pages
 article fixit-encryptor {
   .fixit-decryptor-container {
-    --fixit-decryptor-margin-block: 2rem;
+    #{$rootPrefix}decryptor-margin-block: 2rem;
   }
   &.decrypted > .fixit-decryptor-container {
     .fixit-decryptor-loading,
@@ -108,7 +102,7 @@ article fixit-encryptor {
 // fixit-encryptor shortcodes
 #content fixit-encryptor {
   .fixit-decryptor-container {
-    --fixit-decryptor-margin-block: 1rem;
+    #{$rootPrefix}decryptor-margin-block: 1rem;
   }
   &.decrypted > .fixit-decryptor-container {
     display: none;

assets/css/_partials/_single/_footer.scss

@@ -19,22 +19,14 @@
 
       .post-info-mod {
         font-size: 0.8em;
-        color: $global-font-secondary-color;
-
-        [data-theme='dark'] & {
-          color: $global-font-secondary-color-dark;
-        }
+        color: var(#{$rootPrefix}global-font-secondary-color);
 
         @include link(false, false);
       }
 
       .post-info-license {
         font-size: 0.8em;
-        color: $global-font-secondary-color;
-
-        [data-theme='dark'] & {
-          color: $global-font-secondary-color-dark;
-        }
+        color: var(#{$rootPrefix}global-font-secondary-color);
 
         @include link(false, false);
       }

assets/css/_partials/_single/_github-dark-dimmed.scss

@@ -1,175 +0,0 @@
-/**
- * GitHub Dark Dimmed
- * Copyright (c) 2012 - current GitHub, Inc.
- * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
- * Maintained by @Lruihao for FixIt theme
- * Created on 2022-03-01
- * Updated on 2024-07-14
- */
-& {
-  // Blob colors
-  --#{$prefix}color-blob-num: #778491;
-  --#{$prefix}color-blob-code-inner: #c5d1de;
-  // Syntax colors
-  --#{$prefix}color-prettylights-syntax-comment: #768390;
-  --#{$prefix}color-prettylights-syntax-constant: #6cb6ff;
-  --#{$prefix}color-prettylights-syntax-constant-other-reference-link: #96d0ff;
-  --#{$prefix}color-prettylights-syntax-entity: #dcbdfb;
-  --#{$prefix}color-prettylights-syntax-storage-modifier-import: #adbac7;
-  --#{$prefix}color-prettylights-syntax-entity-tag: #8ddb8c;
-  --#{$prefix}color-prettylights-syntax-keyword: #f47067;
-  --#{$prefix}color-prettylights-syntax-string: #96d0ff;
-  --#{$prefix}color-prettylights-syntax-variable: #f69d50;
-  --#{$prefix}color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
-  --#{$prefix}color-prettylights-syntax-brackethighlighter-angle: #768390;
-  --#{$prefix}color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
-  --#{$prefix}color-prettylights-syntax-invalid-illegal-bg: #922323;
-  --#{$prefix}color-prettylights-syntax-carriage-return-text: #cdd9e5;
-  --#{$prefix}color-prettylights-syntax-carriage-return-bg: #ad2e2c;
-  --#{$prefix}color-prettylights-syntax-string-regexp: #8ddb8c;
-  --#{$prefix}color-prettylights-syntax-markup-list: #eac55f;
-  --#{$prefix}color-prettylights-syntax-markup-heading: #316dca;
-  --#{$prefix}color-prettylights-syntax-markup-italic: #adbac7;
-  --#{$prefix}color-prettylights-syntax-markup-bold: #adbac7;
-  --#{$prefix}color-prettylights-syntax-markup-deleted-text: #ffd8d3;
-  --#{$prefix}color-prettylights-syntax-markup-deleted-bg: #78191b;
-  --#{$prefix}color-prettylights-syntax-markup-inserted-text: #b4f1b4;
-  --#{$prefix}color-prettylights-syntax-markup-inserted-bg: #1b4721;
-  --#{$prefix}color-prettylights-syntax-markup-changed-text: #ffddb0;
-  --#{$prefix}color-prettylights-syntax-markup-changed-bg: #682d0f;
-  --#{$prefix}color-prettylights-syntax-markup-ignored-text: #adbac7;
-  --#{$prefix}color-prettylights-syntax-markup-ignored-bg: #255ab2;
-  --#{$prefix}color-prettylights-syntax-meta-diff-range: #dcbdfb;
-  --#{$prefix}color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
-
-  .blob-num {
-    color: var(--#{$prefix}color-blob-num);
-  }
-  .blob-code-inner {
-    color: var(--#{$prefix}color-blob-code-inner);
-  }
-
-  .pl-c /* comment, punctuation.definition.comment, string.comment */ {
-    color: var(--#{$prefix}color-prettylights-syntax-comment);
-  }
-
-  .pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
-  .pl-s .pl-v /* string variable */ {
-    color: var(--#{$prefix}color-prettylights-syntax-constant);
-  }
-
-  .pl-e /* entity */,
-  .pl-en /* entity.name */ {
-    color: var(--#{$prefix}color-prettylights-syntax-entity);
-  }
-
-  .pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
-  .pl-s .pl-s1 /* string source */ {
-    color: var(--#{$prefix}color-prettylights-syntax-storage-modifier-import);
-  }
-
-  .pl-ent /* entity.name.tag, markup.quote */ {
-    color: var(--#{$prefix}color-prettylights-syntax-entity-tag);
-  }
-
-  .pl-k /* keyword, storage, storage.type */ {
-    color: var(--#{$prefix}color-prettylights-syntax-keyword);
-  }
-
-  .pl-s /* string */,
-  .pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
-  .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
-  .pl-sr /* string.regexp */,
-  .pl-sr .pl-cce /* string.regexp constant.character.escape */,
-  .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
-  .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
-    color: var(--#{$prefix}color-prettylights-syntax-string);
-  }
-
-  .pl-v /* variable */,
-  .pl-smw /* sublimelinter.mark.warning */ {
-    color: var(--#{$prefix}color-prettylights-syntax-variable);
-  }
-
-  .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
-    color: var(--#{$prefix}color-prettylights-syntax-brackethighlighter-unmatched);
-  }
-
-  .pl-ii /* invalid.illegal */ {
-    color: var(--#{$prefix}color-prettylights-syntax-invalid-illegal-text);
-    background-color: var(--#{$prefix}color-prettylights-syntax-invalid-illegal-bg);
-  }
-
-  .pl-c2 /* carriage-return */ {
-    color: var(--#{$prefix}color-prettylights-syntax-carriage-return-text);
-    background-color: var(--#{$prefix}color-prettylights-syntax-carriage-return-bg);
-  }
-
-  .pl-c2::before /* carriage-return */ {
-    content: '^M';
-  }
-
-  .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
-    font-weight: bold;
-    color: var(--#{$prefix}color-prettylights-syntax-string-regexp);
-  }
-
-  .pl-ml /* markup.list */ {
-    color: var(--#{$prefix}color-prettylights-syntax-markup-list);
-  }
-
-  .pl-mh /* markup.heading */,
-  .pl-mh .pl-en /* markup.heading entity.name */,
-  .pl-ms /* meta.separator */ {
-    font-weight: bold;
-    color: var(--#{$prefix}color-prettylights-syntax-markup-heading);
-  }
-
-  .pl-mi /* markup.italic */ {
-    font-style: italic;
-    color: var(--#{$prefix}color-prettylights-syntax-markup-italic);
-  }
-
-  .pl-mb /* markup.bold */ {
-    font-weight: bold;
-    color: var(--#{$prefix}color-prettylights-syntax-markup-bold);
-  }
-
-  .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
-    color: var(--#{$prefix}color-prettylights-syntax-markup-deleted-text);
-    background-color: var(--#{$prefix}color-prettylights-syntax-markup-deleted-bg);
-  }
-
-  .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
-    color: var(--#{$prefix}color-prettylights-syntax-markup-inserted-text);
-    background-color: var(--#{$prefix}color-prettylights-syntax-markup-inserted-bg);
-  }
-
-  .pl-mc /* markup.changed, punctuation.definition.changed */ {
-    color: var(--#{$prefix}color-prettylights-syntax-markup-changed-text);
-    background-color: var(--#{$prefix}color-prettylights-syntax-markup-changed-bg);
-  }
-
-  .pl-mi2 /* markup.ignored, markup.untracked */ {
-    color: var(--#{$prefix}color-prettylights-syntax-markup-ignored-text);
-    background-color: var(--#{$prefix}color-prettylights-syntax-markup-ignored-bg);
-  }
-
-  .pl-mdr /* meta.diff.range */ {
-    font-weight: bold;
-    color: var(--#{$prefix}color-prettylights-syntax-meta-diff-range);
-  }
-
-  .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
-    color: var(--#{$prefix}color-prettylights-syntax-brackethighlighter-angle);
-  }
-
-  .pl-sg /* sublimelinter.gutter-mark */ {
-    color: var(--#{$prefix}color-prettylights-syntax-sublimelinter-gutter-mark);
-  }
-
-  .pl-corl /* constant.other.reference.link, string.other.link */ {
-    text-decoration: underline;
-    color: var(--#{$prefix}color-prettylights-syntax-constant-other-reference-link);
-  }
-}

assets/css/_partials/_single/_related.scss

@@ -0,0 +1,73 @@
+// Related Content List (aside)
+.related-details {
+  &:not(:first-of-type)::before {
+    content: '';
+    display: block;
+    border: 0;
+    padding-top: 1px;
+    background: var(#{$rootPrefix}divider-edge-weak);
+    margin-block: 1rem 0.5rem;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+
+  .related-summary {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+    padding: 0.2em 0.5em;
+    
+    > i.fa-layer-group {
+      flex-shrink: 0;
+    }
+
+    .related-title {
+      font-weight: bold;
+      font-size: $related-title-font-size;
+    }
+
+    .related-count {
+      flex-shrink: 0;
+      color: var(#{$rootPrefix}secondary);
+    }
+
+    .details-icon {
+      flex-shrink: 0;
+    }
+
+    @include user-select(none);
+  }
+
+  .related-content {
+    font-size: $related-list-font-size;
+
+    .related-list {
+      margin: 0;
+      padding-inline: 1.6em 0.8em;
+      padding-block: 0.4em;
+      text-indent: -0.8em;
+      list-style: none;
+      overflow-y: scroll;
+      max-height: 60vh;
+      @include scrollbar-width(none, 0);
+
+      .related-item > a::before,
+      .related-item > span::before {
+        content: '|';
+        font-weight: 600;
+        margin-right: 0.5em;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+  }
+}
+
+

assets/css/_partials/_single/_reward.scss

@@ -49,13 +49,12 @@
       left: 50%;
       transform: translate(-50%, -50%);
       padding: 1rem;
-      background-color: $global-background-color;
+      background-color: var(#{$rootPrefix}global-background-color);
       @include z-index(2);
       @include border-radius($global-border-radius);
       @include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.2));
 
       [data-theme='dark'] & {
-        background-color: $global-background-color-dark;
         @include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.2));
       }
     }
@@ -70,7 +69,7 @@
     border: 2px solid lighten($reward-color, 10%);
     border-radius: $global-border-radius;
     padding: 0.6rem 1rem;
-    background-color: $global-background-color;
+    background-color: var(#{$rootPrefix}global-background-color);
     vertical-align: text-top;
     line-height: 1rem;
     @include transition(all 0.3s ease-out);
@@ -91,7 +90,6 @@
     [data-theme='dark'] & {
       color: $reward-color;
       border-color: lighten($reward-color, 5%);
-      background-color: $global-background-color-dark;
     }
   }
 }

assets/css/_partials/_single/_toc.scss

@@ -1,3 +1,4 @@
+// Common styles for all TOC types
 .toc {
   .toc-title {
     font-size: $toc-title-font-size;
@@ -8,7 +9,12 @@
   .toc-content {
     font-size: $toc-content-font-size;
 
+    code {
+      @extend %code;
+    }
+
     ul {
+      margin: 0;
       text-indent: -0.8em;
       padding-left: 0.8em;
       list-style: none;
@@ -50,26 +56,60 @@
   }
 
   ruby {
-    background: $code-background-color;
+    background-color: var(#{$rootPrefix}code-block-background-color);
 
     rt {
-      color: $global-font-secondary-color;
+      color: var(#{$rootPrefix}global-font-secondary-color);
+    }
+  }
+}
+
+// Common active state styles for auto and dialog TOC
+#toc-auto,
+#toc-dialog {
+  .toc-content {
+    li.has-active {
+      &::marker {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      &:has(> .active)::marker {
+        font-weight: bold;
+      }
+
+      > a {
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
     }
 
-    [data-theme='dark'] & {
-      background: $code-background-color-dark;
+    ul {
+      a.active::before {
+        color: $single-link-hover-color;
 
-      rt {
-        color: $global-font-secondary-color-dark;
+        [data-theme='dark'] & {
+          color: $single-link-hover-color-dark;
+        }
       }
     }
+
+    a.active {
+      font-weight: bold;
+    }
   }
 }
 
 #toc-auto {
   display: block;
   position: sticky;
-  top: calc(#{$header-height} + var(--#{$prefix}breadcrumb-height));
+  top: calc(#{$header-height} + var(#{$rootPrefix}breadcrumb-height));
   box-sizing: border-box;
   visibility: hidden;
   @include overflow-wrap(break-word);
@@ -77,7 +117,7 @@
   @extend .print-d-none;
 
   [data-header-desktop='normal'] & {
-    --#{$prefix}scroll-mt: #{$global-scroll-margin-top};
+    #{$rootPrefix}scroll-mt: #{$global-scroll-margin-top};
   }
 
   .toc-title {
@@ -110,7 +150,8 @@
 
   .toc-content {
     overflow-y: scroll;
-    max-height: calc(100vh - #{2*$header-height});
+    // TODO 这里计算错误，待重构
+    max-height: calc(100vh - #{2 * $header-height});
     @include scrollbar-width(none, 0);
 
     &.always-active ul,
@@ -118,32 +159,6 @@
       display: block;
     }
 
-    > nav > ul {
-      margin: 0;
-    }
-
-    li.has-active {
-      &::marker {
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
-      }
-
-      &:has(> .active)::marker {
-        font-weight: bold;
-      }
-
-      > a {
-        color: $single-link-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-color-dark;
-        }
-      }
-    }
-
     // for unordered list automatically collapsed
     ul {
       ul {
@@ -153,14 +168,6 @@
       .has-active > ul {
         display: block;
       }
-
-      a.active::before {
-        color: $single-link-hover-color;
-
-        [data-theme='dark'] & {
-          color: $single-link-hover-color-dark;
-        }
-      }
     }
 
     // for ordered list automatically collapsed
@@ -173,10 +180,6 @@
         display: block;
       }
     }
-
-    a.active {
-      font-weight: bold;
-    }
   }
 }
 
@@ -193,19 +196,14 @@
     justify-content: space-between;
     line-height: 2em;
     padding: 0 0.75em;
-    background: darken($code-background-color, 3%);
-
-    [data-theme='dark'] & {
-      background: darken($code-background-color-dark, 6%);
-    }
+    background-color: var(#{$rootPrefix}code-header-background-color);
   }
 
   .toc-content {
-    background-color: $code-background-color;
+    background-color: var(#{$rootPrefix}code-block-background-color);
 
     > nav {
       > ul {
-        margin: 0;
         padding: 0.4em 1em 0.4em 1.8em;
 
         a:hover {
@@ -213,16 +211,15 @@
 
           &::before {
             color: $single-link-hover-color;
-  
+
             [data-theme='dark'] & {
               color: $single-link-hover-color-dark;
             }
           }
         }
       }
-      
+
       > ol {
-        margin: 0;
         padding: 0.4em 1em 0.4em 2.25em;
 
         li:has(> a:hover)::marker,
@@ -231,19 +228,92 @@
         }
       }
     }
-
-    [data-theme='dark'] & {
-      background-color: $code-background-color-dark;
-    }
   }
 
-  &.open {
+  &:not(.open) {
     .toc-title {
-      background: darken($code-background-color, 6%);
+      #{$rootPrefix}code-header-background-color: #{darken($code-background-color, 6%)};
 
       [data-theme='dark'] & {
-        background: darken($code-background-color-dark, 3%);
+        #{$rootPrefix}code-header-background-color: #{darken($code-background-color-dark, 6%)};
       }
     }
   }
 }
+
+#toc-dialog {
+  transition:
+    display 0.2s allow-discrete,
+    overlay 0.2s allow-discrete,
+    translate 0.2s,
+    opacity 0.2s 0.4s;
+  opacity: 0;
+  translate: 100vw 0;
+  width: MIN(calc(100% - 4rem), 460px);
+  height: 100dvh;
+  max-width: 100%;
+  max-height: 100%;
+  margin-right: 0;
+  border: none;
+  border-left: 1px solid var(#{$rootPrefix}global-border-color);
+  background-color: var(#{$rootPrefix}global-background-color);
+
+  .toc {
+    max-width: 100%;
+    margin-inline: 1rem;
+
+    .toc-title {
+      font-size: $toc-title-font-size * 1.5;
+      line-height: $toc-title-font-size * 2;
+      margin-block: $toc-title-font-size;
+    }
+
+    .toc-content {
+      font-size: max($toc-content-font-size, 1rem);
+
+      nav {
+        max-height: calc(100dvh - 5rem);
+        overflow: auto;
+      }
+    }
+  }
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(2px);
+    transition:
+      display 0.5s allow-discrete,
+      overlay 0.5s allow-discrete,
+      opacity 0.2s 0.4s;
+    opacity: 0;
+  }
+
+  &[open],
+  &[open]::backdrop {
+    opacity: 1;
+    transition:
+      display 0.2s allow-discrete,
+      overlay 0.2s allow-discrete,
+      translate 0.2s,
+      opacity 0.2s;
+  }
+
+  &[open] {
+    translate: 0 0;
+  }
+
+  @starting-style {
+    &[open],
+    &[open]::backdrop {
+      opacity: 0;
+    }
+
+    &[open] {
+      translate: 100vw 0;
+    }
+  }
+}
+
+html:has(#toc-dialog[open]) {
+  overflow: hidden;
+}

assets/css/_partials/_widgets.scss

@@ -2,5 +2,6 @@
 @import '_widgets/fixed-button';
 @import '_widgets/github-corner';
 @import '_widgets/noscript-warning';
+@import '_widgets/post-chat';
 @import '_widgets/reading-progress';
 @import '_widgets/typeit';

assets/css/_partials/_widgets/_cookieconsent.scss

@@ -1,18 +1,14 @@
 .cc-window.cc-banner {
   .cc-btn {
-    color: $global-font-color;
+    color: var(#{$rootPrefix}global-font-color);
+    background-color: var(#{$rootPrefix}global-background-color);
 
     &:hover,
     &:focus {
       background-color: #ccc;
-    }
 
-    [data-theme='dark'] & {
-      color: $global-font-color;
-
-      &:hover,
-      &:focus {
-        background-color: #fff;
+      [data-theme='dark'] & {
+        background-color: #444;
       }
     }
   }

assets/css/_partials/_widgets/_fixed-button.scss

@@ -1,20 +1,33 @@
-.fixed-button {
+.fixed-buttons {
   position: fixed;
   right: 1.5rem;
+  bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  @include z-index(1);
+}
+
+.fixed-button {
   font-size: 1rem;
   line-height: 1.5rem;
   padding: 0.5rem 0.625rem;
-  color: $global-font-secondary-color;
+  // TODO
+  color: darken($global-font-secondary-color, 10%);
   background-color: $header-background-color;
-  @include z-index(1);
   @include border-radius(1.25rem);
   @include transition(color 0.4s ease);
   @include blur;
   @extend .print-d-none;
 
+  [data-theme='dark'] & {
+    color: $global-font-secondary-color-dark;
+    background-color: $header-background-color-dark;
+  }
+
   &:hover,
   &:active {
-    color: $global-font-color;
+    color: var(#{$rootPrefix}global-font-color);
     cursor: pointer;
   }
 
@@ -23,22 +36,51 @@
   &:hover {
     outline: none;
   }
-
-  [data-theme='dark'] & {
-    color: $global-font-secondary-color-dark;
-    background-color: $header-background-color-dark;
-
-    &:hover,
-    &:active {
-      color: $global-font-color-dark;
-    }
-  }
 }
 
 .back-to-top {
-  bottom: 1.5rem;
-}
+  overflow: hidden;
+  position: relative;
+  // Ring stroke width
+  #{$rootPrefix}b2t-stroke: 0.5rem;
+  // Ring background color
+  #{$rootPrefix}b2t-bg: #{$global-border-color};
+  // Progress color
+  #{$rootPrefix}b2t-prog: var(#{$rootPrefix}success);
+  // dasharray = circumference = 2πr
+  // dashoffset = circumference * (1 - scrollPercent / 100)
+  #{$rootPrefix}b2t-dasharray: 314.15;
 
-.view-comments {
-  bottom: 4.5rem;
+  [data-theme='dark'] & {
+    #{$rootPrefix}b2t-bg: #{$global-border-color-dark};
+    #{$rootPrefix}b2t-prog: #{$global-font-color-dark};
+  }
+
+  // SVG circular progress ring
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // Rotate to start from top
+    transform: rotate(-90deg);
+  }
+
+  .bg {
+    fill: none;
+    stroke: var(#{$rootPrefix}b2t-bg);
+    stroke-width: var(#{$rootPrefix}b2t-stroke);
+  }
+
+  // Progress ring
+  .progress {
+    fill: none;
+    stroke: var(#{$rootPrefix}b2t-prog);
+    stroke-width: var(#{$rootPrefix}b2t-stroke);
+    stroke-linecap: round;
+    stroke-dasharray: var(#{$rootPrefix}b2t-dasharray);
+    stroke-dashoffset: calc(var(#{$rootPrefix}b2t-dasharray) * (1 - var(#{$rootPrefix}b2t-progress, 0) / 100));
+    transition: stroke-dashoffset .1s linear;
+  }
 }

assets/css/_partials/_widgets/_noscript-warning.scss

@@ -1,5 +1,5 @@
 .noscript-warning {
-  background-color: var(--#{$prefix}danger);
+  background-color: var(#{$rootPrefix}danger);
   color: white;
   font-size: 1rem;
   font-weight: bold;
@@ -11,6 +11,6 @@
   @include z-index(2);
 
   [data-theme='dark'] & {
-    background-color: var(--#{$prefix}danger-dark);
+    background-color: var(#{$rootPrefix}danger-dark);
   }
 }

assets/css/_partials/_widgets/_post-chat.scss

@@ -0,0 +1,4 @@
+#postChat_button,
+.post-TianliGPT {
+  @extend .print-d-none;
+}

assets/css/_partials/_widgets/_reading-progress.scss

@@ -1,13 +1,12 @@
 .reading-progress-bar {
-  --progress: 0;
   height: var(--progress-h, 2px);
-  width: var(--progress);
-  background-color: var(--bg-progress, var(--#{$prefix}info));
+  width: var(--progress, 0);
+  background-color: var(--bg-progress, var(#{$rootPrefix}success));
   position: fixed;
   @include z-index(2);
   @extend .print-d-none;
   
   [data-theme="dark"] & {
-    background-color: var(--bg-progress-dark, var(--#{$prefix}info-dark));
+    background-color: var(--bg-progress-dark, #{$global-font-color-dark});
   }
 }

assets/css/_shortcodes/_admonition.scss

@@ -4,14 +4,52 @@
   padding: 0 0.75rem;
   border-left: .25rem solid;
   overflow: hidden;
+  background-color: var(#{$rootPrefix}admonition-bg-color);
+  border-left-color: var(#{$rootPrefix}admonition-color);
   @include border-radius($global-border-radius);
 
   .admonition-title {
-    font-weight: bold;
+    font-weight: var(#{$rootPrefix}admonition-title-font-weight, bold);
     margin: 0 -0.75rem;
     padding: 0.25rem 1.8rem;
     border-bottom: 1px solid;
+    position: relative;
     @include border-radius(0);
+
+    strong {
+      font-weight: bolder;
+      text-shadow: 0 0.05rem 0.05rem rgba(0, 0, 0, 0.2);
+
+      [data-theme='dark'] & {
+        text-shadow: 0 0.05rem 0.05rem rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    // title-only admonition without content
+    &:not(:has(+ .details-content)) {
+      #{$rootPrefix}admonition-title-font-weight: normal;
+      padding: 0.75rem 1rem 0.75rem 2.2rem;
+      border: 0;
+
+      i.icon {
+        left: 1.1rem;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  > .admonition-title {
+    border-bottom-color: var(#{$rootPrefix}admonition-bg-color);
+    background-color: var(#{$rootPrefix}admonition-bg-color-collapsed);
+    @include transition(all 0.2s ease);
+
+    i.icon {
+      color: var(#{$rootPrefix}admonition-color);
+    }
+  }
+
+  &.open > .admonition-title {
+    background-color: var(#{$rootPrefix}admonition-bg-color);
   }
 
   .admonition-content {
@@ -21,53 +59,39 @@
     > p {
       margin: 0;
     }
-    // title-only alert
-    &:empty {
-      display: none;
+
+    .code-block .code-header {
+      top: initial !important;
     }
   }
 
   i.icon {
     font-size: 0.85rem;
     position: absolute;
-    top: 0.6rem;
-    left: 0.4rem;
+    top: 50%;
+    left: 0.9rem;
+    translate: -50% -50%;
   }
 
   i.details-icon {
     position: absolute;
-    top: 0.6rem;
-    right: 0.3rem;
-  }
-  
-  background-color: var(--#{$prefix}admonition-bg-color);
-  border-left-color: var(--#{$prefix}admonition-color);
-
-  > .admonition-title {
-    border-bottom-color: var(--#{$prefix}admonition-bg-color);
-    background-color: var(--#{$prefix}admonition-bg-color-collapsed);
-
-    i.icon {
-      color: var(--#{$prefix}admonition-color);
-    }
-  }
-
-  &.open > .admonition-title {
-    background-color: var(--#{$prefix}admonition-bg-color);
+    top: 50%;
+    right: 0.9rem;
+    translate: 50% -50%;
   }
 
   // default admonition type is note
-  --#{$prefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)};
-  --#{$prefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)};
-  --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)};
+  #{$rootPrefix}admonition-color: #{map-get(map-get($admonition-color-map, note), color)};
+  #{$rootPrefix}admonition-bg-color: #{map-get(map-get($admonition-color-map, note), bg-color)};
+  #{$rootPrefix}admonition-bg-color-collapsed: #{opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15)};
 
   // set color for each admonition type
   @each $type, $item in $admonition-color-map {
     @if $type != 'note' {
       &.#{$type} {
-        --#{$prefix}admonition-color: #{map-get($item, color)};
-        --#{$prefix}admonition-bg-color: #{map-get($item, bg-color)};
-        --#{$prefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)};
+        #{$rootPrefix}admonition-color: #{map-get($item, color)};
+        #{$rootPrefix}admonition-bg-color: #{map-get($item, bg-color)};
+        #{$rootPrefix}admonition-bg-color-collapsed: #{opacify(map-get($item, bg-color), 0.15)};
       }
     }
   }
@@ -75,4 +99,13 @@
   &:last-child {
     margin-bottom: 0.75rem;
   }
+
+  // content-only admonition without title
+  &:not(:has(.admonition-title)) {
+    border: 1px solid var(#{$rootPrefix}admonition-bg-color);
+
+    .admonition-content {
+      padding: 0.75rem 0.25rem;
+    }
+  }
 }

assets/css/_shortcodes/_bluesky.scss

@@ -0,0 +1,3 @@
+.bluesky-embed {
+  margin: 1rem auto;
+}