Merge pull request #1454 from gethinode/develop

Clean up 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

assets/js/critical/languageSelector.js

@@ -25,17 +25,37 @@
           window.location.href = href
         }
       } else {
-        window.location.href = folder + language + '/'
+        let target = folder + language + '/'
+        if (window.location.href !== target) {
+          window.location.href = target
+        }
       }
     }
   }
 
   // Event listener for language selection
   document.addEventListener('DOMContentLoaded', () => {
-    const storedLanguage = getLanguage()
-    const languageItems = document.querySelectorAll('#language-selector .dropdown-item')
+    // override stored language when query string contains force is true
+    let params = new URLSearchParams(document.location.search)
+    let force = params.get('force')
+    if (force !== null && force.toLowerCase() == 'true') {
+      setLanguage(document.documentElement.lang)
+      return
+    }
 
-    if (languageItems.length > 0) {
+    // continue with regular code
+    const storedLanguage = getLanguage()
+    const languageItems = document.querySelectorAll('#language-selector[data-translated=true] .dropdown-item')
+
+    const link = document.querySelector("link[rel='canonical']")
+    let alias = ''
+    if (link !== null) {
+      alias = link.getAttribute('href')
+    }
+    
+    if ((alias !== '') && (window.location.href !== alias)) {
+      window.location.href = alias
+    } else if (languageItems.length > 0) {
       // Redirect if the stored language differs from the active language
       if ((storedLanguage) && (document.documentElement.lang !== storedLanguage)) {
         languageItems.forEach(item => {
@@ -57,10 +77,8 @@
       })
     }
     else {
-      // Redirect to the localized homepage
-      const defaultLang = '{{ site.LanguageCode | default site.Language.Lang }}'
-      let language = storedLanguage ? storedLanguage : defaultLang
-      window.location.href = folder + language + '/'
+      // overrule the current stored language when no translation is available
+      setLanguage(document.documentElement.lang)
     }
   })
 })()

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,12 +17,17 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
+$theme-border-radius:           1rem;
+
 strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 // 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);
@@ -44,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/_sidebar.scss

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

assets/scss/components/_table.scss

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

assets/scss/components/_timeline.scss

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

assets/scss/components/_toc.scss

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

component-library/bookshop.scss

@@ -0,0 +1,9 @@
+@import "modules/bookshop/shared/styles/global";
+@import "modules/bookshop/components/about/about";
+@import "modules/bookshop/components/articles/articles";
+@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,31 @@
+{{/* 
+    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" 
+        "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,108 @@
+{{/* 
+    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" 
+        "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/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,58 @@
+{{/* 
+    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" 
+        "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,34 @@
+{{/* 
+    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" 
+        "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,27 @@
+{{/* 
+    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" 
+        "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,19 @@
+{{/* 
+    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" 
+        "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,135 @@
+{{/* 
+    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" 
+        "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
 
@@ -84,7 +84,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
     disabled = false
     simple = true
 
-  [privacy.twitter]
+  [privacy.x]
     disabled = false
     enableDNT = true
     simple = true
@@ -100,7 +100,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 [services]
   [services.instagram]
     disableInlineCSS = true
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
   [services.googleAnalytics]
     # ID = "G-xxxxxxxxxx"
@@ -116,8 +116,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.134.0"
-    max = ""
+    min = "0.141.0"
   [[module.mounts]]
     source = "archetypes"
     target = "archetypes"
@@ -139,10 +138,39 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'layouts/partials/bookshop'
+    includeFiles = ['**/*.hugo.html']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'data/structures'
+    includeFiles = ['**/*.bookshop.yml']
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/bookshop'
+  [[module.mounts]]
+    source = 'component-library'
+    target = 'assets/scss/modules/bookshop'
+    includeFiles = ['**/*.scss']
+    excludeFiles = ['bookshop.scss']
+  [[module.mounts]]
+    source = 'component-library/bookshop.scss'
+    target = 'assets/scss/bookshop.scss'
+  [[module.mounts]]
+    source = 'component-library/helpers'
+    target = 'layouts/partials/_bookshop/helpers'
+  # ensures main package.json is always available, even when using workspaces
+  # in workspaces, the package.json is pointing to the first imported module
+  [[module.mounts]]
+    source = "package.json"
+    target = "assets/data/package-hinode.json"
   [[module.mounts]]
     source = "netlify.toml"
     target = "assets/config/netlify.toml"
 # toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/cloudcannon/bookshop/hugo/v3"
   [[module.imports]]
     path = "github.com/gethinode/mod-bootstrap"
   [[module.imports]]
@@ -150,7 +178,7 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
   [[module.imports]]
     path = "github.com/gethinode/mod-flexsearch/v2"
   [[module.imports]]
-    path = "github.com/gethinode/mod-fontawesome"
+    path = "github.com/gethinode/mod-fontawesome/v2"
   [[module.imports]]
     path = "github.com/gethinode/mod-google-analytics"
   [[module.imports]]
@@ -159,10 +187,12 @@ home = ["HTML", "RSS", "REDIR", "netlify", "server"]
     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

config/_default/params.toml

@@ -10,8 +10,10 @@
     footerBelowFold = false
     loading = "lazy"
     breakpoint = "md"
+    titleCase = false
     [main.internalLinks]
         validate = true
+        pretty = false
     [main.externalLinks]
         cue = false
         tab = false
@@ -40,6 +42,12 @@
         host = "youtube"
 # toml-docs-end videos
 
+[dam]
+    videoCodecs = [
+        "webm/vp9",
+        "mp4/h265",
+        "mp4"
+    ]
 
 # toml-docs-start debugging
 [debugging]
@@ -241,3 +249,25 @@
     frame-src = ["player.vimeo.com"]
     img-src = ["i.vimeocdn.com"]
     script-src = ["player.vimeo.com"]
+
+# define module integration
+[modules.bookshop]
+  integration = "core"
+
+# provide default hero settings
+[modules.bookshop.hero]
+  align = "start"
+#   backdrop = "/assets/img/nat-9l98kFByiao-unsplash.jpg"
+  overlayMode = "dark"
+  section = true
+  default = ["section"]
+#   default = ["page", "home", "section"]
+
+[modules.bookshop.title]
+  size = 4
+  arrangement = "above"
+  headingStyle = "display"
+  bodyStyle = "lead text-muted"
+
+[modules.bookshop.articles]
+  moreButton = true

config/_default/server.toml

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

config/postcss.config.js

@@ -3,13 +3,15 @@ const cssnano = require('cssnano')({
   preset: 'advanced'
 })
 const whitelister = require('purgecss-whitelister')
-const purgecss = require('@fullhuman/postcss-purgecss')({
+const purgeImport = require('@fullhuman/postcss-purgecss')
+const purgeCSSPlugin = purgeImport.purgeCSSPlugin || purgeImport.default || purgeImport
+const purgecss = purgeCSSPlugin({
   content: ['./hugo_stats.json'],
   defaultExtractor: (content) => {
     const els = JSON.parse(content).htmlElements
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
-  dynamicAttributes: ['data-bs-theme'],
+  dynamicAttributes: ['data-bs-theme', 'data-bs-theme-animate'],
   safelist: ['was-validated',
     ...whitelister([
       './assets/scss/components/_clipboard.scss',

content/_index.md

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

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

data/structures/_types.yml

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

data/structures/accordion.yml

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

data/structures/alert.yml

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

data/structures/args.yml

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

data/structures/background.yml

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

data/structures/badge.yml

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

data/structures/breadcrumb.yml

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

data/structures/button-group.yml

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

data/structures/button.yml

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

data/structures/card-group.yml

@@ -6,161 +6,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
-      list exceeds the maximum number of cards to display.
-    group: partial
+      Label of the link button, defaults to the card title.
+    deprecated: v1.0.0
+    alternative: button-label
   hrefTitle:
     type: string
     optional: true
     comment: >-
       Title of the button or hyperlink as companion to href.
     group: partial
-  separator:
-    type: bool
-    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
+    deprecated: v1.0.0
+    alternative: href-title

data/structures/card.yml

@@ -4,79 +4,73 @@ 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
-    optional: true
-    default: "0"
+    default: 0
     parent: cascade
-    comment: >-
-      Gutter between columns in a group.
-    options:
-      values:
-        - "0"
-        - "1"
-        - "2"
-        - "3"
-        - "4"
-        - "5"
+  header-style:
+    parent: cascade
+    release: 1.0.0
+  body-style:
+    parent: cascade
+    release: 1.0.0
+  footer-style:
+    parent: cascade
+    release: 1.0.0
+  description:
+    group: partial
+  loading:
+    parent: cascade
+    group: partial
+  thumbnail:
+  ratio:
+    parent: cascade
+    group: partial
+  portrait:
+    parent: cascade
+    release: v0.24.16
+  alt:
+    release: v0.19.0
+  icon:
+  icon-rounded:
+    release: v1.0.0
+  align:
+    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:
+    group: partial
+  sizes:
+    group: partial
+  anchor:
+    release: v0.24.23
+  # deprecated arguments
   header:
     type: select
     optional: true
@@ -90,6 +84,8 @@ arguments:
         - publication
         - tags
         - none
+    deprecated: 1.0.0
+    alternative: header-style
   body:
     type: select
     optional: true
@@ -97,158 +93,37 @@ arguments:
     parent: cascade
     release: v0.24.16
     comment: >-
-      Body of the card. 
+      Body components of the element. 
     options:
       values:
         - full
         - title
         - none
+    deprecated: 1.0.0
+    alternative: body-style
   footer:
     type: select
     optional: true
     default: none
     parent: cascade
     comment: >-
-      Footer components of the card, displayed in small caps.
+      Footer components of the element, displayed in small caps.
     options:
       values:
         - full
         - publication
         - tags
         - none
-  description:
-    type:
-      - string
-      - template.HTML
-    optional: true
-    comment: >-
-      Description of the card.
-    group: partial
-  loading:
-    type: select
-    optional: true
-    parent: cascade
-    default: eager
-    comment: >-
-      Loading behavior of the image. The loading of lazily loaded images is
-      deferred until the image is within scrolling range of the viewport. This
-      should reduce the initial loading time of the website. It is recommended
-      to lazily load only those images that are below the page fold.
-    options:
-      values:
-        - lazy
-        - eager
-    group: partial
-  thumbnail:
-    type: path
-    optional: true
-    comment: >-
-      Thumbnail image url, displayed on top or the left of the card.
-  ratio:
-    type: select
-    optional: true
-    parent: cascade
-    comment: >-
-      Ratio of the thumbnail image, defaults to `16x9` (stacked orientation)
-      or `1x1` (horizontal orientation).
-    options:
-      values:
-        - 1x1
-        - 3x2
-        - 4x3
-        - 16x9
-        - 21x9
-    group: partial
-  portrait:
-    type: bool
-    parent: cascade
-    optional: true
-    default: false
-    release: v0.24.16
-    comment: >-
-      Flag to adjust the ratio from landscape to portrait. The image itself is
-      not rotated, only the crop area is adjusted. Not applicable to vector
-      graphics.
-  alt:
-    type: string
-    optional: true
-    release: v0.19.0
-    comment: >-
-      Alternate text for the thumbnail, uses `title` by default.
-  icon:
-    type: string
-    optional: true
-    comment: >-
-      Font Awesome icon, displayed on top or the left of the card.
+    deprecated: v1.0.0
+    alternative: footer-style
   iconRounded:
     type: bool
     parent: cascade
     optional: true
     release: v0.24.8
+    deprecated: v1.0.0
+    alternative: icon-rounded
     comment: Stack the icon in a round container.
-  align:
-    type: select
-    parent: cascade
-    optional: true
-    default: start
-    release: v0.23.0
-    comment: Icon alignment.
-    options:
-      values:
-        - start
-        - end
-        - center
-  scroll:
-    type: bool
-    parent: cascade
-    optional: true
-    group: partial
-    comment: >-
-      Enables horizontal scrolling of the cards. By default, the card group
-      wraps any cards beyond the amount of defined columns to a new line. When
-      `scroll` is set to true, a horizontal scroll bar is added instead.
-  wrapper:
-    type: string
-    optional: true
-    comment: Element class of the card wrapper.
-  style:
-    type: string
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: Icon style.
-  orientation:
-    type: select
-    optional: true
-    default: stacked
-    parent: cascade
-    comment: Placement of the thumbnail or icon.
-    options:
-      values:
-        - stacked
-        - horizontal
-        - horizontal-sm
-        - overlay
-        - none
-  subtle:
-    type: bool
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: Apply subtle background colors.
-  button:
-    type: bool
-    parent: cascade
-    optional: true
-    release: v0.23.0
-    comment: >-
-      Flag indicating the cards should include a button that links to the provided address.
-  buttonLabel:
-    type: string
-    optional: true
-    release: v0.23.2
-    comment: >-
-      Label of the link button, defaults to the card title.
   buttonType:
     type: select
     parent: cascade
@@ -256,42 +131,28 @@ arguments:
     default: button
     comment: Type of the button element.
     release: v0.23.18
+    deprecated: v1.0.0
+    alternative: link-type
     options:
       values:
         - link
         - button
-  hook:
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0
+    comment: Icon style.
+    deprecated: v1.0.0
+    alternative: icon-style
+  buttonLabel:
     type: string
     optional: true
-    comment: Render hook for the image partial.
-    group: partial
-  sizes:
-    type: string
-    default: 100vw
-    optional: true
+    release: v0.23.2
     comment: >-
-      One or more strings separated by commas, indicating the source sizes of an
-      image set.
-    group: partial
-  anchor:
-    type: select
-    optional: true
-    comment: 
-      Anchor of the thumbnail's crop box, defaults to anchor value set in
-      `imaging` section of the site configuration (usually `Smart`).
-    options:
-      values:
-        - TopLeft
-        - Top
-        - TopRight
-        - Left
-        - Center
-        - Right
-        - BottomLeft
-        - Bottom
-        - BottomRight
-        - Smart
-    release: v0.24.23
+      Label of the link button, defaults to the card title.
+    deprecated: v1.0.0
+    alternative: button-label
 body:
   optional: true
   comment: >-

data/structures/carousel-item.yml

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

data/structures/carousel.yml

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

data/structures/collapse.yml

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

data/structures/command.yml

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

data/structures/docs.yml

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

data/structures/download.yml

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

data/structures/example.yml

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

data/structures/featured-illustration.yml

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

data/structures/file.yml

@@ -2,44 +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:
-    type: string
-    optional: true
-    comment: >-
-      Language to be used by the syntax highlighter. If not set, the
-      language is derived from the file extension.
-  show:
-    type: bool
-    optional: true
-    comment: >-
-      If unset, shows the panel with the code in collapsed state. By default,
-      the panel is expanded.
-  full:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      If unset, shows the filename only. By default, the entire path (relative
-      to the base path) is shown.
-  id: 
-    type: string
-    optional: true
-    comment: >- 
-      Identifier of the collapse panel, defaults to `file-collapse-n` with a
-      sequential number `n` starting at 1.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the tab control that wraps the file element.
-  options:
-    type: string
-    optional: true
-    comment: Hugo highlighting options.
-    release: v0.27.6
+    deprecated: v1.0.0
+    alternative: file

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
-    optional: true
-    comment: Container name of the origin server.
+  # deprecated arguments
   host:
     type: string
     optional: true
     comment: >-
       Host of an URL. For example, the host of the URL
       'https://example.com/first/second/third.webp' equals 'example.com'.
+    deprecated: v1.0.0
+    alternative: url-host
   dir:
     type: string
     optional: true
     comment: >-
       All but the last element of an URL extension. For example, the dir of the
       URL 'https://example.com/first/second/third.webp' equals '/first/second/'.
+    deprecated: v1.0.0
+    alternative: url-dir
   file:
     type: string
     optional: false
     comment: >-
       The last element of an URL extension. For example, the file of the
       URL 'https://example.com/first/second/third.webp' equals 'third.webp'.
+    deprecated: v1.0.0
+    alternative: url-file

data/structures/image-adapter.yml

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

data/structures/image-definition.yml

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

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,16 @@
 comment: Adds a keyboard input element.
 arguments:
-  title:
-    type: string
-    optional: false
+  text:
     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:
-    type: string
-    optional: true
-    comment: Class attribute of the keyboard input element.
-  color:
-    type: select
-    default: secondary
-    optional: true
-    comment: Theme color of the element.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
+    deprecated: v1.0.0
+    alternative: text

data/structures/link.yml

@@ -8,79 +8,44 @@ comment: >-
   containing a `#`).
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForRenderHooks'
-      - '*hugolib.pageForShortcode'
-    optional: false
+  href: 
+    position: 0
+  cue:
+  tab:
+  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: >-
-       Reference to either an external link (if it starts with `http`), a named
-       link (if it can be found in `params.links`), or internal reference.
-       Both external and internal references may include an anchor `#`.
+    group: partial
+    comment: Target destination.
+    deprecated: v1.0.0
+    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:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should show a visual cue, defaults to
-      setting `main.externalLinks.cue` in the site's parameters.
-  tab:
-    type: bool
-    optional: true
-    comment: >-
-      Flag to indicate if an external link should open in a new tab, defaults to
-      setting `main.externalLinks.tab` in the site's parameters.
-  case:
-    type: bool
-    optional: true
-    default: true
-    comment: >-
-      Flag to indicate if the retrieved title (e.g. no inner text is provided)
-      of an internal link should use its original case. If false, the title is
-      set to lower case.
-  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
+    deprecated: v1.0.0
+    alternative: href
 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

@@ -2,45 +2,36 @@ comment: >-
   Defines an individual item.
 arguments:
   id:
-    type: string
-    optional: true
-    comment: Identification of the item.
     group: partial
-  parentID:
-    type: string
-    optional: false
-    comment: Identification of the parent (e.g. nav control).
-    group: partial
-  header:
-    type: string
-    optional: false
-    comment: Header of the item.
+  parent-id:
+    release: v1.0.0
+  title:
+    release: v1.0.0
   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 +41,15 @@ arguments:
         - accordion
         - tab-pane
     group: partial
-  illustration:
-    type:
-      - string
-      - template.HTML
+    deprecated: v1.0.0
+    alternative: navitem-type
+  parentID:
+    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:
-    type: bool
-    default: false
-    optional: true
-    comment: Flag to show vertical tabs instead of horizontal tabs.
+    deprecated: v1.0.0
+    alternative: tab-type
   wrap:
     type: bool
     default: false
     optional: true
     comment: Flag to enable word wrapping of tab titles.
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the tab group, e.g. `nav-fill`.
-  pane:
-    type: select
-    optional: true
-    default: none
-    comment: Style of the panes.
-    options:
-      values:
-        - none
-        - persona
-    group: partial
-  width:
-    type: select
-    optional: true
-    default: "100"
-    comment: Responsive width of the tab group.
-    options:
-      values:
-        - "50"
-        - "100"
-    group: partial
-  loading:
-    type: select
-    optional: true
-    default: eager
-    parent: cascade
-    comment: >-
-      Loading behavior of the image. The loading of lazily loaded images is
-      deferred until the image is within scrolling range of the viewport. This
-      should reduce the initial loading time of the website. It is recommended
-      to lazily load only those images that are below the page fold.
-    options:
-      values:
-        - lazy
-        - eager
-    group: partial
+    deprecated: v1.0.0
+    alternative: word-wrap

data/structures/navbar.yml

@@ -4,50 +4,11 @@ comment: >-
   navigation bar includes a search area and a language switcher if applicable.
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForShortcode'
-    optional: false
-    comment: Context of the current page.
-    group: partial
   path:
-    type: path
-    optional: false
-    comment: Path of the active page.
     group: shortcode
   title:
-    type: string
-    optional: true
-    comment: >- 
-      Brand title, displayed when the logo is not set. Defaults to the site's
-      title.
   class:
-    type: string
-    optional: true
-    comment: Class attribute of the navbar container.
   color:
-    type: select
-    optional: true
-    comment: >-
-      Background theme color of the navbar. Set the color to `body` or
-      `body-tertiary` for the navbar to respond to color mode  changes (e.g.
-      switching between dark and light). The navigation bar is transparent when
-      no color is set, but is set to the body color when scrolling to enhance
-      the contrast.
-    options:
-      values:
-        - primary
-        - secondary
-        - success
-        - danger
-        - warning
-        - info
-        - light
-        - dark
-        - white
-        - black
-        - body
-        - body-tertiary
   id:
     type: string
     optional: true
@@ -60,18 +21,9 @@ arguments:
     optional: true
     default: main
     comment: Name of the menu configuration.
-  size:
-    type: select
-    optional: true
-    comment: Breakpoint of the navbar toggler.
-    default: md
-    options:
-      values:
-        - xs
-        - sm
-        - md
-        - lg
-        - xl
+  breakpoint:
+    release: v1.0.0
+
   style:
     type: select
     optional: true
@@ -127,3 +79,18 @@ arguments:
     comment: >-
       Address of the logo image, defaults to the parameter `logo` set in the
       `main` section of the site's parameter configuration.
+  # deprecated arguments
+  size:
+    type: select
+    optional: true
+    comment: Breakpoint of the navbar toggler.
+    default: md
+    options:
+      values:
+        - xs
+        - sm
+        - md
+        - lg
+        - xl
+    deprecated: v1.0.0
+    alternative: breakpoint

data/structures/release.yml

@@ -3,9 +3,16 @@ comment: >-
  indicate if it is a new or deprecated feature.
 arguments:
   version:
-    type: string
-    optional: false
-    comment: Version string, expects semver notation with a `v` prefix.
+  release-state:
+    release: v1.0.0
+  short:
+  button-size:
+    release: v1.0.0
+  class:
+  inline:
+  link-type:
+    release: v1.0.0
+  # deprecated arguments
   state:
     type: select
     optional: true
@@ -15,10 +22,8 @@ arguments:
       values:
         - new
         - deprecated
-  short:
-    type: bool
-    optional: true
-    comment: Flag to indicate the release button should use short notation.
+    deprecated: v1.0.0
+    alternative: release-state
   size:
     type: select
     optional: true
@@ -29,15 +34,8 @@ arguments:
         - sm
         - md
         - lg
-  class:
-    type: string
-    optional: true
-    comment: Class attribute of the button element.
-  inline:
-    type: bool
-    optional: true
-    default: false
-    comment: Flag to render the release button inline.
+    deprecated: v1.0.0
+    alternative: button-size
   type:
     type: select
     optional: true
@@ -47,3 +45,5 @@ arguments:
       values:
         - link
         - button
+    deprecated: v1.0.0
+    alternative: link-type

data/structures/section-title.yml

@@ -0,0 +1,126 @@
+comment: Renders the header of a page section.
+arguments:
+  heading:
+  links:
+  color:
+    type: select
+    comment: Text color of the section.
+    default: body
+    optional: true
+    options:
+      values:
+        - body
+        - primary
+        - secondary
+        - black
+        - white
+  class:
+    type: string
+    optional: true
+    comment: Class attribute of the section title.
+  size: 
+    type: int
+    optional: true
+    comment: Display size of the title.
+    options:
+      min: 1
+      max: 6
+  use-title:
+    type: bool
+    optional: true
+    default: false
+    comment: Sets the title to an HTML header instead of a div.
+  justify:
+    type: select
+    comment: Justification of the link titles and icons.
+    optional: true
+    default: center
+    options:
+      values:
+        - start
+        - end
+        - center
+        - between
+        - around
+        - evenly
+  type:
+    type: select
+    optional: true
+    default: button
+    comment: Link type
+    options:
+      values:
+        - button
+        - link
+  section: 
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Trigger to use the current section as preheading, applies to single pages
+      only. Any preheading values takes precedence.
+  arrangement:
+  headingStyle:
+    type: select
+    optional: true
+    default: display
+    options:
+      values:
+        - display
+        - fs
+    comment: >-
+      Style of the heading, either display or fs (regular).
+  bodyStyle:
+    type: string
+    optional: true
+    default: lead text-muted
+    comment: >-
+      Style of the body text, if any..
+  # class:
+  #   type: string
+  #   optional: true
+  #   comment: Class attribute of the illustration, e.g. "col-6".
+  # image:
+  #   type: string
+  #   optional: true
+  #   comment: Image displayed on top of or adjacent to the headline.
+  # imageOverlay:
+  #   type: bool
+  #   optional: true
+  #   default: false
+  #   comment: Trigger to include an image overlay placeholder.
+  # ratio:
+  #   type: select
+  #   optional: true
+  #   default: 16x9
+  #   comment: >-
+  #     Ratio of the illustration, uses original aspect ratio by default.
+  #   options:
+  #     values:
+  #       - 1x1
+  #       - 3x2
+  #       - 4x3
+  #       - 16x9
+  #       - 21x9
+  # 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
+  # icon:
+  #   type: string
+  #   optional: true
+  #   comment: Icon or animation displayed on top of or adjacent to the headline.

data/structures/separator.yml

@@ -0,0 +1,20 @@
+comment: >-
+  Inserts a horizontal page section separator.
+arguments:
+  _bookshop_name:
+    type: string
+    optional: true
+    comment: Unique name of the bookshop component
+    group: partial
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: true
+    comment: Context of the current page.
+    group: partial
+  theme:
+    type: string
+    optional: true
+    comment: Color theme to apply.
+    release: v1.0.0-alpha

data/structures/spinner.yml

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

data/structures/stack.yml

@@ -0,0 +1,90 @@
+comment: >-
+  Displays a grid of Bootstrap cards with 1 to 5 columns. The cards are rendered
+  using a provided list of pages. Cards on the same row are aligned to each
+  other. The grid renders pages up to a provided maximum amount. The remaining
+  items are accessible via either a paginator or button to a list page (default
+  behavior). Be aware a page can only contain one paginator at a time.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: true
+    comment: Context of the current page.
+    group: partial
+  gutter:
+    type: int
+    optional: true
+    default: 4
+    comment: Gutter between columns in a group.
+    options:
+      min: 0
+      max: 5
+    release: v0.19.0
+  list:
+    type:
+      - 'page.Pages'
+      - 'resource.Resources'
+      - '[]map[string]interface {}'
+    optional: true
+    comment: Array of pages or structured content to be rendered as cards.
+    group: partial
+  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
+  href:
+    type: string
+    optional: true
+    comment: >-
+      Address for the button or hyperlink. If set, a button is added if the
+      list exceeds the maximum number of cards to display.
+    group: partial
+  hrefTitle:
+    type: string
+    optional: true
+    comment: >-
+      Title of the button or hyperlink as companion to href.
+    group: partial
+  buttonType:
+    type: select
+    optional: true
+    default: button
+    release: v0.23.18
+    comment: Type of the button elements.
+    options:
+      values:
+        - link
+        - button
+  animated:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Enables card animations.
+    release: v0.27.0
+  styles:
+    type:
+      - '[]map[string]interface {}'
+    optional: true
+    comment: >-
+      Styles to apply to the individual cards. Supported elements are `ratio`,
+      `orientation`, `portrait`, and `width`.
+

data/structures/sub.yml

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

data/structures/sup.yml

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

data/structures/table.yml

@@ -3,6 +3,20 @@ comment: >-
   improve their layout on smaller screens. To features `sortable`, `paging`,
   and `searchable` require the module `simple-datatables`.
 arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Page to display the breadcrumb for.
+    group: partial
+  input:
+    type:
+      - string
+      - template.HTML
+    optional: false
+    comment: Table input in markdown format.
+    group: partial
   breakpoint:
     type: select
     optional: true
@@ -35,11 +49,33 @@ arguments:
     optional: true
     comment: Whether paging is enabled for the table.
     release: v0.24.13
+  pagingOptionPerPage:
+    type: int
+    optional: true
+    comment: >-
+      Sets the maximum number of rows to display on each page. Requires
+      `paging = true`.
+    release: v0.27.8 
+  pagingOptionPageSelect:
+    type: string
+    optional: true
+    comment: >-
+      Sets the per page options in the dropdown. Must be an array of integers or
+      arrays in the format [label (string), value (int)]. Requires
+      `paging = true`. 
+    release: v0.27.8 
   searchable:
     type: bool
     optional: true
     comment: Toggle the ability to search the dataset.
     release: v0.24.13
+  wrap:
+    type: bool
+    optional: true
+    comment: >-
+      Toggle the last column to wrap to a new row on smaller devices. This
+      setting is not compatible with data tables.
+    release: v0.28.0
 body:
   type: string
   optional: false

data/structures/timeline.yml

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

data/structures/toast.yml

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

data/structures/tooltip.yml

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

data/structures/video.yml

@@ -3,88 +3,43 @@ comment: >-
   embedded in a responsive frame.
 arguments:
   page:
-    type:
-      - '*hugolib.pageState'
-      - '*hugolib.pageForShortcode'
-    optional: false
-    group: partial
     release: v0.26.5
-    comment: Context of the current page.
   position:
-    type:
-      - 'text.Position'
-    optional: true
-    group: partial
     release: v0.26.5
-    comment: Filename and position from which the shortcode was called.
+  provider:
+    release: v1.0.0
+  title:
+  class:
+    position: 1
+  media-id:
+    position: 0
+    release: v1.0.0
+  account:
+    release: v0.26.5
+  autoplay:
+  autotitle:
+    release: v0.25.2
+  ratio:
+    release: v0.26.5
+  query-args:
+    release: v1.0.0
+  # deprecated arguments
+  id:
+    type: string
+    optional: true
+    comment: ID of the video to be embedded.
+    deprecated: v1.0.0
+    alternative: media-id
+  options:
+    release: v0.28.2
+    deprecated: v1.0.0
+    alternative: query-args
   host:
     type: string
     optional: true
-    default: youtube
-    release: v0.26.5
     comment: >-
       Host name of the video provider. It should match one of the registered
       providers in the site's parameters under `videos`.
-  title:
-    type: string
-    optional: true
-    comment: >-
-      Title of the video. You can also set `autotitle` to retrieve the title
-      programmatically at build time, if supported by the provider.
-  class:
-    type: string
-    optional: true
-    position: 1
-    comment: >-
-      Class attribute of the video wrapper element.
-  id:
-    type: string
-    optional: false
-    position: 0
-    comment: Public ID of the video to be embedded.
-  account:
-    type: string
-    optional: true
-    comment: >-
-      Account name of the video asset, required by some digital asset managers.
-      You can also set the default account name in the site's parameters.
-    release: v0.26.5
-  autoplay:
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Flag indicating the video should start playing immediately when loaded, if
-      supported by the browser. The audio will be muted.
-  autotitle:
-    type: bool
-    optional: true
-    default: false
-    release: v0.25.2
-    comment: >-
-      Trigger to retrieve the title from the video metadata, if supported by the
-      provider.
-  ratio:
-    type: select
-    optional: true
-    comment: >-
-      Ratio of the video. If set, determines the padding of the embedded video
-      frame. When not specified, the video dimensions used to calculate the
-      padding are retrieved programmatically.
-    options:
-      values:
-        - 1x1
-        - 3x2
-        - 4x3
-        - 16x9
-        - 21x9
-    release: v0.26.5
-  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.26.5
+    deprecated: v1.0.0
+    alternative: provider