Merge pull request #1459 from gethinode/develop

Refine content blocks

.gitignore

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

.stylelintrc.json

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

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 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

@@ -123,7 +123,7 @@ Hinode is inspired by the following themes:
 ## Donate
 
 <!-- markdownlint-disable MD033 -->
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer nofollow"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
 <!-- markdownlint-enable MD033 -->
 
 ## License

assets/js/alert.js

@@ -3,13 +3,13 @@ const alert = document.getElementById('page-alert')
 const closeBtn = document.getElementById('page-alert-btn-close')
 if (alert !== null && closeBtn !== null) {
   const version = alert.getAttribute('data-page-alert-version') || 'unknown'
-  const hideAlert = sessionStorage.getItem(`page-alert-${version}`) !== null
+  const hideAlert = getSessionStorage(`page-alert-${version}`, null, 'functional') !== null
   if (hideAlert) {
     alert.classList.add('d-none')
   }
 
   closeBtn.addEventListener('click', () => {
-    sessionStorage.setItem(`page-alert-${version}`, 'seen')
+    setSessionStorage(`page-alert-${version}`, 'seen', 'functional')
     alert.classList.add('d-none')
   })
 }

assets/js/analytics.js

@@ -1,21 +0,0 @@
-// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
-
-{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
-  {{ with site.Config.Services.GoogleAnalytics.ID }}
-    {{ if strings.HasPrefix (lower .) "ua-" }}
-      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
-    {{ else }}
-        var doNotTrack = false;
-        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
-          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
-          var doNotTrack = (dnt == "1" || dnt == "yes");
-        }
-        if (!doNotTrack) {
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '{{ . }}');
-        }
-    {{ end }}
-  {{ end }}
-{{ end }}

assets/js/critical/_cookie.js

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

assets/js/critical/color.js

@@ -11,8 +11,8 @@
 
   const supportedThemes = ['auto', 'dark', 'light'];
 
-  // retrieves the currently stored theme from local storage (cookie)
+  // retrieves the currently stored theme from local storage
-  const storedTheme = localStorage.getItem('theme')
+  const storedTheme = getLocalStorage('theme', 'auto', 'functional')
 
   // retrieves the theme preferred by the client, defaults to light
   function getPreferredTheme() {
@@ -25,7 +25,7 @@
       return storedTheme
     } else {
       const preference = getPreferredTheme()
-      localStorage.setItem('theme', preference)
+      setLocalStorage('theme', preference, 'functional')
       return preference
     }
   }
@@ -35,7 +35,7 @@
     if (!supportedThemes.includes(theme)) {
       theme = 'auto'
     }
-    localStorage.setItem('theme', theme)
+    setLocalStorage('theme', theme, 'functional')
 
     if (theme === 'auto') {
       document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))

assets/js/critical/languageSelector.js

@@ -1,17 +1,20 @@
 /* eslint-disable */
-{{- if site.Params.main.enableLanguageSelectionStorage -}} 
+{{- if site.Params.main.enableLanguageSelectionStorage -}}
+{{- $folder := (urls.Parse site.BaseURL).Path | default "/" -}}
 
 (() => {
   'use strict'
 
-  // Function to get the selected language from localStorage
+  const folder = '{{ $folder }}'
+
+  // Function to get the selected language from local storage
   function getLanguage () {
-    return localStorage.getItem('selectedLanguage')
+    return getLocalStorage('selectedLanguage', document.documentElement.lang, 'functional')
   }
 
-  // Function to set the selected language in localStorage
+  // Function to set the selected language in local storage
   function setLanguage (language) {
-    localStorage.setItem('selectedLanguage', language)
+    setLocalStorage('selectedLanguage', language, 'functional')
   }
   
   // Function to apply the selected language to the website
@@ -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()
+    // override stored language when query string contains force is true
-    const languageItems = document.querySelectorAll('#language-selector .dropdown-item')
+    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
+      // overrule the current stored language when no translation is available
-      const defaultLang = '{{ site.LanguageCode | default site.Language.Lang }}'
+      setLanguage(document.documentElement.lang)
-      let language = storedLanguage ? storedLanguage : defaultLang
-      window.location.href = '/' + language + '/'
     }
   })
 })()

assets/js/navbar.js

@@ -5,15 +5,22 @@ const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 const colorsBG = ['body', 'secondary', 'tertiary']
 
 function updateNavbar () {
+  let storedTheme
+  if (typeof getLocalStorage === "function") {
+    storedTheme = getLocalStorage('theme', null, 'functional')
+  }
+
   if (window.scrollY > 75) {
     navbar.classList.add('nav-active')
-    const storedTheme = localStorage.getItem('theme')
+    if (storedTheme) {
-    navbar.setAttribute('data-bs-theme', storedTheme)
+      navbar.setAttribute('data-bs-theme', storedTheme)
+    }
   } else {
     navbar.classList.remove('nav-active')
     const defaultTheme = navbar.getAttribute('data-bs-overlay')
 
-    if (defaultTheme) {
+    const targetTheme = defaultTheme ? defaultTheme : storedTheme
+    if (targetTheme) {
       navbar.setAttribute('data-bs-theme', defaultTheme)
     }
   }

assets/js/sharing.js

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

assets/scss/common/_styles.scss

@@ -146,19 +146,19 @@ $utilities: map-merge(
     }    
 }
 
-.main-cover {
+.section-cover {
     min-height: 100vh;
 }    
 
 @include media-breakpoint-up(xxl) {
-    .main-cover {
+    .section-cover {
         min-height: calc(min(100vh, 1000px));
     }    
 }
 
 /* stylelint-disable media-feature-range-notation */
 @media (min-height: 1400px) { 
-    .main-cover {
+    .section-cover {
         min-height: calc(min(100vh, 1000px));
     }
 }

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,18 @@ $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,
+);

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,18 @@ $dropdown-transition: opacity .15s ease-in-out !default;
 $dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
 $dropdown-horizontal-padding-y: calc(1rem + 2px);
 // scss-docs-end horizontal-nav
+
+$theme-colors: (
+  "primary":       $primary,
+  "secondary":     $secondary,
+  "success":       $success,
+  "info":          $info,
+  "warning":       $warning,
+  "danger":        $danger,
+  "light":         $light,
+  "dark":          $dark,
+  "white":         $white,
+  "black":         $black,
+  "body":          $body-bg,
+  "body-tertiary": $gray-100,
+);

assets/scss/components/_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,4 +1,8 @@
-.nav-tabs > .nav-link.active {
+.nav-tabs .nav-tabs {
+    border: none;
+}
+
+.nav-tabs .nav-link.active {
     border-bottom-color: var(--bs-body-bg) !important;
     border-bottom-style: solid !important;
     z-index: 1;
@@ -12,13 +16,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 +31,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 +57,7 @@
     }
 }
 
-.nav-callout > .accordion-item {
+.nav-callout .accordion-item {
     margin-top: 2 * $spacer;
     margin-bottom: 2 * $spacer;
     border: none;

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: transparent;
-        background-color: tint-color($primary, 90%);
     }
 
     &::before {
@@ -43,50 +65,49 @@
     }
 }
 
-.btn-toggle[aria-expanded="true"] {
+.btn-toggle-group[aria-expanded="true"] {
-    color: black;
-
     &::before {
         transform: rotate(90deg);
     }
 }
 
-.btn-toggle-nav a {
-    padding: 0.1875rem 0.5rem;
-    margin-top: 0.125rem;
-    margin-left: 1.25rem;
-
-    &:hover,
-    &:focus {
-        background-color: tint-color($primary, 90%);
-    }
-
-    &.active {
-        font-weight: bold;
-    }
-}
-
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .sidebar-item {
             color: var(--bs-body-color);
-            margin-left: 0 !important;
+
-            padding-left: 0.85rem !important;
+            &.active {
-        
+                color: $primary-text-emphasis-dark !important;
-            &.active,
+            }
+
+            &:hover,
+            &:focus {
+                color: $primary-text-emphasis-dark !important;
+                background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
+    }
+        }
+
+        .sidebar-item-group {
+            color: var(--bs-body-color) !important;
+
+            &.active {
+                color: $primary-text-emphasis-dark !important;
+            }
+
             &:hover,
             &:focus {
                 color: white !important;
                 background-color: transparent;
+                box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
             }
         }
 
-        .btn-toggle {
+        .btn-toggle-group {
             color: var(--bs-body-color);
         
             &:hover,
             &:focus {
-                color: white !important;
                 background-color: transparent;
             }
         
@@ -95,26 +116,10 @@
             }
         }
 
-        .btn-toggle[aria-expanded="true"] {
+        .btn-toggle-group[aria-expanded="true"] {
             color: var(--bs-secondary-color);
         }
-
+                    }
-        .btn-toggle-nav a {
-            padding: 0.1875rem 0.5rem;
-            margin-top: 0.125rem;
-            margin-left: 1.25rem;
-
-            &:hover,
-            &:focus {
-                color: white !important;
-                background-color: transparent;
-            }
-
-            &.active {
-                font-weight: bold;
-            }
-        }
-    }
 }
 
 // scss-docs-end sidebar

assets/scss/components/_table.scss

@@ -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 {

component-library/bookshop.scss

@@ -0,0 +1,10 @@
+@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/faq/faq";
+@import "modules/bookshop/components/hero/hero";
+@import "modules/bookshop/components/releases/releases";
+@import "modules/bookshop/components/separator/separator";
+@import "modules/bookshop/components/video-message/video-message";
+@import "modules/bookshop/theme";

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

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

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

@@ -0,0 +1,32 @@
+{{/* 
+    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 
+        "heading"      $args.heading
+        "background"   $args.background
+        "illustration" (merge (dict "ratio" "1x1") $args.illustration)
+        "order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  "horizontal"
+        "width"        (or .width 8)
+        )
+    }}
+{{- end -}}

component-library/components/about/about.scss

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

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

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

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

@@ -0,0 +1,109 @@
+{{/* 
+    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 }}
+
+{{ $pages := slice }}
+{{ $result := partial "assets/live-pages.html" (dict 
+	"page"       $args.page
+	"section"    $args.input.section
+	"nested"     $args.input.nested
+	"keywords"   $args.input.keywords
+	"categories" $args.input.categories
+	"tags"       $args.input.tags
+	"sort"       $args.input.sort
+	"reverse"    $args.input.reverse
+)}}
+{{ $pages = $result.pages }}
+
+<!-- Add style definitions -->
+{{ $styles := slice 
+	(dict "ratio" "1x1"  "orientation" "overlay" "portrait" false "width" "6")
+	(dict "ratio" "4x3"  "orientation" "stacked" "portrait" true  "width" "3")
+	(dict "ratio" "1x1"  "orientation" "stacked" "portrait" false "width" "3")
+	(dict "ratio" "16x9" "orientation" "stacked" "portrait" true  "width" "3")
+	(dict "ratio" "1x1"  "orientation" "stacked" "portrait" false "width" "3")
+}}
+
+<!-- Define more button -->
+{{ $moreButton := site.Params.modules.bookshop.articles.moreButton | default false }}
+{{ $moreTitle := T "more" (pluralize $args.input.section) }}
+{{ $moreLink := $args.input.section }}
+{{ with $args.more }}
+	{{ if .title }}{{ $moreTitle = .title }}{{ end }}
+	{{ if .link }}{{ $moreLink = .link }}{{ end }}
+{{ end }}
+
+{{ $paginate := $args.paginate }}
+{{ if and $paginate page.IsPage }}
+    {{ partial "utilities/LogWarn.html" (dict 
+        "partial" "component-library/components/articles/articles.hugo.html"
+        "msg"     "Pagination not supported"
+        "file"    page.File
+    )}}
+	{{ $paginate = false }}
+{{ end }}
+
+<!-- Main code -->
+{{ if not $error }}
+	<div class="container-xxl p-4 px-xxl-0">
+		{{- partial "assets/section-title.html" (dict "heading" $args.heading "class" "py-5") -}}
+
+		{{ $partial := "assets/card-group.html" }}
+		{{ $params := dict }}
+		{{- $params = merge $params (dict
+			"page"         page
+			"list"         $pages
+			"max"          $args.max
+			"cols"         $args.cols
+			"icon-rounded" $args.iconRounded
+			"href"         (cond $moreButton $moreLink "")
+			"href-title"   (cond $moreButton $moreTitle "")
+			"href-force"   (gt $result.total (len $result.pages))
+		)}}
+
+		{{ if $args.scroll }}
+			{{ $partial := "assets/stack.html" }}
+			{{ $params = merge $params (dict 
+				"header-style" "none"
+				"body-style"   "title"
+				"footer-style" "none"
+				"gutter"       1
+				"padding"      3
+				"ratio"        "1x1"
+				"orientation"  "horizontal-sm"
+				"styles"       (cond $args.bento $styles "")
+			) -}}
+		{{ else }}
+			{{ $params = merge $params (dict 
+				"header-style" $args.headerStyle
+				"footer-style" $args.footerStyle
+				"padding"      $args.padding
+				"class"        (or $args.class "border-0")
+				"icon-style"   "fa-2x"
+				"align"        "start"
+				"orientation"  $args.orientation
+				"hook"         "assets/live-card.html"
+				"pagination"   $args.pagination
+				"paginate"     $paginate
+			) -}}
+		{{ end }}
+		{{ partial $partial $params }}
+	</div>
+{{ end }}

component-library/components/articles/articles.scss

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

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

@@ -0,0 +1,32 @@
+# 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:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  orientation:
+  class:

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

@@ -0,0 +1,71 @@
+{{/* 
+    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 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}}
+
+{{ if not $error }}
+	<div class="container-xxl p-4 px-xxl-0">
+		{{- partial "assets/section-title.html" (dict "heading" $args.heading "class" "py-5") -}}
+
+		{{- partial "assets/card-group.html" (dict 
+			"page"         page
+			"list"         $list
+			"class"        (printf "border-0 card-icon-primary d-sm-none %s" $args.class)
+			"cols"         $args.cols
+			"gutter"       "4"
+			"padding"      $args.padding
+			"header-style" "none"
+			"footer-style" "none"
+			"icon-rounded" $args.iconRounded
+			"icon-style"   "fa-2x"
+			"align"        "start"
+			"orientation"  ($args.orientation | default "horizontal-sm")
+			"hook"         "assets/live-card.html"
+		) -}}
+
+		{{- partial "assets/card-group.html" (dict 
+			"page"         page
+			"list"         $list
+			"class"        (printf "border-0 card-icon-primary d-none d-sm-block %s" $args.class)
+			"cols"         $args.cols
+			"gutter"       "4"
+			"padding"      $args.padding
+			"header-style" "none"
+			"footer-style" "none"
+			"icon-rounded" $args.iconRounded
+			"icon-style"   "fa-2x"
+			"align"        "start"
+			"orientation"  ($args.orientation | default "stacked")
+			"hook"         "assets/live-card.html"
+		) -}}
+	</div>
+{{ end }}
+

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

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

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

@@ -0,0 +1,59 @@
+{{/* 
+    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 }}
+
+{{ if not $args.err }}
+	<div class="container-xxl p-4 px-xxl-0">
+		{{ $color := "" }}
+		{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
+		{{- partial "assets/section-title.html" (dict 
+			"heading" $args.heading
+			"color" $color
+			"class" "py-5"
+		) -}}
+
+		{{ $class := "" }}
+		{{ $id := printf "faq-%s" (md5 (delimit (slice . now) "-")) }}
+
+		<div id="{{ $id }}" class="accordion accordion-faq {{ if $args.contrast }}accordion-faq-contrast text-white {{ end }}accordion-flush mb-3{{ with $class }} {{ . }}{{ end }} col-12 col-md-6 mx-auto">
+			{{ range $index, $item := $args.items }}
+				<div class="accordion-item">
+					{{- with $item.title -}}
+						<div class="accordion-header m-0" id="{{ $id }}-heading-{{ $id }}">
+							<button class="accordion-button collapsed" 
+								type="button" 
+								data-bs-toggle="collapse"
+								data-bs-target="#{{ $id }}-item-{{ $index }}"
+								aria-expanded="false"
+								aria-controls="{{ $id }}-item-{{ $index }}"
+							>
+							{{ if $args.color }}<div class="text-{{ $args.color }}">{{ . }}</div>{{ else }}{{ . }}{{ end }}
+							</button>
+						</div>
+					{{- end -}}
+					<div id="{{ $id }}-item-{{ $index }}" 
+						class="accordion-collapse collapse"
+						aria-labelledby="{{ $id }}-heading-{{ $index }}"
+						data-bs-parent="#{{ $id }}"
+					>
+						<div class="accordion-body">{{ $item.description | page.RenderString | safeHTML }}</div>
+					</div>
+				</div>
+			{{ end }}
+		</div>
+	</div>
+{{ end }}

component-library/components/faq/faq.scss

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

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

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

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

@@ -0,0 +1,35 @@
+{{/* 
+    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 
+		"breadcrumb"   $args.breadcrumb
+		"heading"      $args.heading
+		"background"   $args.background
+		"illustration" $args.illustration
+		"align"        $args.align
+		"order"        $args.order
+		"overlay-mode" $args.overlayMode
+		"cover"        $args.cover
+		"link-type"    $args.linkType
+		"links"        $args.links
+		"orientation"  $args.orientation
+		"width"        $args.width
+		)
+	}}
+{{ end }}

component-library/components/hero/hero.scss

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

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

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

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

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

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

@@ -0,0 +1,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 "structure" "separator" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/separator/separator.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{ if not $args.err }}
+    <div class="container-xxl p-0"{{ with $args.theme }} data-bs-theme="{{ . }}"{{ end }}><hr></div>
+{{ end }}

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

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

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

@@ -0,0 +1,136 @@
+{{/* 
+    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 }}
+
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+
+{{- define "_partials/inline/video.html" -}}
+	{{ $provider := .provider }}
+	{{ $account := .account }}
+	{{ $mediaID := (index . "media-id") }}
+	{{ $autoplay := .autoplay }}
+	{{ $queryArgs := .queryArgs }}
+	{{ $border := .border }}
+
+	{{ if site.Params.env_bookshop_live }}
+		{{/* Define dummy content as we cannot retrieve video data in live mode */}}
+		{{- partial "assets/live-image.html" (dict "src" "/img/placeholder-video.svg" "ratio" "21x9" "wrapper" "text-center mb-4") -}}
+	{{ else }}
+        <div class="video-container{{ if $border }} video-container-border{{ end}}">
+			{{ partial "assets/video.html" (dict
+				"page"       page
+				"provider"   $provider
+				"account"    $account
+				"media-id"   $mediaID
+				"autoplay"   $autoplay
+				"query-args" $queryArgs
+			) -}}
+			{{ if $border }}
+				<div class="video-overlay video-overlay-start"></div>
+				<div class="video-overlay video-overlay-top"></div>
+				<div class="video-overlay video-overlay-end"></div>
+				<div class="video-overlay video-overlay-bottom"></div>
+			{{ end }}
+        </div>
+	{{ end }}
+{{ end }}
+
+{{- define "_partials/inline/messages.html" -}}
+	{{ $list := .list }}
+	{{ $cols := .cols }}
+	{{ $type := .type }}
+	{{ $iconRounded := .iconRounded }}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        "border-0 card-icon card-icon-secondary"
+		"cols"         $cols
+		"gutter"       ""
+		"padding"      "0"
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-style"   "fa-fluid fa-fw"
+		"align"        "start"
+		"orientation"  "horizontal-sm"
+		"button"       true
+		"link-type"    $type
+		"icon-rounded" $iconRounded
+	) -}}
+{{ end }}
+
+<div class="container-xxl p-4 px-xxl-0">
+	{{ $list := slice }}
+
+	{{ range $args.messages }}
+		{{ $path := "" }}
+		{{ $href := "" }}
+		{{ with .link }}{{ if hasPrefix . "http" }}{{ $href = . }}{{ else }}{{ $path = . }}{{ end }}{{ end }}
+
+		{{ $list = $list | append (dict 
+			"title"        .title
+			"description"  (.content | page.RenderString) 
+			"icon"         .icon
+			"href"         $href
+			"path"         $path
+			"button-label" .label
+		) }}
+	{{ end}}
+
+	{{- partial "assets/section-title.html" (dict 
+		"heading" $args.heading
+		"class"   "py-5"
+	) -}}
+
+	{{ if eq $args.orientation "stacked" }}
+		<div class="col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
+		{{ with $args.video }}
+			{{- partial "inline/video.html" (dict
+				"provider"   .provider
+				"account"    .account
+				"media-id"   (index . "media-id")
+				"autoplay"   .autoplay
+				"query-args" .queryArgs
+				"border"     $.border
+			) -}}
+		{{ end }}
+		</div>
+		<div class="mt-4">
+			{{- partial "inline/messages.html" (dict "list" $list "cols" $args.cols "type" $args.type "iconRounded" $args.iconRounded) -}}
+		</div>
+	{{ else }}
+		<div class="container grid gap-4">
+			<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+				<div class="col col-{{ $breakpoint.current }}-{{ $args.width }} p-0">
+					{{ with $args.video }}
+						{{- partial "inline/video.html" (dict
+							"provider"   .provider
+							"account"    .account
+							"media-id"   (index . "media-id")
+							"autoplay"   .autoplay
+							"query-args" .queryArgs
+							"border"     $.border
+						) -}}
+					{{ end }}
+				</div>
+				<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-4 mt-{{ $breakpoint.current }}-0">
+					{{- partial "inline/messages.html" (dict "list" $list "cols" 1 "type" $args.type "iconRounded" $args.iconRounded) -}}
+				</div>
+			</div>
+		</div>
+	{{ end }}
+</div>

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

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

component-library/helpers/component.html

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

component-library/helpers/partial.html

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

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

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

component-library/shared/styles/global.scss

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

component-library/theme.scss

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

config/_default/hugo.toml

@@ -1,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
 
@@ -26,20 +26,48 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = false
 # toml-docs-end language
 
+# toml-docs-start headers
+[outputFormats]
+  [outputFormats.server]
+    mediaType = "application/toml"
+    baseName = "server"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+  [outputFormats.netlify]
+    mediaType = "application/toml"
+    baseName = "netlify"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+# toml-docs-end headers
+
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
 # toml-docs-start redirect
-[outputFormats.REDIR]
+  [outputFormats.REDIR]
-mediaType = "text/netlify"
+    mediaType = "text/netlify"
-baseName = "_redirects"
+    baseName = "_redirects"
-isPlainText = true
+    isPlainText = true
-notAlternative = true
+    notAlternative = true
 
 [mediaTypes."text/netlify"]
 delimiter = ""
-
-[outputs]
-home = ["HTML", "RSS", "REDIR"]
 # toml-docs-end redirect
 
+# toml-docs-start outputs
+[outputs]
+home = ["HTML", "RSS", "REDIR", "netlify", "server"]
+# toml-docs-end outputs
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -56,7 +84,7 @@ home = ["HTML", "RSS", "REDIR"]
     disabled = false
     simple = true
 
-  [privacy.twitter]
+  [privacy.x]
     disabled = false
     enableDNT = true
     simple = true
@@ -72,20 +100,11 @@ home = ["HTML", "RSS", "REDIR"]
 [services]
   [services.instagram]
     disableInlineCSS = true
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
   [services.googleAnalytics]
     # ID = "G-xxxxxxxxxx"
 
-[outputFormats]
-  [outputFormats.XML]
-    isPlainText = false
-    mediaType = "application/xml"
-    isHtml = false
-    noUgly = true
-    permalinkable = false
-    name = "xml"
-
 [minify]
   [minify.tdewolff.js]
     keepVarNames = true
@@ -97,8 +116,7 @@ home = ["HTML", "RSS", "REDIR"]
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.134.0"
+    min = "0.141.0"
-    max = ""
   [[module.mounts]]
     source = "archetypes"
     target = "archetypes"
@@ -120,24 +138,67 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'layouts/partials/bookshop'
+    includeFiles = ['**/*.hugo.html']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'data/structures'
+    includeFiles = ['**/*.bookshop.yml']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/bookshop'
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/scss/modules/bookshop'
+    includeFiles = ['**/*.scss']
+    excludeFiles = ['bookshop.scss']
+  [[module.mounts]]
+    source = 'component-library/bookshop.scss'
+    target = 'assets/scss/bookshop.scss'
+  [[module.mounts]]
+    source = 'component-library/helpers'
+    target = 'layouts/partials/_bookshop/helpers'
+  # ensures main package.json is always available, even when using workspaces
+  # in workspaces, the package.json is pointing to the first imported module
+  [[module.mounts]]
+    source = "package.json"
+    target = "assets/data/package-hinode.json"
   [[module.mounts]]
     source = "netlify.toml"
     target = "assets/config/netlify.toml"
 # toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/cloudcannon/bookshop/hugo/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-bootstrap"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-csp"
   [[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]]
     path = "github.com/gethinode/mod-katex"
   [[module.imports]]
     path = "github.com/gethinode/mod-leaflet"
   [[module.imports]]
     path = "github.com/gethinode/mod-lottie"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-mermaid"
   [[module.imports]]
     path = "github.com/gethinode/mod-simple-datatables"
   [[module.imports]]
-    path = "github.com/gethinode/mod-utils/v2"
+    path = "github.com/gethinode/mod-utils/v3"
 # toml-docs-end modules
+
+# toml-docs-start segments
+[segments]
+  [segments.headers]
+    [[segments.headers.includes]]
+       kind = '{home}'
+       output = '{netlify,server}'
+# toml-docs-end segments

config/_default/languages.toml

@@ -11,5 +11,5 @@
         title = "Follow me"
         caption = "I work on everything coding and tweet developer memes"
     [en.params.footer]
-        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer nofollow'>CC BY-NC-SA 4.0</a>)."
 # toml-docs-end lang-param

config/_default/params.toml

@@ -10,6 +10,10 @@
     footerBelowFold = false
     loading = "lazy"
     breakpoint = "md"
+    titleCase = false
+    [main.internalLinks]
+        validate = true
+        pretty = false
     [main.externalLinks]
         cue = false
         tab = false
@@ -38,6 +42,12 @@
         host = "youtube"
 # toml-docs-end videos
 
+[dam]
+    videoCodecs = [
+        "webm/vp9",
+        "mp4/h265",
+        "mp4"
+    ]
 
 # toml-docs-start debugging
 [debugging]
@@ -204,3 +214,60 @@
 
 [links]
     hinode = "https://gethinode.com"
+
+# toml-docs-start headers
+[headers]
+  [headers.netlify]
+    source = "netlify.toml"
+# toml-docs-end headers
+
+# toml-docs-start csp
+[modules.hinode.csp]
+    style-src = ["www.youtube.com"]
+    font-src = ["fonts.gstatic.com"]
+    frame-src = [
+        "player.cloudinary.com",
+        "www.youtube-nocookie.com",
+        "www.youtube.com"
+    ]
+    img-src = [
+        "data:",
+        "*.imgix.net",
+        "*.imagekit.io",
+        "*.cloudinary.com",
+        "i.ytimg.com"
+    ]
+# toml-docs-end csp
+
+[modules.vimeo]
+    local = true
+    integration = "optional"
+    state = "async"
+    url = "https://player.vimeo.com/api/player.js"
+
+[modules.vimeo.csp]
+    frame-src = ["player.vimeo.com"]
+    img-src = ["i.vimeocdn.com"]
+    script-src = ["player.vimeo.com"]
+
+# define module integration
+[modules.bookshop]
+  integration = "core"
+
+# provide default hero settings
+[modules.bookshop.hero]
+  align = "start"
+#   backdrop = "/assets/img/nat-9l98kFByiao-unsplash.jpg"
+  overlayMode = "dark"
+  section = true
+  default = ["section"]
+#   default = ["page", "home", "section"]
+
+[modules.bookshop.title]
+  size = 4
+  arrangement = "above"
+  headingStyle = "display"
+  bodyStyle = "lead text-muted"
+
+[modules.bookshop.articles]
+  moreButton = true

config/_default/server.toml

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

config/postcss.config.js

@@ -3,14 +3,16 @@ const cssnano = require('cssnano')({
   preset: 'advanced'
 })
 const whitelister = require('purgecss-whitelister')
-const purgecss = require('@fullhuman/postcss-purgecss')({
+const purgeImport = require('@fullhuman/postcss-purgecss')
+const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport
+const purgecss = purgeCSSPlugin({
   content: ['./hugo_stats.json'],
   defaultExtractor: (content) => {
     const els = JSON.parse(content).htmlElements
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
-  dynamicAttributes: ['data-bs-theme'],
+  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
-  safelist: [
+  safelist: ['was-validated',
     ...whitelister([
       './assets/scss/components/_clipboard.scss',
       './assets/scss/components/_command.scss',
@@ -24,6 +26,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './assets/scss/components/_video.scss',
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
+      './_vendor/github.com/gethinode/mod-cookieyes/v2/assets/scss/cookieyes.scss',
       './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss',
       './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',

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:
+content_blocks:
-    url: /img/sunrise.jpg
+  - _bookshop_name: hero
-    author: Harris Vo
+    heading:
-    authorURL: https://unsplash.com/@hoanvokim
+      title: Welcome to Hinode!
-    origin: https://unsplash.com/photos/ZX6BPboJrYk
+      content: |-
-    originName: Unsplash
+        A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-actions:
+      align: start
-  get-started:
+    background:
-    url: "https://gethinode.com/docs"
+      color: primary
-    title: "Get started"
+      subtle: true
-    icon: "fas book-open"
+    illustration:
+      image: /img/sunrise.jpg
+      ratio: 16x9
+      width: 8
+    width: 6
+    links:
+      - title: Get started
+        url: https://gethinode.com/docs
+        icon: fas book-open
+    orientation: horizontal
 ---

data/netlify.toml

@@ -0,0 +1,35 @@
+# toml-docs-start netlify
+[build]
+    publish = "exampleSite/public"
+    command = "npm run build:example"
+
+[build.environment]
+    DART_SASS_VERSION = "1.83.1"
+    HUGO_VERSION = "0.140.2"
+    HUGO_ENV = "production"
+    HUGO_ENABLEGITINFO = "true"
+    NODE_VERSION = "22.12.0"
+    NPM_VERSION = "10.9.0"
+# toml-docs-end netlify
+
+[context.deploy-preview]
+    command = "npm run build:example -- -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy]
+    command = "npm run build:example -- -b $DEPLOY_PRIME_URL"
+
+[dev]
+    framework = "#custom"
+    command = "npm run start:example"
+    targetPort = 1313
+    port = 8888
+    publish = "public"
+    autoLaunch = false
+
+# toml-docs-start plugins
+[[plugins]]
+    package = "@gethinode/netlify-plugin-dartsass"
+
+[[plugins]]
+    package = "netlify-plugin-hugo-cache-resources"
+# toml-docs-end plugins

data/server.toml

@@ -0,0 +1,41 @@
+# toml-docs-start server-config
+[[headers]]
+    for = "/**"
+    [headers.values]
+        Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+        X-Content-Type-Options = "nosniff"
+        X-XSS-Protection = "1; mode=block"
+        X-Frame-Options = "SAMEORIGIN"
+        Referrer-Policy = "strict-origin"
+        Permissions-Policy = """\
+            geolocation=(), \
+            midi=(), \
+            sync-xhr=(), \
+            microphone=(), \
+            camera=(), \
+            magnetometer=(), \
+            gyroscope=(), \
+            fullscreen=(), \
+            payment=() \
+            """
+        cache-control = """\
+            max-age=0, \
+            no-cache, \
+            no-store, \
+            must-revalidate \
+            """
+        Access-Control-Allow-Origin = "*"
+        Content-Security-Policy = """\
+            default-src 'none'; \
+            script-src 'self'; \
+            font-src 'self'; \
+            connect-src 'self'; \
+            img-src 'self'; \
+            style-src 'self'; \
+            base-uri 'self'; \
+            object-src 'none'; \
+            form-action 'self'; \
+            manifest-src 'self'; \
+            media-src 'self' \
+            """
+# toml-docs-end server-config

data/structures/_types.yml

@@ -0,0 +1,65 @@
+types:
+  background:
+    backdrop:
+    color:
+    subtle:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+    width:
+    image-overlay:
+    hook:
+  input:
+    section:
+    nested:
+    keywords:
+    categories:
+    tags:
+    reverse:
+    sort:
+  items:
+    - title:
+      description:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  links:
+    - title:
+      url:
+      icon:
+      force:
+  messages:
+    - title:
+      icon:
+      content:
+      link:
+      label:
+  more:
+    title:
+    link:
+  styles:
+    - ratio:
+      orientation:
+      portrait:
+      width:
+  video:
+    provider:
+    account:
+    id:
+    autoplay:
+    query-args:

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:
+    deprecated: v1.0.0
-    type: bool
+    alternative: title
-    optional: true
-    comment: Flag to indicate an item should be shown as collapsed.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the accordion item.
 body:
   optional: false
   comment: Content of the accordion item.

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
+  # deprecated arguments
-    optional: true
-    comment: Font Awesome icon to include.
   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:
+    deprecated: v1.0.0
-    type: bool
+    alternative: button-size
-    optional: true
-    default: false
-    comment: Flag indicating the button should be outlined.
-  badge:
-    type: string
-    optional: true
-    comment: Positioned badge to display on top of the button.
-  label:
-    type: string
-    optional: true
-    comment: >-         
-      Assistive label for the button or badge. The label is applied
-      to the badge instead of the button when a badge has been defined.
-      The default value of the button's assistive label is its title.
-  aria-label:
-    type: string
-    optional: true
-    comment: Alias for label.
-    group: shortcode
-  tooltip:
-    type: string
-    optional: true
-    comment: >-
-      Text to display in a tooltip. Cannot be used together with 
-      collapse. Ignored for active/inactive buttons.
-  collapse:
-    type: string
-    optional: true
-    comment: >-
-      Panel to collapse. Cannot be used together with tooltip. Ignored for
-      active/inactive buttons.
-  type:
-    type: select
-    optional: true
-    default: button
-    comment: Type of the element.
-    options:
-      values:
-        - link
-        - button
-  placement:
-    type: select
-    optional: true
-    default: top
-    comment: Position of the tooltip.
-    options:
-      values:
-        - top
-        - bottom
-        - left
-        - right
-  icon:
-    type: string
-    optional: true
-    comment: >-
-      Font Awesome icon class attribute, required unless title is set. An
-      example value is `fas sort`.
-  order:
-    type: select
-    optional: true
-    default: last
-    comment: Order of the icon
-    options:
-      values:
-        - first
-        - last
-  justify:
-    type: select
-    optional: true
-    default: center
-    comment: Justification of the button title and icon.
-    options:
-      values:
-        - start
-        - end
-        - center
-        - between
-        - around
-        - evenly
   toast:
     type: string
     optional: true
     comment: Identifier (ID) of the toast to display when the button is clicked.
-  clipboard:
+    deprecated: v1.0.0
-    type:
+    alternative: toast-id
-      - string
+  collapse:
-      - template.URL
-    optional: true
-    comment: Text to be copied to the clipboard when the button is clicked.
-  cue:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should show a visual cue, defaults
-      to the setting `main.externalLinks.cue` in the site's parameters.
-  tab:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should open in a new tab, defaults
-      to setting `main.externalLinks.tab` in the site's parameters.
-  attributes:
-    type: map[string]interface {}
-    optional: true
-    comment: >-
-      Dictionary of key-value pairs added as custom attributes to the button
-      element ('<a>').
-    group: partial
-  spacing:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      Flag to add spacing to the inline button.
-  wrapper:
     type: string
     optional: true
-    comment: Element class of the button wrapper.
+    comment: >-
-    group: shortcode
+      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,155 @@ 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:
   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
   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:
+  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
+      Label of the link button, defaults to the card title.
-      list exceeds the maximum number of cards to display.
+    deprecated: v1.0.0
-    group: partial
+    alternative: button-label
   hrefTitle:
     type: string
     optional: true
     comment: >-
       Title of the button or hyperlink as companion to href.
     group: partial
-  separator:
+    deprecated: v1.0.0
-    type: bool
+    alternative: href-title
-    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
-    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

data/structures/card.yml

@@ -4,79 +4,74 @@ 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"
   gutter:
-    type: select
+    default: 0
-    optional: true
-    default: "0"
     parent: cascade
-    comment: >-
+  header-style:
-      Gutter between columns in a group.
+    parent: cascade
-    options:
+    release: 1.0.0
-      values:
+  body-style:
-        - "0"
+    parent: cascade
-        - "1"
+    release: 1.0.0
-        - "2"
+  footer-style:
-        - "3"
+    parent: cascade
-        - "4"
+    release: 1.0.0
-        - "5"
+  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:
+    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 +85,8 @@ arguments:
         - publication
         - tags
         - none
+    deprecated: 1.0.0
+    alternative: header-style
   body:
     type: select
     optional: true
@@ -97,158 +94,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:
+    deprecated: v1.0.0
-    type:
+    alternative: footer-style
-      - 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.
   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 +132,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.
+    release: v0.23.2
-    group: partial
-  sizes:
-    type: string
-    default: 100vw
-    optional: true
     comment: >-
-      One or more strings separated by commas, indicating the source sizes of an
+      Label of the link button, defaults to the card title.
-      image set.
+    deprecated: v1.0.0
-    group: partial
+    alternative: button-label
-  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
 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/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: >-
+  class:
-      Language used to display the code. Use `hugo` to process Hugo (escaped)
+  show-markup:
-      shortcodes.
+    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:
+    deprecated: v1.0.0
-    type: string
+    alternative: show-preview
-    optional: true
-    comment: Class attributes of the element's container.
 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,23 @@ 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:
+  options:
+    release: v0.27.6
+  # 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
-    type: string
+    alternative: file
-    optional: true
-    comment: >-
-      Language to be used by the syntax highlighter. If not set, the
-      language is derived from the file extension.
-  show:
-    type: bool
-    optional: true
-    comment: >-
-      If unset, shows the panel with the code in collapsed state. By default,
-      the panel is expanded.
-  full:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      If unset, shows the filename only. By default, the entire path (relative
-      to the base path) is shown.
-  id: 
-    type: string
-    optional: true
-    comment: >- 
-      Identifier of the collapse panel, defaults to `file-collapse-n` with a
-      sequential number `n` starting at 1.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the tab control that wraps the file element.

data/structures/get-dimension.yml

@@ -0,0 +1,4 @@
+comment: >-
+  Initializes images dimensions (widht x height for supported image ratios.
+arguments:
+  ratio:

data/structures/hero-image.yml

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

data/structures/hero.yml

@@ -0,0 +1,27 @@
+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:
+  breadcrumb:
+  heading:
+  background:
+  illustration:
+  link-type:
+  links:
+  align:
+  order:
+  overlay-mode:
+  cover:
+  orientation:
+  width:
+  use-section:
+  use-title:
+  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
+  # deprecated arguments
-    optional: true
-    comment: Container name of the origin server.
   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:
+  url-host:
-    type: string
+    release: v1.0.0
-    optional: true
+  url-dir:
-    comment: >-
+    release: v1.0.0
-      Host of an URL. For example, the host of the URL
+  url-file:
-      'https://example.com/first/second/third.webp' equals 'example.com'.
+    release: v1.0.0
-  dir:
+  absolute-url:
-    type: string
+    release: v1.0.0
-    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.
   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
+  image-height:
-    optional: false
+    release: v1.0.0
-    comment: Image transformation.
+  image-width:
-    options:
+    release: v1.0.0
-      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.
   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,17 @@
+arguments:
+  src:
+  page:
+  mode:
+  ratio:
+  portrait:
+  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,33 @@ 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
+  # deprecated arguments
   url:
     type:
       - string
@@ -27,137 +54,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:
+    deprecated: v1.0.0
-    type: string
+    alternative: src
-    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

data/structures/ins.yml

@@ -0,0 +1,4 @@
+comment: Underlines text.
+body:
+  optional: false
+  comment: Text to be underlined.

data/structures/kbd.yml

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

data/structures/link.yml

@@ -8,79 +8,44 @@ comment: >-
   containing a `#`).
 arguments:
   page:
-    type:
+  href: 
-      - '*hugolib.pageState'
+    position: 0
-      - '*hugolib.pageForRenderHooks'
+  cue:
-      - '*hugolib.pageForShortcode'
+  tab:
-    optional: false
+  case:
+  external:
+  force:
+    release: v0.27.20
+  class:
+  text:
+    optional: true
     group: partial
-    comment: Context of the current page.
+  title:
+    release: v0.26.0
+  position:
+    group: partial
+    optional: true
+    release: v1.0.0
+  # deprecated arguments  
   destination: 
     type: string
-    optional: false
-    group: partial
-    comment: >-
-       Target destination.
-  href: 
-    type: string
-    position: 0
     optional: true
-    comment: >-
+    group: partial
-       Reference to either an external link (if it starts with `http`), a named
+    comment: Target destination.
-       link (if it can be found in `params.links`), or internal reference.
+    deprecated: v1.0.0
-       Both external and internal references may include an anchor `#`.
+    alternative: href
   name:
     type: string
     optional: true
     comment: Alias of href.
+    deprecated: v1.0.0
+    alternative: href
   url:
     type: string
     optional: true
     comment: Alias of href.
-  cue:
+    deprecated: v1.0.0
-    type: bool
+    alternative: href
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should show a visual cue, defaults to
-      setting `main.externalLinks.cue` in the site's parameters.
-  tab:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should open in a new tab, defaults to
-      setting `main.externalLinks.tab` in the site's parameters.
-  case:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      Flag to indicate if the retrieved title (e.g. no inner text is provided)
-      of an internal link should use its original case. If false, the title is
-      set to lower case.
-  external:
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Flag to indicate if a link that contains baseURL host should be forced as external.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the anchor element.
-  text:
-    type:
-      - string
-      - template.HTML
-      - hstring.RenderedString
-      - hstring.HTML
-    optional: true
-    group: partial
-    comment: Link description.
-  title:
-    type: string
-    optional: true
-    comment: Link title.
-    release: v0.26.0
 body:
   type: string
   optional: true

data/structures/links.yml

@@ -0,0 +1,6 @@
+arguments:
+  page:
+  links:
+  align:
+  justify:
+  link-type:

data/structures/live-pages.yml

@@ -0,0 +1,76 @@
+comment: >-
+  Retrieves a page collection relative to a provided page or optional section.
+  Provide tags to ensure the pages have at least one matching tag. You can sort
+  the collection by parameter in ascending or descending order.
+
+  As CloudCannon does not support the retrieval of page collection when live
+  editing, the partial returns a dummy collection instead.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Page context, used to retrieve page collections.
+    group: partial
+  section:
+    type: string
+    optional: true
+    comment: >-
+      Name of site section to use for the page collection. When omitted, the
+      current page is used as context instead. Use "/" to retrieve the home
+      page.
+  kind:
+    type: select
+    optional: true
+    default: regular
+    comment: >-
+      Kind of page collection to use.
+    options:
+      values:
+        - regular
+        - related
+        - taxonomy
+  nested:
+    type: bool
+    optional: true
+    comment: >-
+      If set, retrieves all pages below the section or current page recursively.
+      By default, only first-order childs are retrieved.
+  tags:
+    type:
+      - string
+      - "[]interface {}"
+    optional: true
+    comment: >-
+      Tags to be used as filter. When set, only pages that match at least one of
+      the provided tags are retrieved.
+  keywords:
+    type:
+      - string
+      - "[]interface {}"
+    optional: true
+    comment: >-
+      Keywords to be used as filter. When set, only pages that match at least
+      one of the provided keywords are retrieved.
+  categories:
+    type:
+      - string
+      - "[]interface {}"
+    optional: true
+    comment: >-
+      Categories to be used as filter. When set, only pages that belong to at
+      least one of the provided categories are retrieved.
+  sort:
+    type: string
+    optional: true
+    default: date
+    comment: >-
+      Page parameter to sort the page collection by. Both default and custom
+      parameters can be used.
+  reverse:
+    type: bool
+    optional: true
+    default: true
+    comment: >-
+      If set, returns the page collection in descending order.

data/structures/mark.yml

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

data/structures/nav-item.yml

@@ -1,46 +1,39 @@
 comment: >-
   Defines an individual item.
 arguments:
+  page:
+    group: partial
   id:
-    type: string
-    optional: true
-    comment: Identification of the item.
     group: partial
-  parentID:
+  parent-id:
-    type: string
+    release: v1.0.0
-    optional: false
+  title:
-    comment: Identification of the parent (e.g. nav control).
+    release: v1.0.0
-    group: partial
-  header:
-    type: string
-    optional: false
-    comment: Header of the item.
   show:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if the item should be shown. Only one can be shown at a
-      time.
   disabled:
-    type: bool
-    optional: true
-    comment: Flag to indicate the item should be in a disabled state.
   fade:
-    type: bool
-    optional: true
-    comment: Flag to make the tab pane fade in.
-    parent: cascade
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the item.
   body:
+    group: partial
+  navitem-type:
+    release: v1.0.0
+  illustration:
     type:
       - string
       - template.HTML
     optional: true
-    comment: The body content of the item, supports Markdown and HTML (if enabled).
     group: partial
+  hook:
+    default: assets/hero-image.html
+    group: partial
+    release: v1.0.0
+  # deprecated arguments  
+  header:
+    type: string
+    optional: true
+    comment: Header of the item.
+    deprecated: v1.0.0
+    alternative: title
   item_type:
     type: select
     optional: true
@@ -50,12 +43,15 @@ arguments:
         - accordion
         - tab-pane
     group: partial
-  illustration:
+    deprecated: v1.0.0
-    type:
+    alternative: navitem-type
-      - string
+  parentID:
-      - template.HTML
+    type: string
     optional: true
+    comment: Identification of the parent (e.g. nav control).
     group: partial
+    deprecated: v1.0.0
+    alternative: parent-id
 body:
   optional: false
   comment: Content of the item.

data/structures/nav.yml

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