Merge pull request #238 from gethinode/develop

Git commits

.eslintignore

@@ -1,3 +1,4 @@
+assets/js/analytics.js
 assets/js/color.js
 assets/js/flexsearch.js
 assets/js/vendor

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,8 +27,9 @@ If applicable, add a copy of Hugo's log messages.
 If applicable, add screenshots to help explain your problem.
 
 **Environment (please complete the following information):**
- - Host OS: [e.g. macOS Ventura 13.0]
- - Node version: [e.g. node v18.10.0]
+ - 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)]
 

.github/workflows/auto-merge.yml

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

assets/js/analytics.js

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

assets/js/animation.js

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

assets/js/critical/color.js

@@ -4,8 +4,6 @@
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
 
-{{ if site.Params.main.enableDarkMode }}
-
 (() => {
   'use strict'
 
@@ -30,17 +28,24 @@
   setTheme(getPreferredTheme())
 
   const showActiveTheme = theme => {
-    const activeSelector = document.querySelector('.theme-icon-active')
-    const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const activeIcon = activeButton.querySelector('i')
+    const activeSelectors = document.querySelectorAll('.theme-icon-active')
+    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
+    if (activeButtons.length > 0) {
+      const activeIcon = activeButtons[0].querySelector('i')
 
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      element.classList.remove('active')
-    })
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+      })
 
-    activeSelector.className = activeIcon.className
-    activeSelector.className = activeSelector.className.replace('theme-icon', 'theme-icon-active')
-    activeButton.classList.add('active')
+      for (let i = 0; i < activeSelectors.length; ++i) {
+        activeSelectors[i].className = activeIcon.className
+        activeSelectors[i].className = activeSelectors[i].className.replace('theme-icon', 'theme-icon-active')
+      }
+
+      for (let i = 0; i < activeButtons.length; ++i) {
+        activeButtons[i].classList.add('active')
+      }
+    }
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -63,5 +68,3 @@
       })
   })
 })()
-
-{{ end }}

assets/js/flexsearch.js

@@ -81,7 +81,7 @@ Source:
     // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
     // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
     //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
+    {{ $list := where (where site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
     {{ $len := (len $list) -}}
   
     index.add(

assets/js/navbar.js

@@ -1,5 +1,6 @@
 const navbar = document.querySelector('.navbar')
 const toggler = document.getElementById('main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
 // set the navbar background color to opaque when scrolling past a breakpoint
 window.onscroll = () => {
@@ -14,3 +15,10 @@ window.onscroll = () => {
 toggler.onclick = () => {
   navbar.classList.toggle('navbar-expanded')
 }
+
+// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+for (let i = 0; i < modeSelectors.length; ++i) {
+  modeSelectors[i].onclick = () => {
+    toggler.click()
+  }
+}

assets/scss/app.scss

@@ -53,9 +53,6 @@
 // Import Bootstrap helpers
 @import "bootstrap/scss/helpers";
 
-// Import Bootstrap utilities
-@import "bootstrap/scss/utilities/api";
-
 // Import Font Awesome
 // scss-docs-start awesome
 @import "@fortawesome/fontawesome-free/scss/fontawesome";
@@ -74,12 +71,14 @@
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/persona.scss";
 @import "components/popover.scss";
 @import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";
+@import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
@@ -97,4 +96,7 @@
 {{ end }}
 
 // Import theme placeholder
-@import "theme/theme.scss";
+@import "theme/theme.scss";
+
+// Import Bootstrap utilities API
+@import "bootstrap/scss/utilities/api";

assets/scss/common/_animation.scss

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

assets/scss/common/_icons.scss

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

assets/scss/common/_styles.scss

@@ -18,3 +18,132 @@ a:active {
 .tickmark li::marker {
     content: "✓ ";
 }
+
+.anchor
+{
+    color: transparent;
+}
+
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        ),
+    )
+);
+
+@media screen and (orientation: portrait) {
+    .min-vh-custom {
+        min-height: 25vh !important
+    }
+}
+
+@media screen and (orientation: landscape) {
+    .min-vh-custom {
+        min-height: 50vh !important
+    }
+}
+
+:root {
+    --nav-height: 90px;
+}
+
+@include media-breakpoint-up(sm) {
+    .ratio-section {
+        min-height: calc(min(100vh, 576px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(md) {
+    .ratio-section {
+        min-height: calc(min(100vh, 768px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(lg) {
+    .ratio-section {
+        min-height: calc(min(100vh, 992px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1200px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xxl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1400px) - var(--nav-height));
+    }    
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        )
+    )
+);

assets/scss/components/_navbar.scss

@@ -4,13 +4,17 @@
 
 .navbar {
     transition: 0.5s ease-in-out;
-    background-color: none;
+    background-color: transparent;
 }
 
 .nav-active, .navbar-expanded {
     background-color: var(--bs-body-bg);
 }
 
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);
@@ -24,6 +28,10 @@
     border: 0 if($enable-important-utilities, !important, null);
 }
 
+.fw-30 {
+    width: 30px !important;
+}
+
 /* Lines of the Toggler */
 .toggler-icon {
     width: 30px;

assets/scss/components/_persona.scss

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

assets/scss/components/_sidebar.scss

@@ -10,7 +10,16 @@
 }
 
 .sidebar-item {
-    color: black;
+    color: rgba(0, 0, 0, 0.65);
+    margin-left: 0 !important;
+    padding-left: 0.85rem !important;
+    display: inline-block;
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: black;
+    }
 }
 
 .btn-toggle {
@@ -61,6 +70,14 @@
     @include color-mode(dark) {
         .sidebar-item {
             color: var(--bs-tertiary-color);
+            margin-left: 0 !important;
+            padding-left: 0.85rem !important;
+        
+            &.active,
+            &:hover,
+            &:focus {
+                color: var(--bs-secondary-color);
+            }
         }
 
         .btn-toggle {

assets/scss/components/_toc.scss

@@ -1,20 +1,21 @@
 //
-// Table of contents sidebar
+// Table of contents sidebar & drop-down panel
 //
 // scss-docs-start toc
-.toc {
+.toc-sidebar {
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 7rem);
+    height: calc(100vh - 5rem);
     overflow-y: auto;
-    top: $navbar-offset;
+    top: 5rem;
 }
 
 // scss-docs-end toc
 
 .toc nav {
     font-size: 0.875rem;
+    margin-bottom: -0.875rem;
 }
 
 .toc nav ul {
@@ -33,6 +34,10 @@
 
 .toc nav a {
     color: inherit;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
 }
 
 .toc nav a:not(:hover) {
@@ -42,3 +47,21 @@
 .toc nav a code {
     font: inherit;
 }
+
+.toc-button {
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-body-bg);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-bg: var(--bs-body-bg);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
+        outline: none;
+    }
+}

assets/scss/helpers/_colored-links.scss

@@ -1,25 +1,39 @@
-// stylelint-disable function-name-case, declaration-no-important
-
 // scss-docs-start colored-links
-@each $color, $value in $theme-colors {
-    $contrast-color: color-contrast($value);
-    $color-rgb: to-rgb($value);
+$custom-colors: (
+    "primary": "light", 
+    "secondary": "light", 
+    "success": "light", 
+    "danger": "light", 
+    "dark": "light", 
+    "black": "light",
+    "info": "dark", 
+    "warning": "dark", 
+    "light": "dark", 
+    "white": "dark",
+    "body": "adaptive",
+    "body-tertiary": "adaptive"
+);
+
+@each $color, $value in $custom-colors {
+    $main-color: var(--bs-body-color);
+    $emphasize-color: var(--bs-secondary-color);
+
+    @if $value == "light" {
+        $main-color: $white;
+        $emphasize-color: shade-color($main-color, $link-shade-percentage);
+    } @else if $value == "dark" {
+        $main-color: $black;
+        $emphasize-color: tint-color($main-color, $link-shade-percentage);
+    }
 
     .link-bg-#{$color} {
-        color: $contrast-color if($enable-important-utilities, !important, null); 
-        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: $main-color if($enable-important-utilities, !important, null); 
 
-        @if $link-shade-percentage != 0 {
-            &:hover,
-            &:focus {
-                color: if($contrast-color == $color-contrast-light, 
-                shade-color($contrast-color, $link-shade-percentage),
-                tint-color($contrast-color, $link-shade-percentage))
-                    if($enable-important-utilities, !important, null);
-            }
+        &:hover,
+        &:focus {
+            color: $emphasize-color if($enable-important-utilities, !important, null);
         }
     }
 }
 
 // scss-docs-end colored-links
-// stylelint-enable function-name-case, declaration-no-important

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

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

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

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

config/_default/.forestry/settings.yml

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

config/_default/config.toml

@@ -6,6 +6,7 @@ enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
+googleAnalytics = "G-T85PPZ36GN"
 baseURL = "https://demo.gethinode.com/"
 canonifyURLs = false
 enableEmoji = true
@@ -17,7 +18,7 @@ enableInlineShortcodes = true
 ignoreErrors = ["error-remote-getjson"]
 
 # toml-docs-start timeout
-timeout = "60s"
+timeout = "180s"
 # toml-docs-end timeout
 
 # toml-docs-start language

config/_default/params.toml

@@ -3,6 +3,7 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    modes = ["light", "dark"]
 # toml-docs-end main
 
 # toml-docs-start docs
@@ -16,27 +17,29 @@
     sections = ["blog", "projects"]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
     fullCover = false
+    centerHeadline = false
     style = ""
 # toml-docs-end home
 
 # toml-docs-start navigation
 [navigation]
+    anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "5em"
+    offset = "3.8em"
     search = true
     breadcrumb = false
     toc = true
     sidebar = true
 # toml-docs-end navigation
 
-# toml-docs-start list
-[list]
-    [blog]
+# toml-docs-start sections
+[sections]
+    [sections.blog]
         title = "Blog"
         sort = "date"
-        reverse = false
+        reverse = true
         cols = 3
         color = ""
         padding = "0"
@@ -46,12 +49,12 @@
         style = "border-0 card-zoom"
         homepage = 3
         separator = true
-    [projects]
+    [sections.projects]
         title = "Projects"
         sort = "title"
         reverse = false
         cols = 1
-        color = ""
+        color = "body-tertiary"
         padding = "3"
         header = "none"
         footer = "tags"
@@ -59,7 +62,7 @@
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false
-# toml-docs-end list
+# toml-docs-end sections
 
 [favicon]
     logo = "img/favicon.png"

config/_default/server.toml

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

content/en/blog/bootstrap-elements.md

@@ -95,11 +95,11 @@ As an example, the following shortcode displays a group of three buttons.
 
 ## Card
 
-As an example, the following shortcode displays a stacked card with icon that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
+As an example, the following shortcode displays a stacked card that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -192,13 +192,34 @@ As an example, the following shortcode displays an image with rounded corners an
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Nav
+
+As an example, the following shortcode displays a tab group with vertically aligned pills.
+
+<!-- markdownlint-disable MD037 -->
+{{< 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. The item is shown by adding the value
+      <code>show</code> to the <code>class</code> argument.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #2" */>}}
+      This is the second item's nav body. It too supports HTML content.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #3" */>}}
+      This is the third item's nav body.
+    {{</* /nav-item */>}}
+  {{</* /nav */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Navbar
 
 As an example, the following shortcode displays a light navigation header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -236,8 +257,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 demonstration
-{{</* /tooltip */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/nl/blog/bootstrap-elements.md

@@ -95,11 +95,11 @@ De volgende shortcode toont een groep van drie knoppen.
 
 ## Card
 
-De volgende shortcode toont een kaart met een icoon dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
+De volgende shortcode toont een kaart dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -192,13 +192,34 @@ De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhoud
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Nav
+
+De volgende shortcode toont een groep met verticale tabbladen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+  {{</* nav type="pills" vertical="true" */>}}
+    {{</* nav-item header="Nav Item #1" show="true" */>}}
+    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
+    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #2" */>}}
+    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #3" */>}}
+    Dit is de inhoud van het derde element.
+    {{</* /nav-item */>}}
+  {{</* /nav */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Navbar
 
 De volgende shortcode toont een navigatiemenu.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -236,8 +257,6 @@ De volgende shortcode toont een uitleg voor een gekleurde link.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstratie
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

i18n/de.yaml

@@ -68,7 +68,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Ups! Diese Seite existiert nicht. Versuche es über die"
+  translation: "Diese Seite existiert nicht. Versuche es über die"
 - id: pageNotFoundTitle
   translation: "Nicht gefunden"
 - id: pageNotFoundHome

i18n/en.yaml

@@ -27,8 +27,14 @@
   translation: "Next Post"
 - id: recentProjects
   translation: "Projects"
+- id: moreFeatures
+  translation: "More Features"
+- id: moreGuides
+  translation: "More Guides"
 - id: moreProjects
   translation: "More Projects"
+- id: moreUsers
+  translation: "More Users"
 - id: read
   translation: "read"
 - id: minutesShort
@@ -65,12 +71,14 @@
   translation: "Auto"
 - id: toggleMainNav
   translation: "Toggle main navigation"
+- id: demo
+  translation: "Demo"
 
 # 404 page
 - id: pageNotFound
-  translation: "Oops! This page doesn't exist. Try going back to our"
+  translation: "The page you are looking for does not exist or another error occurred. Try going back to our"
 - id: pageNotFoundTitle
-  translation: "Not found"
+  translation: "Page not found"
 - id: pageNotFoundHome
   translation: "home page"
 

i18n/nl.yaml

@@ -68,7 +68,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Oeps, deze pagina bestaat niet. Ga terug naar het"
+  translation: "Deze pagina bestaat niet of er is een andere fout opgetreden. Ga terug naar het"
 - id: pageNotFoundTitle
   translation: "Niet gevonden"
 - id: pageNotFoundHome

layouts/404.html

@@ -1,8 +1,12 @@
 {{ define "main"}}
-    <main id="main">
-      <div>
-       <h1 id="title">{{ T "pageNotFoundTitle" }}</h1>
-       <p>{{ T "pageNotFound" }} <a href="{{ "/" | relURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
-      </div>
-    </main>
+    <div class="container-xxl flex-fill d-flex align-content-center flex-wrap">
+        <div class="w-100 text-center">
+            <span class="text-secondary fw-bold">
+                <i class="fa-regular fa-face-frown fa-10x"></i>
+                <p class="display-1 mt-3 fw-bold">404</p>
+                <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
+            </span>
+            <p>{{ T "pageNotFound" }} <a href="{{ "/" | relURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
+        </div>
+    </div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,5 @@
+{{ if site.Params.navigation.anchor }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}"><i class="fa-solid fa-link anchor"></i></a></h{{ .Level }}>
+{{ else }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
+{{ end }}

layouts/_default/baseof.html

@@ -1,12 +1,17 @@
+{{- $section := .Section }}
 {{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
+{{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}
 
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
         {{ block "head" . }}{{ end -}}
     </head>
 
     <body>
+        {{- if site.Params.main.enableDarkMode -}}
+            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
+        {{- end -}}
         <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
             <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                 {{- partial "assets/navbar.html" (dict
@@ -52,6 +57,6 @@
             {{- partial "footer/footer.html" . -}}
         {{ end -}}
 
-        {{- partialCached "footer/scripts.html" . -}}
+        {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
     </body>
 </html>

layouts/_default/single.html

@@ -1,11 +1,12 @@
 {{- define "partials/header.html" -}}
-    {{ if site.Params.navigation.breadcrumb }}{{ partial "breadcrumb.html" . }}{{ end -}}
+    {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
-        <h1>{{ .Title }}</h1>
+        {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+        <p class="lead mb-5">{{ .Description }}</p>
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
         {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
-        <h1>{{ .Title }}</h1>
+        {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
         <small class="text-body-secondary text-uppercase">
             {{ $datestr | i18n "postedOnDate" -}}
             {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
@@ -14,34 +15,45 @@
         </small>
 
         <div class="mt-3">
-            {{ range (.GetTerms "tags") -}}
-                <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>    
-            {{ end -}}
+            <div class="d-none-dark">
+                {{ range (.GetTerms "tags") -}}
+                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>
+                    &nbsp;
+                {{ end -}}
+            </div>
+            
+            <div class="d-none-light">
+                {{ range (.GetTerms "tags") -}}
+                    <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>
+                    &nbsp;
+                {{ end -}}
+            </div>
         </div>
+        <p class="lead mb-5 mt-3">{{ .Description }}</p>
     {{ end }}
 {{ end -}}
 
 {{ define "partials/body.html" -}}
-    {{ if eq .Layout "docs"}}
-        <p class="lead mb-5">{{ .Description }}</p>
-        {{ .Content }}
-    {{ else }}
-        <p class="lead mb-5 mt-3">{{ .Description }}</p>
+    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+    {{- end -}}
+
+    {{ if not (in (slice "docs" "minimal") .Layout) }}
         {{ if .Params.thumbnail -}}
             {{- $credits := "" -}}
             {{- if .Params.photoCredits }}{{ if .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end }}{{ end -}}
-            {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
+            {{- partial "assets/image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
         {{ end -}}
-        {{ .Content }}
-{{ end }}
+    {{ end }}
+    {{ .Content }}
 {{ end -}}
 
 {{ define "partials/footer.html" -}}
-    {{ if eq .Layout "docs"}}
+    {{ if eq .Layout "docs" }}
         <div class="mt-5 small">
             {{ partial "utilities/git.html" . }}
         </div>
-    {{ else }}
+    {{ else if ne .Layout "minimal" }}
         <div class="row row-cols-2 mt-5 mb-3">
             <div class="col">
                 {{ with .NextInSection -}}
@@ -69,22 +81,23 @@
 
 {{ define "main" -}}
     {{- $menu := .Scratch.Get "sidebar" -}}
+    {{- $version := .Scratch.Get "version" -}}
     {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
     {{ if and $menu $sidebar -}}
-        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper .Section }}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
             </div>
             <div class="offcanvas-body">
-                {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
             </div>
         </div>
     
-        <div class="container-fluid">
+        <div class="container-xxl px-3 px-xxl-0">
             <div class="row row-cols-md-2 row-cols-lg-3">
                 <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
-                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
                 </div>
                 <div class="col col-md-9 col-lg-8 mb-5 p-4">
                     {{ partial "partials/header.html" . }}
@@ -99,7 +112,7 @@
             </div>
         </div>
     {{ else }}
-        <div class="container-fluid">
+        <div class="container-xxl px-3 px-xxl-0">
             <div class="row row-cols-1 row-cols-sm-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">

layouts/index.html

@@ -4,11 +4,12 @@
 
 {{- define "main" -}}
     {{- $page := . -}}
+
     {{- range $index, $section := site.Params.home.sections -}}
         {{- $pages := where site.RegularPages "Type" "in" $section -}}
         {{- $sectionURL := "" -}}
-        {{- range $page := first 1 $pages -}}
-            {{- $sectionURL = $page.Parent.RelPermalink -}}
+        {{- range $p := first 1 $pages -}}
+            {{- $sectionURL = $p.Parent.RelPermalink -}}
         {{- end -}}
 
         {{- $moreTitle := (T (printf "more%s" (strings.FirstUpper $section))) -}}

layouts/partials/assets/button.html

@@ -0,0 +1,132 @@
+<!-- 
+    Displays a button. The shortcode supports the following arguments:
+    "title"         Required title of the button.
+    "href"          Optional address for the button or hyperlink.
+    "id"            Optional id of the button, to be used in the DOM.
+    "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
+    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
+    "color"         Optional theme color of the element, either "primary" (default), "secondary", "success",
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
+    "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
+    "badge"         Optional positioned badge to display on top of the button.
+    "aria-label"    Optional assistive label for the badge.
+    "tooltip"       Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
+                    inactive buttons.
+    "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
+    "type"          Optional type of the element, either "link" or "button" (default).
+    "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
+    "class"         Optional class attribute of the button element, e.g. “toc-button”.
+    "icon"          Optional Font Awesome icon class attribute, e.g. "fas sort".
+    "order"         Optional order of the icon, either "first" or "last" (default).
+    "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
+                    "between", "around", or "evenly".
+-->
+
+{{- $title := trim .title " \r\n" -}}
+{{- if not $title -}}
+    {{- errorf "partial [assets/button.html] - Missing element title" -}}
+{{- end -}}
+
+{{- $id := .id }}
+
+{{- $state := "enabled" -}}
+{{- with .state }}{{ $state = . }}{{ end -}}
+{{- $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
+{{- if not (in $supportedStates $state) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'state': %s" $state -}}
+{{- end -}}
+
+{{- $size := "md" -}}
+{{- with .size }}{{ $size = . }}{{ end -}}
+{{- $supportedSizes := slice "sm" "md" "lg" -}}
+{{- if not (in $supportedSizes $size) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'size': %s" $size -}}
+{{- end -}}
+
+{{- $color := "primary" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{- if not (in $supportedColors $color) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'color': %s" $color -}}
+{{- end -}}
+
+{{- $outline := false -}}
+{{- with .outline }}{{ $outline = . }}{{ end -}}
+
+{{- $badge := "" -}}
+{{- with .badge }}{{ $badge = . }}{{ end -}}
+
+{{- $label := "" -}}
+{{- with .label }}{{ $label = . }}{{ end -}}
+
+{{- $tooltip := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .tooltip }}{{ $tooltip = . }}{{ end -}}
+{{- end -}}
+
+{{- $href := .href -}}
+
+{{- $collapse := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
+{{- end -}}
+
+{{- if $tooltip -}}
+    {{- if $collapse -}}
+        {{- errorf "partial [assets/button.html] - Cannot use tooltip and collapse at the same time" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $type := "button" -}}
+{{- with .type }}{{ $type = . }}{{ end -}}
+{{- $supportedTypes := slice "button" "link" -}}
+{{- if not (in $supportedTypes $type) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'type': %s" $type -}}
+{{- end -}}
+
+{{- $placement := "top" -}}
+{{- with .placement }}{{ $placement = . }}{{ end -}}
+{{- $supportedPlacements := slice "top" "bottom" "left" "right" -}}
+{{- if not (in $supportedPlacements $placement) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'placement': %s" $placement -}}
+{{- end -}}
+
+{{- $class := .class }}
+{{- $icon := .icon }}
+
+{{- $order := "last" -}}
+{{- with .order }}{{ $order = . }}{{ end -}}
+{{- $supportedOrders := slice "first" "last" -}}
+{{- if not (in $supportedOrders $order) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'order': %s" $order -}}
+{{- end -}}
+
+{{- $justify := "center" -}}
+{{- with .justify }}{{ $justify = . }}{{ end -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
+{{- end -}}
+
+<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
+    {{- with $id }}id="{{ . }}"{{ end -}}
+    {{- if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
+    {{- else }}class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
+    {{- with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
+    {{- with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
+    {{- if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end -}}
+    {{- if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end -}}
+    >
+
+    <div class="d-flex justify-content-{{ $justify }}">
+        <div>{{ $title }}</div>
+        {{- with $icon }}<div class="align-self-center{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
+    </div>
+
+    {{- with $badge }}
+        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+            {{ . }}
+            {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
+        </span>
+    {{- end -}}  
+</a>

layouts/partials/assets/card-group.html

@@ -31,24 +31,26 @@
 
 {{- $page := .page -}}
 {{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
-    {{- errorf "Invalid value for param 'page'" -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page'" -}}
 {{- end -}}
 
+{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
 {{ $list := .list }}
-{{- if ne (printf "%T" $list) "page.Pages" -}}
-    {{- errorf "Invalid value for param 'items'" -}}
+{{- if not (in $supportedTypes (printf "%T" $list)) -}}
+    {{ warnf "Type: %T" $list }}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'list'" -}}
 {{- end -}}
 
 {{- $count := len $list -}}
 {{- $max := .max -}}
 {{- if ne (printf "%T" $max) "int" -}}
-    {{- errorf "Invalid value for param 'max'" -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'max'" -}}
 {{- end -}}
 {{- $max = math.Min $max $count -}}
 
 {{- $cols := .cols -}}
 {{- if or (lt $cols 1) (gt $cols 5) -}}
-    {{- errorf "Invalid value for param 'cols': %d" $cols -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'cols': %d" $cols -}}
 {{- end -}}
 {{- $colGrid := "row-cols-1" -}}
 {{- if eq $cols 2 }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" -}}
@@ -61,7 +63,7 @@
 {{- $paginate := false -}}
 {{- with .paginate -}}
     {{- if ne (printf "%T" .) "bool" -}}
-        {{- errorf "Invalid value for param 'paginate'" -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'paginate'" -}}
     {{- end -}}
     {{- $paginate = . -}}
 {{- end -}}
@@ -75,7 +77,7 @@
 {{- $separator := false -}}
 {{- with .separator -}}
     {{- if ne (printf "%T" .) "bool" -}}
-        {{- errorf "Invalid value for param 'separator'" -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'separator'" -}}
     {{- end -}}
     {{- $separator = . -}}
 {{- end -}}
@@ -87,56 +89,52 @@
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
 
-<div class="container-fluid p-4">
-    {{ with $title }}<h1>{{ . }}</h1>{{ end }}
+<div class="container-fluid p-4 px-xxl-0">
+    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+    {{ $paginator := "" }}
     {{ if $paginate }}
-        <div class="row {{ $colGrid }}">
-            {{ $paginator := $page.Paginate $list }}
-            {{ range $index, $element := first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
-                <div class="col pt-3 pb-3">
-                    {{- partial "assets/card.html" (dict
-                        "path" $element.File.Path
-                        "class" (printf "h-100 %s" $class)
-                        "color" $color
-                        "padding" $padding
-                        "header" $header
-                        "footer" $footer
-                        "orientation" $orientation
-                        )
-                    -}}
+        {{ $paginator = $page.Paginate $list }}
+        {{ $list = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
+    {{ end }}
+
+    <div class="row {{ $colGrid }}">
+        {{ range $index, $element := $list }}
+            {{- $params := (dict
+                "class" (printf "h-100 %s" $class)
+                "color" $color
+                "padding" $padding
+                "header" $header
+                "footer" $footer
+                "orientation" $orientation
+            ) -}}
+            {{- if $element.IsPage -}}
+                {{- $params = merge $params (dict "path" $element.File.Path) -}}
+            {{- else -}}
+                {{- $params = merge $params (dict
+                    "title" $element.Title
+                    "href" (or $element.Permalink "#!")
+                    "description" $element.Description
+                    "thumbnail" $element.Params.thumbnail
+                    "icon" $element.Params.icon
+                ) -}}
+            {{- end -}}
+
+            <div class="col pt-3 pb-3">
+                {{- partial "assets/card.html" $params -}}
+            </div>
+            {{- if and (lt $index (sub $max 1)) $separator -}}
+                <div class="col d-block d-sm-none">
+                    <hr>
                 </div>
-                {{- if and (lt $index (sub $max 1)) $separator -}}
-                    <div class="col d-block d-sm-none">
-                        <hr>
-                    </div>
-                {{- end -}}
-            {{ end }}
-        </div>
+            {{- end -}}
+        {{- end -}}
+    </div>
+
+    {{ if $paginate }}
         {{- if gt $paginator.TotalPages 1 -}}
-            {{- partial "assets/pagination.html" $page -}}
+            <div class="pt-3">{{ partial "assets/pagination.html" $page }}</div>
         {{- end -}} 
     {{ else }}
-        <div class="row {{ $colGrid }}">
-            {{ range $index, $element := $list }}
-                <div class="col pt-3 pb-3">
-                    {{- partial "assets/card.html" (dict
-                        "path" $element.File.Path
-                        "class" (printf "h-100 %s" $class)
-                        "color" $color
-                        "padding" $padding
-                        "header" $header
-                        "footer" $footer
-                        "orientation" $orientation
-                        )
-                    -}}
-                </div>
-                {{- if and (lt $index (sub $max 1)) $separator -}}
-                    <div class="col d-block d-sm-none">
-                        <hr>
-                    </div>
-                {{- end -}}
-            {{ end }}
-        </div>
         {{ if gt $count $max }}
             <a class="btn btn-outline-primary" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
         {{ end }}

layouts/partials/assets/card.html

@@ -8,7 +8,8 @@
     "href"          Required address for the button or hyperlink.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white", "black", or "body". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
+                    color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -68,7 +69,7 @@
 {{- if .path }}
     {{- $page = site.GetPage .path }}
     {{- if not $page }}
-        {{- errorf "Cannot find page: %s" .path -}}
+        {{- errorf "partial [assets/card.html] - Cannot find page: %s" .path -}}
     {{- end }}
 {{- end }}
 
@@ -81,9 +82,9 @@
 {{- $color := "" -}}
 {{- with .color }}{{ $color = . }}{{ end -}}
 {{- if $color -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
-        {{- errorf "Invalid value for param 'color': %s" $color -}}
+        {{- errorf "partial [assets/card.html] - Invalid value for param 'color': %s" $color -}}
     {{- end -}}
 {{- end -}}
 
@@ -91,13 +92,13 @@
 {{- with .header }}{{ $header = . }}{{ end -}}
 {{- $supportedKeywords := slice "full" "publication" "tags" "none" -}}
 {{- if not (in $supportedKeywords $header) -}}
-    {{- errorf "Invalid value for param 'header': %s" $header -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'header': %s" $header -}}
 {{- end -}}
 
 {{- $footer := "none" -}}
 {{- with .footer }}{{ $footer = . }}{{ end -}}
 {{- if not (in $supportedKeywords $footer) -}}
-    {{- errorf "Invalid value for param 'footer': %s" $footer -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'footer': %s" $footer -}}
 {{- end -}}
 
 {{- with $page -}}
@@ -109,7 +110,7 @@
 {{- end -}}
 
 {{- if not $href -}}
-    {{- errorf "Missing value for param 'href'" -}}
+    {{- errorf "partial [assets/card.html] - Missing value for param 'href'" -}}
 {{- end -}}
 
 {{- $class := .class -}}
@@ -118,14 +119,14 @@
 {{- with .padding }}{{ $padding = . }}{{ end -}}
 {{- $supportedPaddings := slice "0" "1" "2" "3" "4" "5" "auto" -}}
 {{- if not (in $supportedPaddings $padding) -}}
-    {{- errorf "Invalid value for param 'padding': %s" $padding -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'padding': %s" $padding -}}
 {{- end -}}
 
 {{- $orientation := "stacked" -}}
 {{- with .orientation }}{{ $orientation = . }}{{ end -}}
 {{- $supportedOrientations := slice "stacked" "horizontal" "none" -}}
 {{- if not (in $supportedOrientations $orientation) -}}
-    {{- errorf "Invalid value for param 'orientation': %s" $orientation -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'orientation': %s" $orientation -}}
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
@@ -134,7 +135,7 @@
         <div class="row g-0">
             <div class="col-4">
                 {{- if $thumbnail -}}
-                    {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
                 {{- else if $icon -}}
                     <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
                         {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
@@ -143,11 +144,11 @@
                 </div>
             <div class="col-8">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
+                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="h-100">
                         {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
                     </div>
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
+                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
                 </div>
             </div>
         </div>
@@ -155,16 +156,16 @@
 {{- else -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         {{- if $thumbnail -}}
-            {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
+            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
         {{- else if $icon -}}
             <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">
-            {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
+            {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}}{{ end }}
             {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
-            {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
+            {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}{{ end }}
         </div>
     </div>
 {{- end -}}

layouts/partials/assets/icon.html

@@ -1,6 +1,6 @@
 {{- $icon := .icon -}}
 {{- if not $icon -}}
-    {{- errorf "Expected value for param 'icon'" -}}
+    {{- errorf "partial [assets/icon.html] - Expected value for param 'icon'" -}}
 {{- end -}}
 
 {{- $icon_class := split $icon " " -}}
@@ -12,5 +12,5 @@
 {{- else if eq (index $icon_class 0) "fa" -}}
     <i class="fa-regular fa-{{ $attr }}"></i>
 {{- else -}}
-    {{- errorf "Unrecognized icon class: %s" $icon_class -}}
+    {{- errorf "partial [assets/icon.html] - Unrecognized icon class: %s" $icon_class -}}
 {{- end -}}

layouts/partials/assets/image.html

@@ -0,0 +1,187 @@
+<!-- 
+    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. The
+    partial supports the following arguments:
+    "url":          Required relative url of the image, e.g. "img/example.jpg"
+    "mode":         Optional flag indicating if the image should support color modes.
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
+                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
+    "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
+    "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
+    "title":        Optional alternate text of the image.
+    "caption":      Optional figure caption.
+-->
+
+{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
+{{- $ratio := .ratio -}}
+{{- $url := .url -}}
+{{- $mode := false -}}
+{{- with .mode -}}
+    {{ $mode = . -}}
+{{- end -}}
+{{- $outerClass := .outerClass -}}
+{{- $innerClass := .innerClass -}}
+{{- $title := .title -}}
+{{- $caption := .caption -}}
+{{- if ne (printf "%T" $mode) "bool" -}}
+    {{- errorf "partial [assets/image.html] - Invalid value for param 'mode'" -}}
+{{- end -}}
+{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
+
+
+<!-- Generate a fallback image of type jpg -->
+{{- define "partials/image-default.html" -}}
+    {{- $img := .img -}}
+    {{- $ratio := .ratio -}}
+    {{- $width := "1400" -}}
+    {{- $dim := "" -}}
+    {{- $fallback := "" -}}
+
+    {{- with $img -}}
+        {{- if eq $ratio "4x3" -}}
+            {{- $dim  = "1400x1050" }}
+        {{- else if eq $ratio "1x1" -}}
+            {{- $dim  = "1400x1400" }}
+        {{- else if eq $ratio "16x9" -}}
+            {{- $dim = "1400x788" -}}
+        {{- else if eq $ratio "21x9" -}}
+            {{- $dim = "1400x600" -}}
+        {{- else -}}
+            {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
+        {{- end -}}
+
+        {{- if $ratio -}}
+            {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
+        {{- else -}}
+            {{- $fallback = ($img.Fit (printf "%s jpg" $dim)) -}}
+        {{- end -}}
+        {{- $clean := path.Ext $img.RelPermalink -}}
+        {{- $ext := path.Ext $img.RelPermalink -}}
+        {{- $fallback = $fallback | resources.Copy (replace $img.RelPermalink $clean (printf "-%s%s" $dim $ext)) -}}
+    {{- end -}}
+
+    {{- return $fallback -}}
+{{- end -}}
+
+
+<!-- Generate a image set of type webp -->
+{{- define "partials/image-scaled.html " -}}
+    {{- $img := .img -}}
+    {{- $ratio := .ratio -}}
+    {{- $imgset := "" -}}
+
+    {{- $widths := slice "576" "768" "992" "1200" "1400" -}}
+    {{- $dims := slice -}}
+    {{- with $img -}}
+        {{- if eq $ratio "4x3" -}}
+            {{- $dims  = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+        {{- else if eq $ratio "1x1" -}}
+            {{- $dims  = slice "576x576" "768x768" "992x992" "1200x1200" "1400x1400" -}}
+        {{- else if eq $ratio "16x9" -}}
+            {{- $dims = slice "576x324"  "768x432" "992x558" "1200x675"  "1400x788" -}}
+        {{- else if eq $ratio "21x9" -}}
+            {{- $dims = slice "576x247"  "768x329" "992x425" "1200x514"  "1400x600" -}}
+        {{- else -}}
+            {{- range $width := $widths -}}
+                {{- $dims = $dims | append (printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
+            {{- end -}}
+        {{- end -}}
+
+        {{- $scaled := "" -}}
+        {{- range $index, $dim := $dims -}}
+            {{- $clean := path.Ext $img.RelPermalink -}}
+            {{- if $ratio -}}
+                {{- $scaled = $img.Fill (printf "%s webp" $dim) -}}
+            {{- else -}}
+                {{- $scaled = $img.Fit (printf "%s webp" $dim) -}}
+            {{- end -}}
+            {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%s.webp" $dim)) -}}
+            {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
+        {{- end -}}
+        {{- $imgset = strings.TrimPrefix ", " $imgset -}}
+    {{- end -}}
+
+    {{- return $imgset -}}
+{{- end -}}
+
+<!-- Define the img with optional caption -->
+{{- define "partials/image-definition.html" -}}
+    {{- $ratio := .ratio -}}
+    {{- $url := .url -}}
+    {{- $outerClass := .outerClass -}}
+    {{- $innerClass := .innerClass -}}
+    {{- $title := .title -}}
+    {{- $caption := .caption -}}
+    {{- $fallbackURL := "" -}}
+    {{- $imgset := "" -}}
+    {{- $mode := .mode -}}
+    {{- $modes := .modes -}}
+
+    {{- if hasSuffix $url "svg" -}}
+        {{- $fallbackURL = $url -}}
+    {{- else -}}
+        {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+        {{- if $img -}}
+            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio) -}}
+            {{- $fallbackURL = $fallback.RelPermalink -}}
+            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio) -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- range $none := $modes -}}
+        {{- if ne $none $mode -}}
+            {{- $outerClass = printf "%s d-none-%s" (or $outerClass "") $none -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- if $caption -}}
+        <figure {{ with $outerClass }}class="{{ . }}"{{ end }}>
+    {{ end }}
+        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }}{{ if not $caption }} {{ $outerClass }}{{ end }}">
+            <img class="img-fluid {{ $innerClass }}"
+                {{ with $imgset -}}
+                srcset="{{ . }}"
+                sizes="100vw"
+                {{- end }}
+                src="{{ $fallbackURL }}"
+                alt="{{ $title }}">
+        </div>
+    {{- if $caption -}}
+        <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
+    </figure>
+{{- end -}}
+{{- end -}}
+
+<!-- Initiate the regular or color-mode image -->
+{{- if $mode -}}
+    {{- $ext := path.Ext $url -}}
+    {{- $base := strings.TrimSuffix $ext $url -}}
+    {{- range $suffix := $modes -}}
+        {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
+    {{- end -}}
+
+    {{- range $suffix := $modes -}}
+        {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
+        {{- partial "partials/image-definition.html" (dict 
+            "ratio" $ratio
+            "url" $image
+            "outerClass" $outerClass
+            "innerClass" $innerClass
+            "title" $title
+            "caption" $caption
+            "mode" $suffix
+            "modes" $modes)
+        -}}
+    {{- end -}}
+{{- else -}}
+    {{- partial "partials/image-definition.html" (dict 
+        "ratio" $ratio
+        "url" $url
+        "outerClass" $outerClass
+        "innerClass" $innerClass
+        "title" $title
+        "caption" $caption)
+    -}}
+{{- end -}}

layouts/partials/assets/list.html

@@ -0,0 +1,94 @@
+<!-- 
+    Displays a list items with a thumbnail alternating between left and right alignment. The partial supports the
+    following arguments:
+    "page"          Required context of the current page.
+    "list"          Required array of pages.
+    "title"         Optional title of the card group.
+    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "class":        Optional class attribute of the tab group, e.g. “nav-fill”.
+
+    In addition, the following arguments are passed to the individual tabs.
+    "class"         Optional class attribute of the tab element, e.g. “w-50”.
+    "color":        Optional theme color of the tab, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
+-->
+
+<!-- Inline partial to render the list item's content -->
+{{- define "partials/list-content.html" -}}
+    {{- $title := .title -}}
+    {{- $content := .content -}}
+    
+    <h2>{{ $title }}</h2>
+    <div class="fs-md-5 fs-6">{{ $content }}</div>
+{{- end -}}
+
+<!-- Inline partial to render the list item's thumbnail -->
+{{- define "partials/list-img.html" -}}
+    {{- $thumbnail := .thumbnail -}}
+    {{- $style := .style -}}
+    {{- $mode := .mode -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode) -}}
+{{- end -}}
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "partial [assets/list.html] - Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
+{{ $list := .list }}
+{{- if not (in $supportedTypes (printf "%T" $list)) -}}
+{{- errorf "partial [assets/list.html] - Invalid value for param 'list'" -}}
+{{- end -}}
+
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+
+{{ $vertical := false }}
+{{ $type := "pills" }}
+
+<div class="d-none d-md-block p-0">
+    {{- range $index, $item := $list -}}
+        {{- $odd := eq (mod $index 2) 1 -}}
+        <div class="container ratio-section d-flex flex-column">
+            {{ if eq $index 0 }}
+                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+            {{ end }}
+
+            <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
+                <div class="col-6{{ if $odd }} order-last{{ end }}">
+                    {{- $style := "reveal fade-bottom" -}}
+                    {{ if $item.Params.tilted }}
+                        {{- $style = "reveal fade-bottom-n5 rotate-n5 ps-3" -}}
+                        {{- if $odd }}{{ $style = "reveal fade-bottom-5 rotate-5 pe-3" }}{{ end }}
+                    {{ end }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "style" $style "mode" $item.Params.colormode) }}
+                </div>
+                <div class="col-6{{ if $odd }} order-first{{ end }} psw-lg-5 p-5">
+                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
+                </div>
+            </div>
+        </div>
+    {{ end -}}
+</div>
+
+<div class="d-md-none">
+    {{- range $index, $item := $list -}}
+        {{- $odd := eq (mod $index 2) 1 -}}
+        <div class="container d-flex flex-column">
+            {{ if eq $index 0 }}
+                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+            {{ end }}
+            <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
+                <div class="col-12 text-center">
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "mode" $item.Params.colormode) }}
+                </div>
+                <div class="col-12 p-3">
+                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
+                </div>
+            </div>
+        </div>
+    {{ end -}}
+</div>

layouts/partials/assets/nav.html

@@ -0,0 +1,113 @@
+<!-- 
+    Displays a tab group of multiple items. Each provided page resource is rendered as a tab pane. The shortcode
+    supports the following arguments:
+    "page"          Required context of the current page.
+    "list"          Required array of pages.
+    "title"         Optional title of the tab group.
+    "type"          Optional type of the tab group, either "tabs", "pills" (default), or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "class"         Optional class attribute of the tab group, e.g. “nav-fill”.
+    "pane"          Optional style of the panes, either "none" (default) or "persona".
+    "width"         Optional responsive width of the tab group, either "50" or "100" (default).
+
+    In addition, the following arguments are passed to the individual tabs.
+    "class"         Optional class attribute of the tab element, e.g. “w-50”.
+    "color":        Optional theme color of the tab, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
+-->
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "partial [assets/nav.html] - Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{- $id := "0" -}}
+{{- with .id -}}
+    {{ $id = . }}
+{{ end }}
+
+{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
+{{ $list := .list }}
+{{- if not (in $supportedTypes (printf "%T" $list)) -}}
+    {{- errorf "partial [assets/nav.html] - Invalid value for param 'list'" -}}
+{{- end -}}
+
+{{ $pane := "none" }}
+{{ with .pane }}
+    {{- $supportedPanes := slice "none" "persona" -}}
+    {{- $pane = . }}
+    {{- if not (in $supportedPanes $pane) -}}
+        {{- errorf "partial [assets/nav.html] - Invalid value for param 'pane'" -}}
+    {{- end -}}
+{{ end }}
+
+{{ $supportedWidths := slice 50 100 -}}
+{{ $widthParam := 100 -}}
+{{ $width := 100 }}
+{{ with .width }}{{ $widthParam = . }}{{ end -}}
+{{ if in $supportedWidths $widthParam -}}
+    {{ $width = int $widthParam }}
+{{ else -}}
+    {{ errorf "partial [assets/nav.html] - Invalid value for param 'width': %s" $widthParam -}}
+{{ end -}}
+
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $verticalParam := "false" -}}
+{{ $vertical := false }}
+{{ with .vertical }}{{ $verticalParam = . }}{{ end -}}
+{{ if in $supportedFlags $verticalParam -}}
+    {{ if eq $verticalParam "true" }}{{ $vertical = true }}{{ else }}{{ $vertical = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "partial [assets/nav.html] - Invalid value for param 'vertical': %s" $verticalParam -}}
+{{ end -}}
+
+{{ $type := "pills" }}
+{{ with .type }}
+    {{ $type = . -}}
+    {{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
+    {{ if $type }}
+        {{ if not (in $supportedNavTypes $type) -}}
+            {{ errorf "partial [assets/nav.html] - Invalid value for param 'type': %s" $type -}}
+        {{ end -}}
+    {{ end -}}
+{{ end -}}
+
+{{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+<div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto pt-5 pb-5">
+    {{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+    <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+        {{- range $index, $item := $list -}}
+            {{ $show := eq $index 0}}
+            <button class="nav-link text-nowrap{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
+                    type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+                {{ $item.Title }}
+            </button>
+        {{ end -}}
+    </div>
+
+    <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+        {{ range $index, $item := $list }}
+            {{ $header := $item.Title }}
+            {{ $body := $item.Content }}
+            {{ $show := eq $index 0}}
+            <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
+                {{- if eq $pane "persona" -}}
+                {{- partial "assets/persona.html" (dict  
+                    "title" $item.Title
+                    "class" $class
+                    "color" $color
+                    "content" (or $item.Description $item.Content)
+                    "thumbnail" $item.Params.Thumbnail
+                ) -}}
+                {{- else -}}
+                    {{- (or $item.Description $item.Content) -}}
+                {{- end -}}
+            </div>    
+        {{ end }}
+    </div>
+    {{ if $vertical }}</div>{{ end }}
+</div>

layouts/partials/assets/navbar.html

@@ -5,13 +5,49 @@
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
+                    default color is none.
+    "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
 -->
 
+<!-- Inline partial to render the color mode switcher -->
+{{- define "partials/navbar-mode.html" -}}
+    {{- $id := .id -}}
+    {{- $size := .size -}}
+    {{- $collapsed := .collapsed -}}
+
+    <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
+        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
+            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }} {{ if $collapsed }} {{ T "colorMode" }} {{ end }}
+            <span class="d-md-none"></span>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
+                    {{ T "colorLight" }}
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
+                    {{ T "colorDark" }}
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
+                    {{ T "colorAuto" }}
+                </a>
+            </li>
+        </ul>
+    </li>
+{{- end -}}
+
 {{- $supportedFlags := slice "true" "false" -}}
 
 {{- $id := 0 -}}
@@ -19,21 +55,21 @@
 
 {{- $page := .page -}}
 {{- if not $page -}}
-    {{- errorf "Missing value for param 'page'" -}}
+    {{- errorf "partial [assets/navbar.html] - Missing value for param 'page'" -}}
 {{- end -}}
 
 {{- $menuName := "main" }}
 {{- with .menus }}{{ $menuName = .}}{{ end -}}
 {{- $menus := index site.Menus $menuName -}}
 {{- if or (ne (printf "%T" $menus) "navigation.Menu") (ne (index $menus 0).Menu $menuName) -}}
-    {{- errorf "Invalid value for param 'menus': %s" $menuName -}}
+    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'menus': %s" $menuName -}}
 {{- end -}}
 
 {{- $size := "md" -}}
 {{- with .size }}{{ $size = . }}{{ end -}}
 {{- $supportedSizes := slice "xs" "sm" "md" "lg" "xl" -}}
 {{- if not (in $supportedSizes $size) -}}
-    {{- errorf "Invalid value for param 'size': %s" $size -}}
+    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'size': %s" $size -}}
 {{- end -}}
 
 {{- $fixedParam := "false" -}}
@@ -42,15 +78,15 @@
 {{- if in $supportedFlags $fixedParam -}}
     {{- if eq $fixedParam "true" }}{{ $fixed = true }}{{ else }}{{ $fixed = false }}{{ end -}}
 {{- else -}}
-    {{- errorf "Invalid value for param 'fixed': %s" $fixedParam -}}
+    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'fixed': %s" $fixedParam -}}
 {{- end -}}
 
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
-        {{- errorf "Invalid value for param 'color': %s" $color -}}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'color': %s" $color -}}
     {{- end -}}
 {{- end -}}
 
@@ -60,11 +96,20 @@
     {{- if in $supportedFlags $searchParam -}}
         {{- if eq $searchParam "true" }}{{ $search = true }}{{ else }}{{ $search = false }}{{ end -}}
     {{- else -}}
-        {{- errorf "Invalid value for param 'search': %s" $searchParam -}}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'search': %s" $searchParam -}}
     {{- end -}}
 {{- end -}}
 
 {{- $enableDarkMode := default true site.Params.main.enableDarkMode -}}
+{{- with .mode -}}
+    {{- $darkModeParam := . -}}
+    {{- if in $supportedFlags $darkModeParam -}}
+        {{- if eq $darkModeParam "true" }}{{ $enableDarkMode = site.Params.main.enableDarkMode }}{{ else }}{{ $enableDarkMode = false }}{{ end -}}
+    {{- else -}}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'darkMode': %s" $darkModeParam -}}
+    {{- end -}}
+{{- end -}}
+
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
 {{- $logo := site.Params.navigation.logo -}}
@@ -79,19 +124,21 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
-	<div class="container-fluid">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
+	<div class="container-xxl p-0">
         <!-- Insert sidebar toggler when applicable -->
-        {{- if $page.Scratch.Get "sidebar" -}}
-            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- else -}}
-            <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-            <button class="navbar-toggler collapsed ms-n3 invisible" type="button">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- end -}}
+        <div class="d-flex">
+            {{- if $page.Scratch.Get "sidebar" -}}
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- else -}}
+                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- end -}}
+        </div>
 
         <!-- Insert the brand logo or name -->
         <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
@@ -103,12 +150,14 @@
         </a>
 
         <!-- Insert main navigation toggler -->
-		<button id="main-nav-toggler" class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-			<span class="toggler-icon top-bar emphasis"></span>
-			<span class="toggler-icon middle-bar emphasis"></span>
-			<span class="toggler-icon bottom-bar emphasis"></span>
-		</button>
+        <div class="d-flex fw-30">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                <span class="toggler-icon top-bar emphasis"></span>
+                <span class="toggler-icon middle-bar emphasis"></span>
+                <span class="toggler-icon bottom-bar emphasis"></span>
+            </button>
+        </div>
 
         <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
             <!-- Insert search input -->
@@ -120,20 +169,21 @@
                     {{- $menu_item_url := $menu.URL | relLangURL -}}
                     {{- $page_url:= $page.RelPermalink | relLangURL -}}
                     {{- $active := hasPrefix $page_url $menu_item_url -}}
-
+                    
                     {{- $url := urls.Parse .URL -}}
                     {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
                     {{- if .HasChildren -}}
                         <li class="nav-item dropdown">
                             <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span  class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
+                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end">
                                 {{- range .Children -}}
-                                    <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
+                                    {{- $child_active := eq $page_url .URL -}}
+                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a></li>
                                 {{- end -}}
                             </ul>
-                          </li>
+                        </li>
                     {{- else -}}
                         <li class="nav-item">
                             {{- $external := ne $url.Host $baseurl.Host -}}
@@ -150,18 +200,22 @@
 
 
                 {{- if or $enableLanguage $enableDarkMode -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto">
+                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                         <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                     </li>
+                    <li><hr class="dropdown-divider-bg"></li>
                 {{- end -}}
 
                 <!-- Insert language switcher if applicable -->
                 {{- if $enableLanguage -}}
                     {{- $currentLang := $page.Language.Lang -}}
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                         </a>
+                        <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                        </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
                             {{- if $page.IsTranslated -}}
                                 {{- range $page.AllTranslations -}}
@@ -178,32 +232,8 @@
                               
                 <!-- Insert color mode switcher -->
                 {{- if $enableDarkMode -}}
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
-                            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }}
-                            <span class="d-md-none"></span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="light" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
-                                    {{ T "colorLight" }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="dark" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
-                                    {{ T "colorDark" }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="auto" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
-                                    {{ T "colorAuto" }}
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
+                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" true) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" false) -}}
                 {{- end -}}
             </ul>
         </div>

layouts/partials/assets/persona.html

@@ -0,0 +1,94 @@
+<!-- 
+    Displays a custom persona card. Either specify a valid path, or set the arguments title, href, content, and
+    thumbnail individually. The latter arguments override any page attributes.
+    
+    The shortcode supports the following arguments:
+    "path"          Optional path of the page, override with other parameters.
+    "title"         Required title of the card.
+    "href"          Optional address for the button or hyperlink.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
+                    color is specified.
+    "content"       Optional content of the card.
+    "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
+-->
+
+<!-- Inline partial to render the card's body -->
+{{- define "partials/persona-body.html" -}}
+    {{- $title := .title -}}
+    {{- $href := .href -}}
+    {{- $color := .color -}}
+    {{- $content := .content -}}
+    
+    <h3>{{ $title }}</h3>
+    {{ with $content }}<p>{{ . }}</p>{{ end -}}
+{{- end -}}
+
+{{- $page := "" }}
+{{- if .path }}
+    {{- $page = site.GetPage .path }}
+    {{- if not $page }}
+        {{- errorf "partial [assets/persona.html] - Cannot find page: %s" .path -}}
+    {{- end }}
+{{- end }}
+
+{{- $title := .title -}}
+{{- $href := .href -}}
+{{- $content := .content -}}
+{{- $thumbnail := .thumbnail -}}
+
+{{- $color := "" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "partial [assets/persona.html] - Invalid value for param 'color': %s" $color -}}
+    {{- end -}}
+{{- end -}}
+
+{{- with $page -}}
+    {{- if not $title }}{{ $title = .Title }}{{ end -}}
+    {{- if not $href }}{{ $href = .Permalink  }}{{ end -}}
+    {{- if not $content }}{{ $content = .Content }}{{ end -}}
+    {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
+{{- end -}}
+
+{{- $class := .class -}}
+
+<div class="d-none d-md-block">
+    <div class="persona position-relative row mt-5 align-middle p-3">
+        <div class="col-2">
+            <div class="position-absolute top-50 start-0 translate-middle-y col-4 ps-3">
+                {{- if $thumbnail -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                {{ end }}
+            </div>
+        </div>
+        <div class="col-10 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} rounded-5 fs-md-5 fs-6 pe-5 pb-3">
+            <div class="row">
+                <div class="col-3"></div>
+                <div class="col-9">
+                    {{- partial "persona-body.html" (dict "title" $title "href" $href "color" $color "content" $content) -}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="d-md-none">
+    <div class="persona position-relative row mt-5 align-middle p-3 ptw-5">
+        <div class="col-12">
+            <div class="position-absolute top-25 start-50 translate-middle col-6">
+                {{- if $thumbnail -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                {{ end }}
+            </div>
+        </div>
+        <div class="col-12 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} rounded-5 ptw-lg-5 ptw-3 ptw-sm-4 fs-md-5 fs-6 pb-3">
+            <div class="p-5">
+                {{- partial "persona-body.html" (dict "title" $title "href" $href "color" $color "content" $content) -}}
+            </div>
+        </div>
+    </div>
+</div>

layouts/partials/assets/section-list.html

@@ -1,9 +1,9 @@
 {{- $page := .page }}
 {{- $section := .section }}
-{{- if not $section }}{{ errorf "Missing value for param 'section'" }}{{ end -}}
+{{- if not $section }}{{ errorf "partial [assets/section-list.html] - Missing value for param 'section'" }}{{ end -}}
 {{- $home := .home }}
 {{ if ne (printf "%T" $home) "bool" }}
-    {{ errorf "Invalid value for param 'home'"}}
+    {{ errorf "partial [assets/section-list.html] - Invalid value for param 'home'"}}
 {{ end }}
 {{- $title := .title -}}
 {{- $moreTitle := .moreTitle -}}
@@ -11,7 +11,7 @@
 
 {{- $paginate := true -}}
 {{- $sort := "date" -}}
-{{- $reverse := true -}}
+{{- $order := "desc" -}}
 {{- $separator := false -}}
 {{- $orientation := "stacked" -}}
 {{- $cols := 3 -}}
@@ -22,11 +22,16 @@
 {{- $style := "" -}}
 {{- $homepage := 3 -}}
 {{- $background := "" -}}
+{{- $layout := "card" -}}
+{{- $pane := "none" -}}
+{{- $type := "pills" -}}
+{{- $vertical := "false" -}}
+{{- $width := 100 -}}
 
-{{- with (index site.Params $section) -}}
-    {{- with index . "title" }}{{ $title = . }}{{ end -}}
+{{- with (index site.Params.sections $section) -}}
+    {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
-    {{- if (index . "reverse") }}{{ $reverse = true }}{{ else }}{{ $reverse = false }}{{ end -}}
+    {{- if (index . "reverse") }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
     {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
@@ -37,53 +42,80 @@
     {{- with index . "style" }}{{ $style = . }}{{ end -}}
     {{- with index . "homepage" }}{{ $homepage = . }}{{ end -}}
     {{- with index . "background" }}{{ $background = . }}{{ end -}}
+    {{- with index . "layout" }}{{ $layout = . }}{{ end -}}
+    {{- with index . "pane" }}{{ $pane = . }}{{ end -}}
+    {{- with index . "type" }}{{ $type = . }}{{ end -}}
+    {{- with index . "vertical" }}{{ $vertical = . }}{{ end -}}
+    {{- with index . "width" }}{{ $width = . }}{{ end -}}
 {{- end -}}
 
-{{- $list := where site.RegularPages "Type" "in" $section -}}
-{{- $max := (len $list) -}}
-{{- if $home -}}
-    {{- $paginate = false -}}
-    {{- $max = int (math.Min $homepage $max) -}}
-{{ end -}}
+{{ $list := where site.RegularPages "Type" "in" $section }}
+{{ $max := (len $list) -}}
+{{ if eq $max 0 }}
+    {{- $bundle := site.GetPage $section -}}
+    {{- $list = $bundle.Resources.Match "*" -}}
+    {{- $max = len $list -}}
+{{ end }}
+{{- $list = sort $list (printf "Params.%s" $sort) $order -}}
 
-{{- $cols = int (math.Min $cols $max) -}}
-
-{{- if eq $sort "weight" -}}
-    {{- $list = $list.ByWeight -}}
-{{- else if eq $sort "publication" -}}
-    {{- $list = $list.ByPublishDate -}}
-{{- else if eq $sort "expiration" -}}
-    {{- $list = $list.ByExpiryDate -}}
-{{- else if eq $sort "lastmod" -}}
-    {{- $list = $list.ByLastmod -}}
-{{- else if eq $sort "length" -}}
-    {{- $list = $list.ByLength -}}
-{{- else if eq $sort "title" -}}
-    {{- $list = $list.ByTitle -}}
-{{- else if eq $sort "linktitle" -}}
-    {{- $list = $list.ByLinkTitle -}}
-{{- else if ne $sort "date" -}}
-    {{- $list = $list.ByParam $sort -}}        
+{{- $supportedLayouts := slice "card" "list" "nav" -}}
+{{- if not (in $supportedLayouts $layout) -}}
+    {{- errorf "partial [assets/section-list.html] - Invalid value for param 'layout': %s" $layout -}}
 {{- end -}}
-{{- if $reverse -}}{{- $list = $list.Reverse -}}{{ end -}}
 
-<div class="container-fluid flex-fill p-0{{ with $background }} bg-{{ . }}{{ end }}">
-    {{- partial "assets/card-group.html" (dict 
+{{ if gt $max 0 }}
+    {{- if $home -}}
+        {{- $paginate = false -}}
+        {{- $max = int (math.Min $homepage $max) -}}
+    {{ end -}}
+    {{- $cols = int (math.Min $cols $max) -}}
+
+    {{- $params := (dict 
         "page" $page
         "list" $list
-        "max" $max
-        "cols" $cols
         "title" $title
-        "href" $sectionURL
-        "hrefTitle" $moreTitle
-        "separator" $separator
-        "paginate" $paginate
         "class" $style
-        "orientation" $orientation
         "color" $color
-        "padding" $padding
-        "header" $header
-        "footer" $footer
-        ) 
+        )
     -}}
-</div>
+    {{- $partial := "" -}}
+
+    <div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
+        <div class="container-xxl flex-fill p-0">
+            {{ if eq $layout "card" }}
+                {{- $partial = "assets/card-group.html" -}}
+                {{- $params = merge $params (dict 
+                    "max" $max
+                    "cols" $cols
+                    "href" $sectionURL
+                    "hrefTitle" $moreTitle
+                    "separator" $separator
+                    "paginate" $paginate
+                    "orientation" $orientation
+                    "padding" $padding
+                    "header" $header
+                    "footer" $footer
+                    ) 
+                -}}
+            {{ else if eq $layout "nav" }}
+                {{- $partial = "assets/nav.html" -}}
+                {{- $params = merge $params (dict 
+                    "layout" $layout
+                    "id" $section
+                    "pane" $pane
+                    "type" $type
+                    "vertical" $vertical
+                    "width" $width
+                    ) 
+                -}}
+            {{- else -}}
+                {{- $partial = "assets/list.html" -}}
+                {{- $params = merge $params (dict 
+                    "layout" $layout
+                    ) 
+                -}}
+            {{- end -}}
+            {{- partial $partial $params -}}
+        </div>
+    </div>
+{{- end -}}

layouts/partials/assets/sidebar.html

@@ -1,58 +1,110 @@
 {{- $page := .page }}
 {{- $section := $page.Section }}
 {{- $data := .menu -}}
+{{- $version := .version -}}
+
+{{- define "partials/sidebar/group.html" -}}
+    {{- $page := .page -}}
+    {{- $index := .index -}}
+    {{- $level := .level -}}
+    {{- $baseURL := .baseURL -}}
+    {{- $group := .group -}}
+
+    {{- $doc_slug := $group.title | urlize -}}
+    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
+
+    <li class="mb-1">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}" aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}">
+            <div class="text-start flex-fill">{{ $group.title }}</div>
+        </button>
+        <div class="collapse {{ if $collapsed }}show{{ end }}" id="sidebar-collapse-{{ $index }}-{{ $level }}">
+            <ul class="btn-toggle-nav list-unstyled fw-normal {{ if eq $level 0}} pb-1 {{ end }}ps-3">
+                {{- range $item := $group.pages -}}
+                    {{- if $item.pages -}}
+                        {{ partial "partials/sidebar/group.html" (dict 
+                            "page" $page
+                            "index" $index
+                            "level" (add $level 1)
+                            "baseURL" $href
+                            "group" $item
+                            )
+                        }}
+                    {{- else -}}
+                        {{ partial "partials/sidebar/item.html" (dict 
+                            "page" $page
+                            "sectionBreak" false
+                            "level" $level
+                            "baseURL" $href
+                            "title" $item.title
+                            )
+                        }}
+                    {{ end -}}
+                {{- end }}
+            </ul>
+        </div>
+    </li>
+{{ end -}}
+
+{{- define "partials/sidebar/item.html" -}}
+    {{ $page := .page }}
+    {{ $sectionBreak := .sectionBreak }}
+    {{- $level := .level -}}
+    {{ $baseURL := .baseURL}}
+    {{ $title := .title}}
+
+    {{- $doc_slug := $title | urlize -}}
+    {{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
+    {{ $active := eq $page.RelPermalink $href }}
+
+    {{ if eq $level 0}}
+        <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
+        {{- $sectionBreak = false }}
+        <li>
+            <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
+                <li>
+                    <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded {{ if $active }}active{{ end }}">
+                        {{ $title }}
+                    </a>      
+                </li>
+            </ul>
+        </li>
+    {{ else }}
+        <li>
+            <a href="{{ $href }}" class="sidebar-item text-decoration-none rounded small {{ if $active }}active{{ end }}">
+                {{ $title }}
+            </a>      
+        </li>
+    {{ end }}
+{{ end -}}
 
 {{ if $data }}
     <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
-        {{- $url := split $page.Permalink "/" -}}
-        {{- $page_slug := index $url (sub (len $url) 2) -}}
-        {{- $sectionBreak := false }}
+        {{- $sectionBreak := false -}}
+        {{- $level := 0 -}}
+        {{- $baseURL := relLangURL (path.Join $section $version) }}
 
         <ul class="list-unstyled ps-0">
-        {{- range $index, $group := $data -}}
-            {{- $link := $group.title -}}
-            {{- $link_slug := $link | urlize -}}
-
-            {{- if $group.pages -}}
-                {{- $link = index $group.pages 0 -}}
-                {{- $link_slug = $link.title | urlize -}}
-            {{- end -}}
-
-            {{- $group_slug := $group.title | urlize -}}
-            {{- $is_active_group := eq $page.Params.group $group_slug -}}
-
-            {{- if $group.pages }}
+        {{- range $index, $item := $data -}}
+            {{- if $item.pages }}
                 {{- $sectionBreak = true }}
-                <li class="mb-1">
-                    <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}" aria-expanded="{{ if $is_active_group }}true{{ else }}false{{ end }}">
-                        <div class="text-start flex-fill">{{ $group.title }}</div>
-                    </button>
-                    <div class="collapse {{ if $is_active_group }}show{{ end }}" id="sidebar-collapse-{{ $index }}">
-                        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                            {{- range $doc := $group.pages -}}
-                                {{- $doc_slug := $doc.title | urlize -}}
-                                {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-                                {{- $href := relLangURL (path.Join $section site.Params.docs.version $group_slug $doc_slug) -}}
-                                <li><a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
-                            {{- end }}
-                        </ul>
-                    </div>
-                </li>
+                {{ partial "partials/sidebar/group.html" (dict 
+                    "page" $page
+                    "index" $index
+                    "level" (add $level 1)
+                    "baseURL" $baseURL
+                    "group" $item
+                    )
+                }}
             {{- else }}
-                <li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
-                {{- $sectionBreak = false }}
-                <li>
-                    <ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
-                        <li>
-                            {{- $doc_slug := $group.title | urlize -}}
-                            {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-                            {{- $href := relLangURL (path.Join $section site.Params.docs.version $doc_slug) -}}
-                            <a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">
-                                {{ $group.title }}
-                            </a>      
-                        </li>
-                    </ul>
-                </li>
+                {{ partial "partials/sidebar/item.html" (dict 
+                    "page" $page
+                    "sectionBreak" $sectionBreak
+                    "level" $level
+                    "baseURL" $baseURL
+                    "title" $item.title
+                    )
+                }}
             {{- end }}
         {{- end }}
         </ul>

layouts/partials/assets/toc-dropdown.html

@@ -0,0 +1,23 @@
+{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
+{{ if (gt $items 1) -}}
+    <div class="d-grid gap-2 mx-auto">
+        {{ partial "assets/button.html" (dict 
+            "title" (T "toc") 
+            "color" "secondary" 
+            "outline" "true" 
+            "class" "toc-button" 
+            "icon" "fas sort"
+            "justify" "between"
+            "collapse" "toc-collapse"
+            "order" "last") 
+        -}}
+    </div>
+
+    <p>
+        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+            <div class="toc toc-panel text-body-secondary p-2">
+                <small>{{ .TableOfContents }}</small>
+            </div>
+        </div>
+    </p>
+{{ end -}}

layouts/partials/assets/toc.html

@@ -1,6 +1,6 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
-    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+    <div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
         <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
         {{ .TableOfContents }}
     </div>

layouts/partials/button.html

@@ -1,105 +0,0 @@
-<!-- 
-    Displays a button. The shortcode supports the following arguments:
-    "title"         Required title of the button.
-    "href"          Optional address for the button or hyperlink.
-    "id"            Optional id of the button, to be used in the DOM.
-    "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
-    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
-    "color"         Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
-    "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
-    "badge"         Optional positioned badge to display on top of the button.
-    "aria-label"    Optional assistive label for the badge.
-    "tooltip"       Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
-                    inactive buttons.
-    "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
-    "type"          Optional type of the element, either "link" or "button" (default).
-    "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
--->
-
-{{ $title := trim .title " \r\n" -}}
-{{ if not $title -}}
-    {{ errorf "Missing element title" -}}
-{{ end -}}
-
-{{ $id := .id }}
-
-{{ $state := "enabled" -}}
-{{ with .state }}{{ $state = . }}{{ end -}}
-{{ $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
-{{ if not (in $supportedStates $state) -}}
-    {{ errorf "Invalid value for param 'state': %s" $state -}}
-{{ end -}}
-
-{{ $size := "md" -}}
-{{ with .size }}{{ $size = . }}{{ end -}}
-{{ $supportedSizes := slice "sm" "md" "lg" -}}
-{{ if not (in $supportedSizes $size) -}}
-    {{ errorf "Invalid value for param 'size': %s" $size -}}
-{{ end -}}
-
-{{ $color := "primary" -}}
-{{ with .color }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
-{{ if not (in $supportedColors $color) -}}
-    {{ errorf "Invalid value for param 'color': %s" $color -}}
-{{ end -}}
-
-{{ $outline := false -}}
-{{ with .outline }}{{ $outline = . }}{{ end -}}
-
-{{ $badge := "" -}}
-{{ with .badge }}{{ $badge = . }}{{ end -}}
-
-{{ $label := "" -}}
-{{ with .label }}{{ $label = . }}{{ end -}}
-
-{{ $tooltip := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .tooltip }}{{ $tooltip = . }}{{ end -}}
-{{ end -}}
-
-{{ $href := .href -}}
-
-{{ $collapse := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
-{{ end -}}
-
-{{ if $tooltip -}}
-    {{ if $collapse -}}
-        {{ errorf "Cannot use tooltip and collapse at the same time" -}}
-    {{ end -}}
-{{ end -}}
-
-{{ $type := "button" -}}
-{{ with .type }}{{ $type = . }}{{ end -}}
-{{ $supportedTypes := slice "button" "link" -}}
-{{ if not (in $supportedTypes $type) -}}
-    {{ errorf "Invalid value for param 'type': %s" $type -}}
-{{ end -}}
-
-{{ $placement := "top" -}}
-{{ with .placement }}{{ $placement = . }}{{ end -}}
-{{ $supportedPlacements := slice "top" "bottom" "left" "right" -}}
-{{ if not (in $supportedPlacements $placement) -}}
-    {{ errorf "Invalid value for param 'placement': %s" $placement -}}
-{{ end -}}
-
-<a {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
-    {{ with $id }}id="{{ . }}"{{ end }}
-    {{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
-    {{ else }}class="link-{{ $color }} position-relative"{{ end }}
-    {{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
-    {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
-    {{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
-    {{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
-    >
-    {{ $title -}}
-    {{ with $badge }}
-        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
-            {{ . }}
-            {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
-        </span>
-    {{ end }}  
-</a>

layouts/partials/footer/footer.html

@@ -1,7 +1,9 @@
 <footer class="container-fluid text-center p-3">
-    <small class="text-secondary">
-        {{- $copyright := printf "%s © %s %s All rights reserved." (i18n "copyright") (dateFormat "2006" now) .Site.Title }}
-        {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
-        {{ .Site.Params.footer.license | safeHTML }}
-    </small>
+    <div class="container-xxl text-center">
+        <small class="text-secondary">
+            {{- $copyright := printf "%s © %s %s All rights reserved." (i18n "copyright") (dateFormat "2006" now) .Site.Title }}
+            {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
+            {{ .Site.Params.footer.license | safeHTML }}
+        </small>
+    </div>
 </footer>

layouts/partials/footer/scripts.html

@@ -1,15 +1,28 @@
-{{ $filename := "js/main.bundle.js" -}}
-{{ if hugo.IsProduction }}{{ $filename = "js/main.bundle.min.js" }}{{ end -}}
+{{ $filename := .filename | default "js/main.bundle.js" -}}
+{{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
+{{ $page := .page }}
+{{ $header := .header }}
+
 {{ $files := slice -}}
-{{ range $index, $file := resources.Match "js/**.js" -}}
+{{ range $index, $file := resources.Match $match -}}
     {{ $files = $files | append $file -}}
 {{ end -}}
-{{ $bundle := $files | resources.Concat $filename -}}
-{{ $js := $bundle | resources.ExecuteAsTemplate $filename . -}}
 
-{{- if not hugo.IsProduction -}}
-    <script src="{{ $js.RelPermalink }}"></script>
-{{ else -}}
-    {{ $js = $js | minify | fingerprint -}}
-    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ if gt (len $files) 0 }}
+    {{ $bundle := $files | resources.Concat $filename -}}
+    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
+
+    {{- if and (not site.IsServer) $header -}}
+        {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
+        {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
+            <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
+        {{- end }}
+    {{- end -}}
+    
+    {{- if not hugo.IsProduction -}}
+        <script src="{{ $js.RelPermalink }}"></script>
+    {{ else -}}
+        {{ $js = $js | minify | fingerprint -}}
+        <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
 {{ end -}}

layouts/partials/head/stylesheet.html

@@ -15,8 +15,8 @@
     "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
 -}}
 
-{{- $options := (dict "transpiler" "libsass" "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
-{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
+{{- $options := (dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
+{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
 {{- if hugo.IsProduction -}}
     {{- $options = merge $options (dict "outputStyle" "compressed") -}}
 {{- else -}}

layouts/partials/head/twitter_cards.html

@@ -1,7 +1,7 @@
 <!-- Copied from doks -->
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="{{ .Site.Params.twitterSite }}">
-<meta name="twitter:creator" content="{{ .Site.Params.twitterCreator }}">
+{{ with .Site.Params.twitterSite }}<meta name="twitter:site" content="{{ . }}">{{ end }}
+{{ with .Site.Params.twitterCreator }}<meta name="twitter:creator" content="{{ . }}">{{ end }}
 <meta name="twitter:title" content="{{ $.Scratch.Get "title" }}">
 <meta name="twitter:description" content="{{ $.Scratch.Get "description" }}">
 <meta name="twitter:image" content="{{ $.Scratch.Get "thumbnail" }}">

layouts/partials/home/featured.html

@@ -1,18 +1,20 @@
-<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} p-4">
-    <div class="row row-cols-1 row-cols-sm-3 align-items-center pt-5 pb-5 h-100">
-        <div class="col col-md-2 d-none d-md-block"></div>
-        <div class="col col-sm-6 col-md-4 text-center text-sm-start">
-            <p class="fs-1 fw-bold">{{ .Title }}</p>
-            <p>{{ .Content }}</p>
-            {{ if .Site.Params.feature.link }}
-                <p><a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a></p>
-            {{ end }}
+<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
+    <div class="container-xxl p-4">
+        <div class="row row-cols-1 row-cols-sm-3 align-items-center pt-5 pb-5 h-100">
+            <div class="col col-md-2 d-none d-md-block"></div>
+            <div class="col col-sm-6 col-md-4 text-center text-sm-start">
+                <p class="display-4">{{ .Title }}</p>
+                <p>{{ .Content }}</p>
+                {{ if .Site.Params.feature.link }}
+                    <p><a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a></p>
+                {{ end }}
+            </div>
+            <div class="col col-sm-6 col-md-4">
+                {{ if .Site.Params.home.featurePhoto }}
+                    {{- partial "assets/image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
+                {{ end }}
+            </div>
+            <div class="col col-md-2 d-none d-md-block"></div>
         </div>
-        <div class="col col-sm-6 col-md-4">
-            {{ if .Site.Params.home.featurePhoto }}
-                {{- partial "image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
-            {{ end }}
-        </div>
-        <div class="col col-md-2 d-none d-md-block"></div>
     </div>
 </div>

layouts/partials/image.html

@@ -1,117 +0,0 @@
-<!-- 
-    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. The
-    partial supports the following arguments:
-    "url":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
-                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
-    "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
-    "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
-    "title":        Optional alternate text of the image.
-    "caption":      Optional figure caption.
--->
-
-
-{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" }}
-{{ $ratio := .ratio -}}
-{{ $url := .url -}}
-{{ $outerClass := .outerClass -}}
-{{ $innerClass := .innerClass -}}
-{{ $title := .title -}}
-{{ $caption := .caption -}}
-{{ $inner := .inner -}}
-
-{{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
-{{ with $img -}}
-    {{ $smDim := "" -}}
-    {{ $mdDim := "" -}}
-    {{ $lgDim := "" -}}
-    {{ $xlDim := "" -}}
-    {{ $xxlDim := "" -}}
-    {{ if eq $ratio "4x3" -}}
-        {{ $smDim = "576x432" -}}
-        {{ $mdDim = "768x576" -}}
-        {{ $lgDim = "992x744" -}}
-        {{ $xlDim = "1200x900" -}}
-        {{ $xxlDim = "1400x1050" -}}
-    {{ else if eq $ratio "1x1" -}}
-        {{ $smDim = "576x576" -}}
-        {{ $mdDim = "768x768" -}}
-        {{ $lgDim = "992x992" -}}
-        {{ $xlDim = "1200x1200" -}}
-        {{ $xxlDim = "1400x1400" -}}
-    {{ else if eq $ratio "16x9" -}}
-        {{ $smDim = "576x324" -}}
-        {{ $mdDim = "768x432" -}}
-        {{ $lgDim = "992x558" -}}
-        {{ $xlDim = "1200x675" -}}
-        {{ $xxlDim = "1400x788" -}}
-    {{ else if eq $ratio "21x9" -}}
-        {{ $smDim = "576x247" -}}
-        {{ $mdDim = "768x329" -}}
-        {{ $lgDim = "992x425" -}}
-        {{ $xlDim = "1200x514" -}}
-        {{ $xxlDim = "1400x600" -}}
-    {{ else }}
-        {{ $smDim = printf "576x%d" (int (math.Round (mul (div 576.0 $img.Width) $img.Height))) -}}
-        {{ $mdDim = printf "768x%d" (int (math.Round (mul (div 768.0 $img.Width) $img.Height))) -}}
-        {{ $lgDim = printf "992x%d" (int (math.Round (mul (div 992.0 $img.Width) $img.Height))) -}}
-        {{ $xlDim = printf "1200x%d" (int (math.Round (mul (div 1200.0 $img.Width) $img.Height))) -}}
-        {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
-    {{ end -}}
-
-    {{- $sm := "" -}}
-    {{ $md := "" -}}
-    {{ $lg := "" -}}
-    {{ $xl := "" -}}
-    {{ $xxl := "" -}}
-    {{ $fallback := "" -}}
-    {{ if $ratio }}
-        {{- $sm = ($img.Fill (printf "%s webp" $smDim)) -}}
-        {{ $md = ($img.Fill (printf "%s webp" $mdDim)) -}}
-        {{ $lg = ($img.Fill (printf "%s webp" $lgDim)) -}}
-        {{ $xl = ($img.Fill (printf "%s webp" $xlDim)) -}}
-        {{ $xxl = ($img.Fill (printf "%s webp" $xxlDim)) -}}
-        {{ $fallback = ($img.Fill (printf "%s jpg" $xxlDim)) -}}
-    {{ else }}
-        {{- $sm = ($img.Fit (printf "%s webp" $smDim)) -}}
-        {{ $md = ($img.Fit (printf "%s webp" $mdDim)) -}}
-        {{ $lg = ($img.Fit (printf "%s webp" $lgDim)) -}}
-        {{ $xl = ($img.Fit (printf "%s webp" $xlDim)) -}}
-        {{ $xxl = ($img.Fit (printf "%s webp" $xxlDim)) -}}
-        {{ $fallback = ($img.Fit (printf "%s jpg" $xxlDim)) -}}
-    {{ end}}
-
-    {{- with $caption -}}
-        <figure class="figure">
-            <img class="figure-img img-fluid {{ $innerClass }}"
-                srcset="
-                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-                sizes="100vw"
-                src="{{ $fallback.RelPermalink }}"
-                alt="{{ $title }}">
-            <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
-            {{ $inner }}
-        </figure>
-    {{- else -}}
-        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }} {{ $outerClass }}">
-            <img class="img-fluid {{ $innerClass }}"
-                srcset="
-                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-                sizes="100vw"
-                src="{{ $fallback.RelPermalink }}"
-                alt="{{ $title }}">
-            {{ $inner }}
-        </div>
-    {{- end -}}
-{{- end -}}

layouts/partials/utilities/GetVal.html

@@ -0,0 +1,12 @@
+<!-- 
+    Retrieve the value from a key-value pair. The expected format is 'key="value"', including double quotes for the
+    value. Returns -1 when no valid value is found.
+-->
+
+{{- $input := (split . "=") -}}
+{{- $val := -1 -}}
+{{- if gt (len $input) 1 -}}
+    {{- $val = trim (index $input 1) "\"" -}}
+{{- end -}}
+
+{{- return $val -}}

layouts/partials/utilities/git.html

@@ -1,5 +1,5 @@
 {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
 Last updated: {{ $lastmodstr }}
 {{ with .GitInfo }}
-&bull;&nbsp;<a href="{{ site.Params.schema.gitHub }}/commit/{{ .Hash }}">{{ .Subject }} ({{ .AbbreviatedHash }})</a>
+&bull;&nbsp;<a href="{{ site.Params.docs.github | default site.Params.schema.github }}/commit/{{ .Hash }}">{{ .Subject }} ({{ .AbbreviatedHash }})</a>
 {{ end -}}

layouts/shortcodes/accordion-item.html

@@ -11,7 +11,7 @@
     {{ if .Parent }}
         {{ errorf "Missing value for param 'header': %s" .Parent.Position -}}
     {{ else }}
-    {{ errorf "Missing value for param 'header': %s" .Position -}}
+        {{ errorf "Missing value for param 'header': %s" .Position -}}
     {{ end }}
 {{ end -}}
 

layouts/shortcodes/breadcrumb.html

@@ -15,5 +15,5 @@
 {{- end -}}
 
 {{- if not $error -}}
-    {{- partial "breadcrumb.html" $page -}} 
+    {{- partial "assets/breadcrumb.html" $page -}} 
 {{- end -}}

layouts/shortcodes/button.html

@@ -6,7 +6,7 @@
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
     "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
     "badge"         Optional positioned badge to display on top of the button.
     "aria-label"    Optional label for the badge.
@@ -78,5 +78,19 @@
 {{ end -}}
 
 {{ if not $error }}
-    {{- partial "button.html" (dict "type" $type "title" $title "size" $size "color" $color "outline" $outline "badge" $badge "label" $label "tooltip" $tooltip "collapse" $collapse "href" $href "id" $id "state" $state "placement" $placement) -}} 
+    {{- partial "assets/button.html" (dict 
+        "type" $type
+        "title" $title
+        "size" $size
+        "color" $color
+        "outline" $outline
+        "badge" $badge
+        "label" $label
+        "tooltip" $tooltip
+        "collapse" $collapse
+        "href" $href
+        "id" $id
+        "state" $state
+        "placement" $placement)
+    -}} 
 {{ end }}

layouts/shortcodes/card.html

@@ -3,7 +3,8 @@
     "path"          Required path of the page.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
+                    color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -26,7 +27,7 @@
 {{ $color := "" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
 {{ if $color }}
-    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
     {{ if not (in $supportedColors $color) -}}
         {{ errorf "Invalid value for param 'color': %s" .Position -}}
         {{ $error = true -}}

layouts/shortcodes/example.html

@@ -33,11 +33,6 @@
     {{- end -}}
     <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
-        <!-- <div class="d-flex ms-auto">
-            <button type="button" class="mt-0 me-0 border-0" title="Copy to clipboard">
-                <i class="fa-regular fa-clipboard"></i>
-            </button>
-        </div> -->
     </div>
     <div class="rounded-bottom syntax-highlight">
         {{- if eq $show_markup true -}}

layouts/shortcodes/image.html

@@ -9,6 +9,7 @@
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
+    "mode":         Optional flag indicating if the image should support color modes.
 -->
 
 {{- if isset .Params "src" -}}
@@ -24,8 +25,24 @@
     {{- $class := .Get "class" -}}
     {{ $title := .Get "title" -}}
     {{ $caption := .Get "caption" -}}
-
-    {{- partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}} 
+    {{ $supportedFlags := slice "true" "false" -}}
+    {{ $modeParam := "false" -}}
+    {{ $mode := false -}}
+    {{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
+    {{ if in $supportedFlags $modeParam -}}
+        {{ if eq $modeParam "true" }}{{ $mode = true }}{{ else }}{{ $mode = false }}{{ end -}}
+    {{ else -}}
+        {{ errorf "Invalid value for param 'mode': %s" $modeParam -}}
+    {{ end -}}
+    
+    {{- partial "assets/image.html" (dict 
+        "url" $url
+        "ratio" $ratio
+        "innerClass" $class
+        "title" $title
+        "caption" $caption
+        "mode" $mode)
+    -}} 
 {{ else -}}
     {{ errorf "Missing value for param 'src': %s" .Position -}}
 {{ end -}}

layouts/shortcodes/img.html

@@ -18,7 +18,7 @@
 
 {{- if $src -}}
     <div class="carousel-item {{ if eq .Ordinal 0 }}active{{ end }}">
-        {{ partial "image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
+        {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
         <div class="carousel-caption gradient"></div>
         {{ with $caption }}
             <div class="carousel-caption d-none d-md-block">

layouts/shortcodes/nav-item.html

@@ -0,0 +1,54 @@
+<!-- 
+    Defines an individual nav item. The shortcode supports the following arguments:
+    "header"        Required header of the nav item.
+    "class"         Optional class attribute of the inner nav item.
+    "show"          Optional flag to indicate an item should be shown.
+-->
+
+{{- $id := .Ordinal -}}
+{{- $parent := printf "nav-%d" .Parent.Ordinal -}}
+{{- with (.Parent.Get "id") -}}
+    {{- $parent = . -}}
+{{- end -}}
+
+{{- $fade := false -}}
+{{- if eq (.Parent.Get "fade") "true" -}}
+    {{- $fade = true -}}
+{{- end -}}
+
+{{- $header := .Get "header" -}}
+{{- if not $header -}}
+    {{- if .Parent -}}
+        {{- errorf "Missing value for param 'header': %s" .Parent.Position -}}
+    {{- else -}}
+        {{- errorf "Missing value for param 'header': %s" .Position -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $class := .Get "class" -}}
+{{- $body := trim .Inner " \r\n" -}}
+
+{{- $supportedFlags := slice "true" "false" -}}
+{{- $showParam := "false" -}}
+{{- $show := false -}}
+{{- with .Get "show" }}{{ $showParam = . }}{{ end -}}
+{{- if in $supportedFlags $showParam -}}
+    {{- if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'show': %s" $showParam -}}
+{{- end -}}
+
+{{- $disabledParam := "false" -}}
+{{- $disabled := false -}}
+{{- with .Get "disabled" }}{{ $disabledParam = . }}{{ end -}}
+{{- if in $supportedFlags $disabledParam -}}
+    {{- if eq $disabledParam "true" }}{{ $disabled = true }}{{ else }}{{ $disabled = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'disabled': %s" $disabledParam -}}
+{{- end -}}
+
+<div class="tab-pane{{ if $show }} active {{ if $fade}}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}" id="{{ $parent }}-{{ $id }}" 
+    role="tabpanel" aria-labelledby="{{ $parent }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
+    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
+    {{ $body | markdownify | safeHTML }}
+</div>

layouts/shortcodes/nav.html

@@ -0,0 +1,77 @@
+<!-- 
+    Displays a tab group of multiple items. Add nav-item inner elements for each tab pane. The shortcode supports the
+    following arguments:
+    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "fade"          Optional flag to make tab panes fade in.
+    "class":        Optional class attribute of the tab group, e.g. “nav-fill”.
+-->
+
+{{- $id := printf "nav-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
+
+{{- $class := .Get "class" -}}
+{{ $type := .Get "type" -}}
+{{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
+{{ if $type }}
+    {{ if not (in $supportedNavTypes $type) -}}
+        {{ errorf "Invalid value for param 'type': %s" $type -}}
+    {{ end -}}
+{{ end -}}
+
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $verticalParam := "false" -}}
+{{ $vertical := false -}}
+{{ with .Get "vertical" }}{{ $verticalParam = . }}{{ end -}}
+{{ if in $supportedFlags $verticalParam -}}
+    {{ if eq $verticalParam "true" }}{{ $vertical = true }}{{ else }}{{ $vertical = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'vertical': %s" $verticalParam -}}
+{{- end -}}
+
+{{ $fadeParam := "false" -}}
+{{ with .Get "fade" }}{{ $fadeParam = . }}{{ end -}}
+{{ if not (in $supportedFlags $fadeParam) -}}
+    {{ errorf "Invalid value for param 'fade': %s" $fadeParam -}}
+{{- end -}}
+
+{{- if and (eq $type "tabs") $vertical -}}
+    {{- errorf "Tabs do not support vertical layout" -}}
+{{- end -}}
+
+{{- $inner := .Inner -}}
+{{- $items := findRE "data-header=\"(.+?)\"" $inner -}}
+{{- $showVal := findRE "data-show-id=\"(.+?)\"" $inner -}}
+{{- $showID := -1 -}}
+{{- if gt (len $showVal) 0 -}}
+    {{- $showID = int (partial "utilities/GetVal.html" (index $showVal 0)) -}}
+{{- end -}}
+
+{{ $disabled := slice -}}
+{{- $disabledVal := findRE "data-disabled-id=\"(.+?)\"" $inner -}}
+{{- range $item := $disabledVal -}}
+    {{- $disabled = $disabled | append (int (partial "utilities/GetVal.html" $item)) -}}
+{{- end -}}
+
+{{- $hasContent := gt (len (findRE "data-has-content=\"true\"" $inner)) 0 -}}
+
+{{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+<div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+    {{- range $index, $item := $items -}}
+        {{- $header := partial "utilities/GetVal.html" $item -}}
+        {{- $itemDisabled := in $disabled $index -}}
+        <button class="nav-link text-nowrap{{ if eq $index $showID }} active{{ end }} {{ if $itemDisabled}} disabled {{end }}" id="{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#{{ $id }}-{{ $index }}" 
+                type="button" role="tab" aria-controls="{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+            {{ $header }}
+        </button>
+    {{ end -}}
+</div>
+
+{{- if $hasContent -}}
+    <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+        {{- $inner -}}
+    </div>
+{{- end -}}
+{{ if $vertical }}</div>{{ end }}

layouts/shortcodes/navbar.html

@@ -7,13 +7,17 @@
     "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
     "style"         Optional style of the navbar, either "light" (default) or "dark".
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
+                    default color is none.
+    "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
     "title"         Optional brand title, displayed when the logo is not set.
 -->
 
 {{ $error := false }}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body" "body-tertiary" -}}
+{{ $supportedFlags := slice "true" "false" -}}
 
 {{ $id := add .Ordinal 1 }}
 
@@ -49,7 +53,6 @@
 {{ $color := "" -}}
 {{ with .Get "color" }}
     {{ $color = . }}
-    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
     {{ if not (in $supportedColors $color) -}}
         {{ errorf "Invalid value for param 'color': %s" $color -}}
         {{ $error = true -}}
@@ -58,12 +61,18 @@
 
 {{ $searchParam := "true" -}}
 {{ with .Get "search" }}{{ $searchParam = . }}{{ end -}}
-{{ $supportedFlags := slice "true" "false" -}}
 {{ if not (in $supportedFlags $searchParam) -}}
     {{ errorf "Invalid value for param 'search': %s" .Position -}}
     {{ $error = true -}}
 {{ end -}}
 
+{{ $modeParam := "true" -}}
+{{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
+{{ if not (in $supportedFlags $modeParam) -}}
+    {{ errorf "Invalid value for param 'mode': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
 {{ $logo := "" -}}
 {{ with .Get "logo" }}{{ $logo = . }}{{ end -}}
 
@@ -71,5 +80,17 @@
 {{ with .Get "title" }}{{ $title = . }}{{ end -}}
 
 {{ if not $error -}}
-    {{- partial "assets/navbar.html" (dict "id" $id "page" $page "size" $size "style" $style "color" $color "search" $searchParam "menus" $menus "logo" $logo "title" $title) -}}
+    {{- partial "assets/navbar.html" (dict 
+        "id" $id 
+        "page" $page
+        "size" $size
+        "style" $style
+        "color" $color
+        "search" $searchParam
+        "mode" $modeParam
+        "menus" $menus
+        "logo" $logo
+        "title" $title
+        )
+    -}}
 {{ end -}}

layouts/shortcodes/persona.html

@@ -0,0 +1,33 @@
+<!-- 
+    Displays a custom persona card. The shortcode supports the following arguments:
+    "path"          Required path of the page.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", "white",  "black", "body", or "body-tertiary". By default, no
+                    color is specified.
+-->
+
+{{- $error := false -}}
+
+{{- $path := .Get "path" -}}
+{{- $page := .Site.GetPage $path -}}
+{{- if not $page -}}
+    {{- errorf "Invalid or missing value for param 'path': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $class := .Get "class" -}}
+
+{{- $color := "" -}}
+{{- with .Get "color" }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "Invalid value for param 'color': %s" .Position -}}
+        {{- $error = true -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if not $error -}}
+    {{- partial "assets/persona.html" (dict "path" $path "class" $class "color" $color) -}}
+{{- end -}}

layouts/shortcodes/spinner.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a spinner. The shortcode supports the following arguments:
     "color":        Optional theme color of the alert, either "primary" (default), "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black".
+                    "warning", "info", "light", "dark", "white", or "black".
     "grow"          Optional flag to indicate the spinner is growing instead of rotating, defaults to false.
     "class":        Optional class attribute of the spinner wrapping element, e.g. “text-center”.
 -->

layouts/shortcodes/table.html

@@ -1,9 +1,21 @@
-{{ $input := .Inner | markdownify }}
-{{ $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" }}
-{{ $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" }}
-{{ $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" }}
-{{ $class := .Get 0 | default "" }}
-{{ $old := "<table>" }}
-{{ $new := printf "<table class=\"table %s\">" $class }}
-{{ $input := replace $input $old $new }}
-{{ $input | safeHTML }}
+{{- $responsiveVals := slice "table-responsive" "table-responsive-none" "table-responsive-sm" "table-responsive-md" "table-responsive-lg" "table-responsive-xl" "table-responsive-xxl" -}}
+{{- $responsive := intersect .Params $responsiveVals -}}
+{{- $main := complement $responsive .Params -}}
+
+{{- if in $responsive "table-responsive-none" -}}
+    {{- $responsive = "" -}}
+{{- else if not $responsive -}}
+    {{ $responsive = (slice "table-responsive") -}}
+{{- end -}}
+
+{{- $input := .Inner | markdownify }}
+{{- $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" -}}
+{{- $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" -}}
+{{- $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" -}}
+{{- $class := delimit $main " " -}}
+{{- $old := "<table>" -}}
+{{- $new := printf "<table class=\"table %s\">" $class -}}
+{{ $input := replace $input $old $new -}}
+{{- with $responsive }}<div class="{{ delimit . " " }}">{{ end -}}
+{{ $input | safeHTML }}
+{{- with $responsive }}</div>{{ end -}}

layouts/shortcodes/tooltip.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a tooltip for a link. The shortcode supports the following arguments:
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
     "title"         Required text to display in the tooltip.
     "href"          Required address for the button or hyperlink.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
@@ -41,5 +41,5 @@
 {{ end -}}
 
 {{ if not $error }}
-    {{- partial "button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}} 
+    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}}</div>
 {{ end }}

layouts/tags/list.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
-    <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
+    <div class="container-xxl px-3 px-xxl-0">
+        <div class="row row-cols-1 row-cols-sm-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
-                <h1>{{ .Name | humanize }}</h1>
+                <p class="display-4 mt-5">{{ .Name | humanize }}</p>
 
                 {{ if eq .Kind "taxonomy" }}
                     <div class="row mt-5"></div>

netlify.toml

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.10.0",
+  "version": "0.12.7",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -57,20 +57,20 @@
     "bootstrap": "^5.3.0-alpha3",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.39.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
-    "hugo-bin": "^0.101.5",
-    "markdownlint-cli2": "^0.6.0",
+    "hugo-bin": "^0.102.0",
+    "markdownlint-cli2": "^0.7.0",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.0",
     "shx": "^0.3.4",
-    "stylelint": "^15.4.0",
-    "stylelint-config-standard-scss": "^7.0.1"
+    "stylelint": "^15.6.0",
+    "stylelint-config-standard-scss": "^9.0.0"
   },
   "hugo-bin": {
     "buildTags": "extended"