Merge pull request #148 from gethinode/color

Transparent navbar

.eslintignore

@@ -1,3 +1,4 @@
-assets/js/index.js
+assets/js/color.js
+assets/js/flexsearch.js
 assets/js/vendor
 node_modules

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG]"
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Log file**
+If applicable, add a copy of Hugo's log messages.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - Host OS: [e.g. macOS Ventura 13.0]
+ - Node version: [e.g. node v18.10.0]
+ - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
+ - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,9 @@
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: build
+on:
+  push:
+    tags:
+      - v*
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [macos-latest, windows-latest, ubuntu-latest]
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build

.markdownlint-cli2.jsonc

@@ -5,7 +5,9 @@
     "MD024": false,
     "MD026": false,
     "MD033": false,
-    "MD034": false
+    "MD034": false,
+    "MD051": false,
+    "MD053": false
   },
   "ignores": ["node_modules", "CHANGELOG.md"]
 }

.stylelintignore

@@ -1,5 +1,7 @@
 assets/scss/common/_variables.scss
-assets/scss/components/_syntax.scss
+assets/scss/components/_syntax-dark.scss
+assets/scss/components/_syntax-light.scss
+assets/scss/hotfix
 assets/scss/vendor
 assets/scss/app.scss
 node_modules

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Mark Dumay
+Copyright (c) 2023 Mark Dumay
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,29 +2,32 @@
 
 <!-- Tagline -->
 <p align="center">
-    <b>A clean blog theme for your Hugo site based on Bootstrap 5</b>
+    <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
     <br />
 </p>
 
 <!-- Badges -->
 <p align="center">
-    <a href="https://app.netlify.com/sites/hinode-demo/deploys" alt="Netlify Status">
-        <img src="https://img.shields.io/netlify/151e88a3-d161-4045-856d-778fea43fc2f" />
+    <a href="https://gohugo.io" alt="Hugo website">
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+    </a>
+    <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67" />
     </a>
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
         <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/markdumay/hugo-theme-hinode.svg" />
+    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
     </a>
-    <a href="https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/markdumay/hugo-theme-hinode" />
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" />
     </a>
 </p>
 
@@ -41,26 +44,25 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/logo.png)
+![Logo](https://raw.githubusercontent.com/gethinode/hinode/main/static/img/logo.png)
 
 - [Online Demo][demo]
 - [PageSpeed Insights][pagespeed]
 - [Mozilla Observatory][observatory]
 
-Hinode is a clean blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
+Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
 
 Additional features include:
 
-- Comments
-- Social links
-- Blog pagination
-- Code highlighting
-- Color customization
-- i18n support
+- Support for multiple languages
+- Reusable Bootstrap components through configurable shortcodes and partials
+- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
+- Integrated sidebar navigation for content-heavy sections, such as documentation pages
+- Reponsive image handling for multiple screen sizes and resolutions
+- Optimized search results, scoring 100 points for SEO on [PageSpeed Insights][pagespeed]
+- Secure by default, scoring A+ on [Mozilla Observatory test][observatory]
 
-<!-- TODO: add tutorial deep-link 
-Detailed background information is available on the author's [personal blog][blog].
--->
+Detailed information about Hinode is available on the [official website][website].
 
 ## Prerequisites
 
@@ -70,60 +72,43 @@ Hinode requires Git, Node.js and npm for local development and testing. Download
 
 Start a new Hinode project in three steps:
 
-### 1. Create a new site
+1. Create a new site
 
-Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of the Hinode theme. As such, it is less applicable if you plan to customize a lot. Vice versa, the main theme allows for heavy customization, but is not synchronized with the latest available Hinode theme automatically.
+    Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
 
-Not quite sure? Use the Hinode child theme.
+    ```bash
+    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode child theme
+    Use the main theme if you intend to customize the base code:
 
-```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
-```
+    ```bash
+    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
+    ```
 
-#### Hinode main theme
+1. Install dependencies
 
-```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
-```
+    ```bash
+    npm install
+    ```
 
-### 2. Install dependencies
+1. Start development server
 
-```bash
-npm install
-```
-
-### 3. Start development server
-
-```bash
-npm run start
-```
+    ```bash
+    npm run start
+    ```
 
 ## Configuration
 
-The main site configuration is available in `./config/_default`. Some remarks:
-
-- **Menu items** - `menus/menus.en.toml` contains language-specific items for the navigation bar and social media links for the home page's footer.
-- **Content** - Ensure the `mainSections` in `config.toml` is synchronized with the `content` folder, default values are `["blog", "projects"]`.
-- **Theme color** - Update `themeColor` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility.
-- **Comments** - Comments are powered by [utterances][utterances], a lightweight comments widget built on GitHub issues. Update the `repo`  of the `[comments]` section of `params.toml`.
-- **Security headings** - The local development server uses the header configuration as provided by `server.toml`. Similar settings are defined in the `netlify.toml` file provided in the repository's root when deploying to [Netlify][netlify].
+See the [official documentation][getstarted] on how to configure your site.
 
 ## Contributing
 
-1. Clone the repository and create a new branch
-
-    ```console
-    git checkout https://github.com/markdumay/hugo-theme-hinode.git -b name_for_new_branch
-    ```
-
-2. Make and test the changes
-3. Submit a Pull Request with a comprehensive description of the changes
+See the [official documentation][contribute] on how to contribute to the open-source development of Hinode.
 
 ## Credits
 
-The Hinode theme is inspired by the following themes:
+Hinode is inspired by the following themes:
 
 - [Blist][blist] - a clean and fast blog theme for your Hugo site using Tailwind CSS.
 - [Doks][doks] - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
@@ -134,13 +119,12 @@ The Hinode theme is inspired by the following themes:
 
 ## License
 
-The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under the [MIT license][license]. The documentation (including the "README") is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hinode` and `child` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
 [bootstrap]: https://getbootstrap.com
 [cc-by-nc-4.0]: https://creativecommons.org/licenses/by-nc/4.0/
-[contrast_checker]: https://accessibleweb.com/color-contrast-checker/
 [doks]: https://github.com/h-enk/doks
 [flexsearch]: https://github.com/nextapps-de/flexsearch
 [git_download]: https://git-scm.com
@@ -148,16 +132,15 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 [netlify]: https://www.netlify.com
 [nodejs]: https://nodejs.org
 [npm]: https://www.npmjs.com
-[observatory]: https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org
-[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F
+[observatory]: https://observatory.mozilla.org/analyze/demo.gethinode.com
+[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F
 [utterances]: https://utteranc.es
 
 <!-- MARKDOWN MAINTAINED LINKS -->
-<!-- TODO: add blog link
-[blog]: https://markdumay.com
-[blog]: https://github.com/markdumay
--->
-[demo]: https://hinode-demo.markdumay.org/
-[license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
-[repository]: https://github.com/markdumay/hugo-theme-hinode.git
-[repository_child]: https://github.com/markdumay/hugo-theme-hinode-child.git
+[contribute]: https://gethinode.com/contribute
+[getstarted]: https://gethinode.com/docs
+[demo]: https://demo.gethinode.com/
+[license]: https://github.com/gethinode/hinode/blob/main/LICENSE
+[repository]: https://github.com/gethinode/hinode.git
+[repository_child]: https://github.com/gethinode/child.git
+[website]: https://gethinode.com/

assets/icons/accordion-button-active-icon-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_active_color_dark }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/accordion-button-active-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_active_color }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/accordion-button-icon-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_color_dark }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/accordion-button-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .accordion_icon_color }}'>
+    <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/btn-close-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .btn_close_color }}'>
+    <path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/>
+</svg>

assets/icons/btn-toggle-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512' fill='{{ .btn_toggle_color_dark }}'>
+    <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+</svg>

assets/icons/btn-toggle.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512' fill='{{ .btn_toggle_color }}'>
+    <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+</svg>

assets/icons/carousel-control-next-icon-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }}'>
+    <path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/>
+</svg>

assets/icons/carousel-control-prev-icon-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='{{ .carousel_control_color }}'>
+    <path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/>
+</svg>

assets/icons/form-check-input-checked-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+    <path fill='none' stroke='{{ .form_check_input_checked_color }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+</svg>

assets/icons/form-check-input-indeterminate-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+    <path fill='none' stroke='{{ .form_check_input_indeterminate_color }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+</svg>

assets/icons/form-check-radio-checked-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='2' fill='{{ .form_check_input_checked_color }}'/>
+</svg>

assets/icons/form-feedback-icon-invalid.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='{{ .form_feedback_icon_invalid_color }}'>
+    <circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='{{ .form_feedback_icon_invalid_color }}' stroke='none'/>
+</svg>

assets/icons/form-feedback-icon-valid.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'>
+    <path fill='{{ .form_feedback_icon_valid_color }}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/>
+</svg>

assets/icons/form-select-indicator-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+    <path fill='none' stroke='{{ .form_select_indicator_color_dark }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
+</svg>

assets/icons/form-select-indicator.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+    <path fill='none' stroke='{{ .form_select_indicator_color }}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/>
+</svg>

assets/icons/form-switch-bg-image-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='3' fill='{{ .form_switch_color_dark }}' />
+</svg>

assets/icons/form-switch-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='3' fill='{{ .form_switch_color }}' />
+</svg>

assets/icons/form-switch-checked-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='3' fill='{{ .form_switch_checked_color }}'/>
+</svg>

assets/icons/form-switch-focus-bg-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+    <circle r='3' fill='{{ .form_switch_focus_color }}'/>
+</svg>

assets/icons/navbar-dark-toggler-icon-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
+    <path stroke="{{ .navbar_dark_color }}" stroke-opacity="0.55" stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>
+</svg>

assets/icons/navbar-light-toggler-icon-bg.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
+    <path stroke='{{ .navbar_light_icon_color }}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>
+</svg>

assets/js/bootstrap.js

@@ -1 +0,0 @@
-import 'bootstrap/dist/js/bootstrap.bundle.min.js'

assets/js/clipboard.js

@@ -0,0 +1,38 @@
+/*
+Source:
+  - https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+*/
+
+const svgCopy =
+  '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>'
+const svgCheck =
+  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>'
+
+const addCopyButtons = (clipboard) => {
+  // 1. Look for pre > code elements in the DOM
+  document.querySelectorAll('pre > code').forEach((codeBlock) => {
+    // 2. Create a button that will trigger a copy operation
+    const button = document.createElement('button')
+    button.className = 'clipboard-button'
+    button.type = 'button'
+    button.innerHTML = svgCopy
+    button.addEventListener('click', () => {
+      clipboard.writeText(codeBlock.innerText).then(
+        () => {
+          button.blur()
+          button.innerHTML = svgCheck
+          setTimeout(() => (button.innerHTML = svgCopy), 2000)
+        },
+        // eslint-disable-next-line n/handle-callback-err
+        (error) => (button.innerHTML = 'Error')
+      )
+    })
+    // 3. Append the button directly before the pre tag
+    const pre = codeBlock.parentNode
+    pre.parentNode.insertBefore(button, pre)
+  })
+}
+
+if (navigator && navigator.clipboard) {
+  addCopyButtons(navigator.clipboard)
+}

assets/js/color.js

@@ -0,0 +1,67 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+{{ if site.Params.main.enableDarkMode }}
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeSelector = document.querySelector('.theme-icon-active')
+    const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const activeIcon = activeButton.querySelector('i')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    activeSelector.className = activeIcon.className
+    activeSelector.className = activeSelector.className.replace('theme-icon', 'theme-icon-active')
+    activeButton.classList.add('active')
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
+
+{{ end }}

assets/js/flexsearch.js

@@ -0,0 +1,161 @@
+/*
+Source:
+  - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
+*/
+
+var suggestions = document.getElementById('suggestions');
+var search = document.getElementById('search');
+
+if (search !== null) {
+  document.addEventListener('keydown', inputFocus);
+}
+
+function inputFocus(e) {
+  if (e.ctrlKey && e.key === '/' ) {
+    e.preventDefault();
+    search.focus();
+  }
+  if (e.key === 'Escape' ) {
+    search.blur();
+    suggestions.classList.add('d-none');
+  }
+}
+
+document.addEventListener('click', function(event) {
+
+  var isClickInsideElement = suggestions.contains(event.target);
+
+  if (!isClickInsideElement) {
+    suggestions.classList.add('d-none');
+  }
+
+});
+
+/*
+Source:
+  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
+*/
+
+document.addEventListener('keydown',suggestionFocus);
+
+function suggestionFocus(e) {
+  const suggestionsHidden = suggestions.classList.contains('d-none');
+  if (suggestionsHidden) return;
+
+  const focusableSuggestions= [...suggestions.querySelectorAll('a')];
+  if (focusableSuggestions.length === 0) return;
+
+  const index = focusableSuggestions.indexOf(document.activeElement);
+
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    const nextIndex = index > 0 ? index - 1 : 0;
+    focusableSuggestions[nextIndex].focus();
+  }
+  else if (e.key === "ArrowDown") {
+    e.preventDefault();
+    const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
+    focusableSuggestions[nextIndex].focus();
+  }
+}
+
+/*
+Source:
+  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
+  - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
+*/
+
+(function(){
+
+    var index = new FlexSearch.Document({
+      tokenize: "forward",
+      cache: 100,
+      document: {
+        id: "id",
+        tag: "tag",
+        store: ["href", "title", "description"],
+        index: ["title", "description", "content"]
+      }
+    });
+  
+    // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
+    // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
+    //       pages without a title (such as browserconfig.xml) are excluded
+    {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
+    {{ $len := (len $list) -}}
+  
+    index.add(
+      {{ range $index, $element := $list -}}
+        {
+          id: {{ $index }},
+          tag: "{{ .Lang }}",
+          href: "{{ .RelPermalink }}",
+          title: {{ .Title | jsonify }},
+          {{ with .Description -}}
+            description: {{ . | jsonify }},
+          {{ else -}}
+            description: {{ .Summary | plainify | jsonify }},
+          {{ end -}}
+          content: {{ .Plain | jsonify }}
+        })
+        {{ if ne (add $index 1) $len -}}
+          .add(
+        {{ end -}}
+      {{ end -}}
+    ;
+  
+    search.addEventListener('input', show_results, true);
+  
+    function show_results(){
+      const maxResult = 5;
+      var searchQuery = this.value;
+      // filter the results for the currently tagged language
+      const lang = document.documentElement.lang;
+      var results = index.search(searchQuery, { index: ['title', 'description', 'content'], limit: maxResult, tag: lang, enrich: true });
+  
+      // flatten results since index.search() returns results for each indexed field
+      const flatResults = new Map(); // keyed by href to dedupe results
+      for (const result of results.flatMap(r => r.result)) {
+        if (flatResults.has(result.doc.href)) continue;
+        flatResults.set(result.doc.href, result.doc);
+      }
+  
+      suggestions.innerHTML = "";
+      suggestions.classList.remove('d-none');
+  
+      // inform user that no results were found
+      if (flatResults.size === 0 && searchQuery) {
+        const noResultsMessage = document.createElement('div')
+        noResultsMessage.innerHTML = `{{ T "ui_no_results" }} "<strong>${searchQuery}</strong>"`
+        noResultsMessage.classList.add("suggestion__no-results");
+        suggestions.appendChild(noResultsMessage);
+        return;
+      }
+  
+      // construct a list of suggestions
+      for(const [href, doc] of flatResults) {
+          const entry = document.createElement('div');
+          suggestions.appendChild(entry);
+  
+          const a = document.createElement('a');
+          a.href = href;
+          entry.appendChild(a);
+  
+          const title = document.createElement('span');
+          title.classList.add('text-start');
+          title.textContent = doc.title;
+          title.classList.add("suggestion__title");
+          a.appendChild(title);
+  
+          const description = document.createElement('span');
+          description.textContent = doc.description;
+          description.classList.add("suggestion__description");
+          a.appendChild(description);
+  
+          suggestions.appendChild(entry);
+  
+          if(suggestions.childElementCount == maxResult) break;
+      }
+    }
+  }());
+  

assets/js/index.js

@@ -1,196 +0,0 @@
-/*
-Source:
-  - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
-*/
-
-var suggestions = document.getElementById('suggestions');
-var search = document.getElementById('search');
-
-if (search !== null) {
-  document.addEventListener('keydown', inputFocus);
-}
-
-function inputFocus(e) {
-  if (e.ctrlKey && e.key === '/' ) {
-    e.preventDefault();
-    search.focus();
-  }
-  if (e.key === 'Escape' ) {
-    search.blur();
-    suggestions.classList.add('d-none');
-  }
-}
-
-document.addEventListener('click', function(event) {
-
-  var isClickInsideElement = suggestions.contains(event.target);
-
-  if (!isClickInsideElement) {
-    suggestions.classList.add('d-none');
-  }
-
-});
-
-/*
-Source:
-  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-*/
-
-document.addEventListener('keydown',suggestionFocus);
-
-function suggestionFocus(e) {
-  const suggestionsHidden = suggestions.classList.contains('d-none');
-  if (suggestionsHidden) return;
-
-  const focusableSuggestions= [...suggestions.querySelectorAll('a')];
-  if (focusableSuggestions.length === 0) return;
-
-  const index = focusableSuggestions.indexOf(document.activeElement);
-
-  if (e.key === "ArrowUp") {
-    e.preventDefault();
-    const nextIndex = index > 0 ? index - 1 : 0;
-    focusableSuggestions[nextIndex].focus();
-  }
-  else if (e.key === "ArrowDown") {
-    e.preventDefault();
-    const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
-    focusableSuggestions[nextIndex].focus();
-  }
-
-}
-
-/*
-Source:
-  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-  - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-*/
-
-(function(){
-
-  var index = new FlexSearch.Document({
-    tokenize: "forward",
-    cache: 100,
-    document: {
-      id: 'id',
-      store: [
-        "href", "title", "description"
-      ],
-      index: ["title", "description", "content"]
-    }
-  });
-
-  // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-
-  {{ $list := (site.RegularPages) -}}
-  {{ $len := (len $list) -}}
-
-  index.add(
-    {{ range $index, $element := $list -}}
-      {
-        id: {{ $index }},
-        href: "{{ .RelPermalink }}",
-        title: {{ .Title | jsonify }},
-        {{ with .Description -}}
-          description: {{ . | jsonify }},
-        {{ else -}}
-          description: {{ .Summary | plainify | jsonify }},
-        {{ end -}}
-        content: {{ .Plain | jsonify }}
-      })
-      {{ if ne (add $index 1) $len -}}
-        .add(
-      {{ end -}}
-    {{ end -}}
-  ;
-
-  search.addEventListener('input', show_results, true);
-
-  function show_results(){
-    const maxResult = 5;
-    var searchQuery = this.value;
-    var results = index.search(searchQuery, {limit: maxResult, enrich: true});
-
-    // flatten results since index.search() returns results for each indexed field
-    const flatResults = new Map(); // keyed by href to dedupe results
-    for (const result of results.flatMap(r => r.result)) {
-      if (flatResults.has(result.doc.href)) continue;
-      flatResults.set(result.doc.href, result.doc);
-    }
-
-    suggestions.innerHTML = "";
-    suggestions.classList.remove('d-none');
-
-    // inform user that no results were found
-    if (flatResults.size === 0 && searchQuery) {
-      const noResultsMessage = document.createElement('div')
-      noResultsMessage.innerHTML = `{{ T "ui_no_results" }} "<strong>${searchQuery}</strong>"`
-      noResultsMessage.classList.add("suggestion__no-results");
-      suggestions.appendChild(noResultsMessage);
-      return;
-    }
-
-    // construct a list of suggestions
-    for(const [href, doc] of flatResults) {
-        const entry = document.createElement('div');
-        suggestions.appendChild(entry);
-
-        const a = document.createElement('a');
-        a.href = href;
-        entry.appendChild(a);
-
-        const title = document.createElement('span');
-        title.textContent = doc.title;
-        title.classList.add("suggestion__title");
-        a.appendChild(title);
-
-        const description = document.createElement('span');
-        description.textContent = doc.description;
-        description.classList.add("suggestion__description");
-        a.appendChild(description);
-
-        suggestions.appendChild(entry);
-
-        if(suggestions.childElementCount == maxResult) break;
-    }
-  }
-}());
-
-
-/*
-Source:
-  - https://simplernerd.com/hugo-add-copy-to-clipboard-button/
-*/
-
-const svgCopy =
-  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
-const svgCheck =
-  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
-
-const addCopyButtons = (clipboard) => {
-    // 1. Look for pre > code elements in the DOM
-    document.querySelectorAll("pre > code").forEach((codeBlock) => {
-      // 2. Create a button that will trigger a copy operation
-      const button = document.createElement("button");
-      button.className = "clipboard-button";
-      button.type = "button";
-      button.innerHTML = svgCopy;
-      button.addEventListener("click", () => {
-        clipboard.writeText(codeBlock.innerText).then(
-          () => {
-            button.blur();
-            button.innerHTML = svgCheck;
-            setTimeout(() => (button.innerHTML = svgCopy), 2000);
-          },
-          (error) => (button.innerHTML = "Error")
-        );
-      });
-      // 3. Append the button directly before the pre tag
-      const pre = codeBlock.parentNode;
-      pre.parentNode.insertBefore(button, pre);
-    });
-  };
-  
-  if (navigator && navigator.clipboard) {
-    addCopyButtons(navigator.clipboard);
-  }

assets/js/navbar.js

@@ -0,0 +1,16 @@
+const navbar = document.querySelector('.navbar')
+const toggler = document.getElementById('main-nav-toggler')
+
+// set the navbar background color to opaque when scrolling past a breakpoint
+window.onscroll = () => {
+  if (window.scrollY > 75) {
+    navbar.classList.add('nav-active')
+  } else {
+    navbar.classList.remove('nav-active')
+  }
+}
+
+// set the navbar background color to opaque when expanded
+toggler.onclick = () => {
+  navbar.classList.toggle('navbar-expanded')
+}

assets/js/popover.js

@@ -0,0 +1,3 @@
+const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+// eslint-disable-next-line no-undef, no-unused-vars
+const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

assets/js/toast.js

@@ -0,0 +1,10 @@
+// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
+const toastTrigger = document.getElementById('toastButton')
+const toastLiveExample = document.getElementById('toastMessage')
+if (toastTrigger) {
+  toastTrigger.addEventListener('click', () => {
+    // eslint-disable-next-line no-undef
+    const toast = new bootstrap.Toast(toastLiveExample)
+    toast.show()
+  })
+}

assets/js/tooltip.js

@@ -0,0 +1,4 @@
+// Bootstrap tooltip example: https://getbootstrap.com/docs/5.2/components/tooltips/
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+// eslint-disable-next-line no-unused-vars, no-undef
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

assets/scss/app.scss

@@ -1,20 +1,36 @@
-// Define template variables 
-$themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
-
-// Import Bootstrap functions
-@import "bootstrap/scss/functions";
+// Define template variables
+// TODO: optimize, see https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053
+//       requires installation of dart-sass, no cross-platform installation available yet
+$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
+$primary:                       {{ site.Params.style.primary | default "#007bff" }};
+$secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
+$success:                       {{ site.Params.style.success | default "#198754" }};
+$info:                          {{ site.Params.style.info | default "#0dcaf0" }};
+$warning:                       {{ site.Params.style.warning | default "#ffc107" }};
+$danger:                        {{ site.Params.style.danger | default "#dc3545" }};
+$light:                         {{ site.Params.style.light | default "#f8f9fa" }};
+$dark:                          {{ site.Params.style.dark | default "#212529" }};
+$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "4em" }}{{ else }}0em{{ end }};
+$enable-dark-mode:              {{ site.Params.main.enableDarkMode | default true }} !default;
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "common/icons.scss";
+
+// Import Bootstrap banner and functions
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+@import "bootstrap/scss/functions";
 
 // Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
+@import "hotfix/variables";
+@import "hotfix/variables-dark.scss";
+@import "hotfix/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
 // Import Bootstrap layout & components
-@import "bootstrap/scss/root";
+@import "hotfix/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -53,21 +69,35 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 @import "bootstrap/scss/utilities/api";
 
 // Import Font Awesome
+// scss-docs-start awesome
 @import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/regular";
 @import "@fortawesome/fontawesome-free/scss/solid";
 @import "@fortawesome/fontawesome-free/scss/brands";
+// scss-docs-end awesome
 
-// Import theme styles
+// Import Hinode theme styles
 @import "components/blockquote.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
+@import "components/carousel.scss";
 @import "components/clipboard.scss";
+@import "components/command.scss";
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/popover.scss";
 @import "components/search.scss";
+@import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/toc.scss";
 @import "components/vimeo.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
+@import "common/export.scss";
+@import "helpers/colored-links.scss";
+@import "helpers/hidden.scss";
+
+// Import theme placeholder
+@import "theme.scss";

assets/scss/common/_export.scss

@@ -0,0 +1,27 @@
+// stylelint-disable selector-pseudo-class-no-unknown
+
+// scss-docs-start export
+:hinode-theme {
+    --accordion-icon-active-color: #{$accordion-icon-active-color};
+    --accordion-icon-active-color-dark: #{$gray-300};
+    --accordion-icon-color: #{$accordion-icon-color};
+    --accordion-icon-color-dark: #{$gray-600};
+    --btn-close-color: #{$btn-close-color};
+    --btn-toggle-color: #{$btn-toggle-color};
+    --btn-toggle-color-dark: #{$gray-600};
+    --carousel-control-color: #{$carousel-control-color};
+    --form-check-input-checked-color: #{$form-check-input-checked-color};
+    --form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
+    --form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
+    --form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
+    --form-select-indicator-color: #{$form-select-indicator-color};
+    --form-select-indicator-color-dark: #{$form-select-indicator-color-dark};
+    --form-switch-checked-color: #{$form-switch-checked-color};
+    --form-switch-color: #{$form-switch-color};
+    --form-switch-color-dark: #{$form-switch-color-dark};
+    --form-switch-focus-color: #{$form-switch-focus-color};
+    --navbar-dark-color: #{$navbar-dark-color};
+    --navbar-light-icon-color: rgba($body-color, 0.75); // TODO: See https://github.com/twbs/bootstrap/pull/37720
+}
+
+// scss-docs-end export

assets/scss/common/_icons.scss

@@ -0,0 +1,25 @@
+// scss-docs-start icons
+$form-check-input-checked-bg-image:             url("icons/form-check-input-checked-bg-image.svg") !default;
+$form-check-radio-checked-bg-image:             url("icons/form-check-radio-checked-bg-image.svg") !default;
+$form-check-input-indeterminate-bg-image:       url("icons/form-check-input-indeterminate-bg-image.svg") !default;
+$form-switch-bg-image:                          url("icons/form-switch-bg-image.svg") !default;
+$form-switch-bg-image-dark:                     url("icons/form-switch-bg-image-dark.svg") !default;
+$form-switch-focus-bg-image:                    url("icons/form-switch-focus-bg-image.svg") !default;
+$form-switch-checked-bg-image:                  url("icons/form-switch-checked-bg-image.svg") !default;
+$form-select-indicator:                         url("icons/form-select-indicator.svg") !default;
+$form-select-indicator-dark:                    url("icons/form-select-indicator-dark.svg") !default;
+$form-feedback-icon-valid:                      url("icons/form-feedback-icon-valid.svg") !default;
+$form-feedback-icon-invalid:                    url("icons/form-feedback-icon-invalid.svg") !default;
+$navbar-light-toggler-icon-bg:                  url("icons/navbar-light-toggler-icon-bg.svg") !default;
+$navbar-dark-toggler-icon-bg:                   url("icons/navbar-dark-toggler-icon-bg.svg") !default;
+$accordion-button-icon:                         url("icons/accordion-button-icon.svg") !default;
+$accordion-button-icon-dark:                    url("icons/accordion-button-icon-dark.svg") !default;
+$accordion-button-active-icon:                  url("icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon-dark:             url("icons/accordion-button-active-icon-dark.svg") !default;
+$carousel-control-prev-icon-bg:                 url("icons/carousel-control-prev-icon-bg.svg") !default;
+$carousel-control-next-icon-bg:                 url("icons/carousel-control-next-icon-bg.svg") !default;
+$btn-close-bg:                                  url("icons/btn-close-bg.svg") !default;
+$btn-toggle:                                    url("icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("icons/btn-toggle-dark.svg") !default;
+
+// scss-docs-end icons

assets/scss/common/_styles.scss

@@ -15,44 +15,6 @@ a:active {
     min-height: 100vh;
 }
 
-//
-// Table of contents sidebar
-//
-.toc {
-    grid-area: toc;
-    top: 5rem;
-    right: 0;
-    z-index: 2;
-    height: calc(100vh - 7rem);
-    overflow-y: auto;
-}
-
-.toc nav {
-    font-size: 0.875rem;
-}
-
-.toc nav ul {
-    padding-left: 0;
-    list-style: none;
-}
-
-.toc nav ul ul {
-    padding-left: 1rem;
-    margin-top: 0.25rem;
-}
-
-.toc nav li {
-    margin-bottom: 0.25rem;
-}
-
-.toc nav a {
-    color: inherit;
-}
-
-.toc nav a:not(:hover) {
-    text-decoration: none;
-}
-
-.toc nav a code {
-    font: inherit;
+.tickmark li::marker {
+    content: "✓ ";
 }

assets/scss/common/_variables.scss

@@ -1,5 +1,4 @@
 // Bootstrap variables overrides for theme
-$primary:                       $themeColor;
 $enable-negative-margins:       true;
 
 // Font awesome variables overrides for theme
@@ -8,10 +7,23 @@ $fa-font-path:                  "../fonts";
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
-$font-family-sans-serif:        "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+// scss-docs-start font
+$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
 $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
+
+strong {
+    font-weight:                600 !important;
+}
+// scss-docs-end font
+
+$black:                       #000 !default;
+$btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;

assets/scss/components/_card.scss

@@ -1,3 +1,5 @@
+// stylelint-disable annotation-no-unknown
+
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376
 
@@ -31,12 +33,39 @@
     opacity: 1;
 }
 
-.project-card {
+.card-emphasize {
     transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
     cursor: pointer;
 }
 
-.project-card:hover {
+.card-emphasize:hover {
     transform: scale(1.01);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
+
+.card-body-link {
+    color: $body-color if($enable-important-utilities, !important, null);
+
+    @if $link-shade-percentage != 0 {
+        &:hover,
+        &:focus {
+            color: tint-color($body-color, $link-shade-percentage) if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card-body-link {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+
+            @if $link-shade-percentage != 0 {
+                &:hover,
+                &:focus {
+                    color: shade-color($gray-500, $link-shade-percentage) if($enable-important-utilities, !important, null);
+                }
+            }
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/components/_carousel.scss

@@ -0,0 +1,8 @@
+.gradient {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+}

assets/scss/components/_clipboard.scss

@@ -5,11 +5,9 @@
     right: 0;
     padding: 2px 7px 5px;
     margin: 5px;
-    color: #767676;
-    border-color: #767676;
-    background-color: #ededed;
-    border: 1px solid;
-    border-radius: 6px;
+    color: $secondary;
+    background-color: transparent;
+    border-style: none;
     font-size: 0.8em;
     z-index: 1;
     opacity: 0;
@@ -17,17 +15,16 @@
 }
 
 .clipboard-button > svg {
-    fill: #767676;
+    fill: $secondary;
 }
 
 .clipboard-button:hover {
     cursor: pointer;
-    border-color: #696969;
-    background-color: #e0e0e0;
+    color: $primary;
 }
 
 .clipboard-button:hover > svg {
-    fill: #696969;
+    fill: $primary;
 }
 
 .clipboard-button:focus {

assets/scss/components/_command.scss

@@ -0,0 +1,43 @@
+/* Adapted from PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&plugins=command-line */
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.command-line-prompt {
+    border-right: 1px solid #999;
+    display: block;
+    float: left;
+    font-size: 100%;
+    letter-spacing: -1px;
+    margin-right: 1em;
+    pointer-events: none;
+    text-align: right;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.command-line-prompt > span::before {
+    opacity: 0.7;
+    content: " ";
+    display: block;
+    padding-right: 0.8em;
+}
+
+.command-line-prompt > span[data-prompt]::before {
+    content: attr(data-prompt);
+}
+
+.command-line-prompt > span[data-continuation-prompt]::before {
+    content: attr(data-continuation-prompt);
+}
+
+.command-line span.token.output {
+    /* Make shell output lines a bit lighter to distinguish them from shell commands */
+    opacity: 0.7;
+}

assets/scss/components/_img.scss

@@ -8,3 +8,9 @@
     width: 100%;
     object-fit: cover;
 }
+
+.card-img-h100 {
+    width: auto;
+    height: 100%;
+    object-fit: cover;
+}

assets/scss/components/_navbar.scss

@@ -1,5 +1,16 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
 
+.navbar {
+    transition: 0.5s ease-in-out;
+    background-color: none;
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-body-bg);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 !important;
@@ -65,3 +76,21 @@
 .navbar-toggler.collapsed .toggler-icon {
     background-color: #777;
 }
+
+.emphasis {
+    background-color: $black if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .emphasis {
+            background-color: $white if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+.nav-spacing {
+    width: 26px;
+}
+
+// stylelint-enable annotation-no-unknown

assets/scss/components/_popover.scss

@@ -0,0 +1,3 @@
+.popover-header {
+    margin-top: 0;
+}

assets/scss/components/_search.scss

@@ -11,7 +11,7 @@
 .form-control.is-search {
     padding-right: 4rem;
     border: 1px solid transparent;
-    background: $gray-100;
+    background: var(--bs-tertiary-bg);
 }
 
 .form-control.is-search:focus {
@@ -29,9 +29,9 @@
     padding-right: 0.3125rem;
     padding-left: 0.3125rem;
     font-size: $font-size-base * 0.75;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
     content: "Ctrl + /";
-    border: 1px solid $gray-300;
+    border: 1px solid var(--bs-border-color);
     border-radius: 0.25rem;
 }
 
@@ -59,12 +59,12 @@
 }
 
 #suggestions a:focus {
-    background: $gray-100;
+    background-color: var(--bs-tertiary-bg);
     outline: 0;
 }
 
 #suggestions div:not(:first-child) {
-    border-top: 1px dashed $gray-200;
+    border-top: 1px dashed var(--bs-border-color);
 }
 
 #suggestions div:first-child {
@@ -76,7 +76,7 @@
 }
 
 #suggestions a:hover {
-    background: $gray-100;
+    background-color: var(--bs-tertiary-bg);
 }
 
 #suggestions span {
@@ -86,12 +86,11 @@
 
 .suggestion__title {
     font-weight: $headings-font-weight;
-    color: $black;
 }
 
 .suggestion__description,
 .suggestion__no-results {
-    color: $gray-700;
+    color: var(--bs-secondary-color);
 }
 
 @include media-breakpoint-up(sm) {
@@ -106,7 +105,7 @@
     .suggestion__title {
         width: 9rem;
         padding-right: 1rem;
-        border-right: 1px solid $gray-200;
+        border-right: 1px solid var(--bs-border-color);
         display: inline-block;
         text-align: right;
     }

assets/scss/components/_sidebar.scss

@@ -0,0 +1,100 @@
+// scss-docs-start sidebar
+.sidebar {
+    top: $navbar-offset;
+}
+
+.sidebar-item {
+    color: black;
+}
+
+.btn-toggle {
+    padding: 0.25rem 0.5rem;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.65);
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+        color: black;
+        background-color: tint-color($primary, 90%);
+    }
+
+    &::before {
+        width: 1.25em;
+        line-height: 0;
+        content: $btn-toggle;
+        transition: transform 0.35s ease;
+        transform-origin: 0.5em 50%;
+    }
+}
+
+.btn-toggle[aria-expanded="true"] {
+    color: black;
+
+    &::before {
+        transform: rotate(90deg);
+    }
+}
+
+.btn-toggle-nav a {
+    padding: 0.1875rem 0.5rem;
+    margin-top: 0.125rem;
+    margin-left: 1.25rem;
+
+    &:hover,
+    &:focus {
+        background-color: tint-color($primary, 90%);
+    }
+
+    &.active {
+        font-weight: bold;
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .sidebar-item {
+            color: var(--bs-tertiary-color);
+        }
+
+        .btn-toggle {
+            color: var(--bs-tertiary-color);
+        
+            &:hover,
+            &:focus {
+                color: $secondary;
+                background-color: tint-color($primary, 90%);
+            }
+        
+            &::before {
+                content: $btn-toggle-dark;
+            }
+        }
+
+        .btn-toggle[aria-expanded="true"] {
+            color: var(--bs-secondary-color);
+        }
+
+        .btn-toggle-nav a {
+            padding: 0.1875rem 0.5rem;
+            margin-top: 0.125rem;
+            margin-left: 1.25rem;
+
+            &:hover,
+            &:focus {
+                color: $secondary;
+                background-color: tint-color($primary, 90%);
+            }
+
+            &.active {
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+// scss-docs-end sidebar
+
+.dropdown-toggle {
+    outline: 0;
+}

assets/scss/components/_syntax-dark.scss

@@ -0,0 +1,86 @@
+/* Background */ .bg { color: #c9d1d9; background-color: #0d1117; }
+/* PreWrapper */ .chroma { color: #c9d1d9; background-color: #0d1117; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #f85149 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #ff7b72 }
+/* KeywordConstant */ .chroma .kc { color: #79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
+/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
+/* KeywordType */ .chroma .kt { color: #ff7b72 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na {  }
+/* NameBuiltin */ .chroma .nb {  }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
+/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ffa657 }
+/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #ff7b72 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py { color: #79c0ff }
+/* NameTag */ .chroma .nt { color: #7ee787 }
+/* NameVariable */ .chroma .nv { color: #79c0ff }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l { color: #a5d6ff }
+/* LiteralDate */ .chroma .ld { color: #79c0ff }
+/* LiteralString */ .chroma .s { color: #a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
+/* LiteralNumber */ .chroma .m { color: #a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
+/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { color: #ffa198 }
+/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
+/* GenericOutput */ .chroma .go { color: #8b949e }
+/* GenericPrompt */ .chroma .gp { color: #8b949e }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #79c0ff }
+/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #6e7681 }

assets/scss/components/_syntax-light.scss

@@ -0,0 +1,86 @@
+/* Background */ .bg { background-color: #ffffff; }
+/* PreWrapper */ .chroma { background-color: #ffffff; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #008080 }
+/* NameBuiltin */ .chroma .nb { color: #0086b3 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
+/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #008080 }
+/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #800080 }
+/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #555555 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #000080 }
+/* NameVariable */ .chroma .nv { color: #008080 }
+/* NameVariableClass */ .chroma .vc { color: #008080 }
+/* NameVariableGlobal */ .chroma .vg { color: #008080 }
+/* NameVariableInstance */ .chroma .vi { color: #008080 }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #dd1144 }
+/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
+/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
+/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
+/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
+/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
+/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
+/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
+/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
+/* LiteralStringRegex */ .chroma .sr { color: #009926 }
+/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
+/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+/* LiteralNumber */ .chroma .m { color: #009999 }
+/* LiteralNumberBin */ .chroma .mb { color: #009999 }
+/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+/* LiteralNumberHex */ .chroma .mh { color: #009999 }
+/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* Operator */ .chroma .o { color: #000000; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #aa0000 }
+/* GenericHeading */ .chroma .gh { color: #999999 }
+/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #555555 }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */ .chroma .gt { color: #aa0000 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }

assets/scss/components/_syntax.scss

@@ -1,85 +1,40 @@
-/* Background */ .bg { color: #272822; background-color: #fafafa }
-/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
-/* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
-/* CodeLine */ .chroma .cl {  }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* Line */ .chroma .line { display: flex; }
-/* Keyword */ .chroma .k { color: #00a8c8 }
-/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
-/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
-/* KeywordNamespace */ .chroma .kn { color: #f92672 }
-/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
-/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
-/* KeywordType */ .chroma .kt { color: #00a8c8 }
-/* Name */ .chroma .n { color: #111111 }
-/* NameAttribute */ .chroma .na { color: #75af00 }
-/* NameBuiltin */ .chroma .nb { color: #111111 }
-/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
-/* NameClass */ .chroma .nc { color: #75af00 }
-/* NameConstant */ .chroma .no { color: #00a8c8 }
-/* NameDecorator */ .chroma .nd { color: #75af00 }
-/* NameEntity */ .chroma .ni { color: #111111 }
-/* NameException */ .chroma .ne { color: #75af00 }
-/* NameFunction */ .chroma .nf { color: #75af00 }
-/* NameFunctionMagic */ .chroma .fm { color: #111111 }
-/* NameLabel */ .chroma .nl { color: #111111 }
-/* NameNamespace */ .chroma .nn { color: #111111 }
-/* NameOther */ .chroma .nx { color: #75af00 }
-/* NameProperty */ .chroma .py { color: #111111 }
-/* NameTag */ .chroma .nt { color: #f92672 }
-/* NameVariable */ .chroma .nv { color: #111111 }
-/* NameVariableClass */ .chroma .vc { color: #111111 }
-/* NameVariableGlobal */ .chroma .vg { color: #111111 }
-/* NameVariableInstance */ .chroma .vi { color: #111111 }
-/* NameVariableMagic */ .chroma .vm { color: #111111 }
-/* Literal */ .chroma .l { color: #ae81ff }
-/* LiteralDate */ .chroma .ld { color: #d88200 }
-/* LiteralString */ .chroma .s { color: #d88200 }
-/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
-/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
-/* LiteralStringChar */ .chroma .sc { color: #d88200 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
-/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
-/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
-/* LiteralStringEscape */ .chroma .se { color: #8045ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
-/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
-/* LiteralStringOther */ .chroma .sx { color: #d88200 }
-/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
-/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
-/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
-/* LiteralNumber */ .chroma .m { color: #ae81ff }
-/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
-/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
-/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
-/* Operator */ .chroma .o { color: #f92672 }
-/* OperatorWord */ .chroma .ow { color: #f92672 }
-/* Punctuation */ .chroma .p { color: #111111 }
-/* Comment */ .chroma .c { color: #75715e }
-/* CommentHashbang */ .chroma .ch { color: #75715e }
-/* CommentMultiline */ .chroma .cm { color: #75715e }
-/* CommentSingle */ .chroma .c1 { color: #75715e }
-/* CommentSpecial */ .chroma .cs { color: #75715e }
-/* CommentPreproc */ .chroma .cp { color: #75715e }
-/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd {  }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr {  }
-/* GenericHeading */ .chroma .gh {  }
-/* GenericInserted */ .chroma .gi {  }
-/* GenericOutput */ .chroma .go {  }
-/* GenericPrompt */ .chroma .gp {  }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu {  }
-/* GenericTraceback */ .chroma .gt {  }
-/* GenericUnderline */ .chroma .gl {  }
-/* TextWhitespace */ .chroma .w {  }
+// stylelint-disable annotation-no-unknown
+@import "syntax-light";
+
+.bg,
+.chroma,
+.chroma .err {
+    // set to transparent background to avoid rendering issues with example shortcode
+    background-color: transparent if($enable-important-utilities, !important, null);
+}
+
+.syntax-highlight {
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+}
+
+.preview-background {
+    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        @import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
+
+        .bg,
+        .chroma,
+        .chroma .err {
+            // set to transparent background to avoid rendering issues with example shortcode
+            background-color: transparent if($enable-important-utilities, !important, null);
+        }
+
+        .syntax-highlight {
+            background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
+        }
+
+        .bg,
+        .chroma {
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/components/_toc.scss

@@ -0,0 +1,44 @@
+//
+// Table of contents sidebar
+//
+// scss-docs-start toc
+.toc {
+    grid-area: toc;
+    right: 0;
+    z-index: 2;
+    height: calc(100vh - 7rem);
+    overflow-y: auto;
+    top: $navbar-offset;
+}
+
+// scss-docs-end toc
+
+.toc nav {
+    font-size: 0.875rem;
+}
+
+.toc nav ul {
+    padding-left: 0;
+    list-style: none;
+}
+
+.toc nav ul ul {
+    padding-left: 1rem;
+    margin-top: 0.25rem;
+}
+
+.toc nav li {
+    margin-bottom: 0.25rem;
+}
+
+.toc nav a {
+    color: inherit;
+}
+
+.toc nav a:not(:hover) {
+    text-decoration: none;
+}
+
+.toc nav a code {
+    font: inherit;
+}

assets/scss/helpers/_colored-links.scss

@@ -0,0 +1,21 @@
+// stylelint-disable function-name-case
+
+// scss-docs-start colored-links
+@each $color, $value in $theme-colors {
+    $contrast-color: color-contrast($value);
+    $color-rgb: to-rgb($value);
+
+    .link-bg-#{$color} {
+        color: $contrast-color !important; // stylelint-disable-line declaration-no-important
+        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); // stylelint-disable-line annotation-no-unknown
+
+        @if $link-shade-percentage != 0 {
+            &:hover,
+            &:focus {
+                color: if($contrast-color == $color-contrast-light, shade-color($contrast-color, $link-shade-percentage), tint-color($contrast-color, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
+            }
+        }
+    }
+}
+
+// scss-docs-end colored-links

assets/scss/helpers/_hidden.scss

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

assets/scss/hotfix/_maps.scss

@@ -0,0 +1,176 @@
+// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
+//
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
+// scss-docs-start theme-text-map
+$theme-colors-text: (
+  "primary": $primary-text-emphasis,
+  "secondary": $secondary-text-emphasis,
+  "success": $success-text-emphasis,
+  "info": $info-text-emphasis,
+  "warning": $warning-text-emphasis,
+  "danger": $danger-text-emphasis,
+  "light": $light-text-emphasis,
+  "dark": $dark-text-emphasis,
+) !default;
+// scss-docs-end theme-text-map
+
+// scss-docs-start theme-bg-subtle-map
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+// scss-docs-end theme-bg-subtle-map
+
+// scss-docs-start theme-border-subtle-map
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !default;
+// scss-docs-end theme-border-subtle-map
+
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  // scss-docs-start theme-text-dark-map
+  $theme-colors-text-dark: (
+    "primary": $primary-text-emphasis-dark,
+    "secondary": $secondary-text-emphasis-dark,
+    "success": $success-text-emphasis-dark,
+    "info": $info-text-emphasis-dark,
+    "warning": $warning-text-emphasis-dark,
+    "danger": $danger-text-emphasis-dark,
+    "light": $light-text-emphasis-dark,
+    "dark": $dark-text-emphasis-dark,
+  ) !default;
+  // scss-docs-end theme-text-dark-map
+
+  // scss-docs-start theme-bg-subtle-dark-map
+  $theme-colors-bg-subtle-dark: (
+    "primary": $primary-bg-subtle-dark,
+    "secondary": $secondary-bg-subtle-dark,
+    "success": $success-bg-subtle-dark,
+    "info": $info-bg-subtle-dark,
+    "warning": $warning-bg-subtle-dark,
+    "danger": $danger-bg-subtle-dark,
+    "light": $light-bg-subtle-dark,
+    "dark": $dark-bg-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-bg-subtle-dark-map
+
+  // scss-docs-start theme-border-subtle-dark-map
+  $theme-colors-border-subtle-dark: (
+    "primary": $primary-border-subtle-dark,
+    "secondary": $secondary-border-subtle-dark,
+    "success": $success-border-subtle-dark,
+    "info": $info-border-subtle-dark,
+    "warning": $warning-border-subtle-dark,
+    "danger": $danger-border-subtle-dark,
+    "light": $light-border-subtle-dark,
+    "dark": $dark-border-subtle-dark,
+  ) !default;
+  // scss-docs-end theme-border-subtle-dark-map
+}
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+  "success-emphasis": var(--#{$prefix}success-text-emphasis),
+  "info-emphasis": var(--#{$prefix}info-text-emphasis),
+  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+  "light-emphasis": var(--#{$prefix}light-text-emphasis),
+  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+) !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// scss-docs-end utilities-bg-colors
+
+// scss-docs-start utilities-border-colors
+$utilities-border: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white)
+  )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
+// scss-docs-end utilities-border-colors
+
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;

assets/scss/hotfix/_root.scss

@@ -0,0 +1,180 @@
+// Copied from https://github.com/twbs/bootstrap/commit/15744ee1d04bcca03155c3bb37ee7e65a7b011c6
+
+:root,
+[data-bs-theme="light"] {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  @each $color, $value in $colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $grays {
+    --#{$prefix}gray-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
+
+  // Root and body
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  @if $body-text-align != null {
+    --#{$prefix}body-text-align: #{$body-text-align};
+  }
+
+  --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  // scss-docs-end root-body-variables
+
+  @if $headings-color != null {
+    --#{$prefix}heading-color: #{$headings-color};
+  }
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+  // scss-docs-end root-focus-variables
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+
+    @if $headings-color-dark != null {
+      --#{$prefix}heading-color: #{$headings-color-dark};
+    }
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
+}

assets/scss/hotfix/_variables-dark.scss

@@ -0,0 +1,77 @@
+// Copied from https://github.com/twbs/bootstrap/pull/37953
+
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+$light-text-emphasis-dark:          $gray-100 !default;
+$dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   $gray-500 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$body-emphasis-color-dark:          $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               null !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark:                   tint-color($code-color, 40%) !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars

assets/scss/layouts/_reboot.scss

@@ -1,3 +1,4 @@
 pre {
     padding: $spacer;
+    margin-bottom: 0;
 }

assets/scss/layouts/_type.scss

@@ -3,24 +3,30 @@
 //
 h1 {
     margin-top: $spacer * 2.5;
+    scroll-margin-top: $navbar-offset;
 }
 
 h2 {
     margin-top: $spacer * 2;
+    scroll-margin-top: $navbar-offset;
 }
 
 h3 {
     margin-top: $spacer * 1.75;
+    scroll-margin-top: $navbar-offset;
 }
 
 h4 {
     margin-top: $spacer * 1.5;
+    scroll-margin-top: $navbar-offset;
 }
 
 h5 {
     margin-top: $spacer * 1.25;
+    scroll-margin-top: $navbar-offset;
 }
 
 h6 {
     margin-top: $spacer;
+    scroll-margin-top: $navbar-offset;
 }

assets/scss/theme.scss

@@ -0,0 +1,2 @@
+// Placeholder to quickly add your own styles
+// The file is included last in the build pipeline

config/_default/config.toml

@@ -1,25 +1,30 @@
-baseURL = "https://hinode-demo.markdumay.org/"
-canonifyURLs = false
-
+# toml-docs-start main
 title = "Hinode"
-author = "Mark Dumay"
-copyright = "Copyright © 2022 Mark Dumay."
+copyright = "Copyright © 2023 Mark Dumay."
 paginate = 9
+enableGitInfo = true
+# toml-docs-end main
+
+# additional settings
+baseURL = "https://demo.gethinode.com/"
+canonifyURLs = false
+enableEmoji = true
 enableRobotsTXT = true
-languageCode = "en-us"
 enableInlineShortcodes = true
+
 # prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
 # See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
 ignoreErrors = ["error-remote-getjson"]
-enableEmoji = true
 
-# Multilingual
+# toml-docs-start build
+timeout = "60s"
+# toml-docs-end build
+
+# toml-docs-start language
+languageCode = "en-us"
 defaultContentLanguage = "en"
-disableLanguages = ["nl"]
-
-
-
-mainSections = ["blog", "projects"]
+defaultContentLanguageInSubdir = true
+# toml-docs-end language
 
 [taxonomies]
   tag = 'tags'
@@ -48,7 +53,6 @@ mainSections = ["blog", "projects"]
   [services.twitter]
     disableInlineCSS = true
 
-
 [outputFormats]
   [outputFormats.XML]
     isPlainText = false
@@ -69,6 +73,13 @@ mainSections = ["blog", "projects"]
   [[module.mounts]]
     source = "static"
     target = "static"
+# toml-docs-start javascript
   [[module.mounts]]
-    source = "node_modules/flexsearch"
-    target = "assets/js/vendor/flexsearch"
+    source = "node_modules/bootstrap/dist/js"
+    target = "assets/js/vendor/bootstrap"
+    includeFiles = "*.bundle.js"
+  [[module.mounts]]
+    source = "node_modules/flexsearch/dist"
+    target = "assets/js/vendor/flexsearch"
+    includeFiles = "*.bundle.js"
+# toml-docs-end javascript

config/_default/languages.toml

@@ -1,12 +1,31 @@
+# toml-docs-start lang-main
 [en]
     languageName = "English"
     contentDir = "content/en"
     weight = 1
-    [en.params]
-        introTitle = "Welcome to Hinode!"
-        introCaption = "A clean blog theme for your Hugo site based on Bootstrap 5."
-        introLink = "/about"
-        introLinkTitle = "About"
+# toml-docs-end lang-main
+# toml-docs-start lang-param
+    [en.params.head]
+        tagline = "A Hugo Theme"
+    [en.params.feature]
+        link = "/en/about"
+        caption = "About"
+    [en.params.footer]
         license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
         socialTitle = "Follow me"
-        socialCaption = "I work on everything coding and tweet developer memes"
+        socialCaption = "I work on everything coding and tweet developer memes"
+# toml-docs-end lang-param
+
+[nl]
+    languageName = "Nederlands"
+    contentDir = "content/nl"
+    weight = 2
+    [nl.params.head]
+        tagline = "Een Hugo Thema"
+    [nl.params.feature]
+        link = "/nl/over-mij"
+        caption = "Over mij"
+    [nl.params.footer]
+        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
+        socialTitle = "Volg mij"
+        socialCaption = "Ik doe aan programmeren en tweet memes"

config/_default/markup.toml

@@ -10,8 +10,10 @@ defaultMarkdownHandler = "goldmark"
     lineNos = false
     lineNumbersInTable = false
     noClasses = false
-    # style = "monokailight" ## Update the 'create:syntax' command in package.json to modify the style
     tabWidth = 2
+    ## Update the 'create:syntax' command in package.json to modify the style
+    ## The first two lines have been modified to remove the background color
+    # style = "monokailight" 
 
 [goldmark]
     [goldmark.extensions]

config/_default/menus/menus.en.toml

@@ -13,6 +13,18 @@
   url = "/projects/"
   weight = 30
 
+[[main]]
+  name = "Sample project"
+  url = "/en/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[main]]
+  name = "Another project"
+  url = "/en/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+
 [[main]]
   name = "Tags"
   url = "/tags/"
@@ -34,4 +46,28 @@
   name = "Medium"
   pre = "<i class=\"fab fa-medium fa-2x\"></i>"
   url = "https://medium.com/"
-  weight = 30
+  weight = 30
+
+# toml-docs-start sample-navigation
+[[sample]]
+  name = "Blog"
+  url = "/blog/"
+  weight = 10
+
+[[sample]]
+  name = "Projects"
+  url = "/projects/"
+  weight = 20
+
+[[sample]]
+  name = "Sample project"
+  url = "/en/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[sample]]
+  name = "Another project"
+  url = "/en/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+# toml-docs-end sample-navigation

config/_default/menus/menus.nl.toml

@@ -0,0 +1,49 @@
+[[main]]
+  name = "Over mij"
+  url = "/over-mij/"
+  weight = 10
+
+[[main]]
+  name = "Blog"
+  url = "/blog/"
+  weight = 20
+
+[[main]]
+  name = "Projecten"
+  url = "/projecten/"
+  weight = 30
+
+[[main]]
+  name = "Voorbeeldproject"
+  url = "/nl/projecten/voorbeeldproject/"
+  parent = "Projecten"
+  weight = 1
+
+[[main]]
+  name = "Ander project"
+  url = "/nl/projecten/ander-project/"
+  parent = "Projecten"
+  weight = 2
+
+[[main]]
+  name = "Tags"
+  url = "/tags/"
+  weight = 40
+
+[[social]]
+  name = "LinkedIn"
+  pre = "<i class=\"fab fa-linkedin fa-2x\"></i>"
+  url = "https://linkedin.com/"
+  weight = 10
+
+[[social]]
+  name = "GitHub"
+  pre = "<i class=\"fab fa-github fa-2x\"></i>"
+  url = "https://github.com/"
+  weight = 20
+
+[[social]]
+  name = "Medium"
+  pre = "<i class=\"fab fa-medium fa-2x\"></i>"
+  url = "https://medium.com/"
+  weight = 30

config/_default/params.toml

@@ -1,56 +1,110 @@
-## Homepage
-title = "Hinode"
-titleSeparator = "-"
-titleAddition = "Clean Blog Theme"
-description = "Hinode is a clean blog theme for your Hugo site based on Bootstrap 5."
+# toml-docs-start main
+[main]
+    separator = "-"
+    description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
+    enableDarkMode = true
+# toml-docs-end main
 
-## Open Graph
-images = ["logo.png"]
-ogLocale = "en_US"
-domainTLD = "hinode-demo.markdumay.org"
+# toml-docs-start docs
+[docs]
+    version = "0.8"
+    basePath = ""
+# toml-docs-end docs
 
-## Twitter Cards
-# twitterSite = "@gethinode"
-# twitterCreator = "@markdumay"
+# toml-docs-start home
+[home]
+    sections = ["blog", "projects"]
+    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
+    fullCover = false
+    style = ""
+# toml-docs-end home
 
-## JSON-LD
-schemaType = "Organization"
-schemaName = "Hinode"
-schemaAuthor = "Mark Dumay"
-schemaAuthorTwitter = "https://twitter.com/markdumay"
-schemaAuthorLinkedIn = "https://www.linkedin.com/in/markdumay/"
-schemaAuthorGitHub = "https://github.com/markdumay"
-schemaLocale = "en-US"
-schemaLogo = "logo512x512.png"
-schemaLogoWidth = 512
-schemaLogoHeight = 512
-schemaImage = "logo1280x640.png"
-schemaImageWidth = 1280
-schemaImageHeight = 640
-# schemaTwitter = "https://twitter.com/gethinode"
-# schemaLinkedIn = ""
-schemaGitHub = "https://github.com/markdumay/hugo-theme-hinode"
-schemaSection = "blog"
+# toml-docs-start navigation
+[navigation]
+    logo = "/img/logo_icon.svg"
+    color = "body"
+    fixed = true
+    offset = "4em"
+    search = true
+    breadcrumb = false
+    toc = true
+    sidebar = true
+# toml-docs-end navigation
 
+# toml-docs-start list
+[list]
+    [blog]
+        title = "Blog"
+        sort = "date"
+        reverse = false
+        cols = 3
+        color = ""
+        padding = "0"
+        header = "full"
+        footer = "none"
+        orientation = "stacked"
+        style = "border-0"
+        homepage = 3
+    [projects]
+        title = "Projects"
+        sort = "title"
+        reverse = false
+        cols = 1
+        color = ""
+        padding = "3"
+        header = "none"
+        footer = "tags"
+        orientation = "none"
+        style = "border-1 card-emphasize"
+        homepage = 3
+# toml-docs-end list
 
 [favicon]
     logo = "img/favicon.png"
     sizes = [16, 32, 48]
 
-[search]
-    enabled = true
-
-[toc]
-    enabled = true
-
+# toml-docs-start theme-colors
 [style]
-    themeColor = "#D43900" #00b0f0
+    primary = "#D43900"
+    secondary = "#6c757d"
+    success = "#198754"
+    info = "#0dcaf0"
+    warning = "#ffc107"
+    danger = "#dc3545"
+    light = "#f8f9fa"
+    dark = "#212529"
+# toml-docs-end theme-colors
     themeOpacity = "10"
+# toml-docs-start font
+    themeFont = "Inter"
+    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
+# toml-docs-end font
 
-[main]
-    featurePhoto = "img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
-    logo = "/logo_embedded.svg"
+[schema]
+    type = "Organization"
+    name = "Hinode"
+    locale = "en-US"
+    # twitter = "https://twitter.com/gethinode"
+    # linkedIn = ""
+    github = "https://github.com/gethinode/hinode"
+    section = "blog"
+    [author]
+        name = "Mark Dumay"
+        # twitter = "https://twitter.com/markdumay"
+        linkedin = "https://www.linkedin.com/in/markdumay/"
+        github = "https://github.com/markdumay"
+    [logo]
+        url = "img/logo512x512.png"
+        width = 512
+        height = 512
+    [image]
+        url = "img/logo1280x640.png"
+        width = 1280
+        height = 640
 
+[opengraph]
+    images = ["logo.png"]
+    locale = "en_US"
 
 [comments]
     enabled = false
@@ -60,3 +114,13 @@ schemaSection = "blog"
     # By default, light and dark mode correspond to github-light and github-dark, respectively.
     # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
     #theme = "" 
+
+[links]
+    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
+    hinode_docs = "https://gethinode.com/docs"
+    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
+    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
+    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
+    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
+    utterances = "https://utteranc.es"
+ 

config/_default/server.toml

@@ -1,3 +1,4 @@
+# toml-docs-start server-config
 [[headers]]
 for = '/**'
 [headers.values]
@@ -7,15 +8,13 @@ for = '/**'
     Content-Security-Policy = """\
         default-src 'self'; \
         script-src 'self' \
-            https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js \
-            https://cdn.jsdelivr.net/npm/flexsearch@0.7.21/dist/flexsearch.bundle.js \
             https://utteranc.es/client.js; \
-        style-src 'self' localhost:1313 https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
+        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
-        connect-src 'self' localhost:1313 ws://localhost:1313/livereload; \
+        connect-src 'self'; \
         font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
+        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
         img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
         manifest-src 'self'; \
         media-src 'self' \
@@ -33,5 +32,11 @@ for = '/**'
         fullscreen=(), \
         payment=() \
         """
-    Cache-Control = "public, max-age=31536000"
-    Access-Control-Allow-Origin = "*"
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
+    Access-Control-Allow-Origin = "*"
+# toml-docs-end server-config

config/postcss.config.js

@@ -27,7 +27,7 @@ module.exports = {
         /fa.*/,
         /ratio.*/,
         /suggestion.*/,
-      ...whitelister([
+        ...whitelister([
           './assets/scss/components/_blockquote.scss',
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_card.scss',

config/production/deployment.toml

@@ -0,0 +1,31 @@
+# toml-docs-start az-blob
+# By default, files are uploaded in an arbitrary order.
+# Files that match the regular expressions in the "Order" list
+# will be uploaded first, in the listed order.
+order = [".webp$", ".jpg$", ".gif$"]
+
+[targets]
+name = "hinode"
+URL = "azblob://$web"
+
+[[matchers]]
+# Cache static assets for 1 year.
+pattern = "^.+\\.(js|css|svg|ttf)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = true
+
+[[matchers]]
+pattern = "^.+\\.(png|jpg|webp)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = false
+
+[[matchers]]
+# Set custom content type for /sitemap.xml
+pattern = "^sitemap\\.xml$"
+contentType = "application/xml"
+gzip = true
+
+[[matchers]]
+pattern = "^.+\\.(html|xml|json)$"
+gzip = true
+# toml-docs-end az-blob

content/en/_index.md

@@ -1,3 +1,6 @@
 ---
-author: "Hugo Authors"
+author: Mark Dumay
+title: Welcome to Hinode!
 ---
+
+A clean documentation and blog theme for your Hugo site based on Bootstrap 5.

content/en/about.md

@@ -1,48 +1,42 @@
 ---
-title: "About"
-description: "A clean blog theme for your Hugo site based on Bootstrap 5."
-date: "2022-04-11"
+title: About
+description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+date: 2022-04-11
+updated: 2023-02-11
 showComments: false
 ---
 
-<p class="text-center"><img src="/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
+<p class="text-center"><svg class="img-fluid w-50"><use href="/img/logo_var.svg#logo"></use></svg></p>
 
-<center>Hinode is a clean blog theme for Hugo, an open-source static site generator.</center>
-
-<section class="section section-sm mt-5">
-  <div class="container-fluid">
-    <div class="row justify-content-center text-center">
-    <div class="row justify-content-center text-center">
-      <div class="col-lg-4">
-        <i class="fa-brands fa-bootstrap fa-2xl"></i>
-        <h2 class="h4">Bootstrap framework</h2>
-        <p>Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.</p>
-      </div>
-      <div class="col-lg-4">
-        <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
-        <h2 class="h4">Full text search</h2>
-        <p>Search your site with FlexSearch, a full-text search library with zero dependencies.</p>
-      </div>
-      <div class="col-lg-4">
-      <i class="fa-solid fa-code fa-2xl"></i>
-        <h2 class="h4">Development tools</h2>
-        <p>Use Node Package Manager to automate the build process and to keep track of dependencies.</p>
-      </div>
+<section class="section section-sm mt-5 mb-5">
+    <div class="container-fluid">
+        <div class="row justify-content-center text-center">
+            <div class="col-lg-4">
+                <i class="fa-brands fa-bootstrap fa-2xl"></i>
+                <h2 class="h4">Bootstrap framework</h2>
+                <p>Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.</p>
+            </div>
+            <div class="col-lg-4">
+                <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
+                <h2 class="h4">Full text search</h2>
+                <p>Search your site with FlexSearch, a full-text search library with zero dependencies.</p>
+            </div>
+            <div class="col-lg-4">
+                <i class="fa-solid fa-code fa-2xl"></i>
+                <h2 class="h4">Development tools</h2>
+                <p>Use Node Package Manager to automate the build process and to keep track of dependencies.</p>
+            </div>
+        </div>
     </div>
-  </div>
 </section>
 
 Additional features include:
 
-* Comments
-* Social links
-* Blog pagination
-* Scrollspy
-* Code highlighting
-* Color customization
-* i18n support
-
-The Hinode theme is inspired by the following themes:
-
-* [Blist](https://github.com/apvarun/blist-hugo-theme) - a clean and fast blog theme for your Hugo site using Tailwind CSS.
-* [Doks](https://github.com/h-enk/doks) - a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
+* Support for multiple languages
+* Reusable Bootstrap components through configurable shortcodes and partials
+* Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
+* Integrated sidebar navigation for content-heavy sections, such as documentation pages
+* Reponsive image handling for multiple screen sizes and resolutions
+* Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
+* Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})
+{.tickmark}

content/en/blog/_index.md

@@ -1,4 +1,4 @@
 ---
-author: Katheryn Fox
+author: Mark Dumay
 title: Blog
 ---

content/en/blog/code-highlighting.md

@@ -2,10 +2,11 @@
 author: "Mark Dumay"
 title: "Code Highlighting"
 date: 2022-04-16
-description: "Examples on how to enable code highlighting"
+description: "Examples on how to enable code highlighting."
 tags: ["code"]
 thumbnail: img/notepad.jpg
-credits: Photo by <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a> on <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
+photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
+photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
 ---
 
 ## Code Fencing
@@ -29,9 +30,9 @@ Use code fencing to highlight the syntax of a specific language.
 </div>
 ```
 
-## Highlight Partial
+## Highlight Shortcode
 
-Use the `highlight` partial to customize the layout of a specific code block.
+Use the `highlight` shortcode to customize the layout of a specific code block.
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 // GetTitleFunc returns a func that can be used to transform a string to

content/en/blog/emoji-support.md

@@ -2,10 +2,12 @@
 author: "Hugo Authors"
 title: "Emoji Support"
 date: 2021-07-15
-description: "Guide to emoji usage in Hugo"
+description: "Guide to emoji usage in Hugo."
 tags: ["emoji"]
-thumbnail: img/dunes.jpg # https://picsum.photos/id/184/4288/2848
-credits: Photo by <a href="https://unsplash.com/@timdegroot">Tim de Groot</a> on <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
+# thumbnail: img/dunes.jpg
+thumbnail: https://picsum.photos/id/184/4288/2848.jpg
+photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
+photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
 ---
 
 Emoji can be enabled in a Hugo project in a number of ways.

content/en/blog/extra-shortcodes.md

@@ -0,0 +1,243 @@
+---
+author: Mark Dumay
+title: Extra shortcodes
+date: 2023-02-12
+description: Use shortcodes to add common Bootstrap elements with ease.
+tags: ["code"]
+thumbnail: img/paper.jpg
+photoCredits: <a href="https://www.pexels.com/@picjumbo-com-55570/">picjumbo.com</a>
+photoSource: <a href="https://www.pexels.com/photo/blue-pen-beside-black-smartphone-on-white-paper-196646/">Pexels</a>
+---
+
+Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+
+## Accordion
+
+As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* accordion */>}}
+  {{</* accordion-item header="Accordion Item #1" show="true" */>}}
+    This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
+    <code>show</code> to the <code>class</code> argument.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #2" */>}}
+    This is the second item's accordion body. It too supports HTML content.
+  {{</* /accordion-item */>}}
+  {{</* accordion-item header="Accordion Item #3" */>}}
+    This is the third item's accordion body.
+  {{</* /accordion-item */>}}
+{{</* /accordion */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Alert
+
+As an example, the following shortcode displays a simple alert.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* alert color="danger" dismissible="true" */>}}
+    A simple danger alert—check it out!
+{{</* /alert */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Badge
+
+Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
+
+{{< example >}}
+<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
+<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
+<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
+<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
+<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
+<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+{{< /example >}}
+
+## Breadcrumb
+
+As an example, the following shortcode displays a breadcrumb for the current page.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* breadcrumb path="blog" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Button
+
+As an example, the following shortcode displays a tooltip for a dark button with a badge.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
+    Inbox
+{{</* /button */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Button group
+
+As an example, the following shortcode displays a group of three buttons.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button-group aria-label="Basic example" */>}}
+  {{</* button color="primary" href="#" */>}}Left{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Middle{{</* /button */>}}
+  {{</* button color="primary" href="#" */>}}Right{{</* /button */>}}
+{{</* /button-group */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Card
+
+As an example, the following shortcode displays a stacked card with icon that links to the [about]({{< ref "about" >}}) page. It includes a custom header and footer.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Carousel
+
+As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/coffee.jpg" caption="slide 1" */>}}
+  {{</* img src="img/phone.jpg" caption="slide 2" */>}}
+  {{</* img src="img/dunes.jpg" caption="slide 3" */>}}
+{{</* /carousel */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Collapse
+
+As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button collapse="collapse-1" */>}}
+    Trigger panel
+{{</* /button */>}}
+
+{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    revealed when the user activates the relevant trigger.
+{{</* /collapse */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Command prompt
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command */>}}
+export MY_VAR=123
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* command user="user" host="localhost" */>}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{</* /command */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Docs
+
+Use the `docs` shortcode to display the content of a `toml` or `scss` file:
+
+{{< docs name="theme-colors" file="config/_default/params.toml" >}}
+
+## Icon
+
+As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* fa square-check */>}}
+{{</* fab linkedin */>}}
+{{</* fas circle-check */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Image
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Navbar
+
+As an example, the following shortcode displays a light navigation header.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Spinner
+
+As an example, the following shortcode displays a centered spinner.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* spinner color="info" class="text-center" */>}}
+Loading...
+{{</* /spinner */>}}
+{{< /example>}}
+<!-- markdownlint-enable MD037 -->
+
+## Toast
+
+As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* button id="toastButton" */>}}
+    Show toast
+{{</* /button */>}}
+
+{{</* toast header="Custom title" */>}}
+    This is a toast message.
+{{</* /toast */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Tooltip
+
+As an example, the following shortcode displays a tooltip for a colored hyperlink.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* tooltip color="primary" title="Tooltip" href="#" */>}}
+    Tooltip demonstration
+{{</* /tooltip */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

content/en/blog/markdown-syntax.md

@@ -1,11 +1,12 @@
 ---
-author: "Hugo Authors"
-title: "Markdown Syntax Guide"
-description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+author: Hugo Authors
+title: Markdown Syntax Guide
+description: Use Markdown syntax and basic HTML elements to style your Hugo content files.
 tags: ["markdown", "css", "html"]
 date: 2022-01-14
 thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-credits: Photo by <a href="https://unsplash.com/@thomweerd">Thom</a> on <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
+photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
+photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
@@ -87,7 +88,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Example HTML5 Document</title>
   </head>
   <body>

content/en/blog/placeholder-text.md

@@ -1,40 +0,0 @@
----
-author: "Hugo Authors"
-title: "Placeholder Text"
-date: 2021-07-13
-description: "Lorem Ipsum Dolor Si Amet"
-tags: ["markdown", "text"]
-thumbnail: img/city.jpg # https://picsum.photos/id/1067/5760/3840
-credits: Photo by <a href="https://unsplash.com/@kevinjyoung">Kevin Young</a> on <a href="https://unsplash.com/photos/-icmOdYWXuQ">Unsplash</a>
----
-
-Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
-
-{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
-
-1. Exierant elisi ambit vivere dedere
-2. Duce pollice
-3. Eris modo
-4. Spargitque ferrea quos palude
-
-Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
-
-1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
-3. Flumen querellas
-4. Arcanaque montibus omnes
-5. Quidem et
-
-## Vagus elidunt
-
-<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
-
-[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
-
-## Mane refeci capiebant unda mulcebat
-
-Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
-
-Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
-
-Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.

content/en/blog/rich-content.md

@@ -2,10 +2,11 @@
 author: "Hugo Authors"
 title: "Rich Content"
 date: 2021-07-13
-description: "A brief description of Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+description: "A brief description of Hugo Shortcodes."
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
-credits: Photo by <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a> on <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
+photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
+photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>
 ---
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.