Merge pull request #1504 from gethinode/develop

Develop

.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**
+Alternatively, include the commands from your terminal as bash script.
-A clear and concise description of what you expected to happen.
+
+## 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.**
+## Problem or enhancement idea
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+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,6 +3,11 @@
 
 version: 2
 updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
   - package-ecosystem: "npm"
     directory: "/"
     schedule:

.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,7 +13,7 @@ jobs:
     steps:
       - name: Dependabot metadata
         id: metadata
-        uses: dependabot/fetch-metadata@v1
+        uses: dependabot/fetch-metadata@v2
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
 

.github/workflows/lint-build.yml

@@ -14,16 +14,20 @@ env:
   CACHE_PATH_WIN: '~\AppData\Local\hugo_cache'
   CACHE_PATH_MAC: '/Users/runner/Library/Caches/hugo_cache'
 
+permissions:
+  pull-requests: read
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
     - name: Check out repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Set up Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: lts/*
         cache: 'npm'
@@ -43,16 +47,21 @@ jobs:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [20.x, 22.x]
 
     runs-on: ${{ matrix.os }}
 
     steps:
     - name: Check out repository
-      uses: actions/checkout@v3
+      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@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
@@ -82,13 +91,16 @@ jobs:
     # 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@v3
+      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
 

.github/workflows/mod-update.yml

@@ -14,10 +14,10 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: lts/*
         cache: 'npm'
@@ -38,7 +38,7 @@ jobs:
         echo 'EOF' >> $GITHUB_OUTPUT
 
     - name: Create Pull Request
-      uses: gethinode-actions/create-pull-request@v5
+      uses: gethinode-actions/create-pull-request@v6
       with:
         token: ${{ secrets.HUGO_MOD_PR }}
         commit-message: 'fix: update Hugo module dependencies'

.github/workflows/npm-publish.yml

@@ -1,41 +0,0 @@
-# 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:
-  release:
-    types: [published]
-
-env:
-  REGISTRY_URL: 'https://registry.npmjs.org/'
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [20.x]
-
-    runs-on: ${{ matrix.os }}
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Setup .npmrc file to publish to npm
-        uses: actions/setup-node@v3
-        with:
-          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 }}

.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: Release
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+env:
+  HUSKY: 0
+
+permissions:
+  contents: read # for checkout
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - name: Install dependencies
+        run: npm clean-install
+
+      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
+        run: npm audit signatures
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -1,4 +1,6 @@
-/_vendor
+_vendor/
+prebuild/
+prebuild-headers/
 public/
 resources/
 node_modules/

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+    process.exit(0)
+}
+const husky = (await import('husky')).default
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1 @@
+npm test

.markdownlint-cli2.jsonc

@@ -6,7 +6,9 @@
     "MD026": false,
     "MD034": false,
     "MD051": false,
-    "MD053": false
+    "MD053": false,
+    "MD055": false,
+    "MD056": false
   },
   "ignores": ["node_modules", "CHANGELOG.md"]
 }

.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

@@ -9,32 +9,29 @@
 
 <!-- Badges -->
 <p align="center">
-    <a href="https://gohugo.io" alt="Hugo website">
+    <a href="https://gohugo.io">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen">
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" alt="Hugo website">
     </a>
-    <a href="https://gethinode.com" alt="Hinode theme">
+    <a href="https://gethinode.com">
-        <img src="https://img.shields.io/badge/theme-hinode-blue">
+        <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">
+    <a href="https://app.netlify.com/sites/gethinode-demo/deploys">
-        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </a>
-    <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
+    <a href="https://stats.uptimerobot.com/xyGVYhLJmV">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" alt="UptimeRobot Status">
     </a>
-    <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
+    <a href="https://github.com/gethinode/hinode/commits/main">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" alt="Last commit">
     </a>
-    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
+    <a href="https://github.com/gethinode/hinode/issues">
-        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" alt="Issues">
     </a>
-    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
+    <a href="https://github.com/gethinode/hinode/pulls">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" alt="Pulls">
     </a>
-    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
-    </a>
-    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/gethinode/hinode">
     </a>
 </p>
 
@@ -69,12 +66,20 @@ Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain
 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][nodejs] (extended version)
+- [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**
@@ -83,14 +88,15 @@ Start a new Hinode project in three steps:
     hugo new site my-hinode-site && cd my-hinode-site
     ```
 
-1. **Initialize the module system**
+2. **Initialize the module system**
 
     ```bash
     hugo mod init example.com/my-hinode-site
-    echo "[[module.imports]]\npath = 'github.com/gethinode/hinode'" >> hugo.toml
+    echo "[[module.imports]]" >> hugo.toml
+    echo "path = 'github.com/gethinode/hinode'" >> hugo.toml
     ```
 
-1. **Start a development server**
+3. **Start a development server**
 
     ```bash
     hugo server
@@ -114,7 +120,7 @@ Hinode is inspired by the following themes:
 ## Donate
 
 <!-- markdownlint-disable MD033 -->
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<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
@@ -136,7 +142,6 @@ The `hinode`, `docs`, and `template` codebase is released under the [MIT license
 [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

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/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,44 +9,49 @@
 (() => {
   'use strict'
 
-  const storedTheme = localStorage.getItem('theme')
+  const supportedThemes = ['auto', 'dark', 'light'];
 
-  const getPreferredTheme = () => {
+  // retrieves the currently stored theme from local storage
-    if (storedTheme) {
+  const storedTheme = getLocalStorage('theme', 'auto', 'functional')
-      return storedTheme
-    }
 
+  // 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) {
+  // retrieves the current theme, either from local storage or client's preferences
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  function getTheme() {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    if (storedTheme) {
+      return storedTheme
     } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      const preference = getPreferredTheme()
+      setLocalStorage('theme', preference, 'functional')
+      return preference
     }
   }
 
-  setTheme(getPreferredTheme())
+  // applies and stores requested theme
-
+  function setTheme(theme) {
-  const showActiveTheme = theme => {
+    if (!supportedThemes.includes(theme)) {
-    const activeSelectors = document.querySelectorAll('.theme-icon-active')
+      theme = 'auto'
-    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].innerHTML = activeIcon.innerHTML
-      }
-
-      for (let i = 0; i < activeButtons.length; ++i) {
-        activeButtons[i].classList.add('active')
-      }
     }
+    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', () => {
@@ -56,18 +61,16 @@
   })
 
   window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
-
+      chk.addEventListener('change', function () {
-    document.querySelectorAll('[data-bs-theme-value]')
+        document.documentElement.setAttribute('data-bs-theme-animate', 'true')
-      .forEach(toggle => {
+        toggleTheme()
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
       })
+    })
   })
+
+  // 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/nav.js

@@ -0,0 +1,45 @@
+function updateDropdown (element, id, label) {
+  const dropdown = document.getElementById(element)
+  if (dropdown != null) {
+    dropdown.querySelector('.dropdown-toggle').textContent = label
+    dropdown.querySelectorAll('.panel-dropdown .dropdown-item').forEach(item => {
+      item.classList.remove('active')
+      let target = item.getAttribute('data-link')
+      if (target != null) {
+        target = target.replace(/^#+/, '')
+        if (target === id) {
+          item.classList.add('active')
+        }
+      }
+    })
+  }
+}
+
+document.querySelectorAll('.panel-dropdown').forEach(trigger => {
+  trigger.addEventListener('hide.bs.dropdown', event => {
+    if (event.clickEvent != null) {
+      let target = event.clickEvent.srcElement.getAttribute('data-link')
+      if (target != null) {
+        trigger.querySelectorAll('.panel-dropdown .dropdown-item').forEach(item => {
+          item.classList.remove('active')
+        })
+        target = target.replace(/^#+/, '')
+        const btn = document.getElementById(target)
+        if (btn != null) {
+          event.clickEvent.srcElement.classList.add('active')
+          trigger.querySelector('.dropdown-toggle').textContent = event.clickEvent.srcElement.textContent
+          btn.click()
+        }
+      }
+    }
+  })
+})
+
+document.querySelectorAll('.nav-panel .nav-link').forEach(trigger => {
+  trigger.addEventListener('click', event => {
+    const companion = event.srcElement.parentElement.parentElement.getAttribute('data-companion')
+    if (companion != null) {
+      updateDropdown(companion, trigger.getAttribute('id'), trigger.textContent.trim())
+    }
+  })
+})

assets/js/navbar.js

@@ -1,15 +1,57 @@
+const fixed = {{ site.Params.navigation.fixed }}
 const navbar = document.querySelector('.navbar')
 const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
+const colorsBG = ['body', 'secondary', 'tertiary']
+
+function updateNavbar () {
+  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)
+
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
-    if (window.scrollY > 75) {
+    fixed && updateNavbar()
-      navbar.classList.add('nav-active')
-    } else {
-      navbar.classList.remove('nav-active')
-    }
   }
 
   // set the navbar background color to opaque when expanded

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')
+const shareButtons = document.querySelectorAll('[data-sharing-url]')
-
+shareButtons.forEach(btn => {
-if (shareBtn !== null) {
   if (navigator.share) {
-    const title = shareBtn.getAttribute('data-sharing-title')
+    const title = btn.getAttribute('data-sharing-title')
-    const description = shareBtn.getAttribute('data-sharing-description')
+    const description = btn.getAttribute('data-sharing-description')
-    const url = shareBtn.getAttribute('data-sharing-url')
+    const url = btn.getAttribute('data-sharing-url')
 
     // show button if it supports webShareAPI
-    shareBtn.style.display = 'block'
+    btn.style.display = 'block'
-    shareBtn.addEventListener('click', () =>
+    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

@@ -5,6 +5,7 @@
 
 // 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)
@@ -14,17 +15,18 @@
 @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";
@@ -35,8 +37,10 @@
 @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";
@@ -49,8 +53,9 @@
     @include meta.load-css(theme/fonts);
 }
 
-// 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/app.scss

@@ -3,6 +3,7 @@
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
 // Import Bootstrap configuration (mounted by core Bootstrap module)
@@ -12,17 +13,18 @@
 @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";
@@ -33,8 +35,10 @@
 @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";
@@ -42,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-input-checked-bg-image:             url("#{$base-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-radio-checked-bg-image:             url("#{$base-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-check-input-indeterminate-bg-image:       url("#{$base-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:                          url("#{$base-url}icons/form-switch-bg-image.svg") !default;
-$form-switch-bg-image-dark:                     url("/icons/form-switch-bg-image-dark.svg") !default;
+$form-switch-bg-image-dark:                     url("#{$base-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-focus-bg-image:                    url("#{$base-url}icons/form-switch-focus-bg-image.svg") !default;
-$form-switch-checked-bg-image:                  url("/icons/form-switch-checked-bg-image.svg") !default;
+$form-switch-checked-bg-image:                  url("#{$base-url}icons/form-switch-checked-bg-image.svg") !default;
-$form-select-indicator:                         url("/icons/form-select-indicator.svg") !default;
+$form-select-indicator:                         url("#{$base-url}icons/form-select-indicator.svg") !default;
-$form-select-indicator-dark:                    url("/icons/form-select-indicator-dark.svg") !default;
+$form-select-indicator-dark:                    url("#{$base-url}icons/form-select-indicator-dark.svg") !default;
-$form-feedback-icon-valid:                      url("/icons/form-feedback-icon-valid.svg") !default;
+$form-feedback-icon-valid:                      url("#{$base-url}icons/form-feedback-icon-valid.svg") !default;
-$form-feedback-icon-invalid:                    url("/icons/form-feedback-icon-invalid.svg") !default;
+$form-feedback-icon-invalid:                    url("#{$base-url}icons/form-feedback-icon-invalid.svg") !default;
-$navbar-light-toggler-icon-bg:                  url("/icons/navbar-light-toggler-icon-bg.svg") !default;
+$navbar-light-toggler-icon-bg:                  url("#{$base-url}icons/navbar-light-toggler-icon-bg.svg") !default;
-$navbar-dark-toggler-icon-bg:                   url("/icons/navbar-dark-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("/icons/accordion-button-icon.svg") !default;
+$accordion-button-icon:                         url("#{$base-url}icons/accordion-button-icon.svg") !default;
-$accordion-button-icon-dark:                    url("/icons/accordion-button-icon-dark.svg") !default;
+$accordion-button-icon-dark:                    url("#{$base-url}icons/accordion-button-icon-dark.svg") !default;
-$accordion-button-active-icon:                  url("/icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon:                  url("#{$base-url}icons/accordion-button-active-icon.svg") !default;
-$accordion-button-active-icon-dark:             url("/icons/accordion-button-active-icon-dark.svg") !default;
+$accordion-button-active-icon-dark:             url("#{$base-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-prev-icon-bg:                 url("#{$base-url}icons/carousel-control-prev-icon-bg.svg") !default;
-$carousel-control-next-icon-bg:                 url("/icons/carousel-control-next-icon-bg.svg") !default;
+$carousel-control-next-icon-bg:                 url("#{$base-url}icons/carousel-control-next-icon-bg.svg") !default;
-$btn-close-bg:                                  url("/icons/btn-close-bg.svg") !default;
+$btn-close-bg:                                  url("#{$base-url}icons/btn-close-bg.svg") !default;
-$btn-toggle:                                    url("/icons/btn-toggle.svg") !default;
+$btn-toggle:                                    url("#{$base-url}icons/btn-toggle.svg") !default;
-$btn-toggle-dark:                               url("/icons/btn-toggle-dark.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
 //
@@ -12,9 +18,27 @@ a:active {
 // Ensure main page is rendered to full viewport height
 //
 .main {
+    --navbar-height: #{$navbar-height};
+    --overlay-offset: #{$overlay-offset};
+    --section-height: 88vh;
+    --max-section-height: 1024px;
+
     min-height: 100vh;
+    margin-top: var(--overlay-offset);
 }
 
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: margin-left margin-right,
+      class: mx,
+      responsive: true,
+      values: auto 0,
+    )
+  )
+);
+
 .tickmark li::marker {
     content: "✓ ";
 }
@@ -66,52 +90,28 @@ $utilities: map-merge(
     )
 );
 
-@media screen and (orientation: portrait) {
-    .min-vh-custom {
-        min-height: 25vh !important
-    }
-}
-
-@media screen and (orientation: landscape) {
-    .min-vh-custom {
-        min-height: 50vh !important
-    }
-}
-
 :root {
     --nav-height: 90px;
 }
 
-@include media-breakpoint-up(sm) {
+.section-cover {
-    .ratio-section {
+    min-height: calc(var(--section-height) - var(--overlay-offset));
-        min-height: calc(min(100vh, 576px) - var(--nav-height));
+}    
-    }    
-}
-
-@include media-breakpoint-up(md) {
-    .ratio-section {
-        min-height: calc(min(100vh, 768px) - var(--nav-height));
-    }    
-}
-
-@include media-breakpoint-up(lg) {
-    .ratio-section {
-        min-height: calc(min(100vh, 992px) - var(--nav-height));
-    }    
-}
-
-@include media-breakpoint-up(xl) {
-    .ratio-section {
-        min-height: calc(min(100vh, 1200px) - var(--nav-height));
-    }    
-}
 
 @include media-breakpoint-up(xxl) {
-    .ratio-section {
+    .section-cover {
-        min-height: calc(min(100vh, 1400px) - var(--nav-height));
+        min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
     }    
 }
 
+/* stylelint-disable media-feature-range-notation */
+@media (min-height: 1400px) { 
+    .section-cover {
+        min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
+    }
+}
+/* stylelint-enable media-feature-range-notation */
+
 $utilities: map-merge(
     $utilities,
     (

assets/scss/common/_variables-dark.scss

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

assets/scss/common/_variables-dart.scss

@@ -5,8 +5,10 @@ $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;;
+$font-size-base:                h.$font-size-base !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -14,11 +16,17 @@ $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;
@@ -27,8 +35,10 @@ $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;
@@ -39,4 +49,28 @@ $primary-text-emphasis-dark:        mix(white, h.$primary, h.$dark-mode-tint) !d
 $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;
+$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,
+);
+
+$btn-padding-y-xs:            .08rem !default;
+$btn-padding-x-xs:            0.3rem !default;
+$btn-font-size-xs:            $font-size-base * .6 !default;
+$btn-border-radius-xs:        .2rem !default;

assets/scss/common/_variables.scss

@@ -5,6 +5,8 @@ $enable-important-utilities:    true !default;
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
+$base-url:                      $base-url;
+
 // scss-docs-start font
 $font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-size-base:                $font-size-base !default;;
@@ -15,14 +17,21 @@ $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;
 
+$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;
@@ -33,4 +42,30 @@ $secondary-text-emphasis-dark:      mix(white, $secondary, $dark-mode-tint) !def
 $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-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,
+);
+
+$btn-padding-y-xs:            .08rem !default;
+$btn-padding-x-xs:            0.3rem !default;
+$btn-font-size-xs:            $font-size-base * .6 !default;
+$btn-border-radius-xs:        .2rem !default;

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/_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

@@ -28,3 +28,27 @@
     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;
+}
+
+.btn-xs {
+  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
+}

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;
@@ -60,8 +82,7 @@
     }
 }
 
-.card-zoom card-body-link,
+.card-zoom .card-body-link {
-.card-body-link {
     &:hover,
     &:focus {
         color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
@@ -70,8 +91,7 @@
 
 @if $enable-dark-mode {
     @include color-mode(dark) {
-        .card-zoom card-body-link,
+        .card-zoom .card-body-link {
-        .card-body-link {
             &:hover,
             &:focus {
                 color: $primary-bg-subtle-dark if($enable-important-utilities, !important, null);
@@ -82,8 +102,65 @@
 
 // stylelint-enable annotation-no-unknown
 
-// make tag-link clickable on top of the stretched-link.
+// make tag-link and card-button clickable on top of the stretched-link.
-.card .tag-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

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

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,101 @@
+.nav-tabs {
+    border: none !important;
+}
+
+.nav-callout, .tab-content {
+    --#{$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, .tab-content {
+            --#{$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,106 @@
 // 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;
@@ -25,12 +111,27 @@
     --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);
@@ -97,19 +198,11 @@
 
 /* Color of Toggler when collapsed */
 .navbar-toggler.collapsed .toggler-icon {
-    background-color: #777;
+    background-color: var(--bs-navbar-toggler-color);
 }
 
-.emphasis-light {
+.emphasis {
-    background-color: $black if($enable-important-utilities, !important, null);
+    background-color: var(--bs-navbar-toggler-color);
-}
-
-.emphasis-dark {
-    background-color: $white if($enable-important-utilities, !important, null);
-}
-
-.emphasis, {
-    background-color: $black if($enable-important-utilities, !important, null);
 }
 
 @include color-mode(dark) {
@@ -119,3 +212,110 @@
 }
 
 // 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/_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: transparent;
-        background-color: tint-color($primary, 90%);
     }
 
     &::before {
@@ -43,50 +65,49 @@
     }
 }
 
-.btn-toggle[aria-expanded="true"] {
+.btn-toggle-group[aria-expanded="true"] {
-    color: black;
-
     &::before {
         transform: rotate(90deg);
     }
 }
 
-.btn-toggle-nav a {
-    padding: 0.1875rem 0.5rem;
-    margin-top: 0.125rem;
-    margin-left: 1.25rem;
-
-    &:hover,
-    &:focus {
-        background-color: tint-color($primary, 90%);
-    }
-
-    &.active {
-        font-weight: bold;
-    }
-}
-
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .sidebar-item {
             color: var(--bs-body-color);
-            margin-left: 0 !important;
+
-            padding-left: 0.85rem !important;
+            &.active {
-        
+                color: $primary-text-emphasis-dark !important;
-            &.active,
+            }
+
+            &:hover,
+            &:focus {
+                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 {
+        .btn-toggle-group {
             color: var(--bs-body-color);
         
             &:hover,
             &:focus {
-                color: white !important;
                 background-color: transparent;
             }
         
@@ -95,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: white !important;
-                background-color: transparent;
-            }
-
-            &.active {
-                font-weight: bold;
-            }
-        }
-    }
 }
 
 // scss-docs-end sidebar

assets/scss/components/_table.scss

@@ -1,3 +1,20 @@
+.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 {
@@ -9,5 +26,13 @@
             --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,7 +12,15 @@ $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);
     }
 }
 

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;
 }
@@ -50,6 +49,9 @@
 
 #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 {
@@ -60,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 {
@@ -70,11 +74,44 @@
     }
 }
 
+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 {
@@ -89,4 +126,8 @@
             }
         }
     }
-}
+}
+
+.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

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-conventional']}

component-library/bookshop.scss

@@ -0,0 +1,12 @@
+@import "modules/bookshop/shared/styles/global";
+@import "modules/bookshop/components/about/about";
+@import "modules/bookshop/components/articles/articles";
+@import "modules/bookshop/components/cards/cards";
+@import "modules/bookshop/components/cta/cta";
+@import "modules/bookshop/components/faq/faq";
+@import "modules/bookshop/components/hero/hero";
+@import "modules/bookshop/components/panels/panels";
+@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,40 @@
+# 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:
+  justify:
+  link-type:
+  links:
+    -
+      title:
+      url:
+      icon:
+      force:

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

@@ -0,0 +1,33 @@
+{{/* 
+    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" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+    {{ partial "assets/hero.html"  (dict 
+        "page"         page
+        "heading"      $args.heading
+        "background"   $args.background
+        "illustration" (merge (dict "ratio" "auto") $args.illustration)
+        "order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  "horizontal"
+        "width"        (or $args.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,49 @@
+# 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:
+  icon-rounded:
+  icon-style:
+  cols:
+  padding:
+  limit:
+  pagination:
+  paginate:
+  background:
+    backdrop:
+    color:
+    subtle:
+  scroll:
+  bento:
+  cover:
+  header-style:
+  footer-style:
+  orientation:
+  class:
+  width:
+  justify:

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

@@ -0,0 +1,121 @@
+{{/* 
+    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" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $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 }}
+	{{ if or (gt (len $pages) 0) (not $args.hideEmpty) }}
+		{{- partial "assets/section-title.html" (dict
+			"heading" $args.heading
+			"justify" $args.justify
+			"class" (printf "pb-%d" $padding.y))
+		-}}
+
+		{{ $partial := "assets/card-group.html" }}
+		{{ $params := dict }}
+		{{- $params = merge $params (dict
+			"page"         page
+			"list"         $pages
+			"limit"        $args.limit
+			"cols"         $args.cols
+			"icon-rounded" $args.iconRounded
+			"icon-style"   $args.iconStyle
+			"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")
+				"align"        "start"
+				"orientation"  $args.orientation
+				"hook"         "assets/live-card.html"
+				"pagination"   $args.pagination
+				"paginate"     $paginate
+			) -}}
+		{{ end }}
+		{{ if gt (len $pages) 0 }}
+			{{ partial $partial $params }}
+		{{ else }}
+			<p class="pt-{{ $padding.y }}">{{- T "emptyList" }}.</p>
+		{{ end }}
+	{{ end }}
+{{ 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/cards/cards.bookshop.yml

@@ -0,0 +1,36 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Benefits
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  icon-rounded:
+  icon-style:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  orientation:
+  class:
+  width:
+  justify:
+  align:

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

@@ -0,0 +1,82 @@
+{{/* 
+    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" "cards" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cards/cards.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ range $args.elements }}
+	<!-- TODO: check mode -->
+	{{ $list = $list | append (dict 
+		"title"       .title
+		"description" (.content | page.RenderString)
+		"icon"        .icon
+		"thumbnail"   .image
+	) }}
+{{ end}}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{/* Layout for small screens */}}
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary %s" (or $args.class ""))
+		"wrapper"      (printf "d-%s-none" $breakpoint.prev)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   (or $args.iconStyle "fa-2x")
+		"align"        $args.align
+		"orientation"  ($args.orientation | default "horizontal-sm")
+		"hook"         "assets/live-card.html"
+	) -}}
+
+	{{/* Layout for regular screens */}}
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary %s" (or $args.class ""))
+		"wrapper"      (printf "d-none d-%s-block" $breakpoint.prev)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   (or $args.iconStyle "fa-2x")
+		"align"        $args.align
+		"orientation"  ($args.orientation | default "stacked")
+		"hook"         "assets/live-card.html"
+	) -}}
+{{ end }}
+

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

@@ -0,0 +1,43 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: CTA
+  description: Call to action
+  icon: contact_page
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  contact:
+  caption-url:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+  background:
+    backdrop:
+    color:
+    subtle:
+  links:
+    -
+      title:
+      url:
+      icon:
+      force:
+  align:
+  fluid:
+  padding:
+  order:
+  width:

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

@@ -0,0 +1,43 @@
+{{/* 
+    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" "cta" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cta/cta.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+	{{ $links := slice }}
+	{{ if and (reflect.IsSlice .links) (gt (len .links) 0) }}
+		{{ $links = .links }}
+	{{ else }}
+		{{ with site.Params.modules.bookshop.cta.defaultURL }}
+			{{ $links = $links | append (dict "title" (T "contactAction") "url" . "icon" "fas chevron-right") }}
+		{{ end }}
+	{{ end }}
+
+	{{ partial "assets/contact.html" (dict 
+		"page"         page
+		"orientation"  "horizontal"
+		"heading"      $args.heading
+		"contact"      $args.contact
+		"caption-url"  $args.captionUrl
+		"illustration" $args.illustration
+		"class"        "contact-img"
+		"links"        $links
+		"align"        $args.align
+		"order"        $args.order
+		"data"         site.Params.modules.bookshop.cta.section 
+	) }}
+{{ end }}

component-library/components/cta/cta.scss

@@ -0,0 +1,8 @@
+.cta {
+    background-color: var(--#{$prefix}primary-bg-subtle);
+}
+
+.cta .contact-img {
+    background-color: var(--#{$prefix}body-bg);
+    border-radius: var(--bs-border-radius);
+}

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

@@ -0,0 +1,28 @@
+# 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:
+  width:
+  justify:
+  background:
+    backdrop:
+    color:
+    subtle:
+  items:
+    - title:
+      description:

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

@@ -0,0 +1,62 @@
+{{/* 
+    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" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Main code */}}
+{{ if not $args.err }}
+	{{ $color := "" }}
+	{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{ $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{{ 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>
+{{ 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,41 @@
+# 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:
+  justify:

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

@@ -0,0 +1,37 @@
+{{/* 
+    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" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+	{{ partial "assets/hero.html"  (dict 
+        "page"         page
+		"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
+		"justify"      $args.justify
+		)
+	}}
+{{ 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/panels/panels.bookshop.yml

@@ -0,0 +1,35 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Panels
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  tab-type:
+  ratio:
+  responsive:
+  class:
+  width:
+  justify:

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

@@ -0,0 +1,87 @@
+{{/* 
+    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" "panels" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/panels/panels.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ $titles := slice }}
+{{ $toc := slice }}
+{{ $parentID := printf "panel-%v" (cond (isset . "_ordinal") (index . "_ordinal") (md5 (delimit (slice . now) "-"))) }}
+{{ $inner := "" }}
+{{ range $i, $element := $args.elements }}
+	{{ $toc = $toc | append (dict "href" "panel-0-1" "level" 2 "title" $element.title) }}
+
+    {{ $hero := partial "assets/hero.html"  (dict 
+        "page"         page
+        "heading"      (dict "title" $element.title "content" $element.content "width" 8 "size" 6)
+        "background"   $args.background
+        "illustration" (dict "ratio" $args.ratio "icon" $element.icon "image" $element.image "mode" $element.mode)
+		"order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  "horizontal"
+		"align"        "start"
+		"width"        12
+        )
+    }}
+
+	{{- $output := partial "assets/nav-item.html" (dict 
+        "page"      page
+        "id"        $i
+        "parent-id" $parentID
+        "fade"      false
+        "title"     $element.title
+		"show"      (eq $i 0)
+        "raw"       $hero
+        )
+    -}}
+
+	{{ $inner = printf "%s\n%s" $inner $output }}
+	{{ $titles = $titles | append $element.title }}
+{{ end}}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{- partial "assets/nav.html" (dict 
+        "id"           (or $args.id $parentID)
+        "page"         page
+		"nav-items"    $inner
+        "nav-titles"   $titles
+        "tab-type"     $args.tabType
+        "vertical"     $args.vertical
+        "word-wrap"    $args.wordWrap
+        "class"        $args.class
+        "pane"         $args.pane
+        "width"        $args.width
+		"responsive"   $args.responsive
+        ) 
+    -}}
+{{ end }}
+

component-library/components/panels/panels.scss

@@ -0,0 +1,3 @@
+.panels .dropdown-toggle {
+    text-decoration: none !important;
+}

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

@@ -0,0 +1,26 @@
+# 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:
+  width:
+  justify:
+  data:

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

@@ -0,0 +1,28 @@
+{{/* 
+    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" 
+        "warnid"  "warn-invalid-arguments"
+        "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,10 @@
+# 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: []
+
+blueprint:

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

@@ -0,0 +1,20 @@
+{{/* 
+    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 "bookshop" "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" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+    <hr class="w-100">
+{{ end }}

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

@@ -0,0 +1,53 @@
+# 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:
+  icon-style:
+  video:
+    provider:
+    account:
+    media-id:
+    autoplay:
+    query-args:
+  cols:
+  messages:
+    - title:
+      icon:
+      content:
+      link:
+      label:
+  border:
+  width:
+  justify:
+
+_structures:
+  messages:
+    values:
+      value:
+        title:
+        icon:
+        content:
+        link:
+        label:

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

@@ -0,0 +1,160 @@
+{{/* 
+    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" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{/* Initialize global variables */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{- define "_partials/inline/video.html" -}}
+	{{ $provider := .provider }}
+	{{ $account := .account }}
+	{{ $mediaID := (index . "media-id") }}
+	{{ $autoplay := .autoplay }}
+	{{ $queryArgs := .queryArgs }}
+	{{ $border := .border }}
+	{{ $padding := .padding }}
+
+	{{ 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" (printf "text-center mb-%d" $padding.y)) -}}
+	{{ 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 }}
+	{{ $iconStyle := .iconStyle }}
+
+	{{- 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
+		"icon-style"   $iconStyle
+	) -}}
+{{ end }}
+
+{{/* Main code */}}
+{{ if not $args.err }}
+	{{ $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
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{ 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
+				"padding"    $padding
+			) -}}
+		{{ end }}
+		</div>
+		<div class="mt-{{ $padding.y }}">
+			{{- partial "inline/messages.html" (dict
+				"list"        $list
+				"cols"        $args.cols
+				"type"        $args.type
+				"iconRounded" $args.iconRounded
+				"iconStyle"   $args.iconStyle
+			) -}}
+		</div>
+	{{ else }}
+		<div class="container grid gap-{{ $padding.x }}">
+			<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
+							"padding"    $padding
+						) -}}
+					{{ end }}
+				</div>
+				<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-{{ $padding.y }} mt-{{ $breakpoint.current }}-0">
+					{{- partial "inline/messages.html" (dict
+						"list"        $list
+						"cols"        1
+						"type"        $args.type
+						"iconRounded" $args.iconRounded
+						"iconStyle"   $args.iconStyle
+					) -}}
+				</div>
+			</div>
+		</div>
+	{{ end }}
+{{ end }}

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,91 @@
+{{/* 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 "" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+{{- with index $component_props "padding" }}{{ $padding = dict "x" . "y" . }}{{ end -}}
+{{- $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 := "" -}}
+    {{- $fluid := index $component_props "fluid" | default true -}}
+    {{- $style := index $component_props "wrapper" -}}
+    {{- $width := index $component_props "width" -}}
+    {{- $justify := index $component_props "justify" | default "start" -}}
+    {{- $paddingOuter := cond (ne $component_name "separator") (printf "px-xxl-0 px-%d py-0" $padding.x) "" -}}
+    {{- $padding := cond (ne $component_name "separator") (printf "px-%d %spy-%d" $padding.x (cond $fluid "px-xxl-0 " "") $padding.y) "" -}}
+    {{- $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 }}
+    {{- $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 }}
+    {{ if not $fluid }}<div class="container-xxl {{ $paddingOuter }}">{{ end }}
+    <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 -}}
+
+        {{ $col := cond (and $width (lt $width 12)) (printf "col-12 col-md-%d" $width) "" }}
+
+        <div class="container-{{ cond $fluid "xxl" "fluid" }} {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
+            {{ with $col }}
+                <div class="{{ . }}">{{ partial $resolved_component $component_props }}</div>
+            {{ else }}
+                {{ partial $resolved_component $component_props }}
+            {{ end}}
+        </div>
+    </section>
+    {{ if not $fluid }}</div>{{ end }}
+    {{ "<!--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,12 +1,10 @@
 # toml-docs-start main
 title = "Hinode"
-copyright = "Copyright © 2023 Mark Dumay."
+copyright = "Copyright © 2022 - 2025 Mark Dumay."
-paginate = 9
 enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
-# googleAnalytics = "G-xxxxxxxxxx"
 baseURL = "https://example.com/"
 canonifyURLs = false
 enableEmoji = true
@@ -28,20 +26,48 @@ defaultContentLanguage = "en"
 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]
+  [outputFormats.REDIR]
-mediaType = "text/netlify"
+    mediaType = "text/netlify"
-baseName = "_redirects"
+    baseName = "_redirects"
-isPlainText = true
+    isPlainText = true
-notAlternative = 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
@@ -50,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
@@ -71,23 +100,23 @@ home = ["HTML", "RSS", "REDIR"]
 [services]
   [services.instagram]
     disableInlineCSS = true
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
+  [services.googleAnalytics]
+    # ID = "G-xxxxxxxxxx"
 
-[outputFormats]
+[minify]
-  [outputFormats.XML]
+  [minify.tdewolff.js]
-    isPlainText = false
+    keepVarNames = true
-    mediaType = "application/xml"
+    precision = 0
-    isHtml = false
+    version = 2022
-    noUgly = true
+  [minify.tdewolff.html]
-    permalinkable = false
+    keepWhitespace = true
-    name = "xml"
 
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.110.0"
+    min = "0.146.0"
-    max = ""
   [[module.mounts]]
     source = "archetypes"
     target = "archetypes"
@@ -97,6 +126,9 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "content"
     target = "content"
+  [[module.mounts]]
+    source = "data"
+    target = "data"
   [[module.mounts]]
     source = "i18n"
     target = "i18n"
@@ -106,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/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-simple-datatables/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-utils/v4"
 # 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

@@ -11,5 +11,5 @@
         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>)."
+        # 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

config/_default/markup.toml

@@ -24,9 +24,15 @@ 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]

config/_default/params.toml

@@ -3,9 +3,20 @@
     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.padding]
+        x = 4
+        y = 4
+    [main.internalLinks]
+        validate = true
+        pretty = false
     [main.externalLinks]
         cue = false
         tab = false
@@ -13,23 +24,40 @@
         transpiler = "libsass"
 # toml-docs-end main
 
-# toml-docs-start modules
+# toml-docs-start images
-[modules]
+[images]
-    core = ["bootstrap", "flexsearch", "fontawesome"]
+    [images.cloudinary]
-    optional = ["leaflet", "katex"]
+        host = "cloudinary"
-    excludeSCSS = ["bootstrap"]
+    [images.imagekit]
-    disableTemplate = ["katex"]
+        host = "imagekit"
-    [modules.fontawesome]
+    [images.imgix]
-        inline = true
+        host = "imgix"
-        debug = true
+# toml-docs-end images
-        skipMissing = false
+
-# toml-docs-end modules
+# 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
@@ -45,20 +73,33 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 # toml-docs-end home
 
 # toml-docs-start navigation
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
+    logo-height = 30
     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"
+    [navigation.padding]
+        x = 4
+        y = 4
 # toml-docs-end navigation
 
 # toml-docs-start messages
@@ -145,6 +186,7 @@
     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
@@ -159,16 +201,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
@@ -177,14 +219,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]
     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 = '/**'
+  for = '/**'
-[headers.values]
+
-    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+  [headers.values]
-    X-Content-Type-Options = "nosniff"
+    Access-Control-Allow-Origin = '*'
-    X-XSS-Protection = "1; mode=block"
+    Content-Security-Policy = """
-    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'; \
         base-uri 'self'; \
-        connect-src 'self'
+        connect-src 'self' *.analytics.google.com *.google.com *.google-analytics.com *.googletagmanager.com; \
-            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
+        default-src 'none'; \
-        font-src 'self' https://fonts.gstatic.com; \
+        font-src 'self' fonts.gstatic.com data:; \
-        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
+        form-action 'self'; \
-        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        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"
+    Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
-    Referrer-Policy = "strict-origin"
+    Referrer-Policy = 'strict-origin'
-    Permissions-Policy = """\
+    Strict-Transport-Security = 'max-age=31536000; includeSubDomains; preload'
-        geolocation=(), \
+    X-Content-Type-Options = 'nosniff'
-        midi=(), \
+    X-Frame-Options = 'SAMEORIGIN'
-        sync-xhr=(), \
+    X-XSS-Protection = '1; mode=block'
-        microphone=(), \
+    cache-control = 'max-age=0, no-cache, no-store, must-revalidate '
-        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

config/postcss.config.js

@@ -3,30 +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'],
+  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
-  safelist: [
+  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/v2/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

@@ -1,13 +1,24 @@
 ---
 title: Welcome to Hinode!
-thumbnail:
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-    url: /img/sunrise.jpg
+content_blocks:
-    author: Harris Vo
+  - _bookshop_name: hero
-    authorURL: https://unsplash.com/@hoanvokim
+    heading:
-    origin: https://unsplash.com/photos/ZX6BPboJrYk
+      title: Welcome to Hinode!
-    originName: Unsplash
+      content: |-
+        A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
+      width: 6
+    background:
+      color: primary
+      subtle: true
+    illustration:
+      image: /img/sunrise.jpg
+      ratio: 16x9
+    width: 8
+    links:
+      - title: Getting started
+        url: https://gethinode.com/docs
+        icon: fas chevron-right
+    orientation: horizontal
+    justify: center
 ---
-
-A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-
-{{< button href="https://gethinode.com/docs" icon="fas book-open" order="first" >}}Get Started{{< /button>}}