Merge pull request #1453 from gethinode/develop

Refactor code

.eslintignore

@@ -1,6 +0,0 @@
-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,31 +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 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]
- - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
  - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
 
-**Additional context**
+## 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

@@ -14,7 +14,7 @@ changelog:
       labels:
         - Semver-Minor
         - enhancement
-    - title: 🐛 Bug fixes
+    - title: 🐛 Bug Fixes
       labels:
         - fix
         - bugfix

.github/workflows/auto-merge.yml

@@ -13,30 +13,27 @@ jobs:
     steps:
       - name: Dependabot metadata
         id: metadata
-        uses: dependabot/fetch-metadata@v1
+        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: Approve major updates of development dependencies
-        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:development'}}
-        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a major update of a dependency used only in development**"
-        env:
-          PR_URL: ${{github.event.pull_request.html_url}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-      - name: Comment on major updates of non-development dependencies
-        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:production'}}
+          
+      - 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 used in production**"
+          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/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: [16.x, 18.x, 20.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: [20.x, 22.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: [16.x, 18.x, 20.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 }}

.github/workflows/update.yml

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

.gitignore

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

.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,8 +1,8 @@
 assets/scss/common/_variables.scss
 assets/scss/components/_syntax-dark.scss
 assets/scss/components/_syntax-light.scss
-assets/scss/hotfix
 assets/scss/vendor
 assets/scss/theme/fonts.scss
+assets/scss/app-dart.scss
 assets/scss/app.scss
 node_modules

.stylelintrc.json

@@ -11,6 +11,7 @@
     "selector-id-pattern": null,
     "selector-class-pattern": null,
     "scss/no-global-function-names": null,
+    "color-function-alias-notation": null,
     "number-max-precision": null,
     "hue-degree-notation": null,
     "value-no-vendor-prefix": null,

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Mark Dumay
+Copyright (c) 2022-2025 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,32 +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://gethinode.com" alt="Hinode theme">
-        <img src="https://img.shields.io/badge/theme-hinode-blue">
+    <a href="https://gethinode.com">
+        <img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
     </a>
-    <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
-        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
+    <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://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
+    <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://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
+    <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/gethinode/hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/gethinode/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/gethinode/hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
+    <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" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg">
+    <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" alt="License">
-        <img src="https://img.shields.io/github/license/gethinode/hinode">
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
     </a>
 </p>
 
@@ -47,6 +48,7 @@
   <a href="#donate">Donate</a> •
   <a href="#license">License</a>
 </p>
+<!-- markdownlint-enable MD033 -->
 
 ## About
 
@@ -56,54 +58,51 @@
 - [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 supports [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
-
-Additional features include:
-
-- Flexible configuration of Hugo modules
-- Switching between light mode and dark mode
-- Support for multiple languages
-- Reusable Bootstrap components through configurable shortcodes and partials
-- Embedded comments through light-weight integration with GitHub via [utteranc.es][utterances]
-- Integrated sidebar navigation for content-heavy sections, such as documentation pages
-- Reponsive image handling for multiple screen sizes and resolutions
-- Optimized search results, scoring 100 points for SEO on [PageSpeed Insights][pagespeed]
-- Secure by default, scoring A+ on [Mozilla Observatory test][observatory]
+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.
 
 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 [template][repository_template], and a [main repository][repository]. The template [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the template:
+1. **Create a new site**
 
     ```bash
-    git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site
+    hugo new site my-hinode-site && cd my-hinode-site
     ```
 
-    Use the main theme if you intend to customize the base code:
+2. **Initialize the module system**
 
     ```bash
-    git clone https://github.com/gethinode/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
     ```
 
-1. Install dependencies
+3. **Start a development server**
 
     ```bash
-    npm install
-    ```
-
-1. Start development server
-
-    ```bash
-    npm run start
+    hugo server
     ```
 
 ## Configuration
@@ -123,11 +122,13 @@ Hinode is inspired by the following themes:
 
 ## Donate
 
-<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-disable MD033 -->
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer nofollow"><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 `hinode` and `template` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license.
+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
@@ -137,16 +138,18 @@ The `hinode` and `template` codebase is released under the [MIT license][license
 [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/demo.gethinode.com
 [pagespeed]: https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F
-[utterances]: https://utteranc.es
 
 <!-- MARKDOWN MAINTAINED LINKS -->
 [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

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/js/alert.js

@@ -1,14 +1,15 @@
+/* eslint-disable no-undef */
 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
+  const hideAlert = getSessionStorage(`page-alert-${version}`, null, 'functional') !== null
   if (hideAlert) {
     alert.classList.add('d-none')
   }
 
   closeBtn.addEventListener('click', () => {
-    sessionStorage.setItem(`page-alert-${version}`, 'seen')
+    setSessionStorage(`page-alert-${version}`, 'seen', 'functional')
     alert.classList.add('d-none')
   })
 }

assets/js/analytics.js

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

assets/js/clipboard.js

@@ -15,6 +15,7 @@ const addCopyButtons = (clipboard) => {
     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', () => {

assets/js/critical/_cookie.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-undef, no-unused-vars */
+function hasConsent (category) {
+  // TODO: placeholder function
+  return true
+}
+
+function getLocalStorage (key, def, category) {
+  if (hasConsent(category)) {
+    return localStorage.getItem(key)
+  } else {
+    return def
+  }
+}
+
+function setLocalStorage (key, val, category) {
+  if (hasConsent(category)) {
+    localStorage.setItem(key, val)
+  }
+}
+
+function getSessionStorage (key, def, category) {
+  if (hasConsent(category)) {
+    return sessionStorage.getItem(key)
+  } else {
+    return def
+  }
+}
+
+function setSessionStorage (key, val, category) {
+  if (hasConsent(category)) {
+    sessionStorage.setItem(key, val)
+  }
+}

assets/js/critical/color.js

@@ -9,45 +9,49 @@
 (() => {
   'use strict'
 
-  const storedTheme = localStorage.getItem('theme')
+  const supportedThemes = ['auto', 'dark', 'light'];
 
-  const getPreferredTheme = () => {
-    if (storedTheme) {
-      return storedTheme
-    }
+  // retrieves the currently stored theme from local storage
+  const storedTheme = getLocalStorage('theme', 'auto', 'functional')
 
+  // retrieves the theme preferred by the client, defaults to light
+  function getPreferredTheme() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
-  const setTheme = function (theme) {
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+  // retrieves the current theme, either from local storage or client's preferences
+  function getTheme() {
+    if (storedTheme) {
+      return storedTheme
     } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      const preference = getPreferredTheme()
+      setLocalStorage('theme', preference, 'functional')
+      return preference
     }
   }
 
-  setTheme(getPreferredTheme())
-
-  const showActiveTheme = theme => {
-    const activeSelectors = document.querySelectorAll('.theme-icon-active')
-    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
-    if (activeButtons.length > 0) {
-      const activeIcon = activeButtons[0].querySelector('span')
-
-      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-        element.classList.remove('active')
-      })
-
-      for (let i = 0; i < activeSelectors.length; ++i) {
-        activeSelectors[i].className = activeIcon.className
-        activeSelectors[i].className = activeSelectors[i].className.replace('theme-icon', 'theme-icon-active')
-      }
-
-      for (let i = 0; i < activeButtons.length; ++i) {
-        activeButtons[i].classList.add('active')
-      }
+  // applies and stores requested theme
+  function setTheme(theme) {
+    if (!supportedThemes.includes(theme)) {
+      theme = 'auto'
     }
+    setLocalStorage('theme', theme, 'functional')
+
+    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', () => {
@@ -57,18 +61,16 @@
   })
 
   window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
-
-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.addEventListener('change', function () {
+        document.documentElement.setAttribute('data-bs-theme-animate', 'true')
+        toggleTheme()
       })
+    })
   })
+
+  // initialize theme directly when script is invoked
+  setTheme(getTheme())
 })()
 
 {{- end -}}

assets/js/critical/languageSelector.js

@@ -0,0 +1,86 @@
+/* eslint-disable */
+{{- if site.Params.main.enableLanguageSelectionStorage -}}
+{{- $folder := (urls.Parse site.BaseURL).Path | default "/" -}}
+
+(() => {
+  'use strict'
+
+  const folder = '{{ $folder }}'
+
+  // Function to get the selected language from local storage
+  function getLanguage () {
+    return getLocalStorage('selectedLanguage', document.documentElement.lang, 'functional')
+  }
+
+  // Function to set the selected language in local storage
+  function setLanguage (language) {
+    setLocalStorage('selectedLanguage', language, 'functional')
+  }
+  
+  // Function to apply the selected language to the website
+  function applyLanguage (language, href) {
+    if (document.documentElement.lang !== language) {
+      if (href) {
+        if (window.location.pathname !== href) {
+          window.location.href = href
+        }
+      } else {
+        let target = folder + language + '/'
+        if (window.location.href !== target) {
+          window.location.href = target
+        }
+      }
+    }
+  }
+
+  // Event listener for language selection
+  document.addEventListener('DOMContentLoaded', () => {
+    // override stored language when query string contains force is true
+    let params = new URLSearchParams(document.location.search)
+    let force = params.get('force')
+    if (force !== null && force.toLowerCase() == 'true') {
+      setLanguage(document.documentElement.lang)
+      return
+    }
+
+    // continue with regular code
+    const storedLanguage = getLanguage()
+    const languageItems = document.querySelectorAll('#language-selector[data-translated=true] .dropdown-item')
+
+    const link = document.querySelector("link[rel='canonical']")
+    let alias = ''
+    if (link !== null) {
+      alias = link.getAttribute('href')
+    }
+    
+    if ((alias !== '') && (window.location.href !== alias)) {
+      window.location.href = alias
+    } else if (languageItems.length > 0) {
+      // Redirect if the stored language differs from the active language
+      if ((storedLanguage) && (document.documentElement.lang !== storedLanguage)) {
+        languageItems.forEach(item => {
+          if (item.getAttribute('hreflang') === storedLanguage) {
+            applyLanguage(storedLanguage, item.getAttribute('href'))
+          }
+        })
+      }
+
+      // Update the stored language when the user selects a new one
+      languageItems.forEach(item => {
+        item.addEventListener('click', () => {
+          const selectedLanguage = item.getAttribute('hreflang')
+
+          if (selectedLanguage) {
+            setLanguage(selectedLanguage)
+          }
+        })
+      })
+    }
+    else {
+      // overrule the current stored language when no translation is available
+      setLanguage(document.documentElement.lang)
+    }
+  })
+})()
+{{- end -}} 
+/* eslint-enable */

assets/js/navbar.js

@@ -1,26 +1,75 @@
+const fixed = {{ site.Params.navigation.fixed }}
 const navbar = document.querySelector('.navbar')
-const toggler = document.getElementById('main-nav-toggler')
+const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+const colorsBG = ['body', 'secondary', 'tertiary']
+
+function updateNavbar () {
+  let storedTheme
+  if (typeof getLocalStorage === "function") {
+    storedTheme = getLocalStorage('theme', null, 'functional')
+  }
+
+  if (window.scrollY > 75) {
+    navbar.classList.add('nav-active')
+    if (storedTheme) {
+      navbar.setAttribute('data-bs-theme', storedTheme)
+    }
+  } else {
+    navbar.classList.remove('nav-active')
+    const defaultTheme = navbar.getAttribute('data-bs-overlay')
+
+    const targetTheme = defaultTheme ? defaultTheme : storedTheme
+    if (targetTheme) {
+      navbar.setAttribute('data-bs-theme', defaultTheme)
+    }
+  }
+}
+
+if ((navbar !== null) && (window.performance.getEntriesByType)) {
+  if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
+    fixed && 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) => {
+    fixed && 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)
 
-if (navbar !== null && toggler !== null) {
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
-    if (window.scrollY > 75) {
-      navbar.classList.add('nav-active')
-    } else {
-      navbar.classList.remove('nav-active')
-    }
+    fixed && updateNavbar()
   }
 
   // set the navbar background color to opaque when expanded
-  toggler.onclick = () => {
-    navbar.classList.toggle('navbar-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 = () => {
-      toggler.click()
+      for (let j = 0; j < togglers.length; ++j) {
+        const toggler = togglers[j]
+        if (toggler.getAttribute('aria-expanded') === 'true') {
+          toggler.click()
+        }
+      }
     }
   }
 }

assets/js/sharing.js

@@ -14,23 +14,22 @@ function webShareAPI (title, description, link) {
     .catch((error) => console.log('Error sharing', error))
 }
 
-const shareBtn = document.getElementById('btn-webshare')
-
-if (shareBtn !== null) {
+const shareButtons = document.querySelectorAll('[data-sharing-url]')
+shareButtons.forEach(btn => {
   if (navigator.share) {
-    const title = shareBtn.getAttribute('data-sharing-title')
-    const description = shareBtn.getAttribute('data-sharing-description')
-    const url = shareBtn.getAttribute('data-sharing-url')
+    const title = btn.getAttribute('data-sharing-title')
+    const description = btn.getAttribute('data-sharing-description')
+    const url = btn.getAttribute('data-sharing-url')
 
     // show button if it supports webShareAPI
-    shareBtn.style.display = 'block'
-    shareBtn.addEventListener('click', () =>
+    btn.style.display = 'block'
+    btn.addEventListener('click', () =>
       webShareAPI(title, description, url)
     )
   } else {
     // hide button if host does not support Web Share API
-    shareBtn.style.display = 'none'
+    btn.style.display = 'none'
   }
-}
+})
 
 {{- end -}}

assets/js/video.js

@@ -0,0 +1,3 @@
+document.querySelectorAll('[data-video-padding]').forEach(element => {
+  element.style.paddingBottom = element.getAttribute('data-video-padding')
+})

assets/scss/app-dart.scss

@@ -0,0 +1,61 @@
+@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/masonry.scss";
+@import "common/scrollbar.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

@@ -3,21 +3,28 @@
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
 // Import Bootstrap configuration (mounted by core Bootstrap module)
 @import "bootstrap.scss";
 
+// 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/buttons.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";
@@ -25,10 +32,13 @@
 @import "components/popover.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/masonry.scss";
+@import "common/scrollbar.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
@@ -36,17 +46,13 @@
 @import "helpers/colored-links.scss";
 @import "helpers/display.scss";
 
-// TODO: include fonts with following statement in Dart Sass
-// @if $import-fonts {
-//     @include meta.load-css(theme/fonts);
-// }
-
 {{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
     @import "theme/fonts.scss";
 {{ end }}
 
-// Import theme placeholder
+// Import theme placeholders
+@import "theme/base.scss";
 @import "theme/theme.scss";
 
-// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+// Import Bootstrap utilities API (mounted by core Bootstrap module)
 @import "modules/bootstrap/utilities/api";

assets/scss/common/_icons.scss

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

@@ -0,0 +1,38 @@
+.masonry {
+    --masonry-padding: 4px;
+}
+
+.m-row {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 var(--masonry-padding);
+}
+
+.m-col {
+    flex: 100%;
+    max-width: 100%;
+    padding: 0 var(--masonry-padding);
+}
+
+.m-col div {
+    margin-top: calc(2 * var(--masonry-padding));
+    border-radius: 5px;
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "m-col": (
+            property: max-width,
+            responsive: true,
+            class: m-col,
+            values: (
+                1: 100%,
+                2: 50%,
+                3: 33.3%,
+                4: 25%,
+                5: 20%,
+            )
+        )
+    )
+);

assets/scss/common/_scrollbar.scss

@@ -0,0 +1,34 @@
+@mixin scrollbar(
+  $foreground-color: var(--bs-primary),
+  $background-color: var(--bs-tertiary-bg),
+  $size: 10px
+) {
+	// For Safari and Chrome (to force appearance in Chrome)
+	&::-webkit-scrollbar {
+		width: $size;
+		height: $size;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: calc($size / 2);
+		background: $foreground-color;
+	}
+
+	&::-webkit-scrollbar-track {
+		border-radius: calc($size / 2);
+		background: $background-color;
+	}
+
+	// Standard version (Firefox, only appears on scroll)
+	@supports (-moz-appearance:none) {
+		scrollbar-color: $foreground-color $background-color;
+	}
+}
+
+.scrollbar-horizontal
+{
+    @include scrollbar;
+
+	overflow-x: scroll;
+	margin: auto;
+}

assets/scss/common/_styles.scss

@@ -1,3 +1,9 @@
+@if $enable-dark-mode {
+    [data-bs-theme-animate="true"] body { 
+        transition: background-color 0.5s, color 0.5s; 
+    }
+}
+
 //
 // Remove underline from all links
 //
@@ -15,6 +21,34 @@ 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: "✓ ";
 }
@@ -112,6 +146,24 @@ $utilities: map-merge(
     }    
 }
 
+.section-cover {
+    min-height: 100vh;
+}    
+
+@include media-breakpoint-up(xxl) {
+    .section-cover {
+        min-height: calc(min(100vh, 1000px));
+    }    
+}
+
+/* stylelint-disable media-feature-range-notation */
+@media (min-height: 1400px) { 
+    .section-cover {
+        min-height: calc(min(100vh, 1000px));
+    }
+}
+/* stylelint-enable media-feature-range-notation */
+
 $utilities: map-merge(
     $utilities,
     (

assets/scss/common/_variables-dark.scss

@@ -0,0 +1,103 @@
+@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));
+        --bs-body: var(--bs-body-bg);
+        --bs-body-tertiary: var(--bs-tertiary-bg);
+
+        .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,71 @@
+// 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;
+
+$theme-border-radius:           1rem;
+
+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;
+$white:                       #fff !default;
+$black:                       #000 !default;
+$body-bg:                     #fff !default;
+$gray-100:                    #f8f9fa !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);
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);

assets/scss/common/_variables.scss

@@ -2,14 +2,14 @@
 $enable-negative-margins:       true;
 $enable-important-utilities:    true !default;
 
-// Font awesome variables overrides for theme
-$fa-font-path:                  "../fonts";
-
 // 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:        $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,14 +17,50 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
+$theme-border-radius:           1rem;
+
 strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 // scss-docs-end font
 
+$white:                       #fff !default;
 $black:                       #000 !default;
+$body-bg:                     #fff !default;
+$gray-100:                    #f8f9fa !default;
 $btn-toggle-color:              $black !default;
 
-$carousel-dark-indicator-active-bg:  #ffffff !default;
-$carousel-dark-caption-color:        #ffffff !default;
+$card-color:                    var(--bs-body-color);
+
+$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
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);

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

@@ -1,3 +1,18 @@
-.alert-no-decoration {
-    --bs-alert-border-radius: none;
+.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/_blockquote.scss

@@ -1,6 +1,54 @@
 .blockquote {
-    // background: var(--bs-light);
     border-left: 0.3rem solid;
     border-color: $secondary;
     padding: 1rem 1.5rem;
 }
+
+.blockquote-alert {
+    --bs-blockquote-alert-color: $secondary;
+
+    border-left: 0.3rem solid;
+    border-color: var(--bs-blockquote-alert-color);
+    padding: .5rem 1.5rem;
+}
+
+.blockquote-alert > p:nth-of-type(2) {
+    margin-bottom: 0;
+}
+
+.blockquote-alert-heading {
+    font-weight: bold;
+    color: var(--bs-blockquote-alert-color);
+}
+
+.blockquote-alert-caution {
+    --bs-blockquote-alert-color: var(--#{$prefix}danger);
+}
+
+.blockquote-alert-important {
+    --bs-blockquote-alert-color: var(--#{$prefix}primary);
+}
+
+.blockquote-alert-note {
+    --bs-blockquote-alert-color: var(--#{$prefix}info);
+}
+
+.blockquote-alert-tip {
+    --bs-blockquote-alert-color: var(--#{$prefix}success);
+}
+
+.blockquote-alert-warning {
+    --bs-blockquote-alert-color: var(--#{$prefix}warning);
+}
+
+.blockquote-alert a.btn-link {
+    --bs-link-color: var(--bs-blockquote-alert-color);
+    --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color), black 20%);
+
+    color: var(--bs-link-color) !important;
+
+    &:hover,
+    &:focus {
+        color: var(--bs-link-hover-color) !important;
+    }
+}

assets/scss/components/_breadcrumb.scss

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

assets/scss/components/_button.scss

@@ -8,6 +8,8 @@
 }
 
 .btn-social {
+    background-color: transparent;
+    
     --bs-btn-bg: transparent;
     --bs-btn-border-width: none;
     --bs-btn-color: var(--bs-secondary);
@@ -23,5 +25,26 @@
 .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;
+    --bs-btn-padding-y: 0;
+
+    margin: 0 !important;
+}

assets/scss/components/_card.scss

@@ -1,11 +1,29 @@
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376
 
-.card-img-wrap {
+.card-img-bg {
+    background-color: var(--#{$prefix}secondary-bg);
+}
+
+.card {
+    --bs-card-bg: transparent;
+}
+
+.card .card-img-wrap {
     overflow: hidden;
     position: relative;
 }
 
+.card .card-img-wrap:has(.card-img-top) {
+  border-top-left-radius: var(--#{$prefix}card-inner-border-radius);
+  border-top-right-radius: var(--#{$prefix}card-inner-border-radius);
+}
+
+.card .card-img-wrap:has(.card-img-bottom) {
+  border-bottom-right-radius: var(--#{$prefix}card-inner-border-radius);
+  border-bottom-left-radius: var(--#{$prefix}card-inner-border-radius);
+}
+
 .card-zoom {
     cursor: pointer;
 }
@@ -15,6 +33,10 @@
     width: 100%;
 }
 
+.card-icon {
+    color: $secondary;
+}
+
 .card-zoom::after .card-img-wrap img {
     content: "";
     position: absolute;
@@ -48,6 +70,10 @@
     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 {
@@ -56,18 +82,85 @@
     }
 }
 
-.card-zoom card-body-link,
-.card-body-link {
+.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 clickable on top of the stretched-link.
-.card .tag-link {
+// 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);
+}
+
+// support horizontally scrollable card groups
+.card-container-wrapper {
+	position: relative;
+}
+
+div.card-container-wrapper::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	height: calc(100% - 2rem);
+	background: linear-gradient(
+		90deg, 
+		var(--bs-body-bg) 0%,
+		transparent 1.5rem,
+		transparent calc(100% - 1.5rem),
+		var(--bs-body-bg) 100%
+	);
+	pointer-events: none;
+}
+
+.card-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+	gap: 1.5rem;
+    margin-bottom: 2rem;
+	scroll-snap-type: x proximity;
+}
+
+.card-block-1 {
+    width: 80%;
+	scroll-snap-align: center;
+}
+
+.card-block-2 {
+    width: 40%;
+	scroll-snap-align: center;
+}
+
+.card-block-3 {
+    width: 27%;
+	scroll-snap-align: center;
+}
+
+.card-block-4 {
+    width: 20%;
+	scroll-snap-align: center;
+}
+
+.card-block-5 {
+    width: 16%;
+	scroll-snap-align: center;
+}

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,107 @@
+.nav-tabs .nav-tabs {
+    border: none;
+}
+
+.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,20 +1,137 @@
 // stylelint-disable annotation-no-unknown
 
+// 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}border-color);
+	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));
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="light"] .mode-switch .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);
+}
+
 // Source: https://jsfiddle.net/njhgr40m/
 
+@if $enable-dark-mode {
+    [data-bs-theme-animate="true"] .navbar {
+        transition: 0.5s ease-in-out;
+    }
+}
+
 .navbar {
-    transition: 0.5s ease-in-out;
+    --bs-navbar-expanded-color: var(--bs-body-bg);
+    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
+
     background-color: transparent;
+
+    @each $state, $val in $theme-colors {
+        --bs-navbar-color-#{$state}: #{$val};
+    }
 }
 
 .nav-active, .navbar-expanded {
-    background-color: var(--bs-body-bg);
+    background-color: var(--bs-navbar-expanded-color);
+    border-bottom: 1px solid var(--bs-secondary-bg);
+}
+
+.nav-link {
+    margin: 0 .15rem;
+}
+
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer;
+    width: 100% !important;
+}
+
+.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-title, .mode-switch {
+        --#{$prefix}border-color: white;
+
+        color: white !important;
+    }
+
+    .mode-switch .fa-moon {
+        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 if($enable-important-utilities, !important, null);
@@ -36,7 +153,6 @@
 .toggler-icon {
     width: 30px;
     height: 3px;
-    background-color: $primary;
     display: block;
     transition: all 0.2s;
 }
@@ -82,19 +198,124 @@
 
 /* Color of Toggler when collapsed */
 .navbar-toggler.collapsed .toggler-icon {
-    background-color: #777;
+    background-color: var(--bs-navbar-toggler-color);
 }
 
 .emphasis {
-    background-color: $black if($enable-important-utilities, !important, null);
+    background-color: var(--bs-navbar-toggler-color);
 }
 
-@if $enable-dark-mode {
-    @include color-mode(dark) {
-        .emphasis {
-            background-color: $white if($enable-important-utilities, !important, null);
-        }
+@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-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);
+            }            
+        }
+    }
+}
+
+.navbar-overlay {
+    position: absolute;
+    z-index: $zindex-fixed;
+}

assets/scss/components/_pagination.scss

@@ -1,5 +1,6 @@
 .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);

assets/scss/components/_sidebar.scss

@@ -1,28 +1,51 @@
 // scss-docs-start sidebar
 .sidebar {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
 }
 
 .sidebar-overflow {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
     max-height: 90vh;
     overflow-y: auto;
+    scrollbar-gutter: stable;
 }
 
 .sidebar-item {
     color: rgba(0, 0, 0, 0.65);
     margin-left: 0 !important;
-    padding-left: 0.85rem !important;
     display: inline-block;
+    padding: 0.1875rem 0.5rem !important;
+
+    &.active {
+        color: $primary;
+    }
 
-    &.active,
     &:hover,
     &:focus {
-        color: black;
+        color: $primary;
+        background-color: tint-color($primary, 90%);
     }
 }
 
-.btn-toggle {
+.sidebar-item-group {
+    &:hover,
+    &:focus {
+        color: $primary;
+        background-color: tint-color($primary, 90%);
+    }
+    
+    > div > a {
+        color: var(--bs-body-color) !important;
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
+.sidebar-item-group > div {
+    padding: 0.1875rem 0.5rem !important;
+}
+
+.btn-toggle-group {
     padding: 0.25rem 0.5rem;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.65);
@@ -30,8 +53,7 @@
 
     &:hover,
     &:focus {
-        color: black;
-        background-color: tint-color($primary, 90%);
+        background-color: transparent;
     }
 
     &::before {
@@ -43,50 +65,50 @@
     }
 }
 
-.btn-toggle[aria-expanded="true"] {
-    color: black;
-
+.btn-toggle-group[aria-expanded="true"] {
     &::before {
         transform: rotate(90deg);
     }
 }
 
-.btn-toggle-nav a {
-    padding: 0.1875rem 0.5rem;
-    margin-top: 0.125rem;
-    margin-left: 1.25rem;
-
-    &:hover,
-    &:focus {
-        background-color: tint-color($primary, 90%);
-    }
-
-    &.active {
-        font-weight: bold;
-    }
-}
-
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .sidebar-item {
-            color: var(--bs-tertiary-color);
-            margin-left: 0 !important;
-            padding-left: 0.85rem !important;
-        
-            &.active,
+            color: var(--bs-body-color);
+
+            &.active {
+                color: $primary-text-emphasis-dark !important;
+            }
+
             &:hover,
             &:focus {
-                color: var(--bs-secondary-color);
+                color: $primary-text-emphasis-dark !important;
+                background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
+    }
+        }
+
+        .sidebar-item-group {
+            color: var(--bs-body-color) !important;
+
+            &.active {
+                color: $primary-text-emphasis-dark !important;
+            }
+
+            &:hover,
+            &:focus {
+                color: white !important;
+                background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
             }
         }
 
-        .btn-toggle {
-            color: var(--bs-tertiary-color);
+        .btn-toggle-group {
+            color: var(--bs-body-color);
         
             &:hover,
             &:focus {
-                color: $secondary;
-                background-color: tint-color($primary, 90%);
+                background-color: transparent;
             }
         
             &::before {
@@ -94,26 +116,10 @@
             }
         }
 
-        .btn-toggle[aria-expanded="true"] {
+        .btn-toggle-group[aria-expanded="true"] {
             color: var(--bs-secondary-color);
         }
-
-        .btn-toggle-nav a {
-            padding: 0.1875rem 0.5rem;
-            margin-top: 0.125rem;
-            margin-left: 1.25rem;
-
-            &:hover,
-            &:focus {
-                color: $secondary;
-                background-color: tint-color($primary, 90%);
-            }
-
-            &.active {
-                font-weight: bold;
-            }
-        }
-    }
+                    }
 }
 
 // scss-docs-end sidebar

assets/scss/components/_syntax-dark.scss

@@ -6,9 +6,9 @@
 /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #b8b800 }
+/* 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: #6e7681 }
+/* 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 }
@@ -18,8 +18,8 @@
 /* KeywordReserved */ .chroma .kr { color: #ff7b72 }
 /* KeywordType */ .chroma .kt { color: #ff7b72 }
 /* Name */ .chroma .n {  }
-/* NameAttribute */ .chroma .na {  }
-/* NameBuiltin */ .chroma .nb {  }
+/* 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 }
@@ -64,23 +64,23 @@
 /* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
 /* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
 /* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
-/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
-/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+/* 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: #8b949e }
-/* GenericPrompt */ .chroma .gp { color: #8b949e }
+/* 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: #6e7681 }
+/* 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

@@ -19,7 +19,7 @@
 /* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
 /* Name */ .chroma .n {  }
 /* NameAttribute */ .chroma .na { color: #008080 }
-/* NameBuiltin */ .chroma .nb { color: #0086b3 }
+/* NameBuiltin */ .chroma .nb { color: #006b8f }
 /* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
 /* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
 /* NameConstant */ .chroma .no { color: #008080 }
@@ -54,20 +54,20 @@
 /* LiteralStringRegex */ .chroma .sr { color: #009926 }
 /* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
 /* LiteralStringSymbol */ .chroma .ss { color: #990073 }
-/* LiteralNumber */ .chroma .m { color: #009999 }
-/* LiteralNumberBin */ .chroma .mb { color: #009999 }
-/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
-/* LiteralNumberHex */ .chroma .mh { color: #009999 }
-/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
-/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* 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: #999988; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+/* 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 }

assets/scss/components/_syntax.scss

@@ -1,5 +1,5 @@
 // stylelint-disable annotation-no-unknown
-@import "components/syntax-light";
+@import "syntax-light";
 
 .bg,
 .chroma,
@@ -8,18 +8,22 @@
     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;
 }
 
-.preview-background {
-    background-color: var(--bs-dark-bg-subtle) if($enable-important-utilities, !important, null);
-}
-
 @if $enable-dark-mode {
     [data-bs-theme="dark"] {
-        @import "components/syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
+        @import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
 
         .bg,
         .chroma,
@@ -34,7 +38,10 @@
         }
 
         .bg,
-        .chroma {
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
             color: #c9d1d9 if($enable-important-utilities, !important, null);
         }
     }

assets/scss/components/_table.scss

@@ -0,0 +1,38 @@
+.datatable-container {
+    border-bottom: none if($enable-important-utilities, !important, null);
+}
+
+.datatable-bottom {
+    padding-top: 0 if($enable-important-utilities, !important, null);
+}
+
+.datatable-sorter {
+    padding-left: 0;
+    padding-right: 1rem;
+}
+
+.table-border-bottom-wrap {
+    border-bottom-style: none !important
+}
+
+@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);
+        }
+
+        .datatable-pagination-list-item {
+            &:hover,
+            &:focus,
+            &.datatable-active {
+                color: var(--bs-body-bg) !important;
+            }
+        } 
+    }
+}

assets/scss/components/_timeline.scss

@@ -12,13 +12,17 @@ $semi-circle-border: 0.2rem;
 
 @each $state in map-keys($theme-colors) {
     .timeline-#{$state} {
-      --timeline-highlight: var(--#{$prefix}#{$state});
+        --timeline-highlight: var(--#{$prefix}#{$state});
     }
 
     .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state}-subtle {
         --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
-      }
-  }
+    }
+}
 
 // scss-docs-end timeline
 
@@ -27,10 +31,16 @@ $semi-circle-border: 0.2rem;
 }
 
 .timeline-sm {
-    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    --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;

assets/scss/components/_toc.scss

@@ -6,7 +6,6 @@
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 5rem);
     overflow-y: auto;
     top: 5rem;
 }
@@ -48,6 +47,13 @@
     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);
@@ -56,6 +62,8 @@
     --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 {
@@ -65,3 +73,61 @@
         outline: none;
     }
 }
+
+a.toc-item {
+    display: block;
+}
+
+a.toc-level-1 {
+    margin-left: 0;
+}
+
+a.toc-level-2 {
+    margin-left: 1em;
+}
+
+a.toc-level-3 {
+    margin-left: 2em;
+}
+
+a.toc-level-4 {
+    margin-left: 3em;
+}
+
+a.toc-level-5 {
+    margin-left: 4em;
+}
+
+a.toc-level-6 {
+    margin-left: 5em;
+}
+
+
+@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 @@
+.video-embedded {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.video-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/_display.scss

@@ -5,7 +5,7 @@
 // stylelint-disable annotation-no-unknown
 
 // scss-docs-start display-color
-.d-none-light {
+.d-none-light, .d-none-inline-light {
     display: none if($enable-important-utilities, !important, null); 
 }
 
@@ -13,13 +13,21 @@
     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-dark {
+        .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);
         }
     }

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

component-library/bookshop.scss

@@ -0,0 +1,9 @@
+@import "modules/bookshop/shared/styles/global";
+@import "modules/bookshop/components/about/about";
+@import "modules/bookshop/components/articles/articles";
+@import "modules/bookshop/components/faq/faq";
+@import "modules/bookshop/components/hero/hero";
+@import "modules/bookshop/components/releases/releases";
+@import "modules/bookshop/components/separator/separator";
+@import "modules/bookshop/components/video-message/video-message";
+@import "modules/bookshop/theme";

component-library/components/about/about.bookshop.yml

@@ -0,0 +1,39 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: About
+  description: About section
+  icon: fingerprint
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+  order:
+  width:
+  link-type:
+  links:
+    -
+      title:
+      url:
+      icon:
+      force:

component-library/components/about/about.hugo.html

@@ -0,0 +1,31 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "about" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/about/about.hugo.html" 
+        "msg" "   Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+    {{ partial "assets/hero.html"  (dict 
+        "heading"      $args.heading
+        "background"   $args.background
+        "illustration" (merge (dict "ratio" "1x1") $args.illustration)
+        "order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  "horizontal"
+        "width"        (or .width 8)
+        )
+    }}
+{{- end -}}

component-library/components/about/about.scss

@@ -0,0 +1,3 @@
+.about {
+    scroll-margin-block: var(--navbar-offset);
+}

component-library/components/articles/articles.bookshop.yml

@@ -0,0 +1,45 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Articles
+  description: Articles section
+  icon: post
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  hide-empty:
+  input:
+    section:
+    nested:
+    keywords:
+    categories:
+    tags:
+    reverse:
+    sort:
+  more:
+    title:
+    link:
+  cols:
+  padding:
+  max:
+  pagination:
+  paginate:
+  background:
+    backdrop:
+    color:
+    subtle:
+  scroll:
+  bento:
+  cover:
+  header-style:
+  footer-style:
+  orientation:
+  class:

component-library/components/articles/articles.hugo.html

@@ -0,0 +1,108 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "articles" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/articles/articles.hugo.html" 
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{ $pages := slice }}
+{{ $result := partial "assets/live-pages.html" (dict 
+	"page"       $args.page
+	"section"    $args.input.section
+	"nested"     $args.input.nested
+	"keywords"   $args.input.keywords
+	"categories" $args.input.categories
+	"tags"       $args.input.tags
+	"sort"       $args.input.sort
+	"reverse"    $args.input.reverse
+)}}
+{{ $pages = $result.pages }}
+
+<!-- Add style definitions -->
+{{ $styles := slice 
+	(dict "ratio" "1x1"  "orientation" "overlay" "portrait" false "width" "6")
+	(dict "ratio" "4x3"  "orientation" "stacked" "portrait" true  "width" "3")
+	(dict "ratio" "1x1"  "orientation" "stacked" "portrait" false "width" "3")
+	(dict "ratio" "16x9" "orientation" "stacked" "portrait" true  "width" "3")
+	(dict "ratio" "1x1"  "orientation" "stacked" "portrait" false "width" "3")
+}}
+
+<!-- Define more button -->
+{{ $moreButton := site.Params.modules.bookshop.articles.moreButton | default false }}
+{{ $moreTitle := T "more" (pluralize $args.input.section) }}
+{{ $moreLink := $args.input.section }}
+{{ with $args.more }}
+	{{ if .title }}{{ $moreTitle = .title }}{{ end }}
+	{{ if .link }}{{ $moreLink = .link }}{{ end }}
+{{ end }}
+
+{{ $paginate := $args.paginate }}
+{{ if and $paginate page.IsPage }}
+    {{ partial "utilities/LogWarn.html" (dict 
+        "partial" "component-library/components/articles/articles.hugo.html"
+        "msg"     "Pagination not supported"
+        "file"    page.File
+    )}}
+	{{ $paginate = false }}
+{{ end }}
+
+<!-- Main code -->
+{{ if not $error }}
+	<div class="container-xxl p-4 px-xxl-0">
+		{{- partial "assets/section-title.html" (dict "heading" $args.heading "class" "py-5") -}}
+
+		{{ $partial := "assets/card-group.html" }}
+		{{ $params := dict }}
+		{{- $params = merge $params (dict
+			"page"         page
+			"list"         $pages
+			"max"          $args.max
+			"cols"         $args.cols
+			"icon-rounded" $args.iconRounded
+			"href"         (cond $moreButton $moreLink "")
+			"href-title"   (cond $moreButton $moreTitle "")
+			"href-force"   (gt $result.total (len $result.pages))
+		)}}
+
+		{{ if $args.scroll }}
+			{{ $partial := "assets/stack.html" }}
+			{{ $params = merge $params (dict 
+				"header-style" "none"
+				"body-style"   "title"
+				"footer-style" "none"
+				"gutter"       1
+				"padding"      3
+				"ratio"        "1x1"
+				"orientation"  "horizontal-sm"
+				"styles"       (cond $args.bento $styles "")
+			) -}}
+		{{ else }}
+			{{ $params = merge $params (dict 
+				"header-style" $args.headerStyle
+				"footer-style" $args.footerStyle
+				"padding"      $args.padding
+				"class"        (or $args.class "border-0")
+				"icon-style"   "fa-2x"
+				"align"        "start"
+				"orientation"  $args.orientation
+				"hook"         "assets/live-card.html"
+				"pagination"   $args.pagination
+				"paginate"     $paginate
+			) -}}
+		{{ end }}
+		{{ partial $partial $params }}
+	</div>
+{{ end }}

component-library/components/articles/articles.scss

@@ -0,0 +1,8 @@
+.card-overlay-gradient {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(0, 0, 0, 1));
+}

component-library/components/faq/faq.bookshop.yml

@@ -0,0 +1,26 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: FAQ
+  description: Accordion of frequently asked questions
+  icon: expand_more
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    width:
+    size:
+  contrast:
+  background:
+    backdrop:
+    color:
+    subtle:
+  items:
+    - title:
+      description:

component-library/components/faq/faq.hugo.html

@@ -0,0 +1,58 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "faq" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/faq/faq.hugo.html" 
+        "msg" "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file" page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+	<div class="container-xxl p-4 px-xxl-0">
+		{{ $color := "" }}
+		{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
+		{{- partial "assets/section-title.html" (dict 
+			"heading" $args.heading
+			"color" $color
+			"class" "py-5"
+		) -}}
+
+		{{ $class := "" }}
+		{{ $id := printf "faq-%s" (md5 (delimit (slice . now) "-")) }}
+
+		<div id="{{ $id }}" class="accordion accordion-faq {{ if $args.contrast }}accordion-faq-contrast text-white {{ end }}accordion-flush mb-3{{ with $class }} {{ . }}{{ end }} col-12 col-md-6 mx-auto">
+			{{ range $index, $item := $args.items }}
+				<div class="accordion-item">
+					{{- with $item.title -}}
+						<div class="accordion-header m-0" id="{{ $id }}-heading-{{ $id }}">
+							<button class="accordion-button collapsed" 
+								type="button" 
+								data-bs-toggle="collapse"
+								data-bs-target="#{{ $id }}-item-{{ $index }}"
+								aria-expanded="false"
+								aria-controls="{{ $id }}-item-{{ $index }}"
+							>
+							{{ if $args.color }}<div class="text-{{ $args.color }}">{{ . }}</div>{{ else }}{{ . }}{{ end }}
+							</button>
+						</div>
+					{{- end -}}
+					<div id="{{ $id }}-item-{{ $index }}" 
+						class="accordion-collapse collapse"
+						aria-labelledby="{{ $id }}-heading-{{ $index }}"
+						data-bs-parent="#{{ $id }}"
+					>
+						<div class="accordion-body">{{ $item.description | page.RenderString | safeHTML }}</div>
+					</div>
+				</div>
+			{{ end }}
+		</div>
+	</div>
+{{ end }}

component-library/components/faq/faq.scss

@@ -0,0 +1,44 @@
+$accordion-button-icon-white:                         url("/icons/accordion-button-icon-white.svg") !default;
+$accordion-button-active-icon-white:                  url("/icons/accordion-button-active-icon-white.svg") !default;
+
+
+.accordion-faq {
+    --#{$prefix}accordion-btn-padding-x: 0;
+    --#{$prefix}accordion-btn-focus-border-color: none;
+    --#{$prefix}accordion-btn-focus-box-shadow: none;
+    --#{$prefix}accordion-body-padding-x: 0;
+    --#{$prefix}accordion-active-color: var(--#{$prefix}primary);
+    --#{$prefix}accordion-active-bg: none;
+    --#{$prefix}accordion-border-color: var(--#{$prefix}body-color);
+    --#{$prefix}accordion-bg: none;
+}
+
+.accordion-faq .accordion-button {
+    font-size: $h5-font-size;
+}
+
+// note: explicitly suppresses border in Safari
+.accordion-faq [aria-expanded="true"] {
+    --#{$prefix}accordion-border-color: none;
+}
+
+.accordion-faq-contrast {
+    --#{$prefix}accordion-active-color: var(--#{$prefix}white);
+    --#{$prefix}accordion-border-color: white;
+}
+
+.accordion-faq-contrast .accordion-button, .accordion-faq-contrast .accordion-body {
+    --#{$prefix}accordion-btn-icon: #{$accordion-button-icon-white};
+    --#{$prefix}accordion-btn-active-icon: #{$accordion-button-active-icon-white};
+    --#{$prefix}accordion-border-color: white;
+
+    color: white;
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .accordion-faq .accordion-button {
+            background-color: transparent;
+        }
+    }
+}

component-library/components/hero/hero.bookshop.yml

@@ -0,0 +1,40 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Hero
+  description: Main page Hero block
+  icon: title
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  breadcrumb:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+    width:
+  link-type:
+  links:
+  align:
+  order:
+  overlay-mode:
+  cover:
+  orientation:
+  width:

component-library/components/hero/hero.hugo.html

@@ -0,0 +1,34 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "hero" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/hero/hero.hugo.html" 
+        "msg" "   Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+	{{ partial "assets/hero.html"  (dict 
+		"breadcrumb"   $args.breadcrumb
+		"heading"      $args.heading
+		"background"   $args.background
+		"illustration" $args.illustration
+		"align"        $args.align
+		"order"        $args.order
+		"overlay-mode" $args.overlayMode
+		"cover"        $args.cover
+		"link-type"    $args.linkType
+		"links"        $args.links
+		"orientation"  $args.orientation
+		"width"        $args.width
+		)
+	}}
+{{ end }}

component-library/components/hero/hero.scss

@@ -0,0 +1,18 @@
+.background-img-fluid {
+    position: absolute;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+}
+
+.background-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+    background-color: rgba($dark, 0.8);
+}
+
+.hero-content {
+    z-index: 1;
+}

component-library/components/releases/releases.bookshop.yml

@@ -0,0 +1,24 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Releases
+  description: Release timeline
+  icon: fingerprint
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  data:

component-library/components/releases/releases.hugo.html

@@ -0,0 +1,27 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "releases" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/releases/releases.hugo.html" 
+        "msg" "   Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+    {{ partial "assets/timeline.html"  (dict 
+        "page"       page
+        "background" $args.background
+        "heading"    $args.heading
+        "data"       $args.data
+        )
+    }}
+{{- end -}}

component-library/components/separator/separator.bookshop.yml

@@ -0,0 +1,8 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Separator
+  description: Inserts a horizontal page section separator
+  icon: horizontal_rule
+  tags: []

component-library/components/separator/separator.hugo.html

@@ -0,0 +1,19 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $args := partial "utilities/InitArgs.html" (dict "structure" "separator" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/separator/separator.hugo.html" 
+        "msg" "   Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+    <div class="container-xxl p-0"{{ with $args.theme }} data-bs-theme="{{ . }}"{{ end }}><hr></div>
+{{ end }}

component-library/components/video-message/video-message.bookshop.yml

@@ -0,0 +1,51 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Video
+  description: Video section
+  icon: build
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  background:
+    backdrop:
+    color:
+    subtle:
+  link-type:
+  orientation:
+  icon-rounded:
+  video:
+    provider:
+    account:
+    media-id:
+    autoplay:
+    query-args:
+  cols:
+  messages:
+    - title:
+      icon:
+      content:
+      link:
+      label:
+  border:
+  width:
+
+_structures:
+  messages:
+    values:
+      value:
+        title:
+        icon:
+        content:
+        link:
+        label:

component-library/components/video-message/video-message.hugo.html

@@ -0,0 +1,135 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "video-message" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/video-message/video-message.hugo.html" 
+        "msg" "   Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+
+{{- define "_partials/inline/video.html" -}}
+	{{ $provider := .provider }}
+	{{ $account := .account }}
+	{{ $mediaID := (index . "media-id") }}
+	{{ $autoplay := .autoplay }}
+	{{ $queryArgs := .queryArgs }}
+	{{ $border := .border }}
+
+	{{ if site.Params.env_bookshop_live }}
+		{{/* Define dummy content as we cannot retrieve video data in live mode */}}
+		{{- partial "assets/live-image.html" (dict "src" "/img/placeholder-video.svg" "ratio" "21x9" "wrapper" "text-center mb-4") -}}
+	{{ else }}
+        <div class="video-container{{ if $border }} video-container-border{{ end}}">
+			{{ partial "assets/video.html" (dict
+				"page"       page
+				"provider"   $provider
+				"account"    $account
+				"media-id"   $mediaID
+				"autoplay"   $autoplay
+				"query-args" $queryArgs
+			) -}}
+			{{ if $border }}
+				<div class="video-overlay video-overlay-start"></div>
+				<div class="video-overlay video-overlay-top"></div>
+				<div class="video-overlay video-overlay-end"></div>
+				<div class="video-overlay video-overlay-bottom"></div>
+			{{ end }}
+        </div>
+	{{ end }}
+{{ end }}
+
+{{- define "_partials/inline/messages.html" -}}
+	{{ $list := .list }}
+	{{ $cols := .cols }}
+	{{ $type := .type }}
+	{{ $iconRounded := .iconRounded }}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        "border-0 card-icon card-icon-secondary"
+		"cols"         $cols
+		"gutter"       ""
+		"padding"      "0"
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-style"   "fa-fluid fa-fw"
+		"align"        "start"
+		"orientation"  "horizontal-sm"
+		"button"       true
+		"link-type"    $type
+		"icon-rounded" $iconRounded
+	) -}}
+{{ end }}
+
+<div class="container-xxl p-4 px-xxl-0">
+	{{ $list := slice }}
+
+	{{ range $args.messages }}
+		{{ $path := "" }}
+		{{ $href := "" }}
+		{{ with .link }}{{ if hasPrefix . "http" }}{{ $href = . }}{{ else }}{{ $path = . }}{{ end }}{{ end }}
+
+		{{ $list = $list | append (dict 
+			"title"        .title
+			"description"  (.content | page.RenderString) 
+			"icon"         .icon
+			"href"         $href
+			"path"         $path
+			"button-label" .label
+		) }}
+	{{ end}}
+
+	{{- partial "assets/section-title.html" (dict 
+		"heading" $args.heading
+		"class"   "py-5"
+	) -}}
+
+	{{ if eq $args.orientation "stacked" }}
+		<div class="col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
+		{{ with $args.video }}
+			{{- partial "inline/video.html" (dict
+				"provider"   .provider
+				"account"    .account
+				"media-id"   (index . "media-id")
+				"autoplay"   .autoplay
+				"query-args" .queryArgs
+				"border"     $.border
+			) -}}
+		{{ end }}
+		</div>
+		<div class="mt-4">
+			{{- partial "inline/messages.html" (dict "list" $list "cols" $args.cols "type" $args.type "iconRounded" $args.iconRounded) -}}
+		</div>
+	{{ else }}
+		<div class="container grid gap-4">
+			<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+				<div class="col col-{{ $breakpoint.current }}-{{ $args.width }} p-0">
+					{{ with $args.video }}
+						{{- partial "inline/video.html" (dict
+							"provider"   .provider
+							"account"    .account
+							"media-id"   (index . "media-id")
+							"autoplay"   .autoplay
+							"query-args" .queryArgs
+							"border"     $.border
+						) -}}
+					{{ end }}
+				</div>
+				<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-4 mt-{{ $breakpoint.current }}-0">
+					{{- partial "inline/messages.html" (dict "list" $list "cols" 1 "type" $args.type "iconRounded" $args.iconRounded) -}}
+				</div>
+			</div>
+		</div>
+	{{ end }}
+</div>

component-library/components/video-message/video-message.scss

@@ -0,0 +1,59 @@
+.video-container { 
+    --bs-video-border-color: var(--bs-primary);
+    --bs-video-border-width: 1rem;
+    
+    position: relative;
+}
+
+.video-container > .video-embedded { 
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+}
+
+.video-container-border > .video-embedded { 
+    width: calc(100% - var(--bs-video-border-width) / 2);
+    height: calc(100% - var(--bs-video-border-width) / 2);
+    margin-left: calc(var(--bs-video-border-width) / 2);
+    padding: 1rem;
+}
+
+.video-overlay {
+    border: calc(var(--bs-video-border-width) / 2) solid var(--bs-video-border-color);
+    background: var(--bs-video-border-color);
+    overflow: hidden;
+    position: absolute;
+}
+
+.video-overlay-start {
+    border-bottom-left-radius: $theme-border-radius;
+    border-top-left-radius: $theme-border-radius;
+    width: 1;
+    height: 100%;
+    left: 0;
+    bottom: 0;
+}
+
+.video-overlay-top {
+    width: calc(100% - 1rem);
+    height: 1;
+    left: 1rem;
+    top: 0;
+}
+
+.video-overlay-bottom {
+    width: calc(100% - 1rem);
+    height: 1;
+    left: 1rem;
+    bottom: 0;
+}
+
+.video-overlay-end {
+    border-bottom-right-radius: $theme-border-radius;
+    border-top-right-radius: $theme-border-radius;
+    width: 1;
+    height: 100%;
+    left: 100%;
+    bottom: 0;
+}

component-library/helpers/component.html

@@ -0,0 +1,69 @@
+{{/* Adapted from https://github.com/CloudCannon/bookshop/blob/main/hugo/v3/core/helpers/component.html */}}
+
+{{/*
+    Renders a single Bookshop component, 
+    wrapping in in a live editing context tag.
+
+    Expects a slice:
+    [
+        <string>, # Component name
+        <_>       # Component props
+    ]
+*/}}
+
+{{- $component_name := index . 0 -}}
+{{- $component_props := index . 1 -}}
+{{- $class := index . 2 | default "p-0" -}}
+{{- $bgclass := index . 3 | default "" -}}
+
+{{- $component_path := partial "_bookshop/helpers/component_key" $component_name -}}
+{{- $flat_component_path := partial "_bookshop/helpers/flat_component_key" $component_name -}}
+
+{{- $resolved_component := false -}}
+{{- if templates.Exists ( printf "_partials/%s" $component_path ) -}}
+    {{- $resolved_component = $component_path -}}
+{{- else if templates.Exists ( printf "_partials/%s" $flat_component_path ) -}}
+    {{- $resolved_component = $flat_component_path -}}
+{{- end -}}
+
+{{- if $resolved_component -}}
+    {{- $id := index $component_props "id" -}}
+    {{- $cover := index $component_props "cover" -}}
+    {{- $background := index $component_props "background" -}}
+    {{- $backdrop := "" -}}
+    {{- $style := index $component_props "wrapper" -}}
+    {{- $wrapper := $style }}
+    {{ with $background }}
+        {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
+        {{ if reflect.IsMap $background }}
+            {{ with $background.backdrop }}{{ $wrapper = "" }}{{ $backdrop = . }}{{ end }}
+        {{ end }}
+    {{ end }}
+    {{/* warnf "wrapper: '%s'" $wrapper */}}
+    {{- $theme := index $component_props "theme" -}}
+    {{- $overlayMode := (or (index $component_props "overlay-mode") page.Params.overlayMode) | default "dark" -}}
+    {{ if not $backdrop }}{{ $overlayMode = page.Params.overlayMode }}{{ end }}
+    {{ if eq $overlayMode "none" }}{{ $overlayMode = "" }}{{ end }}
+    
+    {{ (printf "<!--bookshop-live name(%s)-->" $component_name) | safeHTML }}
+    <section {{ with $id }}id="{{ . }}" {{ end }}class="{{ $component_name }} container-fluid {{ $class }} {{ with $wrapper }}{{ . }}{{ end -}}
+        {{- if and $backdrop $overlayMode }} background-container{{ end -}}
+        {{- if $cover }} section-cover d-flex align-items-center{{ end }}" 
+        {{ with $overlayMode -}}
+            data-bs-theme="{{ . }}"
+            data-bs-overlay="{{ . }}"
+        {{- else -}}
+        {{- with $theme }}data-bs-theme="{{ . }}"{{ end -}}
+        {{- end -}}
+        >
+        {{- if $backdrop -}}
+            {{ partial "assets/live-image.html" (dict "src" $backdrop "class" (printf "background-img-fluid %s" $bgclass) "title" (T "backgroundImage")) }}
+        {{- end -}}
+        {{ partial $resolved_component $component_props }}
+    </section>
+    {{ "<!--bookshop-live end-->" | safeHTML }}
+{{- else -}}
+    {{- $file_loc := slicestr $component_path 9 -}}
+    {{- $flat_file_loc := slicestr $flat_component_path 9 -}}
+    {{- partial "_bookshop/errors/err" (printf "Component \"%s\" does not exist.\n     Create this component by placing a file in your bookshop at %s or %s" $component_name $file_loc $flat_file_loc) -}}
+{{- end -}}

component-library/helpers/partial.html

@@ -0,0 +1,27 @@
+{{/* Adapted from https://github.com/CloudCannon/bookshop/blob/main/hugo/v3/core/helpers/partial.html */}}
+
+{{/*
+    Renders a single Bookshop partial, 
+    wrapping in in a live editing context tag.
+
+    Expects a slice:
+    [
+        <string>, # Partial name
+        <_>       # Partial props
+    ]
+*/}}
+
+{{- $partial_name := index . 0 -}}
+{{- $partial_props := index . 1 -}}
+{{- $partial_path := partial "_bookshop/helpers/partial_key" $partial_name -}}
+
+{{- if templates.Exists ( printf "partials/%s" $partial_path ) -}}
+
+{{ (printf "<!--bookshop-live name(%s)-->" $partial_name) | safeHTML }}
+{{ partial $partial_path $partial_props }}
+{{ "<!--bookshop-live end-->" | safeHTML }}
+
+{{- else -}}
+    {{- $file_loc := slicestr $partial_path 9 -}}
+    {{- partial "_bookshop/errors/err" (printf "Partial \"%s\" does not exist.\n     Create this partial by placing a file in your bookshop at %s" $partial_name $file_loc) -}}
+{{- end -}}

component-library/shared/hugo/page.hugo.html

@@ -0,0 +1,5 @@
+<div>
+{{ range . }}
+  {{ partial "bookshop" . }}
+{{ end }}
+</div>

component-library/shared/styles/global.scss

@@ -0,0 +1,23 @@
+// Files in shared/styles will be used as global stylesheets on your site,
+// as well as in the component browser and screenshots.
+
+.display-1 > strong {
+    color: var(--bs-primary);
+    font-weight: normal !important;
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .preheading.text-primary {
+            color: #{$primary-text-emphasis-dark} !important;
+        }
+    }
+}
+
+h1[class*="display-"] {
+    margin-top: 0;
+}
+
+.navbar-offset {
+    padding-top: var(--navbar-offset);
+}

component-library/theme.scss

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

config/_default/hugo.toml

@@ -1,17 +1,16 @@
 # toml-docs-start main
 title = "Hinode"
-copyright = "Copyright © 2023 Mark Dumay."
-paginate = 9
+copyright = "Copyright © 2022 - 2025 Mark Dumay."
 enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
-googleAnalytics = "G-T85PPZ36GN"
-baseURL = "https://demo.gethinode.com/"
+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
@@ -24,23 +23,51 @@ timeout = "180s"
 # toml-docs-start language
 languageCode = "en-us"
 defaultContentLanguage = "en"
-defaultContentLanguageInSubdir = true
+defaultContentLanguageInSubdir = false
 # toml-docs-end language
 
+# toml-docs-start headers
+[outputFormats]
+  [outputFormats.server]
+    mediaType = "application/toml"
+    baseName = "server"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+  [outputFormats.netlify]
+    mediaType = "application/toml"
+    baseName = "netlify"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+# toml-docs-end headers
+
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
 # toml-docs-start redirect
-[outputFormats.REDIR]
-mediaType = "text/netlify"
-baseName = "_redirects"
-isPlainText = true
-notAlternative = true
+  [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 outputs
+[outputs]
+home = ["HTML", "RSS", "REDIR", "netlify", "server"]
+# toml-docs-end outputs
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -49,12 +76,15 @@ home = ["HTML", "RSS", "REDIR"]
 [taxonomies]
   tag = 'tags'
 
+[pagination]
+  pagerSize = 9
+
 [privacy]
   [privacy.vimeo]
     disabled = false
     simple = true
 
-  [privacy.twitter]
+  [privacy.x]
     disabled = false
     enableDNT = true
     simple = true
@@ -70,29 +100,35 @@ home = ["HTML", "RSS", "REDIR"]
 [services]
   [services.instagram]
     disableInlineCSS = true
-  [services.twitter]
+  [services.x]
     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.110.0"
-    max = ""
+    min = "0.141.0"
   [[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"
@@ -102,18 +138,67 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'layouts/partials/bookshop'
+    includeFiles = ['**/*.hugo.html']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'data/structures'
+    includeFiles = ['**/*.bookshop.yml']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/bookshop'
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/scss/modules/bookshop'
+    includeFiles = ['**/*.scss']
+    excludeFiles = ['bookshop.scss']
+  [[module.mounts]]
+    source = 'component-library/bookshop.scss'
+    target = 'assets/scss/bookshop.scss'
+  [[module.mounts]]
+    source = 'component-library/helpers'
+    target = 'layouts/partials/_bookshop/helpers'
+  # ensures main package.json is always available, even when using workspaces
+  # in workspaces, the package.json is pointing to the first imported module
+  [[module.mounts]]
+    source = "package.json"
+    target = "assets/data/package-hinode.json"
   [[module.mounts]]
     source = "netlify.toml"
     target = "assets/config/netlify.toml"
 # toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/cloudcannon/bookshop/hugo/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-bootstrap"
   [[module.imports]]
-    path = "github.com/gethinode/mod-flexsearch"
+    path = "github.com/gethinode/mod-csp"
   [[module.imports]]
-    path = "github.com/gethinode/mod-fontawesome"
+    path = "github.com/gethinode/mod-flexsearch/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-fontawesome/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-google-analytics"
   [[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-mermaid"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-simple-datatables"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-utils/v3"
 # toml-docs-end modules
+
+# toml-docs-start segments
+[segments]
+  [segments.headers]
+    [[segments.headers.includes]]
+       kind = '{home}'
+       output = '{netlify,server}'
+# toml-docs-end segments

config/_default/languages.toml

@@ -1,31 +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]
-        link = "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' rel='noopener noreferrer'>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 nofollow'>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]
-        link = "over-mij"
-        caption = "Over mij"
-    [nl.params.footer]
-        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
-        socialTitle = "Volg mij"
-        socialCaption = "Ik doe aan programmeren en tweet memes"

config/_default/markup.toml

@@ -24,12 +24,18 @@ defaultMarkdownHandler = "goldmark"
         table = true
         taskList = true
         typographer = true
+    [goldmark.extensions.passthrough]
+        enable = true
+    [goldmark.extensions.passthrough.delimiters]
+        block = [['\[', '\]'], ['$$', '$$']]
+        inline = [['\(', '\)'], ['$', '$']]
     [goldmark.parser]
         autoHeadingID = true
         autoHeadingIDType = 'github'
+        wrapStandAloneImageWithinParagraph = false
     [goldmark.parser.attribute]
         block = true
     [goldmark.renderer]
         hardWraps = false
-        unsafe = true
+        unsafe = false
         xhtml = false

config/_default/menus/menus.en.toml

@@ -1,34 +1,12 @@
 [[main]]
-  name = "About"
-  pageRef = "/about/"
+  name = "Home"
+  pageRef = "/"
   weight = 10
 
-[[main]]
-  name = "Blog"
-  pageRef = "/blog/"
-  weight = 20
-
-[[main]]
-  name = "Projects"
-  pageRef = "/projects/"
-  weight = 30
-
-[[main]]
-  name = "Sample project"
-  pageRef = "/projects/sample-project/"
-  parent = "Projects"
-  weight = 1
-
-[[main]]
-  name = "Another project"
-  pageRef = "/projects/another-project/"
-  parent = "Projects"
-  weight = 2
-
 [[main]]
   name = "Tags"
-  pageRef = "/tags/"
-  weight = 40
+  pageRef = "/tags"
+  weight = 20
 
 [[social]]
   name = "LinkedIn"

config/_default/params.toml

@@ -3,29 +3,58 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    enableLanguageSelectionStorage = false
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
+    endorse = true
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
+    titleCase = false
+    [main.internalLinks]
+        validate = true
+        pretty = false
     [main.externalLinks]
         cue = false
         tab = false
+    [main.build]
+        transpiler = "libsass"
 # toml-docs-end main
 
-# toml-docs-start modules
-[modules]
-    core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
-    excludeSCSS = ["bootstrap"]
-    disableTemplate = ["katex"]
-    [modules.fontawesome]
-        inline = true
-        debug = true
-        skipMissing = false
-# toml-docs-end modules
+# toml-docs-start images
+[images]
+    [images.cloudinary]
+        host = "cloudinary"
+    [images.imagekit]
+        host = "imagekit"
+    [images.imgix]
+        host = "imgix"
+# toml-docs-end images
+
+# toml-docs-start videos
+[videos]
+    [videos.cloudinary]
+        host = "cloudinary"
+        account = "demo"
+    [videos.vimeo]
+        host = "vimeo"
+    [videos.youtube]
+        host = "youtube"
+# toml-docs-end videos
+
+[dam]
+    videoCodecs = [
+        "webm/vp9",
+        "mp4/h265",
+        "mp4"
+    ]
 
 # toml-docs-start debugging
 [debugging]
     showJS = false
     showSCSS = false
+    purgeHTMLComments = false
+    includeSVGOrigin = true
 # toml-docs-end debugging
 
 # toml-docs-start docs
@@ -37,11 +66,15 @@
 
 # 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
@@ -50,11 +83,16 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    overlay = false
+    overlayMode = "dark"
+    horizontal = false
+    offset = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
+    size = "md"
 # toml-docs-end navigation
 
 # toml-docs-start messages
@@ -78,7 +116,7 @@
 [[sharing.providers]]
     name = "Twitter"
     url = "https://twitter.com/home?status={url}"
-    icon = "fab twitter"
+    icon = "fab x-twitter"
     weight = 20
 
 [[sharing.providers]]
@@ -102,37 +140,21 @@
 # toml-docs-end sharing
 
 # toml-docs-start sections
-[sections]
-    [sections.blog]
-        title = "Blog"
-        sort = "date"
-        reverse = true
-        nested = true
-        cols = 3
-        color = ""
-        padding = "0"
-        header = "full"
-        footer = "none"
-        orientation = "stacked"
-        style = "border-0 card-zoom"
-        homepage = 3
-        separator = true
-    [sections.projects]
-        title = "Projects"
-        layout = "card"
-        sort = "title"
-        reverse = false
-        nested = true
-        cols = 1
-        background = "body-tertiary"
-        color = "body"
-        padding = "3"
-        header = "none"
-        footer = "tags"
-        orientation = "horizontal"
-        style = "border-1 card-emphasize"
-        homepage = 3
-        separator = false
+# [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]
@@ -151,10 +173,14 @@
     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" # 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
@@ -168,16 +194,16 @@
     # linkedIn = ""
     github = "https://github.com/gethinode/hinode"
     section = "blog"
-    [author]
+    [schema.author]
         name = "Mark Dumay"
         # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
-    [logo]
+    [schema.logo]
         url = "img/logo512x512.png"
         width = 512
         height = 512
-    [image]
+    [schema.image]
         url = "img/logo1280x640.png"
         width = 1280
         height = 640
@@ -186,21 +212,62 @@
     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]
-    bs_badge_heading = "https://getbootstrap.com/docs/5.2/components/badge/#headings"
-    hinode_docs = "https://gethinode.com/docs"
-    hugo_imaging = "https://gohugo.io/content-management/image-processing/#imaging-configuration"
-    mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
-    observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
-    pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
-    utterances = "https://utteranc.es"
- 
+    hinode = "https://gethinode.com"
+
+# toml-docs-start headers
+[headers]
+  [headers.netlify]
+    source = "netlify.toml"
+# toml-docs-end headers
+
+# toml-docs-start csp
+[modules.hinode.csp]
+    style-src = ["www.youtube.com"]
+    font-src = ["fonts.gstatic.com"]
+    frame-src = [
+        "player.cloudinary.com",
+        "www.youtube-nocookie.com",
+        "www.youtube.com"
+    ]
+    img-src = [
+        "data:",
+        "*.imgix.net",
+        "*.imagekit.io",
+        "*.cloudinary.com",
+        "i.ytimg.com"
+    ]
+# toml-docs-end csp
+
+[modules.vimeo]
+    local = true
+    integration = "optional"
+    state = "async"
+    url = "https://player.vimeo.com/api/player.js"
+
+[modules.vimeo.csp]
+    frame-src = ["player.vimeo.com"]
+    img-src = ["i.vimeocdn.com"]
+    script-src = ["player.vimeo.com"]
+
+# define module integration
+[modules.bookshop]
+  integration = "core"
+
+# provide default hero settings
+[modules.bookshop.hero]
+  align = "start"
+#   backdrop = "/assets/img/nat-9l98kFByiao-unsplash.jpg"
+  overlayMode = "dark"
+  section = true
+  default = ["section"]
+#   default = ["page", "home", "section"]
+
+[modules.bookshop.title]
+  size = 4
+  arrangement = "above"
+  headingStyle = "display"
+  bodyStyle = "lead text-muted"
+
+[modules.bookshop.articles]
+  moreButton = true

config/_default/server.toml

@@ -1,43 +1,29 @@
-# toml-docs-start server-config
+# Auto-generated file - do not modify
+
 [[headers]]
-for = '/**'
-[headers.values]
-    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
-    X-Content-Type-Options = "nosniff"
-    X-XSS-Protection = "1; mode=block"
-    Content-Security-Policy = """\
-        default-src 'self'; \
-        script-src 'self' \
-            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
-        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
-        object-src 'none'; \
+  for = '/**'
+
+  [headers.values]
+    Access-Control-Allow-Origin = '*'
+    Content-Security-Policy = """
         base-uri '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' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        connect-src 'self' *.analytics.google.com *.google.com *.google-analytics.com *.googletagmanager.com; \
+        default-src 'none'; \
+        font-src 'self' fonts.gstatic.com data:; \
+        form-action 'self'; \
+        frame-src *.googletagmanager.com player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
+        img-src 'self' *.google-analytics.com *.googletagmanager.com googletagmanager.com ssl.gstatic.com www.gstatic.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
-        media-src 'self' \
+        media-src 'self'; \
+        object-src 'none'; \
+        script-src 'self' *.google-analytics.com *.googletagmanager.com *.analytics.google.com googletagmanager.com tagmanager.google.com player.vimeo.com; \
+        style-src 'self' googletagmanager.com tagmanager.google.com fonts.googleapis.com www.youtube.com; \
         """
-    X-Frame-Options = "SAMEORIGIN"
-    Referrer-Policy = "strict-origin"
-    Permissions-Policy = """\
-        geolocation=(), \
-        midi=(), \
-        sync-xhr=(), \
-        microphone=(), \
-        camera=(), \
-        magnetometer=(), \
-        gyroscope=(), \
-        fullscreen=(), \
-        payment=() \
-        """
-    cache-control = """\
-        max-age=0, \
-        no-cache, \
-        no-store, \
-        must-revalidate \
-        """
-    Access-Control-Allow-Origin = "*"
-# toml-docs-end server-config
+    Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
+    Referrer-Policy = 'strict-origin'
+    Strict-Transport-Security = 'max-age=31536000; includeSubDomains; preload'
+    X-Content-Type-Options = 'nosniff'
+    X-Frame-Options = 'SAMEORIGIN'
+    X-XSS-Protection = '1; mode=block'
+    cache-control = 'max-age=0, no-cache, no-store, must-revalidate '
+

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

@@ -3,29 +3,37 @@ const cssnano = require('cssnano')({
   preset: 'advanced'
 })
 const whitelister = require('purgecss-whitelister')
-const purgecss = require('@fullhuman/postcss-purgecss')({
+const purgeImport = require('@fullhuman/postcss-purgecss')
+const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport
+const purgecss = purgeCSSPlugin({
   content: ['./hugo_stats.json'],
   defaultExtractor: (content) => {
     const els = JSON.parse(content).htmlElements
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
-  dynamicAttributes: ['data-bs-theme'],
-  safelist: [
+  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
+  safelist: ['was-validated',
     ...whitelister([
       './assets/scss/components/_clipboard.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/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-cookieyes/v2/assets/scss/cookieyes.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/v2/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/gethinode/mod-simple-datatables/dist/simple-datatables.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',

content/_index.md

@@ -0,0 +1,24 @@
+---
+title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+content_blocks:
+  - _bookshop_name: hero
+    heading:
+      title: Welcome to Hinode!
+      content: |-
+        A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+      align: start
+    background:
+      color: primary
+      subtle: true
+    illustration:
+      image: /img/sunrise.jpg
+      ratio: 16x9
+      width: 8
+    width: 6
+    links:
+      - title: Get started
+        url: https://gethinode.com/docs
+        icon: fas book-open
+    orientation: horizontal
+---