Merge pull request #978 from gethinode/develop

Publish v0.24.0 release

.eslintignore

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,30 +7,55 @@ assignees: ''
 
 ---
 
-**Describe the bug**
+<!---
+Please use the discussion forum (https://github.com/gethinode/hinode/discussions) for questions and troubleshooting. We prefer to use GitHub issues for verified bugs and vetted enhancements.
+
+When submitting a bug, please include the exact steps to reproduce the issue. Ideally, use a minimal repo created with the Hinode installation steps for either Hugo or npm (https://gethinode.com/docs/getting-started/introduction/#installation). Add any additional commands and configuration adjustments from there on.
+-->
+
+## Describe the bug
+
 A clear and concise description of what the bug is.
 
-**To reproduce**
+## 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.
+Alternatively, include the commands from your terminal as bash script.
+
+## Expected behavior
+
+If applicable, a clear and concise description of what you expected to happen.
+
+## Log file
 
-**Log file**
 If applicable, add a copy of Hugo's log messages.
 
-**Screenshots**
+## Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
-**Environment (please complete the following information):**
- - Host OS: [e.g. macOS Ventura 13.0]
- - Node version: [e.g. node v18.10.0]
- - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
+## Host environment
+
+Please complete the following information where applicable.
+
+ - Hinode version: [e.g. v0.11.3]
+ - Host OS: [e.g. macOS Ventura 13.3]
+ - Node version: [e.g. node v18.15.0]
  - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
 
-**Additional context**
+## Hugo environment
+
+Copy the output of `hugo env` or `npm run env` here.
+
+```bash
+[env output]
+```
+
+## Additional context
+
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,14 +7,18 @@ 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 [...]
+## Problem or enhancement idea
+
+A clear and concise description of what the problem is. E.g. I'm always frustrated when ... Or else, the enhancement idea to further improve Hinode.
+
+## Proposed solution
 
-**Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 
-**Describe alternatives you've considered**
+## Alternatives
+
 A clear and concise description of any alternative solutions or features you've considered.
 
-**Additional context**
+## Additional context
+
 Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -3,7 +3,13 @@
 
 version: 2
 updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
       interval: "daily"
+    versioning-strategy: increase

.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,40 @@
+# 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@v2
+        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: Comment on major updates of any dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major'}}
+        run: |
+          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency**"
+          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

@@ -1,28 +0,0 @@
-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/lint-build.yml

@@ -0,0 +1,105 @@
+name: Lint & build
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v*
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+env:
+  CACHE_KEY: 'hugo-hinode'
+  CACHE_PATH_DEBIAN: '/tmp/hugo_cache_runner'
+  CACHE_PATH_WIN: '~\AppData\Local\hugo_cache'
+  CACHE_PATH_MAC: '/Users/runner/Library/Caches/hugo_cache'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Check out repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+
+    # [24/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+    - name: Install npm
+      run: npm i
+
+    - name: Lint the source files
+      run: npm run lint      
+
+  build:
+    needs: lint
+
+    strategy:
+      matrix:
+        os: [macos-latest, windows-latest, ubuntu-latest]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        node-version: [18.x, 20.x]
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+    - name: Check out repository
+      uses: actions/checkout@v4
+
+    - name: Install Go
+      uses: actions/setup-go@v5
+      with:
+        go-version: ">1.0.0"
+      
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+
+    - name: Install Dart Sass
+      run:  |
+        if [ "$RUNNER_OS" == "Linux" ]; then
+          sudo snap install dart-sass
+        elif [ "$RUNNER_OS" == "macOS" ]; then
+          brew install sass/sass/sass
+        elif [ "$RUNNER_OS" == "Windows" ]; then
+          choco install sass
+        fi
+      shell: bash
+
+    # [24/AUG/23] Adjusted from npm ci for non-macOS to prevent EBADPLATFORM error due to fsevents
+    - name: Perform clean install of npm
+      run:  |
+        if [ "$RUNNER_OS" == "macOS" ]; then
+          npm ci
+        else
+          npm i
+        fi
+      shell: bash
+
+    # Cache Hugo cachedir and resourcedir (configured in config/ci/hugo.toml) for each OS
+    # No additional cache invalidation is needed, Hugo uses checksums itself
+    - name: Use Hugo cache
+      uses: actions/cache@v4
+      with:
+        path: ${{ runner.os == 'Windows' && env.CACHE_PATH_WIN || runner.os == 'macOS' && env.CACHE_PATH_MAC || env.CACHE_PATH_DEBIAN }}
+        key: ${{ runner.os }}-${{ env.CACHE_KEY }}
+        restore-keys: |
+          ${{ runner.os }}-${{ env.CACHE_KEY }}
+
+    - name: Display environment
+      run: npm run env
+
+    - name: Build main site
+      run: npm run build:cache
+
+    # The example site is to be published to demo.gethinode.com
+    - name: Build example site
+      run: npm run build:example:ci

.github/workflows/lint.yml

@@ -1,28 +0,0 @@
-name: lint
-on:
-  push:
-    tags:
-      - v*
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x, 16.x, 18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    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 --ignore-scripts
-    - run: npm run lint

.github/workflows/mod-update.yml

@@ -0,0 +1,62 @@
+name: Update Hugo dependencies
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *' # run daily at 03:00 AM
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  update-mod:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: 'npm'
+        cache-dependency-path: '**/package-lock.json'
+
+    # [26/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+    - name: Install npm
+      run: npm i
+
+    - name: Update Hugo module dependencies
+      id: mod-updates
+      run: |
+        MOD_OUTPUT=$(npm run mod:update 2>&1)
+        echo "$MOD_OUTPUT"
+        MOD_UPDATES=$(echo "$MOD_OUTPUT" | grep '^go: upgraded' | sed 's/go: / - /' | sort -u)
+        echo 'MOD_UPDATES<<EOF' >> $GITHUB_OUTPUT
+        echo "$MOD_UPDATES" >> "$GITHUB_OUTPUT"
+        echo 'EOF' >> $GITHUB_OUTPUT
+
+    - name: Create Pull Request
+      uses: gethinode-actions/create-pull-request@v6
+      with:
+        token: ${{ secrets.HUGO_MOD_PR }}
+        commit-message: 'fix: update Hugo module dependencies'
+        committer: GitHub <noreply@github.com>
+        branch: hugo-mod-dependencies
+        delete-branch: true
+        title: 'Update Hugo module dependencies'
+        body: |
+          This PR is auto-generated by [create-pull-request][1].
+          
+          Changes to go.mod:
+          
+          ${{ steps.mod-updates.outputs.MOD_UPDATES }}
+
+          [1]: https://github.com/peter-evans/create-pull-request
+        labels: dependencies
+        add-paths: |
+          go.mod
+          go.sum
+          **/go.mod
+          **/go.sum

.github/workflows/npm-publish.yml

@@ -1,35 +1,41 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
+# This workflow will run tests using node and then publish a package to npmjs.org when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+name: Publish package to npmjs
 
 on:
   workflow_dispatch:
-    branches: [ main ]
   release:
-    types: [created]
+    types: [published]
+
+env:
+  REGISTRY_URL: 'https://registry.npmjs.org/'
 
 jobs:
   build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-      - run: npm test
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [20.x]
+
+    runs-on: ${{ matrix.os }}
 
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup .npmrc file to publish to npm
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
+          node-version: ${{ matrix.node-version }}
+          registry-url: ${{ env.REGISTRY_URL }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+  
+      # [27/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
+      - name: Install npm
+        run: npm i
+
+      - name: Publish package to npm
+        run: npm publish
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,4 +1,5 @@
-/public
+/_vendor
+public/
 resources/
 node_modules/
 

.markdownlint-cli2.jsonc

@@ -4,10 +4,11 @@
     "MD013": false,
     "MD024": false,
     "MD026": false,
-    "MD033": false,
     "MD034": false,
     "MD051": false,
-    "MD053": false
+    "MD053": false,
+    "MD055": false,
+    "MD056": 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/vendor
+assets/scss/theme/fonts.scss
+assets/scss/app-dart.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) 2023 Mark Dumay
+Copyright (c) 2024 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

@@ -1,5 +1,6 @@
 # Hugo Theme Hinode
 
+<!-- markdownlint-disable MD033 -->
 <!-- Tagline -->
 <p align="center">
     <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
@@ -8,26 +9,32 @@
 
 <!-- Badges -->
 <p align="center">
-    <a href="https://gohugo.io" alt="Hugo website">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+    <a href="https://gohugo.io">
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" alt="Hugo website">
     </a>
-    <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://gethinode.com">
+        <img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
     </a>
-    <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" alt="npm package">
     </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://app.netlify.com/sites/gethinode-demo/deploys">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </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://stats.uptimerobot.com/xyGVYhLJmV">
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" alt="UptimeRobot Status">
     </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/commits/main">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" alt="Last commit">
     </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/issues">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" alt="Issues">
+    </a>
+    <a href="https://github.com/gethinode/hinode/pulls">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" alt="Pulls">
+    </a>
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
     </a>
 </p>
 
@@ -41,89 +48,70 @@
   <a href="#donate">Donate</a> •
   <a href="#license">License</a>
 </p>
+<!-- markdownlint-enable MD033 -->
 
 ## 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 documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
+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] (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
-- Language switcher
-
-<!-- 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
 
-Hinode requires Git, Node.js and npm for local development and testing. Download the Git binary from the [official website][git_download]. Next, download and install [Node.js][nodejs] (it includes npm) for your platform.
+Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain various components. It can be installed using either Hugo or npm. If you would like to take advantage of automation, the npm approach is recommended. Refer to the [Hinode template][repository_template] for installation instructions with npm.
+
+The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.
+
+- [Go binary][golang_download]
+- [Hugo][hugo_download] (extended version)
+
+[Git][git_download] is recommended, but is not a strict requirement.
 
 ## Installation
 
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Installation notes for Windows</summary>
+
+The installation for Windows requires PowerShell v7. Download it from the Microsoft Store as needed. Check your current version with the command `$PSVersionTable`.
+</details>
+<!-- markdownlint-enable MD033 -->
+
 Start a new Hinode project in three steps:
 
-### 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 Hinode. 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
+1. **Create a new site**
 
     ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode-child.git my-hinode-site && cd my-hinode-site
+    hugo new site my-hinode-site && cd my-hinode-site
     ```
 
-#### Hinode main theme
+2. **Initialize the module system**
 
     ```bash
-git clone https://github.com/markdumay/hugo-theme-hinode.git my-hinode-site && cd my-hinode-site
+    hugo mod init example.com/my-hinode-site
+    echo "[[module.imports]]" >> hugo.toml
+    echo "path = 'github.com/gethinode/hinode'" >> hugo.toml
     ```
 
-### 2. Install dependencies
+3. **Start a development server**
 
     ```bash
-npm install
-```
-
-### 3. Start development server
-
-```bash
-npm run start
+    hugo server
     ```
 
 ## 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 style** - Update `primary` and `themeOpacity` within the `[style]` section of `params.toml` to update the site's primary color and opacity. Bootstrap's other key colors can be changed too. You can use the [WCAG Color Contrast Checker][contrast_checker] to validate the contrast ratio of your color to improve accessibility. Additionally, set `themeFont` and `themeFontPath` to override the default font.
-- **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 include 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
 
@@ -134,34 +122,36 @@ Hinode is inspired by the following themes:
 
 ## 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>
+<!-- markdownlint-disable MD033 -->
+<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>
+<!-- markdownlint-enable MD033 -->
 
 ## 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`, `docs`, and `template` codebase is released under the [MIT license][license]. The documentation of Hinode is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license. This includes all files within the repository's `/content` and `/exampleSite/content` folders and their children, as well as the "README" in the repository root. This applies to all public repositories maintained by `gethinode` on GitHub, including the `gethinode/hinode`, `gethinode/template`, and `gethinode/docs` repositories, unless specified otherwise.
 
 <!-- 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
 [hugo]: https://gohugo.io
+[hugo_download]: https://gohugo.io/installation
+[hugo_modules]: https://gohugo.io/hugo-modules/
 [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
-[utterances]: https://utteranc.es
+[observatory]: https://observatory.mozilla.org/analyze/demo.gethinode.com
+[pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F
 
 <!-- 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
+[golang_download]: https://go.dev/dl/
+[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/

archetypes/default.md

@@ -1,2 +1,16 @@
-+++
-+++
+---
+# author: 
+title: {{ replace .Name "-" " " | title }}
+date: {{ .Date }}
+draft: true
+# layout: 
+# description: 
+# tags: 
+# icon: 
+# thumbnail: 
+    # url: 
+    # author: 
+    # authorURL: 
+    # origin: 
+    # originURL: 
+---

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-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/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/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-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/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,21 @@
+// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
+
+{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
+  {{ with site.Config.Services.GoogleAnalytics.ID }}
+    {{ if strings.HasPrefix (lower .) "ua-" }}
+      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
+    {{ else }}
+        var doNotTrack = false;
+        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
+          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+          var doNotTrack = (dnt == "1" || dnt == "yes");
+        }
+        if (!doNotTrack) {
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '{{ . }}');
+        }
+    {{ 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/clipboard.js

@@ -14,10 +14,13 @@ const addCopyButtons = (clipboard) => {
     // 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.setAttribute('aria-label', '{{ T "copyToClipboard" }}')
     button.type = 'button'
     button.innerHTML = svgCopy
     button.addEventListener('click', () => {
-      clipboard.writeText(codeBlock.innerText).then(
+      const text = codeBlock.innerText.split('\n').filter(Boolean).join('\n')
+      clipboard.writeText(text).then(
         () => {
           button.blur()
           button.innerHTML = svgCheck
@@ -36,3 +39,10 @@ const addCopyButtons = (clipboard) => {
 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,92 @@
+{{- 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 supportedThemes = ['auto', 'dark', 'light'];
+
+  // retrieves the currently stored theme from local storage (cookie)
+  const storedTheme = localStorage.getItem('theme')
+
+  // retrieves the theme preferred by the client, defaults to light
+  function getPreferredTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  // retrieves the current theme, either from local storage or client's preferences
+  function getTheme() {
+    if (storedTheme) {
+      return storedTheme
+    } else {
+      const preference = getPreferredTheme()
+      localStorage.setItem('theme', preference)
+      return preference
+    }
+  }
+
+  // applies and stores requested theme
+  function setTheme(theme) {
+    if (!supportedThemes.includes(theme)) {
+      theme = 'auto'
+    }
+    localStorage.setItem('theme', theme)
+
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    })
+  }
+
+  // alternates the currently active theme
+  function toggleTheme() {
+    const target = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark'
+    setTheme(target)
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    setTheme(getTheme())
+    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+
+    document.querySelectorAll('.ball').forEach(ball => {
+      ball.classList.add('notransition');
+    })
+    
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = light
+      chk.addEventListener('change', function () {
+        toggleTheme()
+      })
+    })
+
+    document.querySelectorAll('.ball').forEach(ball => {
+      ball.offsetHeight; // flush css changes
+      ball.classList.remove('notransition');
+    })
+  })
+
+  window.addEventListener('load', () => {
+    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = light
+    })
+  });  
+})()
+
+{{- end -}}

assets/js/flexsearch.js

@@ -1,161 +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",
-        tag: "tag",
-        store: ["href", "title", "description"],
-        index: ["title", "description", "content"]
-      }
-    });
-  
-    // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-    // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
-    //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
-    {{ $len := (len $list) -}}
-  
-    index.add(
-      {{ range $index, $element := $list -}}
-        {
-          id: {{ $index }},
-          tag: "{{ .Lang }}",
-          href: "{{ .RelPermalink }}",
-          title: {{ .Title | jsonify }},
-          {{ with .Description -}}
-            description: {{ . | jsonify }},
-          {{ else -}}
-            description: {{ .Summary | plainify | jsonify }},
-          {{ end -}}
-          content: {{ .Plain | jsonify }}
-        })
-        {{ if ne (add $index 1) $len -}}
-          .add(
-        {{ end -}}
-      {{ end -}}
-    ;
-  
-    search.addEventListener('input', show_results, true);
-  
-    function show_results(){
-      const maxResult = 5;
-      var searchQuery = this.value;
-      // filter the results for the currently tagged language
-      const lang = document.documentElement.lang;
-      var results = index.search(searchQuery, { index: ['title', 'description', 'content'], limit: maxResult, tag: lang, enrich: true });
-  
-      // flatten results since index.search() returns results for each indexed field
-      const flatResults = new Map(); // keyed by href to dedupe results
-      for (const result of results.flatMap(r => r.result)) {
-        if (flatResults.has(result.doc.href)) continue;
-        flatResults.set(result.doc.href, result.doc);
-      }
-  
-      suggestions.innerHTML = "";
-      suggestions.classList.remove('d-none');
-  
-      // inform user that no results were found
-      if (flatResults.size === 0 && searchQuery) {
-        const noResultsMessage = document.createElement('div')
-        noResultsMessage.innerHTML = `{{ T "ui_no_results" }} "<strong>${searchQuery}</strong>"`
-        noResultsMessage.classList.add("suggestion__no-results");
-        suggestions.appendChild(noResultsMessage);
-        return;
-      }
-  
-      // construct a list of suggestions
-      for(const [href, doc] of flatResults) {
-          const entry = document.createElement('div');
-          suggestions.appendChild(entry);
-  
-          const a = document.createElement('a');
-          a.href = href;
-          entry.appendChild(a);
-  
-          const title = document.createElement('span');
-          title.classList.add('text-start');
-          title.textContent = doc.title;
-          title.classList.add("suggestion__title");
-          a.appendChild(title);
-  
-          const description = document.createElement('span');
-          description.textContent = doc.description;
-          description.classList.add("suggestion__description");
-          a.appendChild(description);
-  
-          suggestions.appendChild(entry);
-  
-          if(suggestions.childElementCount == maxResult) break;
-      }
-    }
-  }());
-  

assets/js/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,64 @@
+const navbar = document.querySelector('.navbar')
+const togglers = document.querySelectorAll('.main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+const colorsBG = ['body', 'secondary', 'tertiary']
+
+function updateNavbar () {
+  if (window.scrollY > 75) {
+    navbar.classList.add('nav-active')
+    const storedTheme = localStorage.getItem('theme')
+    navbar.setAttribute('data-bs-theme', storedTheme)
+  } else {
+    navbar.classList.remove('nav-active')
+    const defaultTheme = navbar.getAttribute('data-bs-overlay')
+    navbar.setAttribute('data-bs-theme', defaultTheme)
+  }
+}
+
+if ((navbar !== null) && (window.performance.getEntriesByType)) {
+  if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
+    updateNavbar()
+  }
+}
+
+if (navbar !== null && togglers !== null) {
+  // observe state changes to the site's color mode
+  const html = document.querySelector('html')
+  const config = {
+    attributes: true,
+    attributeFilter: ['data-bs-theme']
+  }
+  const Observer = new MutationObserver((mutationrecords) => {
+    updateNavbar()
+  })
+  Observer.observe(html, config)
+
+  // initialize background color
+  const color = (navbar.getAttribute('data-navbar-color') || 'body')
+  const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
+  navbar.style.setProperty('--bs-navbar-expanded-color', bg)
+
+  // set the navbar background color to opaque when scrolling past a breakpoint
+  window.onscroll = () => {
+    updateNavbar()
+  }
+
+  // set the navbar background color to opaque when expanded
+  for (let i = 0; i < togglers.length; ++i) {
+    togglers[i].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 = () => {
+      for (let j = 0; j < togglers.length; ++j) {
+        const toggler = togglers[j]
+        if (toggler.getAttribute('aria-expanded') === 'true') {
+          toggler.click()
+        }
+      }
+    }
+  }
+}

assets/js/sharing.js

@@ -0,0 +1,36 @@
+{{- if site.Params.sharing.webshare -}}
+
+// Adapted from: https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g
+
+// function for Web Share API
+function webShareAPI (title, description, link) {
+  navigator
+    .share({
+      title,
+      text: description,
+      url: link
+    })
+    .then(() => console.log('Successful share'))
+    .catch((error) => console.log('Error sharing', error))
+}
+
+const shareBtn = document.getElementById('btn-webshare')
+
+if (shareBtn !== null) {
+  if (navigator.share) {
+    const title = shareBtn.getAttribute('data-sharing-title')
+    const description = shareBtn.getAttribute('data-sharing-description')
+    const url = shareBtn.getAttribute('data-sharing-url')
+
+    // show button if it supports webShareAPI
+    shareBtn.style.display = 'block'
+    shareBtn.addEventListener('click', () =>
+      webShareAPI(title, description, url)
+    )
+  } else {
+    // hide button if host does not support Web Share API
+    shareBtn.style.display = 'none'
+  }
+}
+
+{{- end -}}

assets/js/toast.js

@@ -1,10 +1,24 @@
-// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
-const toastTrigger = document.getElementById('toastButton')
-const toastLiveExample = document.getElementById('toastMessage')
-if (toastTrigger) {
-  toastTrigger.addEventListener('click', () => {
+// 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 = new bootstrap.Toast(toastLiveExample)
+      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/scss/app-dart.scss

@@ -0,0 +1,59 @@
+@use "sass:meta";
+
+// Define template variables
+@use "hugo:vars" as h; // note: modified for dart-sass
+
+// Include default variable overrides
+@import "common/variables-dart.scss"; // note: modified for dart-sass
+@import "theme/variables.scss";
+@import "common/icons.scss";
+
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap-dart.scss"; // note: modified for dart-sass
+
+// Include dark mode overrides
+@import "common/variables-dark.scss";
+
+// Import Hinode theme styles
+@import "components/abbr.scss";
+@import "components/alert.scss";
+@import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
+@import "components/button.scss";
+@import "components/card.scss";
+@import "components/carousel.scss";
+@import "components/clipboard.scss";
+@import "components/command.scss";
+@import "components/feature.scss";
+@import "components/footer.scss";
+@import "components/nav.scss";
+@import "components/navbar.scss";
+@import "components/img.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
+@import "components/popover.scss";
+@import "components/sidebar.scss";
+@import "components/syntax-dart.scss"; // note: modified for dart-sass
+@import "components/table.scss";
+@import "components/timeline.scss";
+@import "components/toc.scss";
+@import "components/video.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";
+
+// note: modified for dart-sass
+@if h.$import-fonts {
+    @include meta.load-css(theme/fonts);
+}
+
+// Import theme placeholders
+@import "theme/base.scss";
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/app.scss

@@ -1,98 +1,56 @@
 // Define template variables
-// TODO: optimize, see https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053
-//       requires installation of dart-sass, no cross-platform installation available yet
-$themeColor:                    {{ site.Params.style.themeColor | default "#007bff" }};
-$themeFont:                     {{ site.Params.style.themeFont | default "Inter" }};
-$primary:                       {{ site.Params.style.primary | default "#007bff" }};
-$secondary:                     {{ site.Params.style.secondary | default "#6c757d" }};
-$success:                       {{ site.Params.style.success | default "#198754" }};
-$info:                          {{ site.Params.style.info | default "#0dcaf0" }};
-$warning:                       {{ site.Params.style.warning | default "#ffc107" }};
-$danger:                        {{ site.Params.style.danger | default "#dc3545" }};
-$light:                         {{ site.Params.style.light | default "#f8f9fa" }};
-$dark:                          {{ site.Params.style.dark | default "#212529" }};
-$navbar-offset:                 {{ if site.Params.navigation.fixed }}{{ site.Params.navigation.offset | default "3em" }}{{ else }}0em{{ end }};
+@import "hugo:vars";
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
-// Import Bootstrap banner and functions
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
-@import "bootstrap/scss/functions";
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap.scss";
 
-// Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// 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
-// scss-docs-start awesome
-@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "@fortawesome/fontawesome-free/scss/regular";
-@import "@fortawesome/fontawesome-free/scss/solid";
-@import "@fortawesome/fontawesome-free/scss/brands";
-// scss-docs-end awesome
+// Include dark mode overrides
+@import "common/variables-dark.scss";
 
 // Import Hinode theme styles
+@import "components/abbr.scss";
+@import "components/alert.scss";
 @import "components/blockquote.scss";
-@import "components/buttons.scss";
+@import "components/breadcrumb.scss";
+@import "components/button.scss";
 @import "components/card.scss";
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
-@import "components/comments.scss";
+@import "components/feature.scss";
+@import "components/footer.scss";
+@import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/pagination.scss";
+@import "components/persona.scss";
 @import "components/popover.scss";
-@import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/table.scss";
+@import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.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";
+
+{{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
+    @import "theme/fonts.scss";
+{{ end }}
+
+// Import theme placeholders
+@import "theme/base.scss";
+@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

@@ -3,20 +3,26 @@
 // 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

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

assets/scss/common/_styles.scss

@@ -1,3 +1,9 @@
+@if $enable-dark-mode {
+    body { 
+        transition: background-color 0.5s, color 0.5s; 
+    }
+}
+
 //
 // Remove underline from all links
 //
@@ -15,6 +21,163 @@ a:active {
     min-height: 100vh;
 }
 
+.fullcover {
+    --navbar-height: #{$navbar-height};
+
+    min-height: calc(100vh - var(--navbar-height));
+}
+
+.fullscreen {
+    --overlay-offset: #{$overlay-offset};
+
+    min-height: calc(100vh - var(--overlay-offset));
+}
+
+.main-content {
+    margin-top: var(--navbar-offset);
+}
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: margin-left margin-right,
+      class: mx,
+      responsive: true,
+      values: auto 0,
+    )
+  )
+);
+
 .tickmark li::marker {
     content: "✓ ";
 }
+
+.anchor
+{
+    color: transparent;
+}
+
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
+}
+
+$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
+    }
+}
+
+@media screen and (orientation: landscape) {
+    .min-vh-custom {
+        min-height: 50vh !important
+    }
+}
+
+:root {
+    --nav-height: 90px;
+}
+
+@include media-breakpoint-up(sm) {
+    .ratio-section {
+        min-height: calc(min(100vh, 576px) - var(--nav-height));
+    }    
+}
+
+@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-dark.scss

@@ -0,0 +1,101 @@
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --bs-primary: #{$primary-text-emphasis-dark};
+        --bs-secondary: #{$secondary-text-emphasis-dark};
+        --bs-primary-dark: #{$primary-bg-subtle-dark};
+        --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
+        --bg-primary-subtle: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 0.1));
+
+        .bg-primary-subtle {
+            background-color: var(--bg-primary-subtle) if($enable-important-utilities, !important, null);
+        }        
+        
+        .accordion-button {
+            background-color: var(--bg-primary-subtle);
+        }
+
+        .form-check-input:checked {
+          background-color: var(--bs-primary);
+          border-color: var(--bs-primary); }
+        
+        .form-check-input[type="checkbox"]:indeterminate {
+          background-color: var(--bs-primary);
+          border-color: var(--bs-primary);
+         }
+        
+        .form-range::-webkit-slider-thumb {
+          background-color: var(--bs-primary);
+        }
+        
+        .form-range::-moz-range-thumb {
+          background-color: var(--bs-primary);
+        }
+
+        .alert-primary {
+          --bs-alert-bg: var(--bg-primary-subtle);
+        }
+        
+        .btn-outline-primary {
+          --bs-btn-color: var(--bs-primary);
+          --bs-btn-border-color: var(--bs-primary);
+          --bs-btn-hover-bg: var(--bs-primary);
+          --bs-btn-hover-border-color: var(--bs-primary);
+          --bs-btn-active-bg: var(--bs-primary);
+          --bs-btn-active-border-color: var(--bs-primary);
+          --bs-btn-disabled-color: var(--bs-primary);
+          --bs-btn-disabled-border-color: var(--bs-primary);
+        }
+        
+        .btn-outline-secondary {
+          --bs-btn-color: var(--bs-secondary);
+          --bs-btn-border-color: var(--bs-secondary);
+          --bs-btn-hover-bg: var(--bs-secondary);
+          --bs-btn-hover-border-color: var(--bs-secondary);
+          --bs-btn-active-bg: var(--bs-secondary);
+          --bs-btn-active-border-color: var(--bs-secondary);
+          --bs-btn-disabled-color: var(--bs-secondary);
+          --bs-btn-disabled-border-color: var(--bs-secondary);
+        }
+
+        .link-primary {
+          color: var(--bs-primary) if($enable-important-utilities, !important, null);
+          text-decoration-color: var(--bs-primary) if($enable-important-utilities, !important, null);
+          
+          &:hover,
+          &:focus {
+            color: var(--bs-primary-dark) if($enable-important-utilities, !important, null);
+            text-decoration-color: var(--bs-primary-dark) if($enable-important-utilities, !important, null);              
+          }
+        }
+
+        .pagination {
+          --bs-pagination-color: var(--bs-body-bg);
+          --bs-pagination-bg: var(--bs-primary);
+        }
+        
+        .progress,
+        .progress-stacked {
+          --bs-progress-bar-bg: var(--bs-primary);
+        }
+        
+        .list-group {
+          --bs-list-group-active-bg: var(--bs-primary);
+          --bs-list-group-active-border-color: var(--bs-primary);
+         }
+        
+        .clipboard-button:hover {
+          color: var(--bs-primary); }
+        
+        .clipboard-button:hover > svg {
+          fill: var(--bs-primary);
+        }
+        
+        .toggler-icon {
+          background-color: var(--bs-primary);
+        }
+        
+        .heading:hover .anchor {
+          color: var(--bs-primary); 
+        }
+    }
+}

assets/scss/common/_variables-dart.scss

@@ -0,0 +1,52 @@
+// Bootstrap variables overrides for theme
+$enable-negative-margins:       true;
+$enable-important-utilities:    true !default;
+
+// Remove the border from the focused navigation toggler
+$navbar-toggler-focus-width:    0 !default;
+
+$base-url:                      h.$base-url;
+
+$font-family-sans-serif:        h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base:                h.$font-size-base !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);
+}
+
+$navbar-height:                 h.$navbar-height;
+$navbar-offset:                 h.$navbar-offset;
+$navbar-offset-xs:              h.$navbar-offset-xs;
+$navbar-size:                   h.$navbar-size;
+$overlay-offset:                h.$overlay-offset;
+$primary:                       h.$primary;
+$secondary:                     h.$secondary;
+$success:                       h.$success;
+$info:                          h.$info;
+$warning:                       h.$warning;
+$danger:                        h.$danger;
+$light:                         h.$light;
+$dark:                          h.$dark;
+
+$black:                       #000 !default;
+$btn-toggle-color:              $black !default;
+
+$carousel-dark-indicator-active-bg:  #fff !default;
+$carousel-dark-caption-color:        #fff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
+
+$primary-text-emphasis-dark:        mix(white, h.$primary, h.$dark-mode-tint) !default;
+$secondary-text-emphasis-dark:      mix(white, h.$secondary, h.$dark-mode-tint) !default;
+$link-color-dark:                   mix(white, h.$primary, h.$dark-mode-tint) !default;
+$primary-bg-subtle-dark:            mix(black, h.$primary, h.$dark-mode-shade) !default;
+$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);

assets/scss/common/_variables.scss

@@ -1,14 +1,15 @@
 // Bootstrap variables overrides for theme
 $enable-negative-margins:       true;
-
-// Font awesome variables overrides for theme
-$fa-font-path:                  "../fonts";
+$enable-important-utilities:    true !default;
 
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
+$base-url:                      $base-url;
+
 // scss-docs-start font
-$font-family-sans-serif:        $themeFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base:                $font-size-base !default;;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -17,9 +18,27 @@ $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
 strong {
-    font-weight:                600 !important;
+    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:  #fff !default;
+$carousel-dark-caption-color:        #fff !default;
+$carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
+
+// scss-docs-start color-mode
+$primary-text-emphasis-dark:        mix(white, $primary, $dark-mode-tint) !default;
+$secondary-text-emphasis-dark:      mix(white, $secondary, $dark-mode-tint) !default;
+$link-color-dark:                   mix(white, $primary, $dark-mode-tint) !default;
+$primary-bg-subtle-dark:            mix(black, $primary, $dark-mode-shade) !default;
+$primary-border-subtle-dark:        mix(black, $primary, $dark-mode-shade / 2) !default;
+// scss-docs-end color-mode
+
+// scss-docs-start horizontal-nav
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);
+// scss-docs-end horizontal-nav

assets/scss/components/_abbr.scss

@@ -0,0 +1,22 @@
+@media (hover: none) {
+    abbr[title] {
+        position: relative;
+        text-decoration: underline dotted;
+    }
+    
+    abbr[title]:hover::after,
+    abbr[title]:focus::after {
+        content: attr(title);
+        position: absolute;
+        left: 0;
+        bottom: -30px;
+        width: auto;
+        white-space: nowrap;
+        background-color: var(--bs-body-bg);
+        color: var(--bs-tooltip-color);
+        border-radius: 3px;
+        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
+        font-size: 14px;
+        padding: 3px 5px;
+    }
+}

assets/scss/components/_alert.scss

@@ -0,0 +1,18 @@
+.alert code {
+    color: inherit;
+}
+
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+.alert a {
+    color: inherit;
+    
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
+        text-decoration-line: underline;
+        text-decoration-style: dotted;
+        text-decoration-color: var(--bs-body);
+    }    
+}
+/* stylelint-enable declaration-block-no-redundant-longhand-properties */

assets/scss/components/_breadcrumb.scss

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

assets/scss/components/_button.scss

@@ -0,0 +1,47 @@
+/* Set hover color for primary button to white (overrides color contrast defined in mixin) */
+.btn-outline-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+    color: #fff if($enable-important-utilities, !important, null);
+}
+
+.btn-social {
+    background-color: transparent;
+    
+    --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 {
+    background-color: transparent;
+    color: var(--bs-primary) if($enable-important-utilities, !important, null);
+}
+
+a.btn {
+    margin-top: $spacer * .25;
+    margin-bottom: $spacer * .25;
+}
+
+.btn-close {
+    background-color: transparent if($enable-important-utilities, !important, null);
+    background-image: var(--#{$prefix}btn-close-bg) if($enable-important-utilities, !important, null);
+    background-position: center if($enable-important-utilities, !important, null);
+    background-repeat: no-repeat if($enable-important-utilities, !important, null);
+    background-size: $btn-close-width if($enable-important-utilities, !important, null);
+}
+
+.btn-link {
+    --bs-btn-padding-x: 0;
+}

assets/scss/components/_buttons.scss

@@ -1,8 +0,0 @@
-/* Set hover color for primary button to white (overrides color contrast defined in mixin) */
-.btn-outline-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-    color: #fff !important;
-}

assets/scss/components/_card.scss

@@ -1,21 +1,17 @@
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376
 
+.card-img-bg {
+    background-color: var(--#{$prefix}secondary-bg);
+}
+
 .card-img-wrap {
     overflow: hidden;
     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,11 +19,25 @@
     width: 100%;
 }
 
-.card-img-wrap:hover img {
-    transform: scale(1.1);
+.card-icon {
+    color: $secondary;
 }
 
-.card-img-wrap:hover::after {
+.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-zoom:hover .card-img-wrap img {
+    transform: scale(1.1);
+    opacity: 0.5;
+}
+
+.card-zoom:hover::after .card-img-wrap img {
     opacity: 1;
 }
 
@@ -40,3 +50,50 @@
     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);
+}
+
+.card-body-margin {
+    margin-bottom: $spacer * 1.5; // equals mb-4
+}
+
+@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 {
+    &:hover,
+    &:focus {
+        color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card-zoom .card-body-link {
+            &:hover,
+            &:focus {
+                color: $primary-bg-subtle-dark if($enable-important-utilities, !important, null);
+            }
+        }
+    }
+}
+
+// stylelint-enable annotation-no-unknown
+
+// make tag-link and card-button clickable on top of the stretched-link.
+.card .tag-link, .card .card-button {
+    z-index: 2;
+    position: relative;
+}
+
+.card-button-link {
+    text-decoration: underline if($enable-important-utilities, !important, null);
+}

assets/scss/components/_comments.scss

@@ -1,20 +0,0 @@
-.utterances {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 760px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.utterances-frame {
-    color-scheme: light;
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 1px;
-    min-width: 100%;
-    max-width: 100%;
-    height: 100%;
-    border: 0;
-}

assets/scss/components/_feature.scss

@@ -0,0 +1,3 @@
+.feature {
+    margin-top: calc(0.3 * var(--navbar-offset));
+}

assets/scss/components/_footer.scss

@@ -0,0 +1,30 @@
+.footer {
+    // background-color: $gray-800 if($enable-important-utilities, !important, null);
+    color: var(--bs-secondary) if($enable-important-utilities, !important, null);
+}
+
+.link-bg-footer {
+    color: var(--bs-secondary) if($enable-important-utilities, !important, null);
+    
+    &:hover,
+    &:focus {
+        color: var(--bs-tertiary-color) if($enable-important-utilities, !important, null);
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .footer {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+        }
+
+        .link-bg-footer {
+            color: $gray-500 if($enable-important-utilities, !important, null);
+            
+            &:hover,
+            &:focus {
+                color: $gray-400 if($enable-important-utilities, !important, null);
+            }
+        }
+    }
+}

assets/scss/components/_img.scss

@@ -14,3 +14,16 @@
     height: 100%;
     object-fit: cover;
 }
+
+.mirrorred {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}
+
+.background-img {
+    --overlay-offset: #{$overlay-offset};
+
+    height: calc(100vh - var(--overlay-offset));
+    width: 100vw;
+    object-fit: cover;
+}

assets/scss/components/_nav.scss

@@ -0,0 +1,103 @@
+.nav-tabs > .nav-link.active {
+    border-bottom-color: var(--bs-body-bg) !important;
+    border-bottom-style: solid !important;
+    z-index: 1;
+}
+
+.nav-callout {
+    --#{$prefix}nav-callout-bg: var(--#{$prefix}light);
+    --#{$prefix}nav-callout-active-bg: var(--bs-primary-bg-subtle);
+    --#{$prefix}nav-callout-gap: #{$nav-underline-gap};
+    
+    column-gap: var(--#{$prefix}nav-callout-gap) !important;
+}
+
+.nav-callout > .tab-content {
+    background-color: var(--#{$prefix}nav-callout-bg);
+    padding: 2 * $spacer;
+    margin-top: 0 !important;
+}
+
+.nav-callout > .nav-link {
+    display: flex;
+    text-align: start;
+    vertical-align: text-top;
+    border-radius: 0;
+    padding: 0 0 (4 * $spacer);
+    border-bottom: none;
+}
+
+.nav-callout > .nav-link.active {
+    background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-bg) 50%, transparent 0);
+    background-size: 50% (3 * $spacer);
+    background-repeat: no-repeat;
+    background-position: 50% bottom;
+    font-weight: 600;
+    color: var(--bs-nav-underline-link-active-color);
+}
+
+.nav-callout .accordion-button {
+    background-color: var(--#{$prefix}nav-callout-bg) !important;
+    border: solid;
+    border-color: var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}accordion-inner-border-radius) !important;
+    margin-bottom: 0;
+
+    &:focus {
+        border-bottom: none !important;
+        box-shadow: none;
+    }
+
+    &:not(.collapsed) {
+        box-shadow: none;
+    }
+}
+
+.nav-callout > .accordion-item {
+    margin-top: 2 * $spacer;
+    margin-bottom: 2 * $spacer;
+    border: none;
+}
+
+.nav-callout .accordion-button[aria-expanded="false"] {
+    border-bottom: solid !important;
+    border-color: var(--#{$prefix}border-color) !important;
+    border-radius: var(--#{$prefix}accordion-inner-border-radius);
+}
+
+.nav-callout .accordion-button[aria-expanded="true"] {
+    border-color: var(--#{$prefix}border-color) !important;
+    border-bottom: none !important;
+    border-radius: var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius) 0 0 !important;
+    padding-bottom: 3 * $spacer;
+    background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-active-bg) 50%, transparent 0);
+    background-size: 10% (2.5 * $spacer);
+    background-repeat: no-repeat;
+    background-position: 10% bottom;
+}
+
+.nav-callout .accordion-collapse {
+    background-color: var(--#{$prefix}nav-callout-active-bg) !important;
+    border-radius: 0 0 var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius);
+    border-top: none !important;
+    border-left: solid;
+    border-right: solid;
+    border-bottom: solid;
+    border-color: var(--#{$prefix}border-color);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .nav-callout {
+            --#{$prefix}nav-callout-bg: var(--#{$prefix}tertiary-bg);
+        }
+
+        .nav-callout .accordion-button[aria-expanded="true"] {
+            background-image: linear-gradient(to top right, shade-color($primary, 70%) 50%, transparent 0);
+        }
+
+        .nav-callout .accordion-collapse {
+            background-color: shade-color($primary, 70%) !important;
+        }
+    }
+}

assets/scss/components/_navbar.scss

@@ -1,23 +1,69 @@
+// stylelint-disable annotation-no-unknown
+
 // Source: https://jsfiddle.net/njhgr40m/
+.navbar {
+    --bs-navbar-expanded-color: var(--bs-body-bg);
+    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
+
+    transition: 0.5s ease-in-out;
+    background-color: transparent;
+
+    @each $state, $val in $theme-colors {
+        --bs-navbar-color-#{$state}: #{$val};
+    }
+}
+
+.nav-active, .navbar-expanded {
+    background-color: var(--bs-navbar-expanded-color);
+    border-bottom: 1px solid var(--bs-secondary-bg);
+}
+
+.nav-link {
+    margin: 0 .15rem;
+}
+
+.navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
+    border-bottom: solid 1px var(--bs-navbar-hover-color);
+    margin-bottom: -1px;
+}
+
+.navbar-contrast {
+    --bs-navbar-color: white !important;
+    --bs-navbar-hover-color: white !important;
+    --bs-navbar-disabled-color: white !important;
+    --bs-navbar-active-color: white !important;
+    --bs-navbar-toggler-color: white;
+}
+
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
+.nav-item .vr {
+    color: var(--bs-navbar-color);
+}
 
 /* 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 */
 .toggler-icon {
     width: 30px;
     height: 3px;
-    background-color: $primary;
     display: block;
     transition: all 0.2s;
 }
@@ -63,5 +109,186 @@
 
 /* Color of Toggler when collapsed */
 .navbar-toggler.collapsed .toggler-icon {
-    background-color: #777;
+    background-color: var(--bs-navbar-toggler-color);
+}
+
+.emphasis, .emphasis-dark, .emphasis-light {
+    background-color: var(--bs-navbar-toggler-color);
+}
+
+@include color-mode(dark) {
+    .emphasis {
+        background-color: $white if($enable-important-utilities, !important, null);
+    }
+}
+
+// stylelint-enable annotation-no-unknown
+
+.navbar .dropdown-divider-bg {
+    color: var(--#{$prefix}navbar-color);
+}
+
+:root {
+    --dropdown-horizontal-bg: var(--#{$prefix}light);
+    --navbar-offset: #{$navbar-offset-xs};
+}
+
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer;
+    width: 100% !important;
+}
+
+.navbar-container {
+    width: 100% !important;
+}
+
+.navbar-brand {
+    margin-right: 0;
+}
+
+@include media-breakpoint-up(#{$navbar-size}) {
+    :root {
+        --navbar-offset: #{$navbar-offset};
+    }
+
+    .navbar-container {
+        width: auto !important;
+    }
+
+    .navbar-title {
+        text-align: initial !important;
+        padding: 0;
+    }
+
+    .navbar-brand {
+        margin-right: var(--bs-navbar-brand-margin-end);
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+.dropdown-horizontal {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        @include media-breakpoint-up($next) {
+            &#{$infix} { 
+                position: static !important; 
+            } 
+    
+            &#{$infix} > .dropdown-menu {
+                opacity: 0;
+                display: block;
+                visibility: hidden;
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+                width: 100%;
+                height: auto;
+                text-align: center;
+                border-radius: 0;
+                border: 0;
+                margin-top: $dropdown-horizontal-margin-top;
+                padding-top: $dropdown-horizontal-padding-y;
+                padding-bottom: $dropdown-horizontal-padding-y;
+                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
+            
+                @include transition($dropdown-transition);
+            }
+    
+            &#{$infix} > .dropdown-menu.show {
+                visibility: visible;
+                opacity: 1;
+            }
+    
+            &#{$infix} > .dropdown-menu > li {
+                display: inline-block;
+                padding-left: $spacer;
+                padding-right: $spacer;
+            }
+    
+            &#{$infix} > .dropdown-menu > li > a {
+                padding-left: .25 * $spacer;
+                padding-right: .25 * $spacer;
+
+                &.active,
+                &:hover,
+                &:focus {
+                    color: var(--bs-body-color);
+                    border-bottom: solid 1px var(--bs-navbar-hover-color);
+                    margin-bottom: -1px;
+                    background-color: transparent;
+                }
+            }
+            
+            &#{$infix} > .nav-link.show {
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+            }            
+        }
+    }
+}
+
+// adapted from https://www.codeply.com/p/UsTEwDkzNp#
+.checkbox {
+	opacity: 0;
+	position: absolute;
+}
+
+.mode-switch {
+    --#{$prefix}mode-switch-width: 50px;
+}
+
+.mode-switch .label {
+	border-color: var(--#{$prefix}border-color);
+    border-style: solid;
+    border-width: 1px;
+	border-radius: var(--#{$prefix}mode-switch-width);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	position: relative;
+	height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
+	width: var(--#{$prefix}mode-switch-width);
+    transform: scale(0.9);
+}
+
+.notransition {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+.mode-switch .label .ball {
+    background-color: var(--#{$prefix}secondary-bg);
+	border-radius: 50%;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
+	width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
+	transition: transform 0.2s linear;
+}
+
+.mode-switch .checkbox:checked + .label .ball {
+	transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
+}
+
+.mode-switch .fa-moon {
+	color: $yellow;
+    transform: scale(0.8);
+}
+
+.mode-switch .fa-sun {
+	color: var(--#{$prefix}bs-body-color);
+    transform: scale(0.8);
 }

assets/scss/components/_pagination.scss

@@ -0,0 +1,12 @@
+.pagination {
+    --bs-pagination-bg: var(--bs-primary-bg-subtle);
+    --bs-pagination-color: var(--bs-body-color);
+    --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/_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

@@ -1,6 +1,25 @@
 // scss-docs-start sidebar
 .sidebar {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
+}
+
+.sidebar-overflow {
+    top: var(--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 {
@@ -11,7 +30,7 @@
 
     &:hover,
     &:focus {
-        color: rgba(0, 0, 0, 0.85);
+        color: black;
         background-color: tint-color($primary, 90%);
     }
 
@@ -24,10 +43,8 @@
     }
 }
 
-// scss-docs-end sidebar
-
 .btn-toggle[aria-expanded="true"] {
-    color: rgba(0, 0, 0, 0.85);
+    color: black;
 
     &::before {
         transform: rotate(90deg);
@@ -49,6 +66,59 @@
     }
 }
 
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .sidebar-item {
+            color: var(--bs-body-color);
+            margin-left: 0 !important;
+            padding-left: 0.85rem !important;
+        
+            &.active,
+            &:hover,
+            &:focus {
+                color: white !important;
+                background-color: transparent;
+            }
+        }
+
+        .btn-toggle {
+            color: var(--bs-body-color);
+        
+            &:hover,
+            &:focus {
+                color: white !important;
+                background-color: transparent;
+            }
+        
+            &::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: white !important;
+                background-color: transparent;
+            }
+
+            &.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: #373700 }
+/* 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: #999fa8 }
+/* 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 { color: #00cccc }
+/* NameBuiltin */ .chroma .nb { color: #00a2d8 }
+/* 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: #979fa8; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #979fa8; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #979fa8; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #979fa8; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #979fa8; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #979fa8; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #979fa8; 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: #979fa8 }
+/* GenericPrompt */ .chroma .gp { color: #979fa8 }
+/* 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: #999fa8 }

assets/scss/components/_syntax-dart.scss

@@ -0,0 +1,49 @@
+// stylelint-disable annotation-no-unknown
+@import "syntax-light";
+
+.bg,
+.chroma,
+.chroma .err {
+    // set to transparent background to avoid rendering issues with example shortcode
+    background-color: transparent if($enable-important-utilities, !important, null);
+}
+
+.chroma {
+    display: flex;
+}
+
+.chroma code {
+    flex: 1;
+}
+
+.syntax-highlight {
+    background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+    overflow-x: auto;
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        @include meta.load-css(syntax-dark);
+
+        .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,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
+            color: #c9d1d9 if($enable-important-utilities, !important, null);
+        }
+    }
+}
+// stylelint-enable annotation-no-unknown

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

assets/scss/components/_table.scss

@@ -0,0 +1,13 @@
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .table-striped, .table-striped-columns {
+            --bs-table-striped-bg: var(--bs-tertiary-bg);
+            --bs-table-striped-color: var(--bs-body-color);
+        }
+
+        .table-hover {
+            --bs-table-hover-bg: var(--bs-tertiary-bg);
+            --bs-table-striped-color: var(--bs-body-color);
+        }
+    }
+}

assets/scss/components/_timeline.scss

@@ -0,0 +1,167 @@
+// 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});
+    }
+}
+
+// scss-docs-end timeline
+
+.timeline, .timeline-sm {
+    position: relative;
+}
+
+.timeline-sm {
+    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2.4);
+    --timeline-offset: 25%
+}
+
+@include media-breakpoint-up(sm) {
+    .timeline-sm {
+        --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    }
+}
+  
+.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

@@ -1,20 +1,21 @@
 //
-// Table of contents sidebar
+// Table of contents sidebar & drop-down panel
 //
 // scss-docs-start toc
-.toc {
+.toc-sidebar {
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 7rem);
+    height: calc(100vh - 5rem);
     overflow-y: auto;
-    top: $navbar-offset;
+    top: 5rem;
 }
 
 // scss-docs-end toc
 
 .toc nav {
     font-size: 0.875rem;
+    margin-bottom: -0.875rem;
 }
 
 .toc nav ul {
@@ -33,6 +34,10 @@
 
 .toc nav a {
     color: inherit;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
 }
 
 .toc nav a:not(:hover) {
@@ -42,3 +47,59 @@
 .toc nav a code {
     font: inherit;
 }
+
+#toc-collapse {
+    border-color: var(--bs-secondary-color) !important;
+    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
+    margin-top: -1.5rem;
+    padding-top: 1.5rem !important;
+}
+
+.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);
+
+    background-color: var(--#{$prefix}body-bg) !important;
+
+    &.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;
+    }
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="dark"] {
+        .toc-button {
+            --bs-btn-color: var(--bs-body-color);
+            --bs-btn-border-color: var(--bs-body-color);
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        #toc-collapse {
+            border-color: var(--bs-body-color) !important;
+        }
+
+        .toc nav a {
+            color: var(--bs-body-color);
+
+            &:hover {
+                color: white;
+            }
+        }
+    }
+}
+
+.section-menu > .nav-link.active, .section-menu > .nav-link:hover {
+    color: var(--bs-primary);
+}

assets/scss/components/_video.scss

@@ -1,3 +1,19 @@
+.youtube-embedded {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.youtube-embedded > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border:0;
+}
+
 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
 .__h_video {
     position: relative;

assets/scss/helpers/_colored-links.scss

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

assets/scss/helpers/_display.scss

@@ -0,0 +1,38 @@
+.hidden {
+    display: none;
+}
+
+// stylelint-disable annotation-no-unknown
+
+// scss-docs-start display-color
+.d-none-light, .d-none-inline-light {
+    display: none if($enable-important-utilities, !important, null); 
+}
+
+.d-none-dark {
+    display: block if($enable-important-utilities, !important, null);
+}
+
+.d-none-inline-dark {
+    display: inline 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-inline-light {
+            display: inline if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark, .d-none-inline-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,30 +3,34 @@
 //
 h1 {
     margin-top: $spacer * 2.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h2 {
     margin-top: $spacer * 2;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h3 {
     margin-top: $spacer * 1.75;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h4 {
     margin-top: $spacer * 1.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h5 {
     margin-top: $spacer * 1.25;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
 
 h6 {
     margin-top: $spacer;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
+}
+
+.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
+    scroll-margin-top: var(--navbar-offset);
 }

assets/scss/theme/_variables.scss

@@ -0,0 +1,2 @@
+// Placeholder to quickly add your own theme variable overrides
+// The file is included at the beginning of the build pipeline

assets/scss/theme/base.scss

@@ -0,0 +1,2 @@
+// Placeholder for themes extending the core Hinode theme
+// The file is included last in the build pipeline, but prior to theme.scss

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/hugo.toml

@@ -0,0 +1,139 @@
+# toml-docs-start main
+title = "Hinode"
+copyright = "Copyright © 2024 Mark Dumay."
+paginate = 9
+enableGitInfo = true
+# toml-docs-end main
+
+# additional settings
+baseURL = "https://example.com/"
+canonifyURLs = false
+enableEmoji = true
+enableRobotsTXT = true
+enableInlineShortcodes = true
+summaryLength = 20
+
+# 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 = false
+# 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
+  [services.googleAnalytics]
+    # ID = "G-xxxxxxxxxx"
+
+[outputFormats]
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+  [minify.tdewolff.html]
+    keepWhitespace = true
+
+[module]
+  [module.hugoVersion]
+    extended = true
+    min = "0.120.0"
+    max = ""
+  [[module.mounts]]
+    source = "archetypes"
+    target = "archetypes"
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  [[module.mounts]]
+    source = "content"
+    target = "content"
+  [[module.mounts]]
+    source = "data"
+    target = "data"
+  [[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"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-lottie"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-utils/v2"
+# toml-docs-end modules

config/_default/languages.toml

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

config/_default/markup.toml

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

config/_default/menus/menus.en.toml

@@ -1,78 +1,51 @@
 [[main]]
-  name = "About"
-  url = "/about/"
+  name = "Home"
+  pageRef = "/"
   weight = 10
 
-[[main]]
-  name = "Docs"
-  url = "/docs/"
-  weight = 20
-
-[[main]]
-  name = "Blog"
-  url = "/blog/"
-  weight = 30
-
-[[main]]
-  name = "Projects"
-  url = "/projects/"
-  weight = 40
-
-[[main]]
-  name = "Sample project"
-  url = "/en/projects/sample-project/"
-  parent = "Projects"
-  weight = 1
-
-[[main]]
-  name = "Another project"
-  url = "/en/projects/another-project/"
-  parent = "Projects"
-  weight = 2
-
 [[main]]
   name = "Tags"
-  url = "/tags/"
-  weight = 50
+  pageRef = "/tags"
+  weight = 20
 
 [[social]]
   name = "LinkedIn"
-  pre = "<i class=\"fab fa-linkedin fa-2x\"></i>"
+  pre = "fab linkedin"
   url = "https://linkedin.com/"
   weight = 10
 
 [[social]]
   name = "GitHub"
-  pre = "<i class=\"fab fa-github fa-2x\"></i>"
+  pre = "fab fa-github"
   url = "https://github.com/"
   weight = 20
 
 [[social]]
   name = "Medium"
-  pre = "<i class=\"fab fa-medium fa-2x\"></i>"
+  pre = "fab medium"
   url = "https://medium.com/"
   weight = 30
 
 # toml-docs-start sample-navigation
 [[sample]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 10
 
 [[sample]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 20
 
 [[sample]]
   name = "Sample project"
-  url = "/en/projects/sample-project/"
+  pageRef = "/projects/sample-project/"
   parent = "Projects"
   weight = 1
 
 [[sample]]
   name = "Another project"
-  url = "/en/projects/another-project/"
+  pageRef = "/projects/another-project/"
   parent = "Projects"
   weight = 2
 # toml-docs-end sample-navigation

config/_default/menus/menus.nl.toml

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

config/_default/params.toml

@@ -2,60 +2,136 @@
 [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
+    endorse = true
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
+    [main.externalLinks]
+        cue = false
+        tab = false
+    [main.build]
+        transpiler = "libsass"
 # toml-docs-end main
 
+# toml-docs-start images
+[images]
+    [images.cloudinary]
+        host = "cloudinary"
+    [images.imagekit]
+        host = "imagekit"
+    [images.imgix]
+        host = "imgix"
+# toml-docs-end images
+
+# toml-docs-start debugging
+[debugging]
+    showJS = false
+    showSCSS = false
+    purgeHTMLComments = false
+# toml-docs-end debugging
+
 # toml-docs-start docs
 [docs]
-    version = "0.8"
+    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
+    # sections = ["posts"]
     fullCover = false
+    centerHeadline = false
+    style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 # toml-docs-end home
 
 # toml-docs-start navigation
 [navigation]
-    logo = "/img/logo_embedded.svg"
-    color = "white"
-    style = "light"
+    anchor = true
+    logo = "/img/logo_icon.svg"
+    color = "body"
     fixed = true
-    offset = "3em"
+    overlay = false
+    overlayMode = "dark"
+    horizontal = false
+    offset = "5.5rem"
     search = true
-    breadcrumb = false
+    searchModal = false
+    breadcrumb = true
     toc = true
     sidebar = true
+    size = "md"
 # toml-docs-end navigation
 
-# toml-docs-start list
-[list]
-    [blog]
-        title = "Blog"
-        sort = "date"
+# toml-docs-start messages
+[messages]
+    placement = "bottom-right"
+# toml-docs-end messages
+
+# toml-docs-start sharing
+[sharing]
+    enabled = true
+    sort = "weight"
     reverse = false
-        cols = 3
-        color = ""
-        padding = "0"
-        header = "full"
-        footer = "none"
-        orientation = "stacked"
-        style = "border-0"
-        homepage = 3
-    [projects]
-        title = "Projects"
-        sort = "title"
-        reverse = false
-        cols = 1
-        color = ""
-        padding = "3"
-        header = "none"
-        footer = "tags"
-        orientation = "none"
-        style = "border-1 card-emphasize"
-        homepage = 3
-# toml-docs-end list
+    webshare = true
+
+[[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 x-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.posts]
+#         title = "Posts"
+#         sort = "date"
+#         reverse = true
+#         nested = true
+#         cols = 3
+#         color = ""
+#         padding = "0"
+#         header = "full"
+#         footer = "none"
+#         orientation = "stacked"
+#         style = "border-0 card-zoom card-body-margin"
+#         homepage = 3
+#         separator = true
+# toml-docs-end sections
 
 [favicon]
     logo = "img/favicon.png"
@@ -63,7 +139,7 @@
 
 # toml-docs-start theme-colors
 [style]
-    primary = "#D43900"
+    primary = "#d43900"
     secondary = "#6c757d"
     success = "#198754"
     info = "#0dcaf0"
@@ -73,10 +149,18 @@
     dark = "#212529"
 # toml-docs-end theme-colors
     themeOpacity = "10"
+    darkModeShade = "20%"
+    darkModeTint = "40%"
 # toml-docs-start font
     themeFont = "Inter"
-    themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap"
+    # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
+    themeFontPath = "/fonts" # local path
+    themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
+    fontSizeBase = "1rem" # assumes the browser default, typically '16px'
 # toml-docs-end font
+# toml-docs-start build
+    purge = false
+# toml-docs-end build
 
 [schema]
     type = "Organization"
@@ -84,11 +168,11 @@
     locale = "en-US"
     # twitter = "https://twitter.com/gethinode"
     # linkedIn = ""
-    github = "https://github.com/markdumay/hugo-theme-hinode"
+    github = "https://github.com/gethinode/hinode"
     section = "blog"
     [author]
         name = "Mark Dumay"
-        twitter = "https://twitter.com/markdumay"
+        # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
     [logo]
@@ -104,78 +188,5 @@
     images = ["logo.png"]
     locale = "en_US"
 
-[comments]
-    enabled = false
-    repo = "" # Replace with your repository.
-    #issueTerm = "pathname" # pathname, url, title, og:title
-    #label = "comment"
-    # 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]
-    blist = "https://github.com/apvarun/blist-hugo-theme"
-    bootstrap = "https://getbootstrap.com"
-    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
-    bs_breakpoints = "https://getbootstrap.com/docs/5.3/layout/breakpoints"
-    bs_grid = "https://getbootstrap.com/docs/5.3/layout/grid"
-    bs_offcanvas = "https://getbootstrap.com/docs/5.3/components/offcanvas"
-    bs_navbar_placement = "https://getbootstrap.com/docs/5.3/components/navbar/#placement"
-    bs_tables = "https://getbootstrap.com/docs/5.3/content/tables"
-    cc_by_nc_4_0 = "https://creativecommons.org/licenses/by-nc/4.0/"
-    commit_message = "https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html"
-    contrast_checker = "https://accessibleweb.com/color-contrast-checker/"
-    css_codeguide = "https://codeguide.co/#css"
-    doks = "https://github.com/h-enk/doks"
-    eslint = "https://eslint.org"
-    flexsearch = "https://github.com/nextapps-de/flexsearch"
-    fontawesome = "https://fontawesome.com"
-    fa_icons = "https://fontawesome.com/icons"
-    fa_styling = "https://fontawesome.com/docs/web/style/styling"
-    fa_animation = "https://fontawesome.com/docs/web/style/animate"
-    git_download = "https://git-scm.com"
-    github_pr = "https://help.github.com/articles/about-pull-requests/"
-    github_rebase = "https://help.github.com/articles/about-git-rebase/"
-    google_fonts = "https://fonts.google.com"
-    html_codeguide = "https://codeguide.co/#html"
-    hugo = "https://gohugo.io"
-    hugo_config = "https://gohugo.io/getting-started/configuration/#all-configuration-settings"
-    hugo_config_dir = "https://gohugo.io/getting-started/configuration/#configuration-directory"
-    hugo_content = "https://gohugo.io/content-management/formats"
-    hugo_chroma = "https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages"
-    hugo_fingerprint = "https://gohugo.io/hugo-pipes/fingerprint"
-    hugo_frontmatter = "https://gohugo.io/content-management/front-matter"
-    hugo_i18n = "https://gohugo.io/functions/i18n"
-    hugo_lang = "https://gohugo.io/content-management/multilingual"
-    hugo_lang_config = "https://gohugo.io/content-management/multilingual/#configure-languages"
-    hugo_menus = "https://gohugo.io/content-management/menus/"
-    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
-    hugo_ordering = "https://gohugo.io/templates/lists/#order-content"
-    hugo_templates = "https://gohugo.io/templates/introduction/"
-    hugo_toc = "https://gohugo.io/content-management/toc"
-    issue_tracker = "https://github.com/markdumay/hugo-theme-hinode/issues"
-    license = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
-    markdown_emoji = "https://gist.github.com/rxaviers/7360908"
-    markdown_md013 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md013---line-length"
-    markdown_md024 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md024---multiple-headings-with-the-same-content"
-    markdown_md026 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md026---trailing-punctuation-in-heading"
-    markdown_md033 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md033---inline-html"
-    markdown_md034 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md034---bare-url-used"
-    markdown_md051 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md051---link-fragments-should-be-valid"
-    markdown_md053 = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md053---link-and-image-reference-definitions-should-be-needed"
-    markdown_rules = "https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md"
-    markdownlint = "https://github.com/DavidAnson/markdownlint-cli2"
-    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
-    netlify = "https://www.netlify.com"
-    nodejs = "https://nodejs.org"
-    npm = "https://www.npmjs.com"
-    observatory = "https://observatory.mozilla.org/analyze/hinode-demo.markdumay.org"
-    package_npm = "https://www.npmjs.com/package/@markdumay/hugo-theme-hinode"
-    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fhinode-demo.markdumay.org%2F"
-    repository = "https://github.com/markdumay/hugo-theme-hinode"
-    repository_child = "https://github.com/markdumay/hugo-theme-hinode-child.git"
-    repository_owner = "https://github.com/markdumay/"
-    semver = "https://semver.org"
-    stylelint = "https://stylelint.io"
-    utterances = "https://utteranc.es"
-    wcag_contrast = "https://www.w3.org/TR/WCAG20/#visual-audio-contrast"
+    hinode = "https://gethinode.com"

config/_default/server.toml

@@ -7,15 +7,15 @@ for = '/**'
     X-XSS-Protection = "1; mode=block"
     Content-Security-Policy = """\
         default-src 'self'; \
-        script-src 'self' \
-            https://utteranc.es/client.js; \
-        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
+        script-src 'self' https://*.google-analytics.com https://*.googletagmanager.com; \
+        style-src 'self' https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
-        connect-src 'self'; \
+        connect-src 'self'
+            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
+        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
+        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com 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' \
         """
@@ -32,6 +32,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/ci/hugo.toml

@@ -0,0 +1,23 @@
+# cachedir default on POSIX: '/tmp/hugo_cache_runner'
+# cachedir default on Windows: '~\AppData\Local\hugo_cache'
+# cachedir default on macOS: '/Users/runner/Library/Caches/hugo_cache'
+
+[caches]
+  [caches.assets]
+    dir = ':cacheDir/resources/_gen' # map to cacheDir instead of resourceDir to utilize GitHub action/cache
+    maxAge = -1
+  [caches.getcsv]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getjson]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.getresource]
+    dir = ':cacheDir/:project'
+    maxAge = -1
+  [caches.images]
+    dir = ':cacheDir/resources/_gen' # map to cacheDir instead of resourceDir to utilize GitHub action/cache
+    maxAge = -1
+  [caches.modules]
+    dir = ':cacheDir/modules'
+    maxAge = -1

config/postcss.config.js

@@ -1,47 +1,47 @@
-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/_nav.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/components/_table.scss',
+      './assets/scss/components/_video.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/_modal.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/_index.md

@@ -0,0 +1,15 @@
+---
+title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+thumbnail:
+    url: /img/sunrise.jpg
+    author: Harris Vo
+    authorURL: https://unsplash.com/@hoanvokim
+    origin: https://unsplash.com/photos/ZX6BPboJrYk
+    originName: Unsplash
+actions:
+  get-started:
+    url: "https://gethinode.com/docs"
+    title: "Get started"
+    icon: "fas book-open"
+---

content/en/_index.md

@@ -1,4 +0,0 @@
----
-author: Mark Dumay
-title: A Clean Theme for Hugo
----

content/en/about.md

@@ -1,42 +0,0 @@
----
-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-01-14
-showComments: false
----
-
-<p class="text-center"><img src="/img/logo_embedded.svg" class="img-fluid w-50" alt="Logo"></p>
-
-<section class="section section-sm mt-5 mb-5">
-    <div class="container-fluid">
-        <div class="row justify-content-center text-center">
-            <div class="col-lg-4">
-                <i class="fa-brands fa-bootstrap fa-2xl"></i>
-                <h2 class="h4">Bootstrap framework</h2>
-                <p>Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.</p>
-            </div>
-            <div class="col-lg-4">
-                <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
-                <h2 class="h4">Full text search</h2>
-                <p>Search your site with FlexSearch, a full-text search library with zero dependencies.</p>
-            </div>
-            <div class="col-lg-4">
-                <i class="fa-solid fa-code fa-2xl"></i>
-                <h2 class="h4">Development tools</h2>
-                <p>Use Node Package Manager to automate the build process and to keep track of dependencies.</p>
-            </div>
-        </div>
-    </div>
-</section>
-
-Additional features include:
-
-* Support for multiple languages
-* Reusable Bootstrap components through configurable shortcodes and partials
-* Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
-* Integrated sidebar navigation for content-heavy sections, such as documentation pages
-* Reponsive image handling for multiple screen sizes and resolutions
-* Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
-* Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})
-{.tickmark}

content/en/blog/bundling.md

@@ -1,13 +0,0 @@
----
-author: Mark Dumay
-title: Javascript bundling
-date: 2023-01-23
-description: 
-status: draft
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-<!-- https://blog.wesleyac.com/posts/why-not-javascript-cdn -->

content/en/blog/code-highlighting.md

@@ -1,58 +0,0 @@
----
-author: "Mark Dumay"
-title: "Code Highlighting"
-date: 2022-04-16
-description: "Examples on how to enable code highlighting."
-tags: ["code"]
-thumbnail: img/notepad.jpg
-photoCredits: <a href="https://unsplash.com/@frederickjmedina">Frederick Medina</a>
-photoSource: <a href="https://unsplash.com/photos/PdfRE-xB--s">Unsplash</a>
----
-
-## Code Fencing
-
-Use code fencing to highlight the syntax of a specific language.
-
-```json
-{
-  "version": "0.2.0",
-  "themes": [],
-  "projects": [],
-  "configuration": {}
-}
-```
-
-```html
-<div class="highlight">
-    <pre>
-        <code>some code...</code>
-    </pre>
-</div>
-```
-
-## Highlight Shortcode
-
-Use the `highlight` shortcode to customize the layout of a specific code block.
-
-{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
-// GetTitleFunc returns a func that can be used to transform a string to
-// title case.
-//
-// The supported styles are
-//
-// - "Go" (strings.Title)
-// - "AP" (see https://www.apstylebook.com/)
-// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
-//
-// If an unknown or empty style is provided, AP style is what you get.
-func GetTitleFunc(style string) func(s string) string {
-  switch strings.ToLower(style) {
-  case "go":
-    return strings.Title
-  case "chicago":
-    return transform.NewTitleConverter(transform.ChicagoStyle)
-  default:
-    return transform.NewTitleConverter(transform.APStyle)
-  }
-}
-{{< / highlight >}}

content/en/blog/emoji-support.md

@@ -1,24 +0,0 @@
----
-author: "Hugo Authors"
-title: "Emoji Support"
-date: 2021-07-15
-description: "Guide to emoji usage in Hugo."
-tags: ["emoji"]
-# thumbnail: img/dunes.jpg
-thumbnail: https://picsum.photos/id/184/4288/2848.jpg
-photoCredits: <a href="https://unsplash.com/@timdegroot">Tim de Groot</a>
-photoSource: <a href="https://unsplash.com/photos/yNGQ830uFB4">Unsplash</a>
----
-
-Emoji can be enabled in a Hugo project in a number of ways.
-
-<!--more-->
-
-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
-
-To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
-
-<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
-<br>
-
-The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.

content/en/blog/markdown-syntax.md

@@ -1,165 +0,0 @@
----
-author: Hugo Authors
-title: Markdown Syntax Guide
-description: Use Markdown syntax and basic HTML elements to style your Hugo content files.
-tags: ["markdown", "css", "html"]
-date: 2022-01-14
-thumbnail: img/phone.jpg # https://picsum.photos/id/160/3200/2119
-photoCredits: <a href="https://unsplash.com/@thomweerd">Thom</a> 
-photoSource: <a href="https://unsplash.com/photos/Zdcq3iKly6g">Unsplash</a>
----
-
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-
-<!--more-->
-
-## Headings
-
-The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
-
-<!-- markdownlint-disable-next-line -->
-# H1
-
-## H2
-
-### H3
-
-#### H4
-
-##### H5
-
-###### H6
-
-## Paragraph
-
-Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
-
-Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
-
-## Blockquotes
-
-The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
-
-### Blockquote without attribution
-
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use _Markdown syntax_ within a blockquote.
-{.blockquote}
-
-### Blockquote with attribution
-
-> Don't communicate by sharing memory, share memory by communicating.<br>
-> — <cite>Rob Pike[^1]</cite>
-{.blockquote}
-
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
-
-<figure>
-  <blockquote class="blockquote">
-    <p>A well-known quote, contained in a blockquote element.</p>
-  </blockquote>
-  <figcaption class="blockquote-footer">
-    Someone famous in <cite title="Source Title">Source Title</cite>
-  </figcaption>
-</figure>
-
-## Tables
-
-Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
-
-| Name  | Age |
-| ----- | --- |
-| Bob   | 27  |
-| Alice | 23  |
-{.table}
-
-### Inline Markdown within tables
-
-| Italics   | Bold     | Code   |
-| --------- | -------- | ------ |
-| _italics_ | **bold** | `code` |
-{.table}
-
-## Code Blocks
-
-### Code block with backticks
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Example HTML5 Document</title>
-  </head>
-  <body>
-    <p>Test</p>
-  </body>
-</html>
-```
-
-<!-- markdownlint-disable MD046 -->
-### Code block indented with four spaces
-
-    <!doctype html>
-    <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <title>Example HTML5 Document</title>
-    </head>
-    <body>
-      <p>Test</p>
-    </body>
-    </html>
-<!-- markdownlint-enable MD046 -->
-
-### Code block with Hugo's internal highlight shortcode
-
-{{< highlight html >}}
-
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-{{< /highlight >}}
-
-## List Types
-
-### Ordered List
-
-1. First item
-2. Second item
-3. Third item
-
-### Unordered List
-
-- List item
-- Another item
-- And another item
-
-### Nested list
-
-- Fruit
-  - Apple
-  - Orange
-  - Banana
-- Dairy
-  - Milk
-  - Cheese
-
-## Other Elements — abbr, sub, sup, kbd, mark
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.