Merge pull request #900 from gethinode/develop

Support explicit overlay mode "none" setting

.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

@@ -20,17 +20,18 @@ jobs:
 
     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'
         cache-dependency-path: '**/package-lock.json'
 
-    - name: Perform clean install of npm
+    # [24/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
-      run: npm ci
+    - name: Install npm
+      run: npm i
 
     - name: Lint the source files
       run: npm run lint      
@@ -42,34 +43,60 @@ 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: [18.x, 20.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'
         cache-dependency-path: '**/package-lock.json'
 
+    - name: Install Dart Sass
+      run:  |
+        if [ "$RUNNER_OS" == "Linux" ]; then
+          sudo snap install dart-sass
+        elif [ "$RUNNER_OS" == "macOS" ]; then
+          brew install sass/sass/sass
+        elif [ "$RUNNER_OS" == "Windows" ]; then
+          choco install sass
+        fi
+      shell: bash
+
+    # [24/AUG/23] Adjusted from npm ci for non-macOS to prevent EBADPLATFORM error due to fsevents
     - name: Perform clean install of npm
-      run: npm ci
+      run:  |
+        if [ "$RUNNER_OS" == "macOS" ]; then
+          npm ci
+        else
+          npm i
+        fi
+      shell: bash
 
     # Cache Hugo cachedir and resourcedir (configured in config/ci/hugo.toml) for each OS
     # No additional cache invalidation is needed, Hugo uses checksums itself
     - name: Use Hugo cache
-      uses: actions/cache@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

@@ -5,6 +5,7 @@ on:
     - cron: '0 3 * * *' # run daily at 03:00 AM
 
 permissions:
+  contents: write
   pull-requests: write
 
 jobs:
@@ -13,17 +14,18 @@ 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'
         cache-dependency-path: '**/package-lock.json'
 
-    - name: Perform clean install of npm
+    # [26/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
-      run: npm ci
+    - name: Install npm
+      run: npm i
 
     - name: Update Hugo module dependencies
       id: mod-updates
@@ -36,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'
@@ -57,4 +59,4 @@ jobs:
           go.mod
           go.sum
           **/go.mod
-          **/go.sum
+          **/go.sum

.github/workflows/npm-publish.yml

@@ -21,18 +21,19 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup .npmrc file to publish to npm
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           registry-url: ${{ env.REGISTRY_URL }}
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
   
-      - name: Perform clean install of npm
+      # [27/AUG/23] Adjusted from npm ci to prevent EBADPLATFORM error due to fsevents
-        run: npm ci
+      - name: Install npm
+        run: npm i
 
       - name: Publish package to npm
         run: npm publish

.markdownlint-cli2.jsonc

@@ -4,10 +4,11 @@
     "MD013": false,
     "MD024": false,
     "MD026": false,
-    "MD033": false,
     "MD034": false,
     "MD051": false,
-    "MD053": false
+    "MD053": false,
+    "MD055": false,
+    "MD056": false
   },
   "ignores": ["node_modules", "CHANGELOG.md"]
 }

.stylelintignore

@@ -3,5 +3,6 @@ assets/scss/components/_syntax-dark.scss
 assets/scss/components/_syntax-light.scss
 assets/scss/vendor
 assets/scss/theme/fonts.scss
+assets/scss/app-dart.scss
 assets/scss/app.scss
 node_modules

LICENSE

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

README.md

@@ -1,5 +1,6 @@
 # Hugo Theme Hinode
 
+<!-- markdownlint-disable MD033 -->
 <!-- Tagline -->
 <p align="center">
     <b>A clean documentation and blog theme for your Hugo site based on Bootstrap 5</b>
@@ -8,32 +9,32 @@
 
 <!-- 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://www.npmjs.com/package/%40gethinode/hinode">
-        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" alt="npm package">
     </a>
-    <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
+    <a href="https://app.netlify.com/sites/gethinode-demo/deploys">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </a>
-    <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
+    <a href="https://stats.uptimerobot.com/xyGVYhLJmV">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" alt="UptimeRobot Status">
     </a>
-    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
+    <a href="https://github.com/gethinode/hinode/commits/main">
-        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" alt="Last commit">
     </a>
-    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
+    <a href="https://github.com/gethinode/hinode/issues">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" alt="Issues">
     </a>
-    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
+    <a href="https://github.com/gethinode/hinode/pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/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/blob/main/LICENSE" alt="License">
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
-        <img src="https://img.shields.io/github/license/gethinode/hinode">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
     </a>
 </p>
 
@@ -47,6 +48,7 @@
   <a href="#donate">Donate</a> •
   <a href="#license">License</a>
 </p>
+<!-- markdownlint-enable MD033 -->
 
 ## About
 
@@ -73,6 +75,14 @@ The installation instructions in this readme install Hinode as a regular Hugo th
 
 ## 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**
@@ -81,14 +91,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
@@ -111,7 +122,9 @@ 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>
+<!-- markdownlint-enable MD033 -->
 
 ## License
 
@@ -132,7 +145,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/analytics.js

@@ -1,69 +1,21 @@
 // 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. */}}
+{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
-    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+  {{ with site.Config.Services.GoogleAnalytics.ID }}
-    {{- if not $pc.RespectDoNotTrack -}}
+    {{ if strings.HasPrefix (lower .) "ua-" }}
+      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
+    {{ else }}
         var doNotTrack = false;
-    {{- else -}}
+        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
-        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
-        var doNotTrack = (dnt == "1" || dnt == "yes");
+          var doNotTrack = (dnt == "1" || dnt == "yes");
-    {{- end -}}
+        }
-{{- end -}}
+        if (!doNotTrack) {
-
+          window.dataLayer = window.dataLayer || [];
-{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+          function gtag(){dataLayer.push(arguments);}
-{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
+          gtag('js', new Date());
-    {{ with .Site.GoogleAnalytics -}}
+          gtag('config', '{{ . }}');
-        {{ if hasPrefix . "G-"}}
+        }
-            {{ template "__ga_js_set_doNotTrack" $ }}
+    {{ end }}
-
+  {{ end }}
-            if (!doNotTrack) {
+{{ end }}
-                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/color.js

@@ -20,8 +20,8 @@
   }
 
   const setTheme = function (theme) {
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
     } else {
       document.documentElement.setAttribute('data-bs-theme', theme)
     }

assets/js/navbar.js

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

assets/scss/app-dart.scss

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

assets/scss/app.scss

@@ -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";
@@ -30,9 +32,10 @@
 @import "components/popover.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/table.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.scss";
 @import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
@@ -41,17 +44,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/_styles.scss

@@ -15,6 +15,34 @@ a:active {
     min-height: 100vh;
 }
 
+.fullcover {
+    --navbar-height: #{$navbar-height};
+
+    min-height: calc(100vh - var(--navbar-height));
+}
+
+.fullscreen {
+    --overlay-offset: #{$overlay-offset};
+
+    min-height: calc(100vh - var(--overlay-offset));
+}
+
+.main-content {
+    margin-top: var(--navbar-offset);
+}
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: margin-left margin-right,
+      class: mx,
+      responsive: true,
+      values: auto 0,
+    )
+  )
+);
+
 .tickmark li::marker {
     content: "✓ ";
 }

assets/scss/common/_variables-dart.scss

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

assets/scss/common/_variables.scss

@@ -7,6 +7,7 @@ $navbar-toggler-focus-width:    0 !default;
 
 // scss-docs-start font
 $font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-size-base:                $font-size-base !default;;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -22,8 +23,8 @@ strong {
 $black:                       #000 !default;
 $btn-toggle-color:              $black !default;
 
-$carousel-dark-indicator-active-bg:  #ffffff !default;
+$carousel-dark-indicator-active-bg:  #fff !default;
-$carousel-dark-caption-color:        #ffffff !default;
+$carousel-dark-caption-color:        #fff !default;
 $carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
 
 // scss-docs-start color-mode
@@ -32,4 +33,10 @@ $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

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/_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,16 @@
     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);
+}

assets/scss/components/_card.scss

@@ -15,6 +15,10 @@
     width: 100%;
 }
 
+.card-icon {
+    color: $secondary;
+}
+
 .card-zoom::after .card-img-wrap img {
     content: "";
     position: absolute;
@@ -48,6 +52,10 @@
     color: $body-color if($enable-important-utilities, !important, null);
 }
 
+.card-body-margin {
+    margin-bottom: $spacer * 1.5; // equals mb-4
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .card-body-link {
@@ -78,8 +86,8 @@
 
 // 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;
 }

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

assets/scss/components/_navbar.scss

@@ -2,13 +2,22 @@
 
 // Source: https://jsfiddle.net/njhgr40m/
 
+
 .navbar {
+    --bs-navbar-expanded-color: var(--bs-body-bg);
+    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
+
     transition: 0.5s ease-in-out;
     background-color: transparent;
+
+    @each $state, $val in $theme-colors {
+        --bs-navbar-color-#{$state}: #{$val};
+    }
 }
 
 .nav-active, .navbar-expanded {
-    background-color: var(--bs-body-bg);
+    background-color: var(--bs-navbar-expanded-color);
+    border-bottom: 1px solid var(--bs-secondary-bg);
 }
 
 .nav-link {
@@ -25,12 +34,17 @@
     --bs-navbar-hover-color: white !important;
     --bs-navbar-disabled-color: white !important;
     --bs-navbar-active-color: white !important;
+    --bs-navbar-toggler-color: white;
 }
 
 .navbar-expanded {
     box-shadow: $box-shadow-sm;
 }
 
+.nav-item .vr {
+    color: var(--bs-navbar-color);
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);
@@ -97,19 +111,11 @@
 
 /* Color of Toggler when collapsed */
 .navbar-toggler.collapsed .toggler-icon {
-    background-color: #777;
+    background-color: var(--bs-navbar-toggler-color);
 }
 
-.emphasis-light {
+.emphasis, .emphasis-dark, .emphasis-light {
-    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 +125,114 @@
 }
 
 // stylelint-enable annotation-no-unknown
+
+.navbar .dropdown-divider-bg {
+    color: var(--#{$prefix}navbar-color);
+}
+
+:root {
+    --dropdown-horizontal-bg: var(--#{$prefix}light);
+    --navbar-offset: #{$navbar-offset-xs};
+}
+
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer 0 $spacer;
+    width: 100% !important;
+}
+
+.navbar-container {
+    width: 100% !important;
+}
+
+.navbar-brand {
+    margin-right: 0;
+}
+
+@include media-breakpoint-up(#{$navbar-size}) {
+    :root {
+        --navbar-offset: #{$navbar-offset};
+    }
+
+    .navbar-container {
+        width: auto !important;
+    }
+
+    .navbar-title {
+        text-align: initial !important;
+        padding: 0;
+    }
+
+    .navbar-brand {
+        margin-right: var(--bs-navbar-brand-margin-end);
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+.dropdown-horizontal {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        @include media-breakpoint-up($next) {
+            &#{$infix} { 
+                position: static !important; 
+            } 
+    
+            &#{$infix} > .dropdown-menu {
+                opacity: 0;
+                display: block;
+                visibility: hidden;
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+                width: 100%;
+                height: auto;
+                text-align: center;
+                border-radius: 0;
+                border: 0;
+                margin-top: $dropdown-horizontal-margin-top;
+                padding-top: $dropdown-horizontal-padding-y;
+                padding-bottom: $dropdown-horizontal-padding-y;
+                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
+            
+                @include transition($dropdown-transition);
+            }
+    
+            &#{$infix} > .dropdown-menu.show {
+                visibility: visible;
+                opacity: 1;
+            }
+    
+            &#{$infix} > .dropdown-menu > li {
+                display: inline-block;
+                padding-left: $spacer;
+                padding-right: $spacer;
+            }
+    
+            &#{$infix} > .dropdown-menu > li > a {
+                padding-left: .25 * $spacer;
+                padding-right: .25 * $spacer;
+
+                &.active,
+                &:hover,
+                &:focus {
+                    color: var(--bs-body-color);
+                    border-bottom: solid 1px var(--bs-navbar-hover-color);
+                    margin-bottom: -1px;
+                    background-color: transparent;
+                }
+            }
+            
+            &#{$infix} > .nav-link.show {
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+            }            
+        }
+    }
+}

assets/scss/components/_sidebar.scss

@@ -1,10 +1,10 @@
 // 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;
 }

assets/scss/components/_syntax-dart.scss

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

assets/scss/components/_syntax.scss

@@ -38,7 +38,10 @@
         }
 
         .bg,
-        .chroma {
+        .chroma,
+        .chroma .ge,
+        .chroma .gl,
+        .chroma .gs {
             color: #c9d1d9 if($enable-important-utilities, !important, null);
         }
     }

assets/scss/components/_table.scss

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

assets/scss/components/_toc.scss

@@ -50,6 +50,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 +63,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 {
@@ -75,6 +80,10 @@
         .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 +98,8 @@
             }
         }
     }
-}
+}
+
+.section-menu > .nav-link.active, .section-menu > .nav-link:hover {
+    color: var(--bs-primary);
+}

assets/scss/components/_video.scss

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

assets/scss/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

config/_default/hugo.toml

@@ -1,12 +1,11 @@
 # toml-docs-start main
 title = "Hinode"
-copyright = "Copyright © 2023 Mark Dumay."
+copyright = "Copyright © 2024 Mark Dumay."
 paginate = 9
 enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
-# googleAnalytics = "G-xxxxxxxxxx"
 baseURL = "https://example.com/"
 canonifyURLs = false
 enableEmoji = true
@@ -73,6 +72,8 @@ home = ["HTML", "RSS", "REDIR"]
     disableInlineCSS = true
   [services.twitter]
     disableInlineCSS = true
+  [services.googleAnalytics]
+    # ID = "G-xxxxxxxxxx"
 
 [outputFormats]
   [outputFormats.XML]
@@ -83,10 +84,18 @@ home = ["HTML", "RSS", "REDIR"]
     permalinkable = false
     name = "xml"
 
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+  [minify.tdewolff.html]
+    keepWhitespace = true
+
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.110.0"
+    min = "0.120.0"
     max = ""
   [[module.mounts]]
     source = "archetypes"
@@ -97,6 +106,9 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "content"
     target = "content"
+  [[module.mounts]]
+    source = "data"
+    target = "data"
   [[module.mounts]]
     source = "i18n"
     target = "i18n"
@@ -120,4 +132,8 @@ home = ["HTML", "RSS", "REDIR"]
     path = "github.com/gethinode/mod-katex"
   [[module.imports]]
     path = "github.com/gethinode/mod-leaflet"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-lottie"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-utils/v2"
 # toml-docs-end modules

config/_default/params.toml

@@ -6,21 +6,34 @@
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
     endorse = true
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = false
         tab = false
+    [main.build]
+        transpiler = "libsass"
 # toml-docs-end main
 
 # toml-docs-start modules
 [modules]
     core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
+    optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
+    [modules.flexsearch]
+        frontmatter = false
+        filter = ""
     [modules.fontawesome]
         inline = true
         debug = true
         skipMissing = false
+    [modules.utils]
+        filter = "[^0-9A-Za-zŽžÀ-ÿ ;.,\\/'’\"]-"
+        raw = false        
 # toml-docs-end modules
 
 # toml-docs-start debugging
@@ -43,6 +56,11 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 # toml-docs-end home
 
 # toml-docs-start navigation
@@ -51,8 +69,12 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    overlay = false
+    overlayMode = "dark"
+    horizontal = false
+    offset = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
@@ -116,7 +138,7 @@
 #         header = "full"
 #         footer = "none"
 #         orientation = "stacked"
-#         style = "border-0 card-zoom"
+#         style = "border-0 card-zoom card-body-margin"
 #         homepage = 3
 #         separator = true
 # toml-docs-end sections
@@ -143,6 +165,8 @@
     themeFont = "Inter"
     # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
     themeFontPath = "/fonts" # local path
+    themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
+    fontSizeBase = "1rem" # assumes the browser default, typically '16px'
 # toml-docs-end font
 # toml-docs-start build
     purge = false
@@ -174,14 +198,5 @@
     images = ["logo.png"]
     locale = "en_US"
 
-[comments]
-    enabled = false
-    repo = "" # Replace with your repository.
-    #issueTerm = "pathname" # pathname, url, title, og:title
-    #label = "comment"
-    # By default, light and dark mode correspond to github-light and github-dark, respectively.
-    # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
-    #theme = "" 
-
 [links]
     hinode = "https://gethinode.com"

config/_default/server.toml

@@ -7,15 +7,14 @@ for = '/**'
     X-XSS-Protection = "1; mode=block"
     Content-Security-Policy = """\
         default-src 'self'; \
-        script-src 'self' \
+        script-src 'self' https://*.google-analytics.com https://*.googletagmanager.com; \
-            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
+        style-src 'self' https://fonts.googleapis.com https://www.youtube.com; \
-        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
         connect-src 'self'
             https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
+        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
         img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
         manifest-src 'self'; \
         media-src 'self' \

config/postcss.config.js

@@ -14,11 +14,14 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
     ...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',
@@ -26,6 +29,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_modal.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',

content/_index.md

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

data/structures/abbr.yml

@@ -0,0 +1,35 @@
+comment: >-
+  Creates an HTML element that shows the long form of an abbrevitation. The
+  abbreviation data is centrally stored in a data file. By default, the
+  shortcode uses `abbr.yaml` with translation support.
+  
+  The data file is expected to store key-value pairs, where `id` is the
+  lower-case abbrevation and `long` its long form. The following example
+  illustrates this using YML:
+
+  - id: css
+    long: `Cascading Style Sheets`
+arguments:
+  key:
+    type: string
+    position: 0
+    optional: false
+    comment: >-
+      Case-insensitive key of the abbreviation. In shorthand notation, this is
+      the first (and only) matched argument. Non-alphanumeric keys must be quoted.
+  data:
+    type: string
+    default: abbr.yaml
+    optional: true
+    comment: >-
+      Filename of the abbrevation input. You can omit the file extension. The
+      file should reside in the `data` folder. The data supports language
+      extensions. For example, `abbr.en.yaml` refers to the English translation
+      of the abbrevation data. The filename `abbr.yaml` is used when no suitable
+      translation is found.
+  class:
+    type: string
+    optional: true
+    comment: >-
+      Class attribute of the abbr element. For example, specify `initialism` for
+      a slightly smaller font size.

data/structures/accordion-item.yml

@@ -0,0 +1,19 @@
+comment: >-
+  Defines an individual accordion item.
+arguments:
+  header:
+    type: string
+    optional: false
+    comment: Header of the accordion item.
+  show:
+    type: bool
+    optional: true
+    comment: Flag to indicate an item should be shown as collapsed.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the accordion item.
+body:
+  optional: false
+  comment: Content of the accordion item.
+  group: shortcode

data/structures/accordion.yml

@@ -0,0 +1,18 @@
+comment: >-
+  Use the accordion to show a group of vertically collapsing and expanding
+  items. Add accordion-item inner elements for each accordion item.
+arguments:
+  id:
+    type: string
+    optional: true
+    comment: >-
+      ID of the accordion, defaults to `accordion-n` with a sequential number n.
+  always-open:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to make accordion items stay open when another item is opened.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the accordion, e.g. `w-50`.

data/structures/alert.yml

@@ -0,0 +1,46 @@
+comment: >-
+  Use the alert shortcode to display a contextual feedback message. The inner
+  content is used as alert text.
+arguments:
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the alert element.
+  color:
+    type: select
+    optional: true
+    default: danger
+    comment: Theme color of the alert.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+  dismissible:
+    type: bool
+    optional: true
+    default: false
+    comment: Flag to indicate the alert is dismissible.
+  icon:
+    type: string
+    optional: true
+    comment: Font Awesome icon to include.
+  type:
+    type: select
+    optional: true
+    comment: Type of the alert, generates an alert with related color and icon.
+    options:
+      values:
+        - danger
+        - info
+body:
+  optional: false
+  comment: Alert text.
+  group: shortcode

data/structures/args.yml

@@ -0,0 +1,27 @@
+comment: >-
+  Generates a markdown table of structured arguments. The argument definitions are
+  expected to be defined in a data file identified by a provided structure name.
+arguments:
+  structure:
+    type: string
+    position: 0
+    optional: false
+    comment: >-
+      Name of the data file that contains argument definitions. Supported data
+      formats include JSON, TOML, YAML, and XML. You can omit the file
+      extension. The file should reside in the `data/structures` folder.
+  group:
+    type: string
+    position: 1
+    optional: true
+    comment: >-
+      Name of the group filter. This is typically used when a shortcode and
+      partial have common arguments. The group filter binds a specific argument
+      to a particular group. By default, an argument belongs to all groups.
+  parent:
+    type: bool
+    position: 2
+    optional: true
+    comment: >-
+      Flag to filter only arguments that have a parent attribute (either
+      `cascade` or `merge`).

data/structures/badge.yml

@@ -0,0 +1,27 @@
+comment: Use the badge shortcode to enrich headings.
+arguments:
+  title:
+    type: string
+    optional: false
+    comment: Title of the badge.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the badge element.
+  color:
+    type: select
+    optional: true
+    default: secondary
+    comment: Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black

data/structures/breadcrumb.yml

@@ -0,0 +1,16 @@
+comment: Displays a breadcrumb for a specific page.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Page to display the breadcrumb for.
+    group: partial
+  path:
+    type: string
+    optional: true
+    comment: Path of the page to display the breadcrumb for.
+    group: shortcode
+
+

data/structures/button-group.yml

@@ -0,0 +1,15 @@
+comment: >-
+  Displays a group of buttons. Add inner <button> elements for each button.
+arguments:
+  label:
+    type: string
+    optional: true
+    comment: Assistive label for the button group.
+  aria-label:
+    type: string
+    optional: true
+    comment: Alias for label.
+body:
+  type: string
+  optional: false
+  comment: Inner <button> elements for each button.

data/structures/button.yml

@@ -0,0 +1,190 @@
+comment: >-
+  Display a button with a hyperlink.
+arguments:
+  title:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    comment: Title of the button, required unless icon is set.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the button element, e.g. `p-5`.
+  color:
+    type: select
+    optional: true
+    default: primary
+    comment: Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+  href:
+    type:
+      - string
+      - template.URL
+    optional: true
+    comment: >-
+      Address for the button or hyperlink. Automatically assigned when using
+      collapse.
+  relref:
+    type: string
+    optional: true
+    comment: >-
+      Name of the page to link to. Replaces `href` with a relative link if set.
+    group: shortcode
+  id:
+    type: string
+    optional: true
+    comment: Identifier of the button, to be used in the DOM.
+  state:
+    type: select
+    optional: true
+    default: enabled
+    comment: State of the button. 
+    options:
+      values:
+        - enabled
+        - disabled
+        - active
+        - inactive
+  size:
+    type: select
+    optional: true
+    default: md
+    comment: Size of the button.
+    options:
+      values:
+        - sm
+        - md
+        - lg
+  outline:
+    type: bool
+    optional: true
+    default: false
+    comment: Flag indicating the button should be outlined.
+  badge:
+    type: string
+    optional: true
+    comment: Positioned badge to display on top of the button.
+  label:
+    type: string
+    optional: true
+    comment: >-         
+      Assistive label for the button or badge. The label is applied
+      to the badge instead of the button when a badge has been defined.
+      The default value of the button's assistive label is its title.
+  aria-label:
+    type: string
+    optional: true
+    comment: Alias for label.
+    group: shortcode
+  tooltip:
+    type: string
+    optional: true
+    comment: >-
+      Text to display in a tooltip. Cannot be used together with 
+      collapse. Ignored for active/inactive buttons.
+  collapse:
+    type: string
+    optional: true
+    comment: >-
+      Panel to collapse. Cannot be used together with tooltip. Ignored for
+      active/inactive buttons.
+  type:
+    type: select
+    optional: true
+    default: button
+    comment: Type of the element.
+    options:
+      values:
+        - link
+        - button
+  placement:
+    type: select
+    optional: true
+    default: top
+    comment: Position of the tooltip.
+    options:
+      values:
+        - top
+        - bottom
+        - left
+        - right
+  icon:
+    type: string
+    optional: true
+    comment: >-
+      Font Awesome icon class attribute, required unless title is set. An
+      example value is `fas sort`.
+  order:
+    type: select
+    optional: true
+    default: last
+    comment: Order of the icon
+    options:
+      values:
+        - first
+        - last
+  justify:
+    type: select
+    optional: true
+    default: center
+    comment: Justification of the button title and icon.
+    options:
+      values:
+        - start
+        - end
+        - center
+        - between
+        - around
+        - evenly
+  toast:
+    type: string
+    optional: true
+    comment: Identifier (ID) of the toast to display when the button is clicked.
+  clipboard:
+    type:
+      - string
+      - template.URL
+    optional: true
+    comment: Text to be copied to the clipboard when the button is clicked.
+  cue:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if an external link should show a visual cue, defaults
+      to the setting `main.externalLinks.cue` in the site's parameters.
+  tab:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if an external link should open in a new tab, defaults
+      to setting `main.externalLinks.tab` in the site's parameters.
+  attributes:
+    type: map[string]interface {}
+    optional: true
+    comment: >-
+      Dictionary of key-value pairs added as custom attributes to the button
+      element ('<a>').
+    group: partial
+  spacing:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      Flag to add spacing to the inline button.
+  wrapper:
+    type: string
+    optional: true
+    comment: Element class of the button wrapper.
+    group: shortcode

data/structures/card-group.yml

@@ -0,0 +1,101 @@
+comment: >-
+  Displays a grid of Bootstrap cards with 1 to 5 columns. The cards are rendered
+  using a provided list of pages. Cards on the same row are aligned to each
+  other. The grid renders pages up to a provided maximum amount. The remaining
+  items are accessible via either a paginator or button to a list page (default
+  behavior). Be aware a page can only contain one paginator at a time.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: true
+    comment: Context of the current page.
+    group: partial
+  title:
+    type: string
+    optional: true
+    comment: Title of the card group.
+  gutter:
+    type: int
+    optional: true
+    default: 4
+    comment: Gutter between columns in a group.
+    options:
+      min: 0
+      max: 5
+    release: v0.19.0
+  list:
+    type:
+      - 'page.Pages'
+      - 'resource.Resources'
+      - '[]map[string]interface {}'
+    optional: true
+    comment: Array of pages or structured content to be rendered as cards.
+    group: partial
+  cards:
+    type: string
+    optional: true
+    comment: String of rendered cards.
+    group: partial
+  max:
+    type: int
+    optional: true
+    comment: Maximum number of cards to display.
+    group: partial
+    options:
+      min: 1
+  cols:
+    type: select
+    optional: true
+    default: "3"
+    comment: Number of grid columns.
+    options:
+      values:
+        - "1"
+        - "2"
+        - "3"
+        - "4"
+        - "5"
+        - "auto"
+    release: v0.19.0
+  paginate:
+    type: bool
+    optional: true
+    comment: >-
+      Flag indicating if pagination should be added to the card group, if the
+      list exceeds the maximum number of cards to display. 
+    group: partial
+  href:
+    type: string
+    optional: true
+    comment: >-
+      Address for the button or hyperlink. If set, a button is added if the
+      list exceeds the maximum number of cards to display.
+    group: partial
+  hrefTitle:
+    type: string
+    optional: true
+    comment: >-
+      Title of the button or hyperlink as companion to href.
+    group: partial
+  separator:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate a horizontal line should be added between items on small screens.
+  wrapper:
+    type: string
+    optional: true
+    comment: >-
+      Class attributes of the wrapper element, e.g. `p-4 px-xxl-0`.
+  responsive:
+    type: bool
+    optional: true
+    comment: >-
+      Flag indicating if the number of columns should be responsive, defaults to `true`.
+  hook:
+    type: string
+    optional: true
+    comment: Render hook for the card partial.
+    group: partial

data/structures/card.yml

@@ -0,0 +1,218 @@
+comment: >-
+  Displays a Bootstrap card. Either specify a valid path, or set the arguments
+  title, href, header, description, and thumbnail individually. The latter
+  arguments override any page attributes.
+arguments:
+  title:
+    type: string
+    optional: true
+    comment: >-
+      Title of the card, replaces the title of the referenced page (if any).
+  path:
+    type: path
+    optional: true
+    comment: >-
+      Path of the page that the card reference to. If omitted, specify the
+      title, icon, thumbnail, and description (inner content) as needed.
+  href:
+    type: url
+    optional: true
+    comment: >-
+      Address for the button or hyperlink.
+    group: partial
+  class:
+    type: string
+    optional: true
+    parent: merge
+    comment: >-
+      Class attribute of the card element, e.g. “w-50”.
+  color:
+    type: select
+    optional: true
+    parent: cascade
+    comment: >-
+      Theme color of the card. By default, no color is specified.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+        - body
+        - body-tertiary
+  padding:
+    type: select
+    optional: true
+    default: auto
+    parent: cascade
+    comment: >-
+      Padding of the content.
+    options:
+      values:
+        - "0"
+        - "1"
+        - "2"
+        - "3"
+        - "4"
+        - "5"
+        - "auto"
+  gutter:
+    type: select
+    optional: true
+    default: "0"
+    parent: cascade
+    comment: >-
+      Gutter between columns in a group.
+    options:
+      values:
+        - "0"
+        - "1"
+        - "2"
+        - "3"
+        - "4"
+        - "5"
+  header:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    comment: >-
+      Header components of the card, displayed in small caps. 
+    options:
+      values:
+        - full
+        - publication
+        - tags
+        - none
+  footer:
+    type: select
+    optional: true
+    default: none
+    parent: cascade
+    comment: >-
+      Footer components of the card, displayed in small caps.
+    options:
+      values:
+        - full
+        - publication
+        - tags
+        - none
+  description:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    comment: >-
+      Description of the card.
+    group: partial
+  loading:
+    type: select
+    optional: true
+    parent: cascade
+    default: eager
+    comment: >-
+      Loading behavior of the image. The loading of lazily loaded images is
+      deferred until the image is within scrolling range of the viewport. This
+      should reduce the initial loading time of the website. It is recommended
+      to lazily load only those images that are below the page fold.
+    options:
+      values:
+        - lazy
+        - eager
+    group: partial
+  thumbnail:
+    type: path
+    optional: true
+    comment: >-
+      Thumbnail image url, displayed on top or the left of the card.
+  ratio:
+    type: select
+    optional: true
+    parent: cascade
+    comment: >-
+      Ratio of the thumbnail image, defaults to `16x9` (stacked orientation)
+      or `1x1` (horizontal orientation).
+    options:
+      values:
+        - 1x1
+        - 3x2
+        - 4x3
+        - 16x9
+        - 21x9
+    group: partial
+  alt:
+    type: string
+    optional: true
+    release: v0.19.0
+    comment: >-
+      Alternate text for the thumbnail, uses `title` by default.
+  icon:
+    type: string
+    optional: true
+    comment: >-
+      Font Awesome icon, displayed on top or the left of the card.
+  align:
+    type: select
+    parent: cascade
+    optional: true
+    default: start
+    release: v0.23.0
+    comment: Icon alignment.
+    options:
+      values:
+        - start
+        - end
+        - center
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Icon style.
+  orientation:
+    type: select
+    optional: true
+    default: stacked
+    parent: cascade
+    comment: Placement of the thumbnail or icon.
+    options:
+      values:
+        - stacked
+        - horizontal
+        - horizontal-sm
+        - none
+  subtle:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Apply subtle background colors.
+  button:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: >-
+      Flag indicating the cards should include a button that links to the provided address.
+  buttonLabel:
+    type: string
+    optional: true
+    release: v0.23.2
+    comment: >-
+      Label of the link button, defaults to the card title.
+  hook:
+    type: string
+    optional: true
+    comment: Render hook for the image partial.
+    group: partial
+body:
+  optional: true
+  comment: >-
+    Description of the card.
+  group: shortcode

data/structures/carousel-item.yml

@@ -0,0 +1,59 @@
+comment: Renders a carousel item with a responsive image.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial
+  src:
+    type: string
+    optional: false
+    comment: Path or url of the image, e.g. `img/example.jpg`.
+  ratio:
+    type: string
+    optional: true
+    comment: >-
+      Ratio of the image. If set, the image is resized and cropped to match the
+      ratio. Else the original aspect ratio of the image is kept.
+    options:
+      values:
+        - 1x1
+        - 3x2
+        - 4x3
+        - 16x9
+        - 21x9
+    group: partial
+  portrait:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to adjust the ratio from landscape to portrait. The image itself
+      is not rotated, only the crop area is adjusted. Not applicable to vector
+      graphics.
+    group: partial
+  loading:
+    type: select
+    default: eager
+    optional: true
+    comment: >-
+      Loading behavior of the image. The loading of lazily loaded images is
+      deferred until the image is within scrolling range of the viewport. This
+      should reduce the initial loading time of the website. It is recommended
+      to lazily load only those images that are below the pagefold.
+    options:
+      values:
+        - eager
+        - lazy
+  caption:
+    type: string
+    optional: true
+    comment: Carousel slide caption.
+  active:
+    type: bool
+    optional: true
+    comment: >-
+      Sets the current carousel item as active (only one item at a time). By
+      default, the first slide is made active.

data/structures/carousel.yml

@@ -0,0 +1,39 @@
+comment: >-
+  Displays a carousel of several responsive images (see the image shortcode for
+  more details). Add inner `img` elements to define individual image slides.
+arguments:
+  id:
+    type: string
+    optional: true
+    comment: >-
+      ID of the carousel, defaults to `carousel-n` with a sequential number `n`.
+  ratio:
+    type: select
+    optional: true
+    comment: >-
+      Ratio of the images. If set, the images are resized and cropped to match the
+      ratio. Else the original aspect ratio of the image is kept.
+    options:
+      values:
+        - 1x1
+        - 3x2
+        - 4x3
+        - 16x9
+        - 21x9
+  portrait:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to adjust the ratio from landscape to portrait. The images themselves
+      are not rotated, only the crop area is adjusted. Not applicable to vector
+      graphics.
+    release: v0.18.3
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the carousel element, e.g. `w-75`.
+body:
+  type: string
+  optional: false
+  comment: Inner `img` elements that define the individual image slides.

data/structures/collapse.yml

@@ -0,0 +1,15 @@
+comment: Defines a hidden panel that can be reveiled by a trigger.
+arguments:
+  id:
+    type: string
+    optional: false
+    comment: >-
+      ID of the collapse element, e.g. `collapse-1`.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the  inner panel element, e.g. `p-3`.
+body:
+  type: string
+  optional: false
+  comment: Inner <img> elements that define the individual image slides.

data/structures/command.yml

@@ -0,0 +1,40 @@
+comment: >-
+  Generates terminal output for either `bash`, `powershell`, or `sql` shell
+  languages. 
+arguments:
+  user:
+    type: string
+    optional: true
+    comment: User to add to the prompt, e.g. `user`.
+  host:
+    type: string
+    optional: true
+    comment: Host to add to the prompt, e.g. `localhost`.
+  prompt:
+    type: string
+    optional: true
+    comment: Prompt override, e.g. `PS C:\Users\User>`.
+  shell:
+    type: select
+    optional: true
+    default: bash
+    comment: Type of shell.
+    options:
+      values:
+        - bash
+        - powershell
+        - sql
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the command element.
+body:
+  type: string
+  optional: false
+  comment: >-
+    The shell commands and their output. Start a line with `(out)` to specify
+    an output line. Use the following line continuation characters for each
+    supported language:
+     - bash: backslash symbol
+     - PowerShell: backtick symbol
+     - sql: `(con)` line suffix

data/structures/docs.yml

@@ -0,0 +1,44 @@
+comment: >-
+    Capture a code snippet from a `toml` or `scss` input file. The shortcode scans for named markers in a local file:   
+    - For `.toml` files, use `# toml-docs-start` and `# toml-docs-end` followed by the snippet name
+    - For `.scss` files, use `// scss-docs-start` and `// scss-docs-end` followed by the snippet name
+    
+    The snippet between the two markers is then rendered using syntax highlighting.
+arguments:
+  name:
+    type: string
+    optional: false
+    comment: >-
+      Name of the code snippet, used to identify the relevant section of the
+      input file.
+  file:
+    type: string
+    optional: false
+    comment: >-
+      Path of the input file. The path is relative to the `basePath` defined in
+      the `docs` section of the site's parameters. If the file starts with `./`,
+      the path of the repository is used as base path instead.
+  show:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      If unset, shows the panel with the code snippet in collapsed state. By
+      default, the panel is expanded.
+  full:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      If unset, shows the filename only. By default, the entire path (relative
+      to the base path) is shown.
+  id:
+    type: string
+    optional: true
+    comment: >-
+      ID of the collapse panel holding the code snippet, defaults to
+      `docs-collapse-n` with a sequential number `n` starting at `1`.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the tab control that wraps the docs element.

data/structures/example.yml

@@ -0,0 +1,33 @@
+comment: >-
+  Display a code example and render a preview of the same input. The shortcode
+  accepts the languages supported by Hugo's highlight function.
+arguments:
+  id:
+    type: string
+    optional: true
+    comment: Identifier of the element’s container.
+  lang:
+    type: string
+    optional: true
+    default: markdown
+    comment: >-
+      Language used to display the code. Use `hugo` to process Hugo (escaped)
+      shortcodes.
+  show_markup:
+    type: bool
+    optional: true
+    default: true
+    comment: Indicates if the markup should be output in the HTML.
+  show_preview:
+    type: bool
+    optional: true
+    default: true
+    comment: Indicates if the preview should be output in the HTML.
+  class:
+    type: string
+    optional: true
+    comment: Class attributes of the element's container.
+body:
+  type: string
+  optional: false
+  comment: The example input.

data/structures/file.yml

@@ -0,0 +1,40 @@
+comment: >-
+  Print the full content of any given file supported by the Chroma syntax
+  highlighter.
+arguments:
+  path:
+    type: string
+    optional: false
+    comment: >-
+      Path of the input file. The path is relative to the `basePath` defined in
+      the `docs` section of the site's parameters. If the file starts with `./`,
+      the path of the repository is used as base path instead.
+  lang:
+    type: string
+    optional: true
+    comment: >-
+      Language to be used by the syntax highlighter. If not set, the
+      language is derived from the file extension.
+  show:
+    type: bool
+    optional: true
+    comment: >-
+      If unset, shows the panel with the code in collapsed state. By default,
+      the panel is expanded.
+  full:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      If unset, shows the filename only. By default, the entire path (relative
+      to the base path) is shown.
+  id: 
+    type: string
+    optional: true
+    comment: >- 
+      Identifier of the collapse panel, defaults to `file-collapse-n` with a
+      sequential number `n` starting at 1.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the tab control that wraps the file element.

data/structures/image.yml

@@ -0,0 +1,122 @@
+comment: >-
+  Render a local or remote image with responsive image sizing. Images are
+  resized using default media breakpoints and are converted to webp format. The
+  image is processed using the quality setting specified in the [imaging]
+  section of the main config file (defaults to 75). A fallback image is provided
+  for older browsers. The image is wrapped in a figure if a caption is provided,
+  else the image is wrapped in a div with a ratio constraint.
+  
+  If the url starts with `http`, the image is retrieved from an external
+  location. Else, the url is matched with a page resource and site asset (in
+  that order). The path of a remote image is rewritten to ensure processed files
+  are stored in the final '/img' folder. 
+  
+  The partial supports the following bitmap image formats: `png`, `jpeg`, `gif`,
+  `tiff`, `bmp`, and  `webp`. Vector graphics of type `svg` are supported too,
+  although these images do no support additional processing. This means the
+  arguments `ratio` and `portrait` have no effect for vector images. Vector
+  graphics support an optional anchor `#` in their url to denote a symbol
+  reference.
+arguments:
+  url:
+    type: string
+    optional: true
+    comment: >-
+      Path or url of the image, e.g. `img/example.jpg`. Images with multiple
+      color modes are expected to have a basename that ends with either `-dark`
+      or `-light`.
+  src:
+    type: string
+    optional: true
+    position: 0
+    comment: Alias for url.
+    group: shortcode
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: true
+    comment: Page context, used to match page resources.
+    group: partial
+  mode:
+    type: bool
+    default: false
+    optional: true
+    comment: >-
+      Flag indicating if the image should support color modes. If set, the
+      shortcode searches for images that having a matching color-mode suffix
+      such as `-light` or `-dark`.
+  ratio:
+    type: select
+    optional: true
+    comment: >-
+      Ratio of the image. If set, the image is resized and cropped to match the
+      ratio. Else the original aspect ratio of the image is kept. Not applicable
+      to vector graphics.
+    options:
+      values:
+        - 1x1
+        - 3x2
+        - 4x3
+        - 16x9
+        - 21x9
+  portrait:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to adjust the ratio from landscape to portrait. The image itself is
+      not rotated, only the crop area is adjusted. Not applicable to vector
+      graphics.
+    release: v0.18.3
+  loading:
+    type: select
+    default: eager
+    optional: true
+    comment: >-
+      Loading behavior of the image. The loading of lazily loaded images is
+      deferred until the image is within scrolling range of the viewport. This
+      should reduce the initial loading time of the website. It is recommended
+      to lazily load only those images that are below the pagefold.
+    options:
+      values:
+        - eager
+        - lazy
+    release: v0.21.0
+  priority:
+    type: select
+    default: auto
+    optional: true
+    comment: >-
+      Fetch priority of the image. The priority provides a hint to the browser
+      on how it should prioritize the fetching of the image relative to other
+      images. The implementation is experimental and currently only supported by
+      Chrome, Edge, and Opera.
+    options:
+      values:
+        - high
+        - low
+        - auto
+    group: partial
+  title:
+    type: string
+    optional: true
+    comment: Alternate text of the image.
+  caption:
+    type: string
+    optional: true
+    comment: Figure caption.
+  wrapper:
+    type: string
+    optional: true
+    comment: Class attributes of the wrapper element, e.g. `mx-auto`.
+    release: v0.18.3
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the inner img element, e.g. `rounded`.
+  figclass:
+    type: string
+    optional: true
+    comment: Class attribute of the figure caption, e.g. `px-4`.
+    release: v0.23.0

data/structures/kbd.yml

@@ -0,0 +1,30 @@
+comment: Adds a keyboard input element.
+arguments:
+  title:
+    type: string
+    optional: false
+    position: 0
+    comment: >-
+      Title of the keyboard input. In shorthand notation, this is the first (and
+      only) matched argument.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the keyboard input element.
+  color:
+    type: select
+    default: secondary
+    optional: true
+    comment: Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black

data/structures/link.yml

@@ -0,0 +1,74 @@
+comment: >-
+  Generates a link for a given named link or url. The shortcode supports a
+  single unnamed parameter, or various named parameters. The unnamed parameter
+  is recognized as a url if it starts with `http`, else it is treated as either
+  a named link or internal reference (in that order). Any inner text is rendered
+  as the link title, otherwise it uses the host name (for external links), link
+  title (for internal links), or anchor name (for any local references
+  containing a `#`).
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    group: partial
+    comment: Context of the current page.
+  destination: 
+    type: string
+    optional: false
+    group: partial
+    comment: >-
+       Target destination.
+  href: 
+    type: string
+    position: 0
+    optional: true
+    comment: >-
+       Reference to either an external link (if it starts with `http`), a named
+       link (if it can be found in `params.links`), or internal reference.
+       Both external and internal references may include an anchor `#`.
+  name:
+    type: string
+    optional: true
+    comment: Alias of href.
+  url:
+    type: string
+    optional: true
+    comment: Alias of href.
+  cue:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if an external link should show a visual cue, defaults to
+      setting `main.externalLinks.cue` in the site's parameters.
+  tab:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if an external link should open in a new tab, defaults to
+      setting `main.externalLinks.tab` in the site's parameters.
+  case:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      Flag to indicate if the retrieved title (e.g. no inner text is provided)
+      of an internal link should use its original case. If false, the title is
+      set to lower case.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the anchor element.
+  text:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    group: partial
+    comment: Link title.
+body:
+  type: string
+  optional: true
+  group: shortcode
+  comment: Link title.

data/structures/list.yml

@@ -0,0 +1,55 @@
+comment: >-
+  Displays a list of items with a thumbnail alternating between left and right
+  alignment.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Required context of the current page.
+    group: partial
+  list:
+    type:
+      - 'page.Pages'
+      - 'resource.Resources'
+    optional: false
+    comment: Required array of pages.
+    group: partial
+  title:
+    type: string
+    optional: true
+    comment: Optional title of the card group.
+  loading:
+    type: select
+    default: eager
+    optional: true
+    comment: >-
+      Loading behavior of the image. The loading of lazily loaded images is
+      deferred until the image is within scrolling range of the viewport. This
+      should reduce the initial loading time of the website. It is recommended
+      to lazily load only those images that are below the pagefold.
+    options:
+      values:
+        - eager
+        - lazy
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the tab element, e.g. “w-50”.
+  color:
+    type: select
+    optional: true
+    comment: >-
+      Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - body

data/structures/mark.yml

@@ -0,0 +1,27 @@
+comment: Highlights text by applying a background color.
+arguments:
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the highlight element.
+  color:
+    type: select
+    optional: true
+    comment: >-
+      Theme color of the highlight. By default, the highlight uses the color of
+      the HTML mark function (usually yellow).
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+body:
+  optional: false
+  comment: Text to be marked.

data/structures/nav-item.yml

@@ -0,0 +1,62 @@
+comment: >-
+  Defines an individual item.
+arguments:
+  id:
+    type: string
+    optional: true
+    comment: Identification of the item.
+    group: partial
+  parentID:
+    type: string
+    optional: false
+    comment: Identification of the parent (e.g. nav control).
+    group: partial
+  header:
+    type: string
+    optional: false
+    comment: Header of the item.
+  show:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if the item should be shown. Only one can be shown at a
+      time.
+  disabled:
+    type: bool
+    optional: true
+    comment: Flag to indicate the item should be in a disabled state.
+  fade:
+    type: bool
+    optional: true
+    comment: Flag to make the tab pane fade in.
+    parent: cascade
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the item.
+  body:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    comment: The body content of the item, supports Markdown and HTML (if enabled).
+    group: partial
+  item_type:
+    type: select
+    optional: true
+    comment: Type of the item to render.
+    options:
+      values:
+        - accordion
+        - tab-pane
+    group: partial
+  illustration:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    group: partial
+body:
+  optional: false
+  comment: Content of the item.
+  group: shortcode

data/structures/nav.yml

@@ -0,0 +1,83 @@
+comment: >-
+  Displays a tab group of multiple items. Add nav-item inner elements for each
+  tab pane. 
+arguments:
+  id:
+    type: string
+    optional: true
+    comment: >-
+      Identifier of the tab group, uses a generated sequence if not specified.
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial
+  list:
+    type:
+      - page.Pages
+      - resource.Resources
+      - '[]map[string]interface {}'
+    optional: true
+    comment: Array of pages to be rendered as nav items.
+    group: partial
+  type:
+    type: select
+    optional: true
+    comment: Type of the tab group.
+    options:
+      values:
+        - tabs
+        - pills
+        - underline
+        - callout
+  vertical:
+    type: bool
+    default: false
+    optional: true
+    comment: Flag to show vertical tabs instead of horizontal tabs.
+  wrap:
+    type: bool
+    default: false
+    optional: true
+    comment: Flag to enable word wrapping of tab titles.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the tab group, e.g. `nav-fill`.
+  pane:
+    type: select
+    optional: true
+    default: none
+    comment: Style of the panes.
+    options:
+      values:
+        - none
+        - persona
+    group: partial
+  width:
+    type: select
+    optional: true
+    default: "100"
+    comment: Responsive width of the tab group.
+    options:
+      values:
+        - "50"
+        - "100"
+    group: partial
+  loading:
+    type: select
+    optional: true
+    default: eager
+    parent: cascade
+    comment: >-
+      Loading behavior of the image. The loading of lazily loaded images is
+      deferred until the image is within scrolling range of the viewport. This
+      should reduce the initial loading time of the website. It is recommended
+      to lazily load only those images that are below the page fold.
+    options:
+      values:
+        - lazy
+        - eager
+    group: partial

data/structures/navbar-item.yml

@@ -0,0 +1,34 @@
+comment: >-
+  Defines an individual item of the navigation bar.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial
+  menu:
+    type: '*navigation.MenuEntry'
+    optional: false
+    comment: Menu data to use for the navbar item.
+  parent:
+    type: '*navigation.MenuEntry'
+    optional: true
+    comment: Parent of the current navbar item.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the item.
+  cue:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if an external link should show a visual cue, defaults
+      to the setting `main.externalLinks.cue` in the site's parameters.
+  tab:
+    type: bool
+    optional: true
+    comment: >-
+      Flag to indicate if an external link should open in a new tab, defaults
+      to setting `main.externalLinks.tab` in the site's parameters.

data/structures/navbar.yml

@@ -0,0 +1,129 @@
+comment: >-
+  Displays a navigation header with a toggler. The menu items are derived from
+  the site's configuration. Nested items are supported at one-level depth. The
+  navigation bar includes a search area and a language switcher if applicable.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial
+  path:
+    type: path
+    optional: false
+    comment: Path of the active page.
+    group: shortcode
+  title:
+    type: string
+    optional: true
+    comment: >- 
+      Brand title, displayed when the logo is not set. Defaults to the site's
+      title.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the navbar container.
+  color:
+    type: select
+    optional: true
+    comment: >-
+      Background theme color of the navbar. Set the color to `body` or
+      `body-tertiary` for the navbar to respond to color mode  changes (e.g.
+      switching between dark and light). The navigation bar is transparent when
+      no color is set, but is set to the body color when scrolling to enhance
+      the contrast.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+        - body
+        - body-tertiary
+  id:
+    type: string
+    optional: true
+    comment: >-
+      Identification of the navbar, defaults to `navbar-0`. The id is used by
+      several child elements, including a color mode switcher, version switcher,
+      and collapse panel.
+  menus:
+    type: string
+    optional: true
+    default: main
+    comment: Name of the menu configuration.
+  size:
+    type: select
+    optional: true
+    comment: Breakpoint of the navbar toggler.
+    default: md
+    options:
+      values:
+        - xs
+        - sm
+        - md
+        - lg
+        - xl
+  style:
+    type: select
+    optional: true
+    default: light
+    comment: Style of the navbar.
+    options:
+      values:
+        - light
+        - dark
+    group: partial
+  mode:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      Flag to include a color mode switcher, defaults to `true` when dark mode
+      is enabled.
+  search:
+    type: bool
+    optional: true
+    default: true
+    comment: Flag to include a search input.
+  fixed:
+    type: bool
+    optional: true
+    default: false
+    comment: Flag to indicate the navbar should stick to the top.
+    group: partial
+  overlay:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to indicate if the navbar should render as an overlay on the current
+      page.
+    group: partial
+    release: v0.22.6
+  overlayMode:
+    type: select
+    optional: true
+    default: dark
+    comment: Color mode of the overlay.
+    options:
+      values:
+        - light
+        - dark
+        - none
+    group: partial
+    release: v0.23.0
+  logo:
+    type: path
+    optional: true
+    comment: >-
+      Address of the logo image, defaults to the parameter `logo` set in the
+      `main` section of the site's parameter configuration.

data/structures/page-alert.yml

@@ -0,0 +1,14 @@
+comment: >-
+  Adds a dismissible alert message to the top of the page, above the main menu.
+  The alert uses the following scratch variables:
+    - pageAlertMsg
+    - pageAlertURL
+    - version
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial

data/structures/pagination.yml

@@ -0,0 +1,21 @@
+comment: >-
+  Adds a pagination element to a page. This allows to split long lists across
+  multiple pages to ease navigation. Set 'paginate' in the site configuration to
+  define the maximum amount of items to display on a list page.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial
+  format:
+    type: select
+    optional: true
+    default: default
+    comment:
+    options:
+      values:
+        - default
+        - terse

data/structures/persona.yml

@@ -0,0 +1,60 @@
+comment: >-
+  Display a custom persona card.
+arguments:
+  path:
+    type: path
+    optional: true
+    comment: >-
+      Path of the page that defines the card content. You can set `title`,
+      `href`, `thumbnail` and the inner content individually too.
+  title:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    comment: Title of the card.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the card element, e.g. `w-50`.
+  color:
+    type: select
+    optional: true
+    default: primary
+    comment: Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+        - body
+        - body-tertiary
+  href:
+    type:
+      - string
+      - template.URL
+    optional: true
+    comment: Address for the button or hyperlink.
+  content:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    comment: Content of the card.
+    group: partial
+  thumbnail:
+    type: url
+    optional: true
+    comment: Thumbnail image url, displayed on top or the left of the card.
+body:
+  optional: true
+  comment: >-
+    Description of the card.
+  group: shortcode

data/structures/release.yml

@@ -0,0 +1,40 @@
+comment: >-
+ Displays a release button that links to a specific release. Use the state to
+ indicate if it is a new or deprecated feature.
+arguments:
+  version:
+    type: string
+    optional: false
+    comment: Version string, expects semver notation with a `v` prefix.
+  state:
+    type: select
+    optional: true
+    default: new
+    comment: State of the feature.
+    options:
+      values:
+        - new
+        - deprecated
+  short:
+    type: bool
+    optional: true
+    comment: Flag to indicate the release button should use short notation.
+  size:
+    type: select
+    optional: true
+    default: md
+    comment: Size of the button.
+    options:
+      values:
+        - sm
+        - md
+        - lg
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the button element.
+  inline:
+    type: bool
+    optional: true
+    default: false
+    comment: Flag to render the release button inline.

data/structures/section-header.yml

@@ -0,0 +1,16 @@
+comment: Renders the header of a page section.
+arguments:
+  title:
+    type: string
+    optional: true
+    comment: Title of the section.
+  description:
+    type: string
+    optional: true
+    comment: Section description.
+  content:
+    type:
+      - string
+      - template.HTML
+    optional: true
+    comment: Section content.

data/structures/section-menu.yml

@@ -0,0 +1,9 @@
+comment: Renders the section menu of a single page.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial

data/structures/sharing.yml

@@ -0,0 +1,9 @@
+comment: Renders the social sharing buttons for a single page.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial

data/structures/sidebar.yml

@@ -0,0 +1,24 @@
+comment: >-
+  Renders the sidebar navigation of a single page. It is intended to be used as
+  companion to the main navigation and is typically used in content-heavy
+  sections, such as documentation pages. On smaller screens, the sidebar is
+  replaced with an offcanvas element. In this case, the main navigation receives
+  an additional toggler on the left of the screen.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial
+  menu:
+    type: '[]interface {}'
+    optional: true
+    comment: Path of the sidebar navigation menu.
+  version:
+    type: string
+    optional: true
+    comment: >-
+      Version of the sidebar navigation, used to define the base URL of
+      generated links, together with the page's section.

data/structures/spinner.yml

@@ -0,0 +1,36 @@
+comment: >-
+  Use the spinner shortcode to indicate the loading state of a component or
+  page. The inner content is used as alternative description. 
+arguments:
+  class:
+    type: string
+    optional: true
+    comment: >-
+      Class attribute of the wrapping element, e.g. `text-center`.
+  color:
+    type: select
+    optional: true
+    default: primary
+    comment: >-
+      Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - white
+        - black
+  grow:
+    type: bool
+    optional: true
+    default: false
+    comment: Flag to indicate the spinner is growing instead of rotating.
+body:
+  optional: false
+  comment: >-
+    Alternative description.

data/structures/sub.yml

@@ -0,0 +1,8 @@
+comment: >-
+  Displays text in subscript.
+arguments:
+  text:
+    type: string
+    optional: false
+    position: 0
+    comment: Text to display in subscript. You can omit the argument name.

data/structures/sup.yml

@@ -0,0 +1,8 @@
+comment: >-
+  Displays text in superscript.
+arguments:
+  text:
+    type: string
+    optional: false
+    position: 0
+    comment: Text to display in superscript. You can omit the argument name.

data/structures/table.yml

@@ -0,0 +1,30 @@
+comment: >-
+  Makes a markdown table responsive. Responsive tables scroll horizontally to
+  improve their layout on smaller screens.
+arguments:
+  breakpoint:
+    type: select
+    optional: true
+    position: 0
+    comment: >-
+      By default, the table shortcode is responsive for all viewports. When a
+      breakpoint is set, the table will behave normally and not scroll
+      horizontally from the provided breakpoint and up. Use `none` to disable
+      this behavior. You can specify multiple breakpoints when using positional
+      arguments.
+    options:
+      values:
+        - none
+        - sm
+        - md
+        - lg
+        - xl
+        - xxl
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the table element, e.g. `table-striped-columns w-auto`.
+body:
+  type: string
+  optional: false
+  comment: Table input in markdown format.

data/structures/timeline.yml

@@ -0,0 +1,31 @@
+comment: >-
+  Shows items ordered on a vertical timelime.
+arguments:
+  data:
+    type: string
+    optional: false
+    comment: >-
+      Filename of the timeline input data. You can omit the file extension. The
+      file should reside in the data folder.
+  background:
+    type: select
+    optional: true
+    comment: >-
+      Border color of the connector dots, defaults to the body background color.
+      If set, uses a subtle background color that is adaptive to the current
+      color mode.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+  class:
+    type: string
+    optional: true
+    comment: >-
+      Class attribute of the timeline's container.

data/structures/toast.yml

@@ -0,0 +1,29 @@
+comment: >-
+  Prepares a toast message. Use a trigger to display the message.
+arguments:
+  id:
+    type: string
+    optional: true
+    comment: >-
+      Unique identifier of the toast message, defaults to `toast-message-n`
+      with sequence n.
+  header:
+    type: string
+    optional: true
+    comment: Header of the toast message. Uses the site title by default.
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the toast element.
+  message:
+    type:
+      - string
+      - template.HTML
+    optional: false
+    comment: Toast message.
+    group: partial
+body:
+  type: string
+  optional: false
+  comment: Toast mesage.
+  group: shortcode

data/structures/toc.yml

@@ -0,0 +1,9 @@
+comment: Renders the table of contents of a single page.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+    group: partial

data/structures/tooltip.yml

@@ -0,0 +1,50 @@
+comment: >-
+ Displays a tooltip for a link. The inner content is used as hyperlink text.
+arguments:
+  title:
+    type: string
+    optional: true
+    comment: Plain text to display in the tooltip.
+  href:
+    type: url
+    optional: true
+    comment: Address for the button or hyperlink.
+  class:
+    type: string
+    optional: true
+    parent: merge
+    comment: Class attribute of the tooltip's button element.
+  color:
+    type: select
+    optional: true
+    default: dark
+    comment: Theme color of the element.
+    options:
+      values:
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+  placement:
+    type: select
+    optional: true
+    default: top
+    comment: Position of the tooltip.
+    options:
+      values:
+        - top
+        - bottom
+        - left
+        - right
+  spacing:
+    type: bool
+    optional: true
+    default: true
+    comment: Flag to add spacing to the inline tooltip.
+body:
+  optional: false
+  comment: Hyperlink text.

data/structures/version.yml

@@ -0,0 +1,5 @@
+comment: >-
+  Returns the current version defined in 'package.json` in the repository root,
+  or in the documentation base path ('params.docs.basePath') if specified. The
+  returned version includes a 'v' prefix. The partial returns nothing when no
+  match is found. The partial does not require any arguments.

data/structures/youtube.yml

@@ -0,0 +1,26 @@
+comment: >-
+  Embeds a responsive video player for YouTube videos. Only the ID of the video
+  is required. In privacy-enhanced mode, YouTube will not store information
+  about visitors on your website unless the user plays the embedded video.
+arguments:
+  title:
+    type: string
+    optional: true
+    comment: >-
+      Title of the video.
+  class:
+    type: string
+    optional: true
+    position: 1
+    comment: >-
+      Class attribute of the video wrapper element.
+  id:
+    type: string
+    optional: false
+    position: 0
+    comment: Identifier of the video to be embedded.
+  autoplay:
+    type: bool
+    optional: true
+    default: false
+    comment: Flag indicating the video should start playing immediately when loaded.

exampleSite/.gitignore

@@ -0,0 +1,7 @@
+/_vendor
+public/
+resources/
+
+.DS_store
+.hugo_build.lock
+.hvm

exampleSite/assets/svgs/custom/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>
+</svg>

exampleSite/config/_default/hugo.toml

@@ -1,11 +1,10 @@
 resourcedir = '../resources/'
 title = "Hinode"
-copyright = "Copyright © 2023 Mark Dumay."
+copyright = "Copyright © 2024 Mark Dumay."
 paginate = 9
 enableGitInfo = true
 
 # additional settings
-googleAnalytics = "G-T85PPZ36GN"
 baseURL = "https://demo.gethinode.com/"
 canonifyURLs = false
 enableEmoji = true
@@ -63,6 +62,8 @@ home = ["HTML", "RSS", "REDIR"]
     disableInlineCSS = true
   [services.twitter]
     disableInlineCSS = true
+  [services.googleAnalytics]
+    ID = "G-T85PPZ36GN"
 
 [outputFormats]
   [outputFormats.XML]
@@ -73,7 +74,16 @@ home = ["HTML", "RSS", "REDIR"]
     permalinkable = false
     name = "xml"
 
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+  [minify.tdewolff.html]
+    keepWhitespace = true
+
 [module]
-  replacements = 'github.com/gethinode/hinode -> ../..'
+  # Build and serve using local hinode clone declared in the named Hugo workspace:
+  workspace = "hinode.work"
   [[module.imports]]
     path = "github.com/gethinode/hinode"

exampleSite/config/_default/params.toml

@@ -4,15 +4,25 @@
     enableDarkMode = true
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = true
         tab = true
+    [main.build]
+        transpiler = "dartsass"
 
 [modules]
     core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
+    optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
+    [modules.flexsearch]
+        frontmatter = false
+        filter = ""
     [modules.fontawesome]
         inline = true
         debug = true
@@ -34,14 +44,24 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    overlay = false
+    overlayMode = "dark"
+    horizontal = false
+    offset = "5.5rem"
+    offsetXS = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true
@@ -98,7 +118,7 @@
         header = "full"
         footer = "none"
         orientation = "stacked"
-        style = "border-0 card-zoom"
+        style = "border-0 card-zoom card-body-margin"
         homepage = 3
         separator = true
     [sections.projects]
@@ -138,7 +158,8 @@
     themeFont = "Inter"
     # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
     themeFontPath = "/fonts" # local path
-    purge = true
+    themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
+    purge = false # TODO: fix purge setting of example site
 # toml-docs-end theme-colors
 
 [schema]
@@ -167,15 +188,6 @@
     images = ["logo.png"]
     locale = "en_US"
 
-[comments]
-    enabled = false
-    repo = "" # Replace with your repository.
-    #issueTerm = "pathname" # pathname, url, title, og:title
-    #label = "comment"
-    # By default, light and dark mode correspond to github-light and github-dark, respectively.
-    # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
-    #theme = "" 
-
 [links]
     bs_badge_heading = "https://getbootstrap.com/docs/5.3/components/badge/#headings"
     hinode_docs = "https://gethinode.com"
@@ -183,5 +195,4 @@
     mozilla_image = "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"
     observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
     pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
-    utterances = "https://utteranc.es"
     hinode = "https://gethinode.com"

exampleSite/config/_default/server.toml

@@ -7,15 +7,14 @@ for = '/**'
     X-XSS-Protection = "1; mode=block"
     Content-Security-Policy = """\
         default-src 'self'; \
-        script-src 'self' \
+        script-src 'self' https://*.google-analytics.com https://*.googletagmanager.com; \
-            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
+        style-src 'self' https://fonts.googleapis.com https://www.youtube.com; \
-        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
         connect-src 'self'
             https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
+        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
         img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
         manifest-src 'self'; \
         media-src 'self' \

exampleSite/config/postcss.config.js

@@ -0,0 +1,47 @@
+const autoprefixer = require('autoprefixer')({})
+const cssnano = require('cssnano')({
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./hugo_stats.json'],
+  defaultExtractor: (content) => {
+    const els = JSON.parse(content).htmlElements
+    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
+  },
+  dynamicAttributes: ['data-bs-theme'],
+  safelist: [
+    ...whitelister([
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_clipboard.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_command.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_nav.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_navbar.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_search.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_syntax.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_syntax-dark.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_syntax-light.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_table.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/components/_video.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/theme/fonts.scss',
+      './_vendor/github.com/gethinode/hinode/assets/scss/theme/theme.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_modal.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_utilities.scss'
+    ])
+  ]
+})
+
+module.exports = {
+  plugins: [
+    autoprefixer,
+    cssnano,
+    purgecss
+  ]
+}

exampleSite/content/en/_index.md

@@ -1,14 +1,15 @@
 ---
 author: Mark Dumay
 title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
 thumbnail:
     url: /img/sunrise.jpg
     author: Harris Vo
     authorURL: https://unsplash.com/@hoanvokim
     origin: https://unsplash.com/photos/ZX6BPboJrYk
     originName: Unsplash
+actions:
+  about:
+    url: "about"
+    title: "About"
 ---
-
-A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-
-{{< button href="about" >}}About{{< /button>}}

exampleSite/content/en/about.md

@@ -8,7 +8,7 @@ showComments: false
 
 {{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
 
-{{< card-group class="text-center border-0" padding="3" >}}
+{{< card-group align="center" class="border-0" padding="3" >}}
     {{< card title="Bootstrap framework" icon="fab bootstrap" >}}
         Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.
     {{< /card >}}
@@ -26,8 +26,7 @@ Additional features include:
 * Support for multiple languages
 * Reusable Bootstrap components through configurable shortcodes and partials
 * Versioned documentation, including sidebar navigation and version switcher
-* Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
+* Responsive image handling for multiple screen sizes and resolutions
-* Reponsive image handling for multiple screen sizes and resolutions
 * Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
 * Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})
 {.tickmark}

exampleSite/content/en/blog/bootstrap-elements.md

@@ -14,6 +14,16 @@ thumbnail:
 
 Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
 
+## Abbr
+
+As an example, the following shortcode displays the full text of an abbreviation on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* abbr "CI/CD" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Accordion
 
 As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
@@ -22,7 +32,8 @@ As an example, the following shortcode displays an accordion with three elements
 {{< example lang="hugo" >}}
 {{</* accordion */>}}
   {{</* accordion-item header="Accordion Item #1" show="true" */>}}
-    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark renderer. The item is shown by adding the value `show` to the `class` argument.
+    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark
+    renderer. The item is shown by adding the value `show` to the `class` argument.
   {{</* /accordion-item */>}}
   {{</* accordion-item header="Accordion Item #2" */>}}
     This is the second item's accordion body.
@@ -48,16 +59,29 @@ As an example, the following shortcode displays a simple alert.
 
 ## Badge
 
-Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
+Use the badge shortcode to display a badge for a heading.
 
+<!-- markdownlint-disable MD037 -->
 {{< example >}}
-<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
+Heading 1 {{</* badge title="New" */>}}
-<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
+{.h1}
-<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
+
-<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
+Heading 2 {{</* badge title="New" */>}}
-<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
+{.h2}
-<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+
+Heading 3 {{</* badge title="New" */>}}
+{.h3}
+
+Heading 4 {{</* badge title="New" */>}}
+{.h4}
+
+Heading 5 {{</* badge title="New" */>}}
+{.h5}
+
+Heading 6 {{</* badge title="New" */>}}
+{.h6}
 {{< /example >}}
+<!-- markdownlint-enable MD037 -->
 
 ## Breadcrumb
 
@@ -101,7 +125,8 @@ As an example, the following shortcode displays a stacked card that links to the
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary" header="publication" footer="none" /*/>}}
+{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary"
+  header="publication" footer="none" button=true /*/>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -111,7 +136,7 @@ As an example, the following shortcode displays a card group of three elements.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card-group padding="3" */>}}
+{{</* card-group padding="3" gutter="3" */>}}
     {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
         Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
         Sass files.
@@ -151,7 +176,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
 {{</* /button */>}}
 
 {{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
-    Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
+    Some placeholder content for the collapse component. This panel is *hidden by default* but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
 {{< /example >}}
@@ -217,13 +242,14 @@ Use the `file` shortcode to print and highlight the full content of a given inpu
 
 ## Icon
 
-As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+As an example, the following shortcodes show a square check, a brand logo, a circle check, and a custom icon.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* fa square-check */>}}
 {{</* fab linkedin */>}}
 {{</* fas circle-check */>}}
+{{</* icon custom activity */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -237,6 +263,22 @@ As an example, the following shortcode displays an image with rounded corners an
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+As an example, the following shortcode displays a regular vector image.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_icon.svg" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+As an example, the following shortcode displays a vector image with a symbol reference.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="/img/logo_var.svg#logo" class="col-sm-6 col-lg-4" wrapper="text-center" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Link
 
 As an example, the following shortcodes render links in different formats.
@@ -253,15 +295,25 @@ As an example, the following shortcodes render links in different formats.
 - {{</* link url="projects/another-project" /*/>}}
 - {{</* link url="/projects/another-project" /*/>}}
 - {{</* link url="../projects/another-project" case=false /*/>}}
-- {{</* link "/about/" /*/>}}
+- {{</* link "about" /*/>}}
-- {{</* link "/fr/about/" /*/>}}
+- {{</* link "/fr/a-propos/" /*/>}}
-- {{</* link "/fr/about" >}}About (French){{< /link */>}}
+- {{</* link "/fr/a-propos" >}}About (French){{< /link */>}}
 - {{</* link "#image" /*/>}}
 - {{</* link "components/#map" /*/>}}
 
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Mark
+
+Use the `mark` shortcode to highlight text. The inner content is used as input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+Use the mark shortcode to {{</* mark >}}highlight{{< /mark */>}} specific text.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Nav
 
 As an example, the following shortcode displays a tab group with vertically aligned pills.
@@ -270,7 +322,8 @@ As an example, the following shortcode displays a tab group with vertically alig
 {{< example lang="hugo" >}}
   {{</* nav type="pills" vertical="true" */>}}
     {{</* nav-item header="Nav Item #1" show="true" */>}}
-      This is the first item's nav body. It supports HTML content, if enabled in the goldmark renderer. The item is shown by adding the value `show` to the `class` argument.
+      This is the first item's nav body. It supports HTML content, if enabled in the goldmark
+      renderer. The item is shown by adding the value `show` to the `class` argument.
     {{</* /nav-item */>}}
     {{</* nav-item header="Nav Item #2" */>}}
       This is the second item's nav body.
@@ -292,6 +345,24 @@ As an example, the following shortcode displays a light navigation header.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Persona
+
+As an example, the following shortcode displays a persona card with a primary color.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* persona thumbnail="/img/creator-1x1.jpg" title="Creators" color="primary" */>}}
+  As a content creator you value your independence. You like to take control of your
+  online and offline presence. You want to focus on growing your audience, without
+  limitations.
+
+  Hinode gives you the tools to publish your blog in the way that you want. You have
+  full ownership and control of your content. That is why content creators choose
+  Hinode.
+{{</* /persona */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Release
 
 As an example, the following shortcode displays a default release button.
@@ -314,13 +385,49 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->
 
+## Sub
+
+As an example, the following shortcode displays subscript text.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+H{{</* sub 2 */>}}O is a liquid.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Sup
+
+As an example, the following shortcode displays superscript text.
+
+<!-- markdownlint-disable MD037 -->
+{{< example >}}
+2{{</* sup 10 */>}} is 1024.
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Table
+
+As an example, the following shortcode displays a responsive table.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="markdown" >}}
+{{</* table */>}}
+| #  | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
+|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
+| 1. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
+| 2. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
+| 3. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
+{{</* /table */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Timeline
 
-As an example, the following shortcode displays a timeline with the file `data/timeline-en.yml` as data.
+As an example, the following shortcode displays a timeline with the file `data/timeline.en.yml` as data.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* timeline data="timeline-en" background="dark" */>}}
+{{</* timeline data="timeline" background="dark" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -339,11 +446,11 @@ As an example, the following shortcode displays a button that, when clicked, tri
 {{</* /button */>}}
 
 {{</* toast id="toast-example-1" header="First title" */>}}
-    This is the first toast message.
+    This is the first toast message. It supports `markdown.`
 {{</* /toast */>}}
 
 {{</* toast id="toast-example-2" header="Second title" */>}}
-    This is the second toast message.
+    This is the second toast message. It supports `markdown.`
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -354,6 +461,6 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
+{{</* tooltip color="primary" title="Tooltip caption" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

exampleSite/content/en/blog/components.md

@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Components
-date: 2023-07-21
+date: 2023-09-23
 description: Use shortcodes to add predefined components powered by external libraries.
 tags: ["bootstrap", "shortcode"]
 thumbnail:
@@ -10,11 +10,21 @@ thumbnail:
   authorURL: https://unsplash.com/@ryoji__iwata
   origin: Unsplash
   originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet"]
+modules: ["katex", "leaflet", "lottie"]
 ---
 
 Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
 
+## Animation
+
+As an example, the following shortcode shows an animation that plays on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Formula (KaTeX)
 
 As an example, the following markdown renders two formulas using the KaTeX typesetting library.

exampleSite/content/en/blog/fourth-post.md

@@ -1,9 +1,10 @@
 ---
 author: Mark Dumay
-title: Fourth post
+title: Fourth post (excluded from search)
 date: 2023-01-01
-description: This is my fourth blog post.
+description: This is my fourth blog post. It is excluded from the search index.
 tags: ["blog"]
+searchExclude: true
 thumbnail:
   url: img/flowers.jpg
   author: Arvee Marie