Merge pull request #1527 from gethinode/develop

Develop

.github/workflows/lint-build.yml

@@ -14,6 +14,10 @@ env:
   CACHE_PATH_WIN: '~\AppData\Local\hugo_cache'
   CACHE_PATH_MAC: '/Users/runner/Library/Caches/hugo_cache'
 
+permissions:
+  pull-requests: read
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest

.github/workflows/npm-publish.yml

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

.github/workflows/release.yml

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

.gitignore

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

.husky/commit-msg

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

.husky/install.mjs

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

.husky/pre-commit

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

.stylelintrc.json

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

LICENSE

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

README.md

@@ -15,9 +15,6 @@
     <a href="https://gethinode.com">
         <img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
     </a>
-    <a href="https://www.npmjs.com/package/%40gethinode/hinode">
-        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" alt="npm package">
-    </a>
     <a href="https://app.netlify.com/sites/gethinode-demo/deploys">
         <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </a>

assets/js/critical/languageSelector.js

@@ -1,9 +1,12 @@
 /* eslint-disable */
-{{- if site.Params.main.enableLanguageSelectionStorage -}} 
+{{- if site.Params.main.enableLanguageSelectionStorage -}}
+{{- $folder := (urls.Parse site.BaseURL).Path | default "/" -}}
 
 (() => {
   'use strict'
 
+  const folder = '{{ $folder }}'
+
   // Function to get the selected language from local storage
   function getLanguage () {
     return getLocalStorage('selectedLanguage', document.documentElement.lang, 'functional')
@@ -22,17 +25,37 @@
           window.location.href = href
         }
       } else {
-        window.location.href = '/' + language + '/'
+        let target = folder + language + '/'
+        if (window.location.href !== target) {
+          window.location.href = target
+        }
       }
     }
   }
 
   // Event listener for language selection
   document.addEventListener('DOMContentLoaded', () => {
-    const storedLanguage = getLanguage()
-    const languageItems = document.querySelectorAll('#language-selector .dropdown-item')
+    // override stored language when query string contains force is true
+    let params = new URLSearchParams(document.location.search)
+    let force = params.get('force')
+    if (force !== null && force.toLowerCase() == 'true') {
+      setLanguage(document.documentElement.lang)
+      return
+    }
 
-    if (languageItems.length > 0) {
+    // continue with regular code
+    const storedLanguage = getLanguage()
+    const languageItems = document.querySelectorAll('#language-selector[data-translated=true] .dropdown-item')
+
+    const link = document.querySelector("link[rel='canonical']")
+    let alias = ''
+    if (link !== null) {
+      alias = link.getAttribute('href')
+    }
+    
+    if ((alias !== '') && (window.location.href !== alias)) {
+      window.location.href = alias
+    } else if (languageItems.length > 0) {
       // Redirect if the stored language differs from the active language
       if ((storedLanguage) && (document.documentElement.lang !== storedLanguage)) {
         languageItems.forEach(item => {
@@ -54,10 +77,8 @@
       })
     }
     else {
-      // Redirect to the localized homepage
-      const defaultLang = '{{ site.LanguageCode | default site.Language.Lang }}'
-      let language = storedLanguage ? storedLanguage : defaultLang
-      window.location.href = '/' + language + '/'
+      // overrule the current stored language when no translation is available
+      setLanguage(document.documentElement.lang)
     }
   })
 })()

assets/js/modal.js

@@ -0,0 +1,6 @@
+document.addEventListener('hide.bs.modal', function (event) {
+  // Remove the focus from the active element
+  if (document.activeElement) {
+    document.activeElement.blur()
+  }
+})

assets/js/nav.js

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

assets/js/sharing.js

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

assets/scss/common/_styles.scss

@@ -18,23 +18,13 @@ a:active {
 // Ensure main page is rendered to full viewport height
 //
 .main {
-    min-height: 100vh;
-}
-
-.fullcover {
     --navbar-height: #{$navbar-height};
-
-    min-height: calc(100vh - var(--navbar-height));
-}
-
-.fullscreen {
     --overlay-offset: #{$overlay-offset};
+    --section-height: 88vh;
+    --max-section-height: 1024px;
 
-    min-height: calc(100vh - var(--overlay-offset));
-}
-
-.main-content {
-    margin-top: var(--navbar-offset);
+    min-height: 100vh;
+    margin-top: var(--overlay-offset);
 }
 
 $utilities: map-merge(
@@ -100,66 +90,24 @@ $utilities: map-merge(
     )
 );
 
-@media screen and (orientation: portrait) {
-    .min-vh-custom {
-        min-height: 25vh !important
-    }
-}
-
-@media screen and (orientation: landscape) {
-    .min-vh-custom {
-        min-height: 50vh !important
-    }
-}
-
 :root {
     --nav-height: 90px;
 }
 
-@include media-breakpoint-up(sm) {
-    .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));
-    }    
-}
-
-.main-cover {
-    min-height: 100vh;
+.section-cover {
+    min-height: calc(var(--section-height) - var(--overlay-offset));
 }    
 
 @include media-breakpoint-up(xxl) {
-    .main-cover {
-        min-height: calc(min(100vh, 1000px));
+    .section-cover {
+        min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
     }    
 }
 
 /* stylelint-disable media-feature-range-notation */
 @media (min-height: 1400px) { 
-    .main-cover {
-        min-height: calc(min(100vh, 1000px));
+    .section-cover {
+        min-height: calc(min(calc(var(--section-height) - var(--overlay-offset)), var(--max-section-height)));
     }
 }
 /* stylelint-enable media-feature-range-notation */

assets/scss/common/_variables-dark.scss

@@ -5,6 +5,8 @@
         --bs-primary-dark: #{$primary-bg-subtle-dark};
         --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
         --bg-primary-subtle: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 0.1));
+        --bs-body: var(--bs-body-bg);
+        --bs-body-tertiary: var(--bs-tertiary-bg);
 
         .bg-primary-subtle {
             background-color: var(--bg-primary-subtle) if($enable-important-utilities, !important, null);

assets/scss/common/_variables-dart.scss

@@ -16,6 +16,8 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
+$theme-border-radius:           1rem;
+
 strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
@@ -33,8 +35,10 @@ $warning:                       h.$warning;
 $danger:                        h.$danger;
 $light:                         h.$light;
 $dark:                          h.$dark;
-
+$white:                       #fff !default;
 $black:                       #000 !default;
+$body-bg:                     #fff !default;
+$gray-100:                    #f8f9fa !default;
 $btn-toggle-color:              $black !default;
 
 $carousel-dark-indicator-active-bg:  #fff !default;
@@ -50,3 +54,23 @@ $primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-sha
 $dropdown-transition: opacity .15s ease-in-out !default;
 $dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
 $dropdown-horizontal-padding-y: calc(1rem + 2px);
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);
+
+$btn-padding-y-xs:            .08rem !default;
+$btn-padding-x-xs:            0.3rem !default;
+$btn-font-size-xs:            $font-size-base * .6 !default;
+$btn-border-radius-xs:        .2rem !default;

assets/scss/common/_variables.scss

@@ -17,14 +17,21 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
+$theme-border-radius:           1rem;
+
 strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 // scss-docs-end font
 
+$white:                       #fff !default;
 $black:                       #000 !default;
+$body-bg:                     #fff !default;
+$gray-100:                    #f8f9fa !default;
 $btn-toggle-color:              $black !default;
 
+$card-color:                    var(--bs-body-color);
+
 $carousel-dark-indicator-active-bg:  #fff !default;
 $carousel-dark-caption-color:        #fff !default;
 $carousel-dark-control-icon-filter:  invert(0) grayscale(100) !default;
@@ -42,3 +49,23 @@ $dropdown-transition: opacity .15s ease-in-out !default;
 $dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
 $dropdown-horizontal-padding-y: calc(1rem + 2px);
 // scss-docs-end horizontal-nav
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);
+
+$btn-padding-y-xs:            .08rem !default;
+$btn-padding-x-xs:            0.3rem !default;
+$btn-font-size-xs:            $font-size-base * .6 !default;
+$btn-border-radius-xs:        .2rem !default;

assets/scss/components/_button.scss

@@ -48,3 +48,7 @@ a.btn {
 
     margin: 0 !important;
 }
+
+.btn-xs {
+  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
+}

assets/scss/components/_card.scss

@@ -5,6 +5,10 @@
     background-color: var(--#{$prefix}secondary-bg);
 }
 
+.card {
+    --bs-card-bg: transparent;
+}
+
 .card .card-img-wrap {
     overflow: hidden;
     position: relative;

assets/scss/components/_nav.scss

@@ -1,10 +1,8 @@
-.nav-tabs > .nav-link.active {
-    border-bottom-color: var(--bs-body-bg) !important;
-    border-bottom-style: solid !important;
-    z-index: 1;
+.nav-tabs {
+    border: none !important;
 }
 
-.nav-callout {
+.nav-callout, .tab-content {
     --#{$prefix}nav-callout-bg: var(--#{$prefix}light);
     --#{$prefix}nav-callout-active-bg: var(--bs-primary-bg-subtle);
     --#{$prefix}nav-callout-gap: #{$nav-underline-gap};
@@ -12,13 +10,13 @@
     column-gap: var(--#{$prefix}nav-callout-gap) !important;
 }
 
-.nav-callout > .tab-content {
+.nav-callout + .tab-content {
     background-color: var(--#{$prefix}nav-callout-bg);
     padding: 2 * $spacer;
     margin-top: 0 !important;
 }
 
-.nav-callout > .nav-link {
+.nav-callout .nav-link {
     display: flex;
     text-align: start;
     vertical-align: text-top;
@@ -27,7 +25,7 @@
     border-bottom: none;
 }
 
-.nav-callout > .nav-link.active {
+.nav-callout .nav-link.active {
     background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-bg) 50%, transparent 0);
     background-size: 50% (3 * $spacer);
     background-repeat: no-repeat;
@@ -53,7 +51,7 @@
     }
 }
 
-.nav-callout > .accordion-item {
+.nav-callout .accordion-item {
     margin-top: 2 * $spacer;
     margin-bottom: 2 * $spacer;
     border: none;
@@ -88,7 +86,7 @@
 
 @if $enable-dark-mode {
     @include color-mode(dark) {
-        .nav-callout {
+        .nav-callout, .tab-content {
             --#{$prefix}nav-callout-bg: var(--#{$prefix}tertiary-bg);
         }
 

assets/scss/components/_sidebar.scss

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

assets/scss/components/_table.scss

@@ -11,6 +11,10 @@
     padding-right: 1rem;
 }
 
+.table-border-bottom-wrap {
+    border-bottom-style: none !important
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .table-striped, .table-striped-columns {

assets/scss/components/_timeline.scss

@@ -12,7 +12,15 @@ $semi-circle-border: 0.2rem;
 
 @each $state in map-keys($theme-colors) {
     .timeline-#{$state} {
-      --timeline-highlight: var(--#{$prefix}#{$state});
+        --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state}-subtle {
+        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
     }
 }
 

assets/scss/components/_toc.scss

@@ -6,7 +6,6 @@
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 5rem);
     overflow-y: auto;
     top: 5rem;
 }
@@ -75,6 +74,35 @@
     }
 }
 
+a.toc-item {
+    display: block;
+}
+
+a.toc-level-1 {
+    margin-left: 0;
+}
+
+a.toc-level-2 {
+    margin-left: 1em;
+}
+
+a.toc-level-3 {
+    margin-left: 2em;
+}
+
+a.toc-level-4 {
+    margin-left: 3em;
+}
+
+a.toc-level-5 {
+    margin-left: 4em;
+}
+
+a.toc-level-6 {
+    margin-left: 5em;
+}
+
+
 @if $enable-dark-mode {
     [data-bs-theme="dark"] {
         .toc-button {

commitlint.config.js

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

component-library/bookshop.scss

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

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

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

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

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

component-library/components/about/about.scss

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

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

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

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

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

component-library/components/articles/articles.scss

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

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

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

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

@@ -0,0 +1,82 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cards" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cards/cards.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ range $args.elements }}
+	<!-- TODO: check mode -->
+	{{ $list = $list | append (dict 
+		"title"       .title
+		"description" (.content | page.RenderString)
+		"icon"        .icon
+		"thumbnail"   .image
+	) }}
+{{ end}}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{/* Layout for small screens */}}
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary %s" (or $args.class ""))
+		"wrapper"      (printf "d-%s-none" $breakpoint.prev)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   (or $args.iconStyle "fa-2x")
+		"align"        $args.align
+		"orientation"  ($args.orientation | default "horizontal-sm")
+		"hook"         "assets/live-card.html"
+	) -}}
+
+	{{/* Layout for regular screens */}}
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary %s" (or $args.class ""))
+		"wrapper"      (printf "d-none d-%s-block" $breakpoint.prev)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   (or $args.iconStyle "fa-2x")
+		"align"        $args.align
+		"orientation"  ($args.orientation | default "stacked")
+		"hook"         "assets/live-card.html"
+	) -}}
+{{ end }}
+

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

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

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

@@ -0,0 +1,43 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cta" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cta/cta.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+	{{ $links := slice }}
+	{{ if and (reflect.IsSlice .links) (gt (len .links) 0) }}
+		{{ $links = .links }}
+	{{ else }}
+		{{ with site.Params.modules.bookshop.cta.defaultURL }}
+			{{ $links = $links | append (dict "title" (T "contactAction") "url" . "icon" "fas chevron-right") }}
+		{{ end }}
+	{{ end }}
+
+	{{ partial "assets/contact.html" (dict 
+		"page"         page
+		"orientation"  "horizontal"
+		"heading"      $args.heading
+		"contact"      $args.contact
+		"caption-url"  $args.captionUrl
+		"illustration" $args.illustration
+		"class"        "contact-img"
+		"links"        $links
+		"align"        $args.align
+		"order"        $args.order
+		"data"         site.Params.modules.bookshop.cta.section 
+	) }}
+{{ end }}

component-library/components/cta/cta.scss

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

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

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

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

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

component-library/components/faq/faq.scss

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

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

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

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

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

component-library/components/hero/hero.scss

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

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

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

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

@@ -0,0 +1,87 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "panels" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/panels/panels.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ $titles := slice }}
+{{ $toc := slice }}
+{{ $parentID := printf "panel-%v" (cond (isset . "_ordinal") (index . "_ordinal") (md5 (delimit (slice . now) "-"))) }}
+{{ $inner := "" }}
+{{ range $i, $element := $args.elements }}
+	{{ $toc = $toc | append (dict "href" "panel-0-1" "level" 2 "title" $element.title) }}
+
+    {{ $hero := partial "assets/hero.html"  (dict 
+        "page"         page
+        "heading"      (dict "title" $element.title "content" $element.content "width" 8 "size" 6)
+        "background"   $args.background
+        "illustration" (dict "ratio" $args.ratio "icon" $element.icon "image" $element.image "mode" $element.mode)
+		"order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  "horizontal"
+		"align"        "start"
+		"width"        12
+        )
+    }}
+
+	{{- $output := partial "assets/nav-item.html" (dict 
+        "page"      page
+        "id"        $i
+        "parent-id" $parentID
+        "fade"      false
+        "title"     $element.title
+		"show"      (eq $i 0)
+        "raw"       $hero
+        )
+    -}}
+
+	{{ $inner = printf "%s\n%s" $inner $output }}
+	{{ $titles = $titles | append $element.title }}
+{{ end}}
+
+{{/* Main code */}}
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict
+		"heading" $args.heading
+		"justify" $args.justify
+		"class" (printf "pb-%d" $padding.y))
+	-}}
+
+	{{- partial "assets/nav.html" (dict 
+        "id"           (or $args.id $parentID)
+        "page"         page
+		"nav-items"    $inner
+        "nav-titles"   $titles
+        "tab-type"     $args.tabType
+        "vertical"     $args.vertical
+        "word-wrap"    $args.wordWrap
+        "class"        $args.class
+        "pane"         $args.pane
+        "width"        $args.width
+		"responsive"   $args.responsive
+        ) 
+    -}}
+{{ end }}
+

component-library/components/panels/panels.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

component-library/helpers/component.html

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

component-library/helpers/partial.html

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

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

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

component-library/shared/styles/global.scss

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

component-library/theme.scss

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

config/_default/hugo.toml

@@ -1,6 +1,6 @@
 # toml-docs-start main
 title = "Hinode"
-copyright = "Copyright © 2024 Mark Dumay."
+copyright = "Copyright © 2022 - 2025 Mark Dumay."
 enableGitInfo = true
 # toml-docs-end main
 
@@ -84,7 +84,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
     disabled = false
     simple = true
 
-  [privacy.twitter]
+  [privacy.x]
     disabled = false
     enableDNT = true
     simple = true
@@ -100,7 +100,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 [services]
   [services.instagram]
     disableInlineCSS = true
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
   [services.googleAnalytics]
     # ID = "G-xxxxxxxxxx"
@@ -116,8 +116,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.134.0"
-    max = ""
+    min = "0.146.0"
   [[module.mounts]]
     source = "archetypes"
     target = "archetypes"
@@ -139,10 +138,39 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'layouts/partials/bookshop'
+    includeFiles = ['**/*.hugo.html']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'data/structures'
+    includeFiles = ['**/*.bookshop.yml']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/bookshop'
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/scss/modules/bookshop'
+    includeFiles = ['**/*.scss']
+    excludeFiles = ['bookshop.scss']
+  [[module.mounts]]
+    source = 'component-library/bookshop.scss'
+    target = 'assets/scss/bookshop.scss'
+  [[module.mounts]]
+    source = 'component-library/helpers'
+    target = 'layouts/partials/_bookshop/helpers'
+  # ensures main package.json is always available, even when using workspaces
+  # in workspaces, the package.json is pointing to the first imported module
+  [[module.mounts]]
+    source = "package.json"
+    target = "assets/data/package-hinode.json"
   [[module.mounts]]
     source = "netlify.toml"
     target = "assets/config/netlify.toml"
 # toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/cloudcannon/bookshop/hugo/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-bootstrap"
   [[module.imports]]
@@ -150,7 +178,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-flexsearch/v2"
   [[module.imports]]
-    path = "github.com/gethinode/mod-fontawesome"
+    path = "github.com/gethinode/mod-fontawesome/v2"
   [[module.imports]]
     path = "github.com/gethinode/mod-google-analytics"
   [[module.imports]]
@@ -160,9 +188,11 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-lottie"
   [[module.imports]]
-    path = "github.com/gethinode/mod-simple-datatables"
+    path = "github.com/gethinode/mod-mermaid/v3"
   [[module.imports]]
-    path = "github.com/gethinode/mod-utils/v2"
+    path = "github.com/gethinode/mod-simple-datatables/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-utils/v4"
 # toml-docs-end modules
 
 # toml-docs-start segments

config/_default/params.toml

@@ -10,8 +10,13 @@
     footerBelowFold = false
     loading = "lazy"
     breakpoint = "md"
+    titleCase = false
+    [main.padding]
+        x = 4
+        y = 4
     [main.internalLinks]
         validate = true
+        pretty = false
     [main.externalLinks]
         cue = false
         tab = false
@@ -40,6 +45,12 @@
         host = "youtube"
 # toml-docs-end videos
 
+[dam]
+    videoCodecs = [
+        "webm/vp9",
+        "mp4/h265",
+        "mp4"
+    ]
 
 # toml-docs-start debugging
 [debugging]
@@ -73,6 +84,7 @@
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
+    logo-height = 30
     color = "body"
     fixed = true
     overlay = false
@@ -85,6 +97,9 @@
     toc = true
     sidebar = true
     size = "md"
+    [navigation.padding]
+        x = 4
+        y = 4
 # toml-docs-end navigation
 
 # toml-docs-start messages
@@ -219,7 +234,6 @@
     font-src = ["fonts.gstatic.com"]
     frame-src = [
         "player.cloudinary.com",
-        "player.vimeo.com",
         "www.youtube-nocookie.com",
         "www.youtube.com"
     ]
@@ -228,7 +242,39 @@
         "*.imgix.net",
         "*.imagekit.io",
         "*.cloudinary.com",
-        "i.vimeocdn.com",
         "i.ytimg.com"
     ]
-# toml-docs-end csp
+# toml-docs-end csp
+
+[modules.vimeo]
+    local = true
+    integration = "optional"
+    state = "async"
+    url = "https://player.vimeo.com/api/player.js"
+
+[modules.vimeo.csp]
+    frame-src = ["player.vimeo.com"]
+    img-src = ["i.vimeocdn.com"]
+    script-src = ["player.vimeo.com"]
+
+# define module integration
+[modules.bookshop]
+  integration = "core"
+
+# provide default hero settings
+[modules.bookshop.hero]
+  align = "start"
+#   backdrop = "/assets/img/nat-9l98kFByiao-unsplash.jpg"
+  overlayMode = "dark"
+  section = true
+  default = ["section"]
+#   default = ["page", "home", "section"]
+
+[modules.bookshop.title]
+  size = 4
+  arrangement = "above"
+  headingStyle = "display"
+  bodyStyle = "lead text-muted"
+
+[modules.bookshop.articles]
+  moreButton = true

config/_default/server.toml

@@ -7,17 +7,17 @@
     Access-Control-Allow-Origin = '*'
     Content-Security-Policy = """
         base-uri 'self'; \
-        connect-src 'self' *.google-analytics.com *.analytics.google.com *.googletagmanager.com; \
+        connect-src 'self' *.analytics.google.com *.google.com *.google-analytics.com *.googletagmanager.com; \
         default-src 'none'; \
-        font-src 'self' fonts.gstatic.com; \
+        font-src 'self' fonts.gstatic.com data:; \
         form-action 'self'; \
-        frame-src player.cloudinary.com player.vimeo.com www.youtube-nocookie.com www.youtube.com; \
-        img-src 'self' *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.vimeocdn.com i.ytimg.com tile.openstreetmap.org; \
+        frame-src *.googletagmanager.com player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
+        img-src 'self' *.google-analytics.com *.googletagmanager.com googletagmanager.com ssl.gstatic.com www.gstatic.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
         media-src 'self'; \
         object-src 'none'; \
-        script-src 'self' *.google-analytics.com *.googletagmanager.com; \
-        style-src 'self' www.youtube.com; \
+        script-src 'self' *.google-analytics.com *.googletagmanager.com *.analytics.google.com googletagmanager.com tagmanager.google.com player.vimeo.com; \
+        style-src 'self' googletagmanager.com tagmanager.google.com fonts.googleapis.com www.youtube.com; \
         """
     Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
     Referrer-Policy = 'strict-origin'

config/postcss.config.js

@@ -3,13 +3,15 @@ const cssnano = require('cssnano')({
   preset: 'advanced'
 })
 const whitelister = require('purgecss-whitelister')
-const purgecss = require('@fullhuman/postcss-purgecss')({
+const purgeImport = require('@fullhuman/postcss-purgecss')
+const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport
+const purgecss = purgeCSSPlugin({
   content: ['./hugo_stats.json'],
   defaultExtractor: (content) => {
     const els = JSON.parse(content).htmlElements
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
-  dynamicAttributes: ['data-bs-theme'],
+  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
   safelist: ['was-validated',
     ...whitelister([
       './assets/scss/components/_clipboard.scss',
@@ -28,7 +30,8 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss',
       './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
-      './_vendor/github.com/gethinode/mod-simple-datatables/dist/simple-datatables.scss',
+      './_vendor/github.com/gethinode/mod-mermaid/v3/assets/scss/mermaid.scss',
+      './_vendor/github.com/gethinode/mod-simple-datatables/v2/dist/simple-datatables.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_modal.scss',

content/_index.md

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

data/netlify.toml

@@ -4,12 +4,12 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.78.0"
-    HUGO_VERSION = "0.134.1"
+    DART_SASS_VERSION = "1.89.2"
+    HUGO_VERSION = "0.147.9"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
-    NODE_VERSION = "20.17.0"
-    NPM_VERSION = "10.8.2"
+    NODE_VERSION = "22.13.0"
+    NPM_VERSION = "10.9.2"
 # toml-docs-end netlify
 
 [context.deploy-preview]

data/structures/abbr.yml

@@ -19,7 +19,7 @@ arguments:
       the first (and only) matched argument. Non-alphanumeric keys must be quoted.
   data:
     type: string
-    default: abbr.yaml
+    default: abbr
     optional: true
     comment: >-
       Filename of the abbrevation input. You can omit the file extension. The

data/structures/accordion-item.yml

@@ -1,18 +1,17 @@
 comment: >-
   Defines an individual accordion item.
 arguments:
+  title:
+    release: v1.0.0
+  show:
+  class:
+  # deprecated arguments
   header:
     type: string
-    optional: false
+    optional: true
     comment: Header of the accordion item.
-  show:
-    type: bool
-    optional: true
-    comment: Flag to indicate an item should be shown as collapsed.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the accordion item.
+    deprecated: v1.0.0
+    alternative: title
 body:
   optional: false
   comment: Content of the accordion item.

data/structures/accordion.yml

@@ -3,16 +3,5 @@ comment: >-
   items. Add accordion-item inner elements for each accordion item.
 arguments:
   id:
-    type: string
-    optional: true
-    comment: >-
-      ID of the accordion, defaults to `accordion-n` with a sequential number n.
   always-open:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to make accordion items stay open when another item is opened.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the accordion, e.g. `w-50`.

data/structures/alert.yml

@@ -2,36 +2,14 @@ comment: >-
   Use the alert shortcode to display a contextual feedback message. The inner
   content is used as alert text.
 arguments:
+  alert-type:
+    release: v1.0.0
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the alert element.
   color:
-    type: select
-    optional: true
     default: danger
-    comment: Theme color of the alert.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
   dismissible:
-    type: bool
-    optional: true
-    default: false
-    comment: Flag to indicate the alert is dismissible.
   icon:
-    type: string
-    optional: true
-    comment: Font Awesome icon to include.
+  # deprecated arguments
   type:
     type: select
     optional: true
@@ -40,6 +18,8 @@ arguments:
       values:
         - danger
         - info
+    deprecated: v1.0.0
+    alternative: alert-type
 body:
   optional: false
   comment: Alert text.

data/structures/args.yml

@@ -2,6 +2,9 @@ comment: >-
   Generates a markdown table of structured arguments. The argument definitions are
   expected to be defined in a data file identified by a provided structure name.
 arguments:
+  page:
+    optional: false
+    group: partial
   structure:
     type: string
     position: 0
@@ -9,7 +12,8 @@ arguments:
     comment: >-
       Name of the data file that contains argument definitions. Supported data
       formats include JSON, TOML, YAML, and XML. You can omit the file
-      extension. The file should reside in the `data/structures` folder.
+      extension. The file should reside in the `data/structures` folder. For
+      bookshop components, add the `bookshop-` prefix to the structure name.
   group:
     type: string
     position: 1
@@ -25,3 +29,28 @@ arguments:
     comment: >-
       Flag to filter only arguments that have a parent attribute (either
       `cascade` or `merge`).
+  render-type:
+    type: select
+    position: 3
+    default: both
+    optional: true
+    comment: >-
+      Option whether to render arguments, user-defined types, or both. Please
+      note that the arguments will render a link to a user-defined type in any
+      case.
+    options:
+      values:
+        - arguments
+        - types
+        - both
+    release: v1.0.0
+  header-level:
+    type: int
+    default: 3
+    optional: true
+    options:
+      min: 1
+      max: 6
+    comment: >-
+      The header level to use for the user-defined type headers.
+    release: v1.0.0

data/structures/background.yml

@@ -0,0 +1,5 @@
+comment: >-
+  Applies styling to the background of a element.
+arguments:
+  background:
+  class:

data/structures/badge.yml

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

data/structures/breadcrumb.yml

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

data/structures/button-group.yml

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

data/structures/button.yml

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

data/structures/card-group.yml

@@ -6,161 +6,167 @@ comment: >-
   behavior). Be aware a page can only contain one paginator at a time.
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForShortcode'
     optional: true
-    comment: Context of the current page.
-    group: partial
   title:
-    type: string
     optional: true
-    comment: Title of the card group.
+  class:
+  color:
+  padding:
+    default: 3
   gutter:
-    type: int
-    optional: true
-    default: 4
-    comment: Gutter between columns in a group.
-    options:
-      min: 0
-      max: 5
     release: v0.19.0
+  header-style:
+    release: 1.0.0
+  body-style:
+    release: 1.0.0
+  footer-style:
+    release: 1.0.0
   list:
-    type:
-      - 'page.Pages'
-      - 'resource.Resources'
-      - '[]map[string]interface {}'
-    optional: true
-    comment: Array of pages or structured content to be rendered as cards.
-    group: partial
   cards:
-    type: string
-    optional: true
-    comment: String of rendered cards.
-    group: partial
-  max:
-    type: int
-    optional: true
-    comment: Maximum number of cards to display.
-    group: partial
-    options:
-      min: 1
+  limit:
+    release: v1.0.0
   cols:
-    type: select
-    optional: true
-    default: "3"
-    comment: Number of grid columns.
-    options:
-      values:
-        - "1"
-        - "2"
-        - "3"
-        - "4"
-        - "5"
-        - "auto"
     release: v0.19.0
   paginate:
-    type: bool
-    optional: true
-    comment: >-
-      Flag indicating if pagination should be added to the card group, if the
-      list exceeds the maximum number of cards to display. 
-    group: partial
   pagination:
-    type: int
-    optional: true
-    comment: >-
-      Number of elements per page in pagination, overrides site settings.
-    group: partial
-    options:
-      min: 1
     release: v0.23.12
   href:
+    group: partial
+  href-title:
+    release: v1.0.0
+  href-force:
+    release: v1.0.0
+    group: partial
+  separator:
+  loading:
+  ratio:
+  portrait:
+  icon-rounded:
+    release: v1.0.0
+  align:
+    default: start
+  wrapper:
+    default: p-0
+  responsive:
+  link-type:
+    release: v1.0.0
+  scroll:
+  icon-style:
+    release: v1.0.0
+  orientation:
+  subtle:
+  button:
+  spacer:
+    release: v0.24.16
+  hook:
+    default: assets/card.html
+    group: partial
+  bento:
+    release: v0.27.0
+  valign:
+    release: v0.27.0
+  styles:
+    release: v0.27.0
+  button-label:
+    release: v1.0.0
+
+  # deprecated arguments
+  header:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    comment: >-
+      Header components of the card, displayed in small caps. 
+    options:
+      values:
+        - full
+        - publication
+        - tags
+        - none
+    deprecated: v1.0.0
+    alternative: header-style
+  body:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    release: v0.24.16
+    comment: >-
+      Body components of the element. 
+    options:
+      values:
+        - full
+        - title
+        - none
+    deprecated: v1.0.0
+    alternative: body-style
+  footer:
+    type: select
+    optional: true
+    default: none
+    parent: cascade
+    comment: >-
+      Footer components of the element, displayed in small caps.
+    options:
+      values:
+        - full
+        - publication
+        - tags
+        - none
+    deprecated: v1.0.0
+    alternative: footer-style
+  iconRounded:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.24.8
+    deprecated: v1.0.0
+    alternative: icon-rounded
+    comment: Stack the icon in a round container.
+  buttonType:
+    type: select
+    parent: cascade
+    optional: true
+    default: button
+    comment: Type of the button element.
+    release: v0.23.18
+    deprecated: v1.0.0
+    alternative: link-type
+    options:
+      values:
+        - link
+        - button
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Icon style.
+    deprecated: v1.0.0
+    alternative: icon-style
+  buttonLabel:
     type: string
     optional: true
+    release: v0.23.2
     comment: >-
-      Address for the button or hyperlink. If set, a button is added if the
-      list exceeds the maximum number of cards to display.
-    group: partial
+      Label of the link button, defaults to the card title.
+    deprecated: v1.0.0
+    alternative: button-label
   hrefTitle:
     type: string
     optional: true
     comment: >-
       Title of the button or hyperlink as companion to href.
     group: partial
-  separator:
-    type: bool
+    deprecated: v1.0.0
+    alternative: href-title
+  max:
+    type: int
     optional: true
-    comment: >-
-      Flag to indicate a horizontal line should be added between items on small
-      screens.
-  wrapper:
-    type: string
-    default: p-0
-    optional: true
-    comment: >-
-      Class attributes of the wrapper element, e.g. `p-4 px-xxl-0`.
-  responsive:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      Flag indicating if the number of columns should be responsive, defaults to
-      `true`.
-  buttonType:
-    type: select
-    optional: true
-    default: button
-    release: v0.23.18
-    comment: Type of the button elements.
-    options:
-      values:
-        - link
-        - button
-  scroll:
-    type: bool
-    optional: true
-    comment: >-
-      Enables horizontal scrolling of the cards. By default, the card group
-      wraps any cards beyond the amount of defined columns to a new line. When
-      `scroll` is set to true, a horizontal scroll bar is added instead.
-  spacer:
-    type: bool
-    optional: true
-    comment: >-
-      Inserts a spacer before the card.
-    release: v0.24.16
+    comment: Maximum number of elements to display.
     group: partial
-  hook:
-    type: string
-    optional: true
-    default: assets/card.html
-    comment: Render hook for the card partial.
-    group: partial
-  bento:
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Trigger to use a bento-style layout instead of default grid layout.
-    release: v0.27.0
-  valign:
-    type: select
-    optional: true
-    comment: >-
-      Defines the vertical card alignment, only applicable in bento layout.
-    release: v0.27.0
     options:
-      values:
-        - start
-        - center
-        - end
-  styles:
-    type:
-      - '[]map[string]interface {}'
-    optional: true
-    comment: >-
-      Styles to apply to the individual cards. Supported elements are `ratio`,
-      `orientation`, `portrait`, and `width`. The styles are rotated when the
-      amount of cards exceeds the available amount of styles.
-    release: v0.27.0
+      min: 1
+    deprecated: v1.0.0
+    alternative: limit

data/structures/card.yml

@@ -4,79 +4,76 @@ comment: >-
   arguments override any page attributes.
 arguments:
   title:
-    type: string
     optional: true
-    comment: >-
-      Title of the card, replaces the title of the referenced page (if any).
   path:
-    type: path
-    optional: true
-    comment: >-
-      Path of the page that the card reference to. If omitted, specify the
-      title, icon, thumbnail, and description (inner content) as needed.
   href:
-    type: url
-    optional: true
-    comment: >-
-      Address for the button or hyperlink.
     group: partial
   class:
-    type: string
-    optional: true
     parent: merge
-    comment: >-
-      Class attribute of the card element, e.g. “w-50”.
   color:
-    type: select
     optional: true
     parent: cascade
-    comment: >-
-      Theme color of the card. By default, no color is specified.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
-        - body
-        - body-tertiary
   padding:
-    type: select
-    optional: true
-    default: auto
     parent: cascade
-    comment: >-
-      Padding of the content.
-    options:
-      values:
-        - "0"
-        - "1"
-        - "2"
-        - "3"
-        - "4"
-        - "5"
-        - "auto"
+    default: 3
   gutter:
-    type: select
-    optional: true
-    default: "0"
+    default: 0
     parent: cascade
-    comment: >-
-      Gutter between columns in a group.
-    options:
-      values:
-        - "0"
-        - "1"
-        - "2"
-        - "3"
-        - "4"
-        - "5"
+  header-style:
+    parent: cascade
+    release: 1.0.0
+  body-style:
+    parent: cascade
+    release: 1.0.0
+  footer-style:
+    parent: cascade
+    release: 1.0.0
+  description:
+    group: partial
+  loading:
+    parent: cascade
+    group: partial
+  thumbnail:
+  ratio:
+    parent: cascade
+    group: partial
+  portrait:
+    parent: cascade
+    release: v0.24.16
+  alt:
+    release: v0.19.0
+  icon:
+  icon-rounded:
+    release: v1.0.0
+  align:
+    default: start
+    parent: cascade
+    release: v0.23.0
+  scroll:
+    parent: cascade
+    group: partial
+  wrapper:
+  icon-style:
+    release: v1.0.0
+  orientation:
+    parent: cascade
+  subtle:
+    parent: cascade
+    release: v0.23.0
+  button:
+    parent: cascade
+    release: v0.23.0
+  button-label:
+    release: v1.0.0
+  link-type:
+  hook:
+    default: assets/image.html
+    group: partial
+  sizes:
+    group: partial
+  anchor:
+    release: v0.24.23
+  # deprecated arguments
   header:
     type: select
     optional: true
@@ -90,6 +87,8 @@ arguments:
         - publication
         - tags
         - none
+    deprecated: 1.0.0
+    alternative: header-style
   body:
     type: select
     optional: true
@@ -97,158 +96,37 @@ arguments:
     parent: cascade
     release: v0.24.16
     comment: >-
-      Body of the card. 
+      Body components of the element. 
     options:
       values:
         - full
         - title
         - none
+    deprecated: 1.0.0
+    alternative: body-style
   footer:
     type: select
     optional: true
     default: none
     parent: cascade
     comment: >-
-      Footer components of the card, displayed in small caps.
+      Footer components of the element, displayed in small caps.
     options:
       values:
         - full
         - publication
         - tags
         - none
-  description:
-    type:
-      - string
-      - template.HTML
-    optional: true
-    comment: >-
-      Description of the card.
-    group: partial
-  loading:
-    type: select
-    optional: true
-    parent: cascade
-    default: eager
-    comment: >-
-      Loading behavior of the image. The loading of lazily loaded images is
-      deferred until the image is within scrolling range of the viewport. This
-      should reduce the initial loading time of the website. It is recommended
-      to lazily load only those images that are below the page fold.
-    options:
-      values:
-        - lazy
-        - eager
-    group: partial
-  thumbnail:
-    type: path
-    optional: true
-    comment: >-
-      Thumbnail image url, displayed on top or the left of the card.
-  ratio:
-    type: select
-    optional: true
-    parent: cascade
-    comment: >-
-      Ratio of the thumbnail image, defaults to `16x9` (stacked orientation)
-      or `1x1` (horizontal orientation).
-    options:
-      values:
-        - 1x1
-        - 3x2
-        - 4x3
-        - 16x9
-        - 21x9
-    group: partial
-  portrait:
-    type: bool
-    parent: cascade
-    optional: true
-    default: false
-    release: v0.24.16
-    comment: >-
-      Flag to adjust the ratio from landscape to portrait. The image itself is
-      not rotated, only the crop area is adjusted. Not applicable to vector
-      graphics.
-  alt:
-    type: string
-    optional: true
-    release: v0.19.0
-    comment: >-
-      Alternate text for the thumbnail, uses `title` by default.
-  icon:
-    type: string
-    optional: true
-    comment: >-
-      Font Awesome icon, displayed on top or the left of the card.
+    deprecated: v1.0.0
+    alternative: footer-style
   iconRounded:
     type: bool
     parent: cascade
     optional: true
     release: v0.24.8
+    deprecated: v1.0.0
+    alternative: icon-rounded
     comment: Stack the icon in a round container.
-  align:
-    type: select
-    parent: cascade
-    optional: true
-    default: start
-    release: v0.23.0
-    comment: Icon alignment.
-    options:
-      values:
-        - start
-        - end
-        - center
-  scroll:
-    type: bool
-    parent: cascade
-    optional: true
-    group: partial
-    comment: >-
-      Enables horizontal scrolling of the cards. By default, the card group
-      wraps any cards beyond the amount of defined columns to a new line. When
-      `scroll` is set to true, a horizontal scroll bar is added instead.
-  wrapper:
-    type: string
-    optional: true
-    comment: Element class of the card wrapper.
-  style:
-    type: string
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: Icon style.
-  orientation:
-    type: select
-    optional: true
-    default: stacked
-    parent: cascade
-    comment: Placement of the thumbnail or icon.
-    options:
-      values:
-        - stacked
-        - horizontal
-        - horizontal-sm
-        - overlay
-        - none
-  subtle:
-    type: bool
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: Apply subtle background colors.
-  button:
-    type: bool
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: >-
-      Flag indicating the cards should include a button that links to the provided address.
-  buttonLabel:
-    type: string
-    optional: true
-    release: v0.23.2
-    comment: >-
-      Label of the link button, defaults to the card title.
   buttonType:
     type: select
     parent: cascade
@@ -256,42 +134,28 @@ arguments:
     default: button
     comment: Type of the button element.
     release: v0.23.18
+    deprecated: v1.0.0
+    alternative: link-type
     options:
       values:
         - link
         - button
-  hook:
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Icon style.
+    deprecated: v1.0.0
+    alternative: icon-style
+  buttonLabel:
     type: string
     optional: true
-    comment: Render hook for the image partial.
-    group: partial
-  sizes:
-    type: string
-    default: 100vw
-    optional: true
+    release: v0.23.2
     comment: >-
-      One or more strings separated by commas, indicating the source sizes of an
-      image set.
-    group: partial
-  anchor:
-    type: select
-    optional: true
-    comment: 
-      Anchor of the thumbnail's crop box, defaults to anchor value set in
-      `imaging` section of the site configuration (usually `Smart`).
-    options:
-      values:
-        - TopLeft
-        - Top
-        - TopRight
-        - Left
-        - Center
-        - Right
-        - BottomLeft
-        - Bottom
-        - BottomRight
-        - Smart
-    release: v0.24.23
+      Label of the link button, defaults to the card title.
+    deprecated: v1.0.0
+    alternative: button-label
 body:
   optional: true
   comment: >-

data/structures/carousel-item.yml

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

data/structures/carousel.yml

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

data/structures/collapse.yml

@@ -1,14 +1,7 @@
 comment: Defines a hidden panel that can be reveiled by a trigger.
 arguments:
   id:
-    type: string
-    optional: false
-    comment: >-
-      ID of the collapse element, e.g. `collapse-1`.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the  inner panel element, e.g. `p-3`.
 body:
   type: string
   optional: false

data/structures/command.yml

@@ -3,31 +3,10 @@ comment: >-
   languages. 
 arguments:
   user:
-    type: string
-    optional: true
-    comment: User to add to the prompt, e.g. `user`.
   host:
-    type: string
-    optional: true
-    comment: Host to add to the prompt, e.g. `localhost`.
   prompt:
-    type: string
-    optional: true
-    comment: Prompt override, e.g. `PS C:\Users\User>`.
   shell:
-    type: select
-    optional: true
-    default: bash
-    comment: Type of shell.
-    options:
-      values:
-        - bash
-        - powershell
-        - sql
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the command element.
 body:
   type: string
   optional: false

data/structures/contact.yml

@@ -0,0 +1,36 @@
+comment: >-
+  Displays a contact banner, typically placed at the bottom or right-hand side of the page.
+arguments:
+  page:
+  data:
+  heading:
+  contact:
+    type: string
+    optional: false
+    comment: >-
+      The full name of the contact to retrieve.
+  caption-url:
+    type:
+      - string
+      - template.URL
+    optional: true
+    comment: >-
+      Address of the contact's page, either a local reference or an external
+      address. Include the `scheme` when referencing an external address, such
+      as `https://google.com`. Local references may include an optional anchor
+      link such as `blog/bootstrap-elements/#docs`.
+  illustration:
+  background:
+  link-type:
+  links:
+  align:
+  order:
+    default: first
+  orientation:
+  width:
+  justify:
+  class:
+  width:
+    default: 12
+  hook:
+    default: assets/hero-image.html

data/structures/docs.yml

@@ -6,39 +6,9 @@ comment: >-
     The snippet between the two markers is then rendered using syntax highlighting.
 arguments:
   name:
-    type: string
-    optional: false
-    comment: >-
-      Name of the code snippet, used to identify the relevant section of the
-      input file.
   file:
-    type: string
-    optional: false
-    comment: >-
-      Path of the input file. The path is relative to the `basePath` defined in
-      the `docs` section of the site's parameters. If the file starts with `./`,
-      the path of the repository is used as base path instead.
   show:
-    type: bool
-    optional: true
     default: true
-    comment: >-
-      If unset, shows the panel with the code snippet in collapsed state. By
-      default, the panel is expanded.
   full:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      If unset, shows the filename only. By default, the entire path (relative
-      to the base path) is shown.
   id:
-    type: string
-    optional: true
-    comment: >-
-      ID of the collapse panel holding the code snippet, defaults to
-      `docs-collapse-n` with a sequential number `n` starting at `1`.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the tab control that wraps the docs element.

data/structures/download.yml

@@ -0,0 +1,15 @@
+comment: Generate a download button.
+arguments:
+  download:
+  title:
+  class:
+  color:
+    default: primary
+  outline:
+    default: true
+  icon:
+    default: fas download
+  button-size:
+    default: sm
+  justify:
+  minimal:

data/structures/example.yml

@@ -3,30 +3,28 @@ comment: >-
   accepts the languages supported by Hugo's highlight function.
 arguments:
   id:
-    type: string
-    optional: true
-    comment: Identifier of the element’s container.
   lang:
-    type: string
-    optional: true
     default: markdown
-    comment: >-
-      Language used to display the code. Use `hugo` to process Hugo (escaped)
-      shortcodes.
+  class:
+  show-markup:
+    release: v1.0.0
+  show-preview:
+    release: v1.0.0
+  # deprecated arguments
   show_markup:
     type: bool
     optional: true
     default: true
     comment: Indicates if the markup should be output in the HTML.
+    deprecated: v1.0.0
+    alternative: show-markup
   show_preview:
     type: bool
     optional: true
     default: true
     comment: Indicates if the preview should be output in the HTML.
-  class:
-    type: string
-    optional: true
-    comment: Class attributes of the element's container.
+    deprecated: v1.0.0
+    alternative: show-preview
 body:
   type: string
   optional: false

data/structures/featured-illustration.yml

@@ -0,0 +1,12 @@
+
+arguments:
+  page:
+  icon:
+  image:
+  mode:
+  ratio:
+  sizes:
+  title:
+  wrapper:
+  class:
+  anchor:

data/structures/file.yml

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

data/structures/get-dimension.yml

@@ -0,0 +1,18 @@
+comment: >-
+  Initializes images dimensions (widht x height for supported image ratios.
+arguments:
+  ratio:
+    type: select
+    optional: true
+    comment: >-
+      Ratio of the media asset. When the asset is an image, it is resized and
+      cropped (not applicable to vector graphics). For video assets, the padding
+      of the embedded frame is adjusted.
+    options:
+      values:
+        - 1x1
+        - 3x2
+        - 4x3
+        - 16x9
+        - 21x9
+        - auto

data/structures/hero-image.yml

@@ -0,0 +1,14 @@
+
+arguments:
+  page:
+  icon:
+  image:
+  anchor:
+  mode:
+  ratio:
+  sizes:
+  title:
+  wrapper:
+  class:
+  image-overlay:
+  justify:

data/structures/hero.yml

@@ -0,0 +1,30 @@
+comment: >-
+  Displays a hero banner, typically placed at the top of the page. The hero
+  supports a heading, featured illustration, and navigation links. You can
+  can also add a background image with an overlay to improve contrast.
+arguments:
+  page:
+  breadcrumb:
+  heading:
+  background:
+  illustration:
+  link-type:
+  links:
+  align:
+  order:
+  overlay-mode:
+  cover:
+  orientation:
+  width:
+  justify:
+  use-section:
+  use-title:
+  size:
+  class:
+  padding:
+    default: px-4 px-xxl-0 py-4
+  width:
+    default: 8
+  theme:
+  hook:
+    default: assets/hero-image.html

data/structures/image-adapter-rewrite.yml

@@ -1,29 +1,36 @@
 comment: >-
   Rewrites an origin URL to a target URL as supported by a CDN image adapter.
 arguments:
+  url-host:
+    release: v1.0.0
+  url-dir:
+    release: v1.0.0
+  url-file:
+    release: v1.0.0
   account:
-    type: string
-    optional: true
-    comment: Account name of the origin server.
   container:
-    type: string
-    optional: true
-    comment: Container name of the origin server.
+  # deprecated arguments
   host:
     type: string
     optional: true
     comment: >-
       Host of an URL. For example, the host of the URL
       'https://example.com/first/second/third.webp' equals 'example.com'.
+    deprecated: v1.0.0
+    alternative: url-host
   dir:
     type: string
     optional: true
     comment: >-
       All but the last element of an URL extension. For example, the dir of the
       URL 'https://example.com/first/second/third.webp' equals '/first/second/'.
+    deprecated: v1.0.0
+    alternative: url-dir
   file:
     type: string
     optional: false
     comment: >-
       The last element of an URL extension. For example, the file of the
       URL 'https://example.com/first/second/third.webp' equals 'third.webp'.
+    deprecated: v1.0.0
+    alternative: url-file

data/structures/image-adapter.yml

@@ -1,79 +1,19 @@
 comment: >-
   Defines the interface to be implemented by a CDN image adapter.
 arguments:
-  host:
-    type: string
-    optional: true
-    comment: >-
-      Host of an URL. For example, the host of the URL
-      'https://example.com/first/second/third.webp' equals 'example.com'.
-  dir:
-    type: string
-    optional: true
-    comment: >-
-      All but the last element of an URL extension. For example, the dir of the
-      URL 'https://example.com/first/second/third.webp' equals '/first/second/'.
-  file:
-    type: string
-    optional: false
-    comment: >-
-      The last element of an URL extension. For example, the file of the
-      URL 'https://example.com/first/second/third.webp' equals 'third.webp'.
-  absoluteURL:
-    type: string
-    optional: true
-    default: false
-    comment: >-
-      Defines if a local image should use absolute instead of relative paths.
+  url-host:
+    release: v1.0.0
+  url-dir:
+    release: v1.0.0
+  url-file:
+    release: v1.0.0
+  absolute-url:
+    release: v1.0.0
   img:
-    type: "*resources.resourceAdapter"
-    optional: true
-    comment: >-
-      Image resource to process. Must be set when handling local images.
   format:
-    type: select
-    optional: true
-    comment: >-
-      Image format; leave empty for an auto format (if supported) or default
-      format (usually jpg).
-    options:
-      values:
-        - png
-        - jpg
-        - gif
-        - tiff
-        - bmp
-        - webp
   transform:
-    type: select
-    optional: false
-    comment: Image transformation.
-    options:
-      values:
-        - fill
-        - fit
-  height:
-    type: int
-    optional: false
-    comment: Height of the image in pixels.
-  width:
-    type: int
-    optional: false
-    comment: Width of the image in pixels.
+  image-height:
+    release: v1.0.0
+  image-width:
+    release: v1.0.0
   anchor:
-    type: select
-    optional: true
-    comment: Anchor of the crop box.
-    options:
-      values:
-        - TopLeft
-        - Top
-        - TopRight
-        - Left
-        - Center
-        - Right
-        - BottomLeft
-        - Bottom
-        - BottomRight
-        - Smart
-

data/structures/image-definition.yml

@@ -0,0 +1,19 @@
+arguments:
+  src:
+  page:
+  mode:
+  ratio:
+  portrait:
+  image-height:
+  image-width:
+  loading:
+  priority:
+  sizes:
+  title:
+  caption:
+  wrapper:
+  class:
+  figclass:
+  plain:
+  anchor:
+  absolute-url:

data/structures/image-dimension.yml

@@ -0,0 +1,10 @@
+arguments:
+  src:
+  page:
+  ratio:
+  portrait:
+  image-height:
+  image-width:
+  plain:
+  anchor:
+  imageset:

data/structures/image-rewrite.yml

@@ -0,0 +1,5 @@
+arguments:
+  src:
+  account:
+  container:
+  hook:

data/structures/image-set.yml

@@ -0,0 +1,11 @@
+arguments:
+  src:
+  img:
+  absolute-url:
+    release: v1.0.0
+  dims:
+  hook:
+  transform:
+  format:
+  anchor:
+  include-width:

data/structures/image.yml

@@ -18,6 +18,37 @@ comment: >-
   graphics support an optional anchor `#` in their url to denote a symbol
   reference.
 arguments:
+  src:
+    type: string
+    optional: true
+    position: 0
+  page:
+    optional: true
+  mode:
+  ratio:
+  portrait:
+    release: v0.18.3
+  loading:
+    release: v0.21.0
+  priority:
+  sizes:
+    group: partial
+  title:
+  caption:
+  wrapper:
+    release: v0.18.3
+  class:
+  figclass:
+    release: v0.23.0
+  plain:
+    release: v0.24.0
+  anchor:
+    release: v0.24.22
+  image-height:
+    release: v1.0.0
+  image-width:
+    release: v1.0.0
+  # deprecated arguments
   url:
     type:
       - string
@@ -27,137 +58,5 @@ arguments:
       Path or url of the image, e.g. `img/example.jpg`. Images with multiple
       color modes are expected to have a basename that ends with either `-dark`
       or `-light`.
-  src:
-    type: string
-    optional: true
-    position: 0
-    comment: Alias for url.
-    group: shortcode
-  page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForRenderHooks'
-      - '*hugolib.pageForShortcode'
-    optional: true
-    comment: Page context, used to match page resources.
-    group: partial
-  mode:
-    type: bool
-    default: false
-    optional: true
-    comment: >-
-      Flag indicating if the image should support color modes. If set, the
-      shortcode searches for images that having a matching color-mode suffix
-      such as `-light` or `-dark`.
-  ratio:
-    type: select
-    optional: true
-    comment: >-
-      Ratio of the image. If set, the image is resized and cropped to match the
-      ratio. Else the original aspect ratio of the image is kept. Not applicable
-      to vector graphics.
-    options:
-      values:
-        - 1x1
-        - 3x2
-        - 4x3
-        - 16x9
-        - 21x9
-  portrait:
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Flag to adjust the ratio from landscape to portrait. The image itself is
-      not rotated, only the crop area is adjusted. Not applicable to vector
-      graphics.
-    release: v0.18.3
-  loading:
-    type: select
-    default: eager
-    optional: true
-    comment: >-
-      Loading behavior of the image. The loading of lazily loaded images is
-      deferred until the image is within scrolling range of the viewport. This
-      should reduce the initial loading time of the website. It is recommended
-      to lazily load only those images that are below the pagefold.
-    options:
-      values:
-        - eager
-        - lazy
-    release: v0.21.0
-  priority:
-    type: select
-    default: auto
-    optional: true
-    comment: >-
-      Fetch priority of the image. The priority provides a hint to the browser
-      on how it should prioritize the fetching of the image relative to other
-      images. The implementation is experimental and currently only supported by
-      Chrome, Edge, and Opera.
-    options:
-      values:
-        - high
-        - low
-        - auto
-    group: partial
-  sizes:
-    type: string
-    default: 100vw
-    optional: true
-    comment: >-
-      One or more strings separated by commas, indicating the source sizes of an
-      image set.
-    group: partial
-  title:
-    type:
-      - string
-      - hstring.RenderedString
-      - hstring.HTML
-    optional: true
-    comment: Alternate text of the image.
-  caption:
-    type: string
-    optional: true
-    comment: Figure caption.
-  wrapper:
-    type: string
-    optional: true
-    comment: Class attributes of the wrapper element, e.g. `mx-auto`.
-    release: v0.18.3
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the inner img element, e.g. `rounded`.
-  figclass:
-    type: string
-    optional: true
-    comment: Class attribute of the figure caption, e.g. `px-4`.
-    release: v0.23.0
-  plain:
-    type: bool
-    default: false
-    optional: true
-    comment:
-      Flag to indicate if the image should render a plain image instead of an
-      image set. When set, no transformations are applied to the image.
-    release: v0.24.0
-  anchor:
-    type: select
-    optional: true
-    comment: 
-      Anchor of the crop box, defaults to anchor value set in `imaging` section
-      of the site configuration (usually `Smart`).
-    options:
-      values:
-        - TopLeft
-        - Top
-        - TopRight
-        - Left
-        - Center
-        - Right
-        - BottomLeft
-        - Bottom
-        - BottomRight
-        - Smart
-    release: v0.24.22
+    deprecated: v1.0.0
+    alternative: src