Merge pull request #363 from gethinode/develop

Add canonifyAssetsURLs option

.eslintignore

@@ -1,3 +1,5 @@
-assets/js/index.js
+assets/js/critical/color.js
+assets/js/analytics.js
+assets/js/flexsearch.js
 assets/js/vendor
 node_modules

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+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):**
+ - Hinode version: [e.g. v0.11.3]
+ - Host OS: [e.g. macOS Ventura 13.3]
+ - Node version: [e.g. node v18.15.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/release.yml

@@ -0,0 +1,27 @@
+changelog:
+  exclude:
+    labels:
+      - skip-changelog
+  categories:
+    - title: ❗ Breaking Changes
+      labels:
+        - Semver-Major
+        - breaking-change
+    - title: 🚀 Highlights
+      labels:
+        - release-highlight
+    - title: 🎉 New Features
+      labels:
+        - Semver-Minor
+        - enhancement
+    - title: 🐛 Bug fixes
+      labels:
+        - fix
+        - bugfix
+        - bug
+    - title: 📦 Dependencies
+      labels:
+        - dependencies
+    - title: 🧰 Other Changes
+      labels:
+        - "*"

.github/workflows/auto-merge.yml

@@ -0,0 +1,43 @@
+# Source: https://nicolasiensen.github.io/2022-07-23-automating-dependency-updates-with-dependabot-github-auto-merge-and-github-actions/
+name: Dependabot auto-merge
+on: pull_request_target
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  review-dependabot-pr:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve patch and minor updates
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a patch or minor update**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve major updates of development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:development'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a major update of a dependency used only in development**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Comment on major updates of non-development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:production'}}
+        run: |
+          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency used in production**"
+          gh pr edit $PR_URL --add-label "requires-manual-qa"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.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

.github/workflows/update.yml

@@ -0,0 +1,37 @@
+name: Update Hugo Dependencies
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *' # run daily at 03:00 AM
+
+permissions:
+  pull-requests: write
+
+jobs:
+  update-dep:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - name: Install dependencies
+        run: npm ci
+      - name: Update Hugo module dependencies
+        run: npm run mod:update
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.HUGO_MOD_PR }}
+          commit-message: 'fix: update Hugo module dependencies'
+          branch: hugo-mod-dependencies
+          delete-branch: true
+          title: 'Update Hugo module dependencies'
+          body: >
+            This PR is auto-generated by 
+            [create-pull-request](https://github.com/peter-evans/create-pull-request).
+          labels: dependencies

.gitignore

@@ -1,6 +1,8 @@
+/_vendor
 /public
 resources/
 node_modules/
 
 .DS_store
 .hugo_build.lock
+hugo_stats.json

.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,8 @@
 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/theme/fonts.scss
 assets/scss/app.scss
 node_modules

.stylelintrc.json

@@ -2,10 +2,7 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "no-empty-source": null,
-    "indentation": 4,
-    "string-quotes": "double",
     "scss/comment-no-empty": null,
-    "max-line-length": null,
     "scss/at-extend-no-missing-placeholder": null,
     "scss/dollar-variable-colon-space-after": null,
     "scss/dollar-variable-empty-line-before": null,

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,38 @@
 
 <!-- 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://gethinode.com" alt="Hinode theme">
+        <img src="https://img.shields.io/badge/theme-hinode-blue">
+    </a>
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
+    </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" />
+        <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,27 +50,27 @@
 
 ## About
 
-![Logo](https://raw.githubusercontent.com/markdumay/hugo-theme-hinode/main/static/img/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 supports [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
-- Command prompt
-- Color customization
-- i18n support
+- Flexible configuration of Hugo modules
+- Switching between light mode and dark mode
+- 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
 
@@ -71,31 +80,27 @@ 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.
-
-Not quite sure? Use the Hinode child theme.
-
-#### Hinode child theme
+    Hinode is available as a [template][repository_template], and a [main repository][repository]. The template [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the template:
 
     ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
+    git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site
     ```
 
-#### Hinode main theme
+    Use the main theme if you intend to customize the base code:
 
     ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
+    git clone https://github.com/gethinode/hinode.git my-hinode-site && cd my-hinode-site
     ```
 
-### 2. Install dependencies
+1. Install dependencies
 
     ```bash
     npm install
     ```
 
-### 3. Start development server
+1. Start development server
 
     ```bash
     npm run start
@@ -103,45 +108,31 @@ 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 policy** - The theme uses rather strict security policies by default. Be sure to allow references to external sources in the header configuration to avoid broken links. The settings of the local development server are defined in `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.
 
 ## Donate
 
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
 
 ## 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 `template` 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
@@ -149,16 +140,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_template]: https://github.com/gethinode/template.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/alert.js

@@ -0,0 +1,14 @@
+const alert = document.getElementById('page-alert')
+const closeBtn = document.getElementById('page-alert-btn-close')
+if (alert !== null && closeBtn !== null) {
+  const version = alert.getAttribute('data-page-alert-version') || 'unknown'
+  const hideAlert = sessionStorage.getItem(`page-alert-${version}`) !== null
+  if (hideAlert) {
+    alert.classList.add('d-none')
+  }
+
+  closeBtn.addEventListener('click', () => {
+    sessionStorage.setItem(`page-alert-${version}`, 'seen')
+    alert.classList.add('d-none')
+  })
+}

assets/js/analytics.js

@@ -0,0 +1,69 @@
+// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
+
+{{- define "__ga_js_set_doNotTrack" -}}{{/* This is also used in the async version. */}}
+    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+    {{- if not $pc.RespectDoNotTrack -}}
+        var doNotTrack = false;
+    {{- else -}}
+        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+        var doNotTrack = (dnt == "1" || dnt == "yes");
+    {{- end -}}
+{{- end -}}
+
+{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
+    {{ with .Site.GoogleAnalytics -}}
+        {{ if hasPrefix . "G-"}}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                window.dataLayer = window.dataLayer || [];
+
+                function gtag() {
+                    dataLayer.push(arguments);
+                }
+                
+                gtag('js', new Date());
+                gtag('config', '{{ . }}', { 'anonymize_ip': {{- $pc.AnonymizeIP -}} });
+            }
+
+        {{ else if hasPrefix . "UA-" }}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                (function(i, s, o, g, r, a, m) {
+                    i['GoogleAnalyticsObject'] = r;
+                    i[r] = i[r] || function() {
+                        (i[r].q = i[r].q || []).push(arguments)
+                    }, i[r].l = 1 * new Date();
+                    a = s.createElement(o),
+                        m = s.getElementsByTagName(o)[0];
+                    a.async = 1;
+                    a.src = g;
+                    m.parentNode.insertBefore(a, m)
+                })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+                
+                {{- if $pc.UseSessionStorage }}
+                    if (window.sessionStorage) {
+                        var GA_SESSION_STORAGE_KEY = 'ga:clientId';
+                        ga('create', '{{ . }}', {
+                            'storage': 'none',
+                            'clientId': sessionStorage.getItem(GA_SESSION_STORAGE_KEY)
+                        });
+                    
+                        ga(function(tracker) {
+                            sessionStorage.setItem(GA_SESSION_STORAGE_KEY, tracker.get('clientId'));
+                        });
+                    }
+                {{ else }}
+                    ga('create', '{{ . }}', 'auto');
+                {{ end -}}
+                {{ if $pc.AnonymizeIP }}
+                    ga('set', 'anonymizeIp', true);
+                {{ end }}
+                
+                ga('send', 'pageview');
+            }
+        {{- end }}
+    {{ end -}}
+{{- end }}

assets/js/animation.js

@@ -0,0 +1,18 @@
+function reveal () {
+  const reveals = document.querySelectorAll('.reveal')
+
+  for (let i = 0; i < reveals.length; i++) {
+    const windowHeight = window.innerHeight
+    const elementTop = reveals[i].getBoundingClientRect().top
+    const elementVisible = 150
+
+    if (elementTop < windowHeight - elementVisible) {
+      reveals[i].classList.add('active')
+      reveals[i].classList.remove('reveal')
+    } else {
+      reveals[i].classList.remove('active')
+    }
+  }
+}
+
+window.addEventListener('scroll', reveal)

assets/js/bootstrap.js

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

assets/js/clipboard.js

@@ -0,0 +1,47 @@
+/*
+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.setAttribute('data-toast-target', 'toast-copied-code-message')
+    button.type = 'button'
+    button.innerHTML = svgCopy
+    button.addEventListener('click', () => {
+      const text = codeBlock.innerText.split('\n').filter(Boolean).join('\n')
+      clipboard.writeText(text).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)
+}
+
+document.querySelectorAll('[data-clipboard]').forEach(trigger => {
+  const text = trigger.getAttribute('data-clipboard')
+  trigger.addEventListener('click', () => {
+    navigator.clipboard.writeText(text)
+  })
+})

assets/js/critical/color.js

@@ -0,0 +1,74 @@
+{{- if site.Params.main.enableDarkMode -}}
+
+/*!
+ * 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.
+ */
+
+(() => {
+  '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 activeSelectors = document.querySelectorAll('.theme-icon-active')
+    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
+    if (activeButtons.length > 0) {
+      const activeIcon = activeButtons[0].querySelector('i')
+
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+      })
+
+      for (let i = 0; i < activeSelectors.length; ++i) {
+        activeSelectors[i].className = activeIcon.className
+        activeSelectors[i].className = activeSelectors[i].className.replace('theme-icon', 'theme-icon-active')
+      }
+
+      for (let i = 0; i < activeButtons.length; ++i) {
+        activeButtons[i].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/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 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);
-          },
-          (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/menu.js

@@ -0,0 +1,20 @@
+const url = new URL(window.location.href)
+const menu = url.searchParams.get('menu')
+const child = url.searchParams.get('child')
+const menuItems = document.querySelectorAll('[data-nav="main"]')
+
+if (menu !== null) {
+  menuItems.forEach(element => {
+    element.classList.remove('active')
+  })
+
+  const targetMainItems = document.querySelectorAll(`[data-nav-main="${menu}"]:not([data-nav-child])`)
+  targetMainItems.forEach(element => {
+    element.classList.add('active')
+  })
+
+  const targetChildItems = document.querySelectorAll(`[data-nav-main="${menu}"][data-nav-child="${child}"]`)
+  targetChildItems.forEach(element => {
+    element.classList.add('active')
+  })
+}

assets/js/navbar.js

@@ -0,0 +1,26 @@
+const navbar = document.querySelector('.navbar')
+const toggler = document.getElementById('main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+
+if (navbar !== null && toggler !== null) {
+  // 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')
+  }
+
+  // invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+  for (let i = 0; i < modeSelectors.length; ++i) {
+    modeSelectors[i].onclick = () => {
+      toggler.click()
+    }
+  }
+}

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,24 @@
+// Script to move all embedded toast messages into a container with id 'toast-container'. The container ensures multiple
+// toast messages are stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures
+// the click event of the origin is linked as well.
+
+const container = document.getElementById('toast-container')
+if (container !== null) {
+  // process all data-toast-target elements
+  document.querySelectorAll('[data-toast-target]').forEach(trigger => {
+    const target = document.getElementById(trigger.getAttribute('data-toast-target'))
+    if (target !== null) {
+      // move the element to the toast containr
+      container.appendChild(target)
+
+      // eslint-disable-next-line no-undef
+      const toast = bootstrap.Toast.getOrCreateInstance(target)
+      if (toast !== null) {
+        // associate the click event of the origin with the toast element
+        trigger.addEventListener('click', () => {
+          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,74 +1,52 @@
 // Define template variables
-$themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
-
-// Import Bootstrap functions
-@import "bootstrap/scss/functions";
+@import "hugo:vars";
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "common/icons.scss";
 
-// Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap.scss";
 
-// Import Bootstrap layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-
-// Import Bootstrap helpers
-@import "bootstrap/scss/helpers";
-
-// Import Bootstrap utilities
-@import "bootstrap/scss/utilities/api";
-
-// Import Font Awesome
-@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "@fortawesome/fontawesome-free/scss/solid";
-@import "@fortawesome/fontawesome-free/scss/brands";
-
-// Import theme styles
+// Import Hinode theme styles
+@import "components/alert.scss";
 @import "components/blockquote.scss";
+@import "components/breadcrumb.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/search.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
+@import "components/popover.scss";
+@import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/timeline.scss";
+@import "components/toc.scss";
 @import "components/vimeo.scss";
+@import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
+@import "common/export.scss";
+@import "helpers/colored-links.scss";
+@import "helpers/display.scss";
+
+// TODO: include fonts with following statement in Dart Sass
+// @if $import-fonts {
+//     @include meta.load-css(theme/fonts);
+// }
+
+{{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
+    @import "theme/fonts.scss";
+{{ end }}
+
+// Import theme placeholder
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/common/_animation.scss

@@ -0,0 +1,99 @@
+.rotate-5 {
+    transform: rotate(5deg);
+}
+
+.rotate-n5 {
+    transform: rotate(-5deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .reveal {
+        position: relative;
+        opacity: 0;
+        animation-iteration-count: 1;
+    }
+
+    .reveal.active {
+        opacity: 1;
+    }
+
+    .active.fade-bottom {
+        animation: fade-bottom 1s ease-in;
+    }
+
+    .active.fade-bottom-5 {
+        animation: fade-bottom-5 1s ease-in;
+    }
+    
+    .active.fade-bottom-n5 {
+        animation: fade-bottom-n5 1s ease-in;
+    }
+    
+    .active.fade-left {
+        animation: fade-left 1s ease-in;
+    }
+    
+    .active.fade-right {
+        animation: fade-right 1s ease-in;
+    }
+
+    @keyframes fade-bottom {
+        0% {
+            transform: translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-bottom-5 {
+        0% {
+            transform: translateY(50px) rotate(5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(5deg);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-bottom-n5 {
+        0% {
+            transform: translateY(50px) rotate(-5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(-5deg);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-left {
+        0% {
+            transform: translateX(-100px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-right {
+        0% {
+            transform: translateX(100px);
+            opacity: 0;
+        }
+        
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}

assets/scss/common/_export.scss

@@ -0,0 +1,28 @@
+// 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
+// stylelint-enable selector-pseudo-class-no-unknown

assets/scss/common/_icons.scss

@@ -0,0 +1,41 @@
+// 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
+
+.fa-wrapper {
+    container: wrapper / inline-size;
+}
+
+// define fallback size for browsers not supporting containers
+.fa-fluid {
+    font-size: 5rem;
+}
+
+// set size based on container width
+@container (min-width: 0) {
+    .fa-wrapper .fa-fluid {
+        font-size: 60cqi;
+    }
+}

assets/scss/common/_styles.scss

@@ -15,44 +15,135 @@ 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;
+.tickmark li::marker {
+    content: "✓ ";
 }
 
-.toc nav {
-    font-size: 0.875rem;
+.anchor
+{
+    color: transparent;
 }
 
-.toc nav ul {
-    padding-left: 0;
-    list-style: none;
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
 }
 
-.toc nav ul ul {
-    padding-left: 1rem;
-    margin-top: 0.25rem;
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        ),
+    )
+);
+
+@media screen and (orientation: portrait) {
+    .min-vh-custom {
+        min-height: 25vh !important
+    }
 }
 
-.toc nav li {
-    margin-bottom: 0.25rem;
+@media screen and (orientation: landscape) {
+    .min-vh-custom {
+        min-height: 50vh !important
+    }
 }
 
-.toc nav a {
-    color: inherit;
+:root {
+    --nav-height: 90px;
 }
 
-.toc nav a:not(:hover) {
-    text-decoration: none;
+@include media-breakpoint-up(sm) {
+    .ratio-section {
+        min-height: calc(min(100vh, 576px) - var(--nav-height));
+    }    
 }
 
-.toc nav a code {
-    font: inherit;
+@include media-breakpoint-up(md) {
+    .ratio-section {
+        min-height: calc(min(100vh, 768px) - var(--nav-height));
     }    
+}
+
+@include media-breakpoint-up(lg) {
+    .ratio-section {
+        min-height: calc(min(100vh, 992px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1200px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xxl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1400px) - var(--nav-height));
+    }    
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        )
+    )
+);

assets/scss/common/_variables.scss

@@ -1,6 +1,6 @@
 // Bootstrap variables overrides for theme
-$primary:                       $themeColor;
 $enable-negative-margins:       true;
+$enable-important-utilities:    true !default;
 
 // Font awesome variables overrides for theme
 $fa-font-path:                  "../fonts";
@@ -8,10 +8,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:        $theme-font, 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 if($enable-important-utilities, !important, null);
+}
+// 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/_alert.scss

@@ -0,0 +1,3 @@
+.alert-no-decoration {
+    --bs-alert-border-radius: none;
+}

assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,6 @@
+// scss-docs-start breadcrumb
+.breadcrumb {
+    padding-top: 0.3 * $navbar-offset;
+}
+
+// scss-docs-end breadcrumb

assets/scss/components/_buttons.scss

@@ -4,5 +4,24 @@
 .btn-primary:active,
 .btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
-    color: #fff !important;
+    color: #fff if($enable-important-utilities, !important, null);
+}
+
+.btn-social {
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: none;
+    --bs-btn-color: var(--bs-secondary);
+    --bs-btn-border-color: none;
+    --bs-btn-hover-bg: none;
+    --bs-btn-hover-border-color: none;
+    --bs-btn-active-bg: none;
+    --bs-btn-active-border-color: none;
+}
+
+.btn-social:hover,
+.btn-social:focus,
+.btn-social:active,
+.btn-social.active,
+.open > .dropdown-toggle.btn-primary {
+    color: var(--bs-primary) if($enable-important-utilities, !important, null);
 }

assets/scss/components/_card.scss

@@ -6,16 +6,8 @@
     position: relative;
 }
 
-.card-img-wrap::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.3);
-    opacity: 0;
-    transition: opacity 0.25s;
+.card-zoom {
+    cursor: pointer;
 }
 
 .card-img-wrap img {
@@ -23,20 +15,59 @@
     width: 100%;
 }
 
-.card-img-wrap:hover img {
-    transform: scale(1.1);
+.card-zoom::after .card-img-wrap img {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.3);
+    opacity: 0;
+    transition: opacity 0.25s;
 }
 
-.card-img-wrap:hover::after {
+.card-zoom:hover .card-img-wrap img {
+    transform: scale(1.1);
+    opacity: 0.5;
+}
+
+.card-zoom:hover::after .card-img-wrap img {
     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);
 }
+
+// stylelint-disable annotation-no-unknown
+.card-body-link {
+    color: $body-color 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);
+        }
+    }
+}
+
+.card-zoom card-body-link,
+.card-body-link {
+    &:hover,
+    &:focus {
+        color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
+    }
+}
+
+// stylelint-enable annotation-no-unknown
+
+// make tag-link clickable on top of the stretched-link.
+.card .tag-link {
+    z-index: 2;
+    position: relative;
+}

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/_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,16 +1,35 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
 
+.navbar {
+    transition: 0.5s ease-in-out;
+    background-color: transparent;
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-body-bg);
+}
+
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
-    border: 0 !important;
+    border: 0 if($enable-important-utilities, !important, null);
 }
 
 .navbar-toggler:focus,
 .navbar-toggler:active,
 .navbar-toggler-icon:focus {
-    outline: none !important;
-    box-shadow: none !important;
-    border: 0 !important;
+    outline: none if($enable-important-utilities, !important, null);
+    box-shadow: none if($enable-important-utilities, !important, null);
+    border: 0 if($enable-important-utilities, !important, null);
+}
+
+.fw-30 {
+    width: 30px !important;
 }
 
 /* Lines of the Toggler */
@@ -65,3 +84,17 @@
 .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);
+        }
+    }
+}
+
+// stylelint-enable annotation-no-unknown

assets/scss/components/_pagination.scss

@@ -0,0 +1,11 @@
+.pagination {
+    --bs-pagination-bg: var(--bs-primary-bg-subtle);
+    --bs-pagination-border-color: none;
+    --bs-pagination-hover-color: var(--bs-pagination-active-color);
+    --bs-pagination-hover-bg: var(--bs-pagination-active-bg);
+    --bs-pagination-hover-border-color: none;
+}
+
+.pagination .page-item {
+    margin: 0.4rem;
+}

assets/scss/components/_persona.scss

@@ -0,0 +1,3 @@
+.persona {
+    min-height: 320px !important
+}

assets/scss/components/_popover.scss

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

assets/scss/components/_search.scss

@@ -1,118 +0,0 @@
-// Adapted from https://github.com/h-enk/doks
-
-@include media-breakpoint-up(md) {
-    .search {
-        max-width: 20rem;
-        margin-top: 0.125rem;
-        margin-bottom: 0.125rem;
-    }
-}
-
-.form-control.is-search {
-    padding-right: 4rem;
-    border: 1px solid transparent;
-    background: $gray-100;
-}
-
-.form-control.is-search:focus {
-    border: 1px solid $primary;
-}
-
-.search::after {
-    position: absolute;
-    top: 0.4625rem;
-    right: 0.5375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    padding-right: 0.3125rem;
-    padding-left: 0.3125rem;
-    font-size: $font-size-base * 0.75;
-    color: $gray-700;
-    content: "Ctrl + /";
-    border: 1px solid $gray-300;
-    border-radius: 0.25rem;
-}
-
-.navbar-form {
-    position: relative;
-}
-
-#suggestions {
-    position: absolute;
-    left: 0;
-    margin-top: 0.5rem;
-    width: calc(100vw - 3rem);
-    z-index: $zindex-dropdown;
-}
-
-#suggestions a,
-.suggestion__no-results {
-    padding: 0.75rem;
-    margin: 0 0.5rem;
-}
-
-#suggestions a {
-    display: block;
-    text-decoration: none;
-}
-
-#suggestions a:focus {
-    background: $gray-100;
-    outline: 0;
-}
-
-#suggestions div:not(:first-child) {
-    border-top: 1px dashed $gray-200;
-}
-
-#suggestions div:first-child {
-    margin-top: 0.5rem;
-}
-
-#suggestions div:last-child {
-    margin-bottom: 0.5rem;
-}
-
-#suggestions a:hover {
-    background: $gray-100;
-}
-
-#suggestions span {
-    display: flex;
-    font-size: $font-size-base;
-}
-
-.suggestion__title {
-    font-weight: $headings-font-weight;
-    color: $black;
-}
-
-.suggestion__description,
-.suggestion__no-results {
-    color: $gray-700;
-}
-
-@include media-breakpoint-up(sm) {
-    #suggestions {
-        width: 31.125rem;
-    }
-
-    #suggestions a {
-        display: flex;
-    }
-
-    .suggestion__title {
-        width: 9rem;
-        padding-right: 1rem;
-        border-right: 1px solid $gray-200;
-        display: inline-block;
-        text-align: right;
-    }
-
-    .suggestion__description {
-        width: 19rem;
-        padding-left: 1rem;
-    }
-}

assets/scss/components/_sidebar.scss

@@ -0,0 +1,123 @@
+// scss-docs-start sidebar
+.sidebar {
+    top: $navbar-offset;
+}
+
+.sidebar-overflow {
+    top: $navbar-offset;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.sidebar-item {
+    color: rgba(0, 0, 0, 0.65);
+    margin-left: 0 !important;
+    padding-left: 0.85rem !important;
+    display: inline-block;
+
+    &.active,
+    &:hover,
+    &:focus {
+        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);
+            margin-left: 0 !important;
+            padding-left: 0.85rem !important;
+        
+            &.active,
+            &:hover,
+            &:focus {
+                color: var(--bs-secondary-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: #b8b800 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; 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; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; 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,42 @@
-/* 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 "components/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);
+    overflow-x: auto;
+}
+
+.preview-background {
+    background-color: var(--bs-dark-bg-subtle) if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        @import "components/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);
+            overflow-x: auto;
+        }
+
+        .bg,
+        .chroma {
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

assets/scss/components/_timeline.scss

@@ -0,0 +1,165 @@
+// scss-docs-start timeline
+$connector-radius: 0.8rem;
+$semi-circle-radius: 8rem;
+$semi-circle-border: 0.2rem;
+
+:root {
+    --timeline-highlight: var(--bs-primary);
+    --timeline-icon-radius: #{$semi-circle-radius};
+    --timeline-offset: 50%;
+    --timeline-connector-bg: var(--bs-body-bg);
+}
+
+@each $state in map-keys($theme-colors) {
+    .timeline-#{$state} {
+      --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
+      }
+  }
+
+// scss-docs-end timeline
+
+.timeline, .timeline-sm {
+    position: relative;
+}
+
+.timeline-sm {
+    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    --timeline-offset: 25%
+}
+
+.timeline::before, .timeline-sm::before {
+    content: "";
+    width: 2 * $semi-circle-border;
+    margin: 0 auto;
+    background: var(--bs-body-color);
+    position: absolute;
+    inset: 0;
+}
+
+.timeline-sm::before {
+    margin: 0 calc(var(--timeline-offset) - #{$semi-circle-border});
+}
+
+.timeline-semi-circle-start, .timeline-semi-circle-end {
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    position: relative;
+}
+
+.timeline-semi-circle-start {
+    left: -$semi-circle-border;
+}
+
+.timeline-semi-circle-end {
+    left: $semi-circle-border;
+}
+
+.timeline-semi-circle-start::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-90deg);
+}
+
+.timeline-semi-circle-start::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-45deg);
+}
+
+.timeline-semi-circle-end::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-225deg);
+}
+
+.timeline-semi-circle-end::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-180deg);
+}
+
+.timeline-description-text-start {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-right: 2 * $connector-radius;
+}
+
+.timeline-description-text-end {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-left: 2 * $connector-radius;
+}
+
+.timeline-panel-start, .timeline-panel-end, .timeline-connector-start, .timeline-connector-end {
+    top: calc(var(--timeline-icon-radius) / 2);
+    position: relative;
+    width: calc(var(--timeline-icon-radius) / 2);
+    height: calc($semi-circle-border + var(--timeline-icon-radius) / 2);
+    border: $semi-circle-border solid var(--timeline-highlight);
+    border-bottom: none;
+    border-right: none;
+    border-left: none;
+}
+
+.timeline-panel-start {
+    top: 50%;
+    right: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-left: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-panel-end {
+    top: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-right: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-dot::after {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: var(--timeline-offset);
+    margin: (-$connector-radius) 0 0 (-$connector-radius);
+    width: 2 * $connector-radius;
+    height: 2 * $connector-radius;
+    border-radius: 100%;
+    border: ($semi-circle-border * 1.5) solid var(--timeline-connector-bg);
+    color: var(--timeline-highlight);
+    background: var(--timeline-highlight);
+}

assets/scss/components/_toc.scss

@@ -0,0 +1,67 @@
+//
+// Table of contents sidebar & drop-down panel
+//
+// scss-docs-start toc
+.toc-sidebar {
+    grid-area: toc;
+    right: 0;
+    z-index: 2;
+    height: calc(100vh - 5rem);
+    overflow-y: auto;
+    top: 5rem;
+}
+
+// scss-docs-end toc
+
+.toc nav {
+    font-size: 0.875rem;
+    margin-bottom: -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;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
+}
+
+.toc nav a:not(:hover) {
+    text-decoration: none;
+}
+
+.toc nav a code {
+    font: inherit;
+}
+
+.toc-button {
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-body-bg);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-bg: var(--bs-body-bg);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
+        outline: none;
+    }
+}

assets/scss/helpers/_colored-links.scss

@@ -0,0 +1,39 @@
+// scss-docs-start colored-links
+$custom-colors: (
+    "primary": "light", 
+    "secondary": "light", 
+    "success": "light", 
+    "danger": "light", 
+    "dark": "light", 
+    "black": "light",
+    "info": "dark", 
+    "warning": "dark", 
+    "light": "dark", 
+    "white": "dark",
+    "body": "adaptive",
+    "body-tertiary": "adaptive"
+);
+
+@each $color, $value in $custom-colors {
+    $main-color: var(--bs-body-color);
+    $emphasize-color: var(--bs-secondary-color);
+
+    @if $value == "light" {
+        $main-color: $white;
+        $emphasize-color: shade-color($main-color, $link-shade-percentage);
+    } @else if $value == "dark" {
+        $main-color: $black;
+        $emphasize-color: tint-color($main-color, $link-shade-percentage);
+    }
+
+    .link-bg-#{$color} {
+        color: $main-color if($enable-important-utilities, !important, null); 
+
+        &:hover,
+        &:focus {
+            color: $emphasize-color if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+// scss-docs-end colored-links

assets/scss/helpers/_display.scss

@@ -0,0 +1,30 @@
+.hidden {
+    display: none;
+}
+
+// stylelint-disable annotation-no-unknown
+
+// scss-docs-start display-color
+.d-none-light {
+    display: none if($enable-important-utilities, !important, null); 
+}
+
+.d-none-dark {
+    display: block if($enable-important-utilities, !important, null);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .d-none-light {
+            display: block if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark {
+            display: none if($enable-important-utilities, !important, null);
+        }
+    }
+}
+
+// scss-docs-end display-color
+
+// stylelint-enable annotation-no-unknown

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/fonts.scss

@@ -0,0 +1,62 @@
+/*!
+ * Copyright (c) 2016-2020 The Inter Project Authors.
+ * "Inter" is trademark of Rasmus Andersson.
+ * https://github.com/rsms/inter
+
+ * This Font Software is licensed under the SIL Open Font License, Version 1.1.
+ * This license is copied below, and is also available with a FAQ at:
+ * http://scripts.sil.org/OFL
+ */
+
+/* inter-200 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    src: url('../fonts/inter-v12-latin-200.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-200.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-200.svg#Inter') format('svg'); /* Legacy iOS */
+  }
+  /* inter-300 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/inter-v12-latin-300.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-300.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-300.svg#Inter') format('svg'); /* Legacy iOS */
+  }
+  /* inter-regular - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
+  }
+  /* inter-600 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/inter-v12-latin-600.eot'); /* IE9 Compat Modes */
+    src: url('../fonts/inter-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('../fonts/inter-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
+         url('../fonts/inter-v12-latin-600.woff') format('woff'), /* Modern Browsers */
+         url('../fonts/inter-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
+         url('../fonts/inter-v12-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
+  }

assets/scss/theme/theme.scss

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

config/_default/.forestry/front_matter/templates/blog-post.yml

@@ -1,25 +0,0 @@
----
-label: Blog post
-hide_body: false
-fields:
-- type: text
-  name: author
-  label: author
-- type: text
-  name: title
-  label: title
-- type: text
-  name: description
-  label: description
-- type: list
-  name: tags
-  label: tags
-- type: datetime
-  name: date
-  label: date
-- type: file
-  name: thumbnail
-  label: thumbnail
-- type: textarea
-  name: credits
-  label: credits

config/_default/.forestry/front_matter/templates/project.yml

@@ -1,25 +0,0 @@
----
-label: Project
-hide_body: false
-fields:
-- type: text
-  name: author
-  label: author
-- type: text
-  name: title
-  label: title
-- type: datetime
-  name: date
-  label: date
-- type: text
-  name: description
-  label: description
-- type: list
-  name: tags
-  label: tags
-- type: file
-  name: thumbnail
-  label: thumbnail
-- type: textarea
-  name: credits
-  label: credits

config/_default/.forestry/settings.yml

@@ -1,40 +0,0 @@
----
-new_page_extension: md
-auto_deploy: false
-admin_path: 
-webhook_url: 
-sections:
-- type: directory
-  path: content/en/blog
-  label: Blog
-  create: all
-  match: "**/*"
-  templates:
-  - blog-post
-- type: directory
-  path: content/en/projects
-  label: Projects
-  create: all
-  match: "**/*"
-  templates:
-  - project
-- type: document
-  path: content/en/about.md
-  label: About
-upload_dir: assets/img
-public_path: "/img"
-front_matter_path: ''
-use_front_matter_path: false
-file_template: ":filename:"
-build:
-  preview_env:
-  - HUGO_ENV=staging
-  - HUGO_VERSION=0.92.2
-  - HUGO_ENABLEGITINFO=true
-  preview_output_directory: public
-  install_dependencies_command: npm install
-  preview_docker_image: forestryio/hugo:node16
-  mount_path: "/srv"
-  working_dir: "/srv"
-  instant_preview_command: npm run start
-version: 0.81.0

config/_default/config.toml

@@ -1,74 +0,0 @@
-baseURL = "https://hinode-demo.markdumay.org/"
-canonifyURLs = false
-
-title = "Hinode"
-author = "Mark Dumay"
-copyright = "Copyright © 2022 Mark Dumay."
-paginate = 9
-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
-defaultContentLanguage = "en"
-disableLanguages = ["nl"]
-
-
-
-mainSections = ["blog", "projects"]
-
-[taxonomies]
-  tag = 'tags'
-
-[privacy]
-  [privacy.vimeo]
-    disabled = false
-    simple = true
-
-  [privacy.twitter]
-    disabled = false
-    enableDNT = true
-    simple = true
-
-  [privacy.instagram]
-    disabled = false
-    simple = true
-
-  [privacy.youtube]
-    disabled = false
-    privacyEnhanced = true
-
-[services]
-  [services.instagram]
-    disableInlineCSS = true
-  [services.twitter]
-    disableInlineCSS = true
-
-
-[outputFormats]
-  [outputFormats.XML]
-    isPlainText = false
-    mediaType = "application/xml"
-    isHtml = false
-    noUgly = true
-    permalinkable = false
-    name = "xml"
-
-[module]
-  [module.hugoVersion]
-    extended = true
-    min = "0.81.0"
-    max = ""
-  [[module.mounts]]
-    source = "assets"
-    target = "assets"
-  [[module.mounts]]
-    source = "static"
-    target = "static"
-  [[module.mounts]]
-    source = "node_modules/flexsearch"
-    target = "assets/js/vendor/flexsearch"

config/_default/hugo.toml

@@ -0,0 +1,119 @@
+# toml-docs-start main
+title = "Hinode"
+copyright = "Copyright © 2023 Mark Dumay."
+paginate = 9
+enableGitInfo = true
+# toml-docs-end main
+
+# additional settings
+googleAnalytics = "G-T85PPZ36GN"
+baseURL = "https://demo.gethinode.com/"
+canonifyURLs = false
+enableEmoji = true
+enableRobotsTXT = true
+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"]
+
+# toml-docs-start timeout
+timeout = "180s"
+# toml-docs-end timeout
+
+# toml-docs-start language
+languageCode = "en-us"
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = true
+# toml-docs-end language
+
+# toml-docs-start redirect
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+# toml-docs-end redirect
+
+# toml-docs-start build
+[build]
+  writeStats = true
+# toml-docs-end build
+  
+[taxonomies]
+  tag = 'tags'
+
+[privacy]
+  [privacy.vimeo]
+    disabled = false
+    simple = true
+
+  [privacy.twitter]
+    disabled = false
+    enableDNT = true
+    simple = true
+
+  [privacy.instagram]
+    disabled = false
+    simple = true
+
+  [privacy.youtube]
+    disabled = false
+    privacyEnhanced = true
+
+[services]
+  [services.instagram]
+    disableInlineCSS = true
+  [services.twitter]
+    disableInlineCSS = true
+
+[outputFormats]
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.110.0"
+    max = ""
+  [[module.mounts]]
+    source = "archetypes"
+    target = "archetypes"
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  [[module.mounts]]
+    source = "i18n"
+    target = "i18n"
+  [[module.mounts]]
+    source = "layouts"
+    target = "layouts"
+  [[module.mounts]]
+    source = "static"
+    target = "static"
+  [[module.mounts]]
+    source = "netlify.toml"
+    target = "assets/config/netlify.toml"
+# toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/gethinode/mod-bootstrap"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-flexsearch"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-fontawesome"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-katex"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-leaflet"
+# toml-docs-end modules

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"
-        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>)."
+# toml-docs-end lang-main
+# toml-docs-start lang-param
+    [en.params.head]
+        tagline = "A Hugo Theme"
+    [en.params.feature]
+        link = "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' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
         socialTitle = "Follow me"
         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 = "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' rel='noopener noreferrer'>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

@@ -1,21 +1,33 @@
 [[main]]
   name = "About"
-  url = "/about/"
+  pageRef = "/about/"
   weight = 10
 
 [[main]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 20
 
 [[main]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 30
 
+[[main]]
+  name = "Sample project"
+  pageRef = "/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[main]]
+  name = "Another project"
+  pageRef = "/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags/"
   weight = 40
 
 [[social]]
@@ -35,3 +47,27 @@
   pre = "<i class=\"fab fa-medium fa-2x\"></i>"
   url = "https://medium.com/"
   weight = 30
+
+# toml-docs-start sample-navigation
+[[sample]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 10
+
+[[sample]]
+  name = "Projects"
+  pageRef = "/projects/"
+  weight = 20
+
+[[sample]]
+  name = "Sample project"
+  pageRef = "/projects/sample-project/"
+  parent = "Projects"
+  weight = 1
+
+[[sample]]
+  name = "Another project"
+  pageRef = "/projects/another-project/"
+  parent = "Projects"
+  weight = 2
+# toml-docs-end sample-navigation

config/_default/menus/menus.nl.toml

@@ -0,0 +1,73 @@
+[[main]]
+  name = "Over mij"
+  pageRef = "/over-mij/"
+  weight = 10
+
+[[main]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 20
+
+[[main]]
+  name = "Projecten"
+  pageRef = "/projecten/"
+  weight = 30
+
+[[main]]
+  name = "Voorbeeldproject"
+  pageRef = "/projecten/voorbeeldproject/"
+  parent = "Projecten"
+  weight = 1
+
+[[main]]
+  name = "Ander project"
+  pageRef = "/projecten/ander-project/"
+  parent = "Projecten"
+  weight = 2
+
+[[main]]
+  name = "Tags"
+  pageRef = "/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
+
+# toml-docs-start sample-navigation
+[[sample]]
+  name = "Blog"
+  pageRef = "/blog/"
+  weight = 10
+
+[[sample]]
+  name = "Projecten"
+  pageRef = "/projecten/"
+  weight = 20
+
+[[sample]]
+  name = "Voorbeeldproject"
+  pageRef = "/projecten/voorbeeldproject/"
+  parent = "Projecten"
+  weight = 1
+
+[[sample]]
+  name = "Ander project"
+  pageRef = "/projecten/ander-project/"
+  parent = "Projecten"
+  weight = 2
+# toml-docs-end sample-navigation

config/_default/params.toml

@@ -1,56 +1,182 @@
-## 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
+    modes = ["light", "dark"]
+    canonifyAssetsURLs = false
+# toml-docs-end main
 
-## Open Graph
-images = ["logo.png"]
-ogLocale = "en_US"
-domainTLD = "hinode-demo.markdumay.org"
+# toml-docs-start modules
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet", "katex"]
+    excludeSCSS = ["bootstrap"]
+    disableTemplate = ["katex"]
+# toml-docs-end modules
 
-## Twitter Cards
-# twitterSite = "@gethinode"
-# twitterCreator = "@markdumay"
+# toml-docs-start debugging
+[debugging]
+    showJS = false
+    showSCSS = false
+# toml-docs-end debugging
 
-## 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 = "img/logo512x512.png"
-schemaLogoWidth = 512
-schemaLogoHeight = 512
-schemaImage = "img/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 docs
+[docs]
+    github = "https://github.com/gethinode/hinode"
+    release = "https://github.com/gethinode/hinode/releases/tag/"
+    checkVersion = false
+# toml-docs-end docs
 
+# toml-docs-start home
+[home]
+    sections = ["blog", "projects"]
+    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
+    fullCover = false
+    centerHeadline = false
+    style = ""
+# toml-docs-end home
+
+# toml-docs-start navigation
+[navigation]
+    anchor = true
+    logo = "/img/logo_icon.svg"
+    color = "body"
+    fixed = true
+    offset = "3.8em"
+    search = true
+    breadcrumb = true
+    toc = true
+    sidebar = true
+# toml-docs-end navigation
+
+# toml-docs-start messages
+[messages]
+    placement = "bottom-right"
+# toml-docs-end messages
+
+# toml-docs-start sharing
+[sharing]
+    enabled = true
+    sort = "weight"
+    reverse = false
+
+[[sharing.providers]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
+    icon = "fab linkedin"
+    weight = 10
+
+[[sharing.providers]]
+    name = "Twitter"
+    url = "https://twitter.com/home?status={url}"
+    icon = "fab twitter"
+    weight = 20
+
+[[sharing.providers]]
+    name = "Facebook"
+    url = "https://www.facebook.com/sharer.php?u={url}"
+    icon = "fab facebook"
+    weight = 30
+
+[[sharing.providers]]
+    name = "WhatsApp"
+    url = "whatsapp://send?text={title}%20{url}"
+    icon = "fab whatsapp"
+    weight = 40
+
+[[sharing.providers]]
+    name = "email"
+    url = "{url}"
+    icon = "fas link"
+    weight = 50
+    clipboard = true
+# toml-docs-end sharing
+
+# toml-docs-start sections
+[sections]
+    [sections.blog]
+        title = "Blog"
+        sort = "date"
+        reverse = true
+        nested = true
+        cols = 3
+        color = ""
+        padding = "0"
+        header = "full"
+        footer = "none"
+        orientation = "stacked"
+        style = "border-0 card-zoom"
+        homepage = 3
+        separator = true
+    [sections.projects]
+        title = "Projects"
+        layout = "card"
+        sort = "title"
+        reverse = false
+        nested = true
+        cols = 1
+        background = "body-tertiary"
+        color = "body"
+        padding = "3"
+        header = "none"
+        footer = "tags"
+        orientation = "horizontal"
+        style = "border-1 card-emphasize"
+        homepage = 3
+        separator = false
+# toml-docs-end sections
 
 [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" # external path
+    themeFontPath = "/fonts" # local path
+# toml-docs-end font
+# toml-docs-start build
+    purge = false
+# toml-docs-end build
 
-[main]
-    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
-    logo = "/img/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 +186,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,16 +8,15 @@ 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; \
+            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.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'
+            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https: data:; \
+        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
+        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
         manifest-src 'self'; \
         media-src 'self' \
         """
@@ -33,5 +33,11 @@ for = '/**'
         fullscreen=(), \
         payment=() \
         """
-    Cache-Control = "public, max-age=31536000"
+    cache-control = """\
+        max-age=0, \
+        no-cache, \
+        no-store, \
+        must-revalidate \
+        """
     Access-Control-Allow-Origin = "*"
+# toml-docs-end server-config

config/postcss.config.js

@@ -1,47 +1,43 @@
-const autoprefixer = require('autoprefixer');
-const purgecss = require('@fullhuman/postcss-purgecss');
-const whitelister = require('purgecss-whitelister');
-
-module.exports = {
-  plugins: [
-    autoprefixer(),
-    purgecss({
-      content: [
-        './layouts/**/*.html',
-        './content/**/*.md',
-      ],
+const autoprefixer = require('autoprefixer')({})
+const cssnano = require('cssnano')({
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./hugo_stats.json'],
+  defaultExtractor: (content) => {
+    const els = JSON.parse(content).htmlElements
+    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
+  },
+  dynamicAttributes: ['data-bs-theme'],
   safelist: [
-        /lazyloaded/,
-        /table/,
-        /thead/,
-        /tbody/,
-        /tr/,
-        /th/,
-        /td/,
-        /h5/,
-        /alert-link/,
-        /container-xxl/,
-        /container-fluid/,
-        /^bg-opacity-\d+/,
-        /svg.*/, 
-        /fa.*/,
-        /ratio.*/,
-        /suggestion.*/,
     ...whitelister([
-          './assets/scss/components/_blockquote.scss',
-          './assets/scss/components/_buttons.scss',
-          './assets/scss/components/_card.scss',
       './assets/scss/components/_clipboard.scss',
-          './assets/scss/components/_img.scss',
+      './assets/scss/components/_command.scss',
       './assets/scss/components/_navbar.scss',
       './assets/scss/components/_search.scss',
       './assets/scss/components/_syntax.scss',
-          './assets/scss/layouts/_reboot.scss',
-          './assets/scss/layouts/type.scss',
-          './node_modules/bootstrap/scss/_dropdown.scss',
-          './node_modules/bootstrap/scss/_utilities.scss',
-        ]),
-      ],
-    }),
-  ],
+      './assets/scss/components/_syntax-dark.scss',
+      './assets/scss/components/_syntax-light.scss',
+      './assets/scss/theme/fonts.scss',
+      './assets/scss/theme/theme.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_utilities.scss'
+    ])
+  ]
+})
+
+module.exports = {
+  plugins: [
+    autoprefixer,
+    cssnano,
+    purgecss
+  ]
 }

config/production/config.toml

@@ -1 +0,0 @@
-canonifyURLs = false

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,17 +1,15 @@
 ---
-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-06-26
 showComments: false
 ---
 
-<p class="text-center"><img src="/img/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">
+<section class="section section-sm mt-5 mb-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>
@@ -34,15 +32,12 @@ showComments: false
 
 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.
+* Switching between light mode and dark mode
+* Support for multiple languages
+* Reusable Bootstrap components through configurable shortcodes and partials
+* Versioned documentation, including sidebar navigation and version switcher
+* Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
+* 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,5 @@
 ---
-author: Katheryn Fox
+author: Mark Dumay
 title: Blog
+nested: true
 ---