Merge pull request #1461 from gethinode/develop

Refactor bookshop components
Fix separator padding and width
2025-10-17 23:13:11 +00:00 · 2025-06-17 06:28:15 +02:00 · 2025-06-17 06:17:31 +02:00 · 2025-06-17 05:54:59 +02:00 · 2025-06-17 05:54:11 +02:00 · 2025-06-17 05:53:33 +02:00
41 changed files with 601 additions and 410 deletions
--- a/component-library/bookshop.scss
+++ b/component-library/bookshop.scss
@@ -1,6 +1,7 @@
@import "modules/bookshop/shared/styles/global";
@import "modules/bookshop/components/about/about";
@import "modules/bookshop/components/articles/articles";
+@import "modules/bookshop/components/cards/cards";
@import "modules/bookshop/components/faq/faq";
@import "modules/bookshop/components/hero/hero";
@import "modules/bookshop/components/releases/releases";
--- a/component-library/components/about/about.bookshop.yml
+++ b/component-library/components/about/about.bookshop.yml
@@ -30,6 +30,7 @@ blueprint:
    mode:
  order:
  width:
+  justify:
  link-type:
  links:
    -
--- a/component-library/components/about/about.hugo.html
+++ b/component-library/components/about/about.hugo.html
@@ -26,7 +26,7 @@
        "link-type"    $args.linkType
        "links"        $args.links
        "orientation"  "horizontal"
-        "width"        (or .width 8)
+        "width"        (or $args.width 8)
        )
    }}
 {{- end -}}
--- a/component-library/components/articles/articles.bookshop.yml
+++ b/component-library/components/articles/articles.bookshop.yml
@@ -42,4 +42,6 @@ blueprint:
  header-style:
  footer-style:
  orientation:
-  class:
+  class:
+  width:
+  justify:
--- a/component-library/components/articles/articles.hugo.html
+++ b/component-library/components/articles/articles.hugo.html
@@ -11,7 +11,7 @@
 {{ if or $args.err $args.warnmsg }}
    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
        "partial" "component-library/components/articles/articles.hugo.html" 
-        "warnid"   "warn-invalid-arguments"
+        "warnid"  "warn-invalid-arguments"
        "msg"     "Invalid arguments"
        "details" ($args.errmsg | append $args.warnmsg)
        "file"    page.File
@@ -62,48 +62,46 @@

 <!-- 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/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))
-		)}}
+	{{ $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>
+	{{ 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 }}
 {{ end }}
--- a/component-library/components/cards/cards.bookshop.yml
+++ b/component-library/components/cards/cards.bookshop.yml
@@ -0,0 +1,34 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Benefits
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  icon-rounded:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  orientation:
+  class:
+  width:
+  justify:
--- a/component-library/components/cards/cards.hugo.html
+++ b/component-library/components/cards/cards.hugo.html
@@ -0,0 +1,69 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cards" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cards/cards.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ range $args.elements }}
+	<!-- TODO: check mode -->
+	{{ $list = $list | append (dict 
+		"title"       .title
+		"description" (.content | page.RenderString)
+		"icon"        .icon
+		"thumbnail"   .image
+	) }}
+{{ end}}
+
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict "heading" $args.heading "class" "py-5") -}}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary d-sm-none %s" $args.class)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   "fa-2x"
+		"align"        "start"
+		"orientation"  ($args.orientation | default "horizontal-sm")
+		"hook"         "assets/live-card.html"
+	) -}}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary d-none d-sm-block %s" $args.class)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   "fa-2x"
+		"align"        "start"
+		"orientation"  ($args.orientation | default "stacked")
+		"hook"         "assets/live-card.html"
+	) -}}
+{{ end }}
+
--- a/component-library/components/cards/cards.scss
+++ b/component-library/components/cards/cards.scss
--- a/component-library/components/faq/faq.bookshop.yml
+++ b/component-library/components/faq/faq.bookshop.yml
@@ -17,6 +17,8 @@ blueprint:
    width:
    size:
  contrast:
+  width:
+  justify:
  background:
    backdrop:
    color:
--- a/component-library/components/faq/faq.hugo.html
+++ b/component-library/components/faq/faq.hugo.html
@@ -17,43 +17,41 @@
 {{ 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"
-		) -}}
+	{{ $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) "-")) }}
+	{{ $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 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>
-			{{ end }}
-		</div>
+			</div>
+		{{ end }}
 	</div>
 {{ end }}
--- a/component-library/components/hero/hero.bookshop.yml
+++ b/component-library/components/hero/hero.bookshop.yml
@@ -38,3 +38,4 @@ blueprint:
  cover:
  orientation:
  width:
+  justify:
--- a/component-library/components/hero/hero.hugo.html
+++ b/component-library/components/hero/hero.hugo.html
@@ -30,6 +30,7 @@
 		"links"        $args.links
 		"orientation"  $args.orientation
 		"width"        $args.width
+		"justify"      $args.justify
 		)
 	}}
 {{ end }}
--- a/component-library/components/releases/releases.bookshop.yml
+++ b/component-library/components/releases/releases.bookshop.yml
@@ -21,4 +21,6 @@ blueprint:
    backdrop:
    color:
    subtle:
+  width:
+  justify:
  data:
--- a/component-library/components/separator/separator.hugo.html
+++ b/component-library/components/separator/separator.hugo.html
@@ -16,5 +16,5 @@
 {{ end }}

 {{ if not $args.err }}
-    <div class="container-xxl p-0"{{ with $args.theme }} data-bs-theme="{{ . }}"{{ end }}><hr></div>
+    <hr class="w-100">
 {{ end }}
--- a/component-library/components/video-message/video-message.bookshop.yml
+++ b/component-library/components/video-message/video-message.bookshop.yml
@@ -39,6 +39,7 @@ blueprint:
      label:
  border:
  width:
+  justify:

 _structures:
  messages:
--- a/component-library/components/video-message/video-message.hugo.html
+++ b/component-library/components/video-message/video-message.hugo.html
@@ -73,7 +73,7 @@
 	) -}}
 {{ end }}

-<div class="container-xxl p-4 px-xxl-0">
+{{ if not $args.err }}
 	{{ $list := slice }}

 	{{ range $args.messages }}
@@ -133,4 +133,4 @@
 			</div>
 		</div>
 	{{ end }}
-</div>
+{{ end }}
--- a/component-library/helpers/component.html
+++ b/component-library/helpers/component.html
@@ -32,6 +32,9 @@
    {{- $background := index $component_props "background" -}}
    {{- $backdrop := "" -}}
    {{- $style := index $component_props "wrapper" -}}
+    {{- $width := index $component_props "width" -}}
+    {{- $justify := index $component_props "justify" | default "start" -}}
+    {{- $padding := cond (ne $component_name "separator") "px-4 px-xxl-0 py-4" "" -}}
    {{- $wrapper := $style }}
    {{ with $background }}
        {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
@@ -59,7 +62,16 @@
        {{- 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 }}
+
+        {{ $col := cond (and $width (lt $width 12)) (printf "col-12 col-md-%d" $width) "" }}
+
+        <div class="container-xxl {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
+            {{ with $col }}
+                <div class="{{ . }}">{{ partial $resolved_component $component_props }}</div>
+            {{ else }}
+                {{ partial $resolved_component $component_props }}
+            {{ end}}
+        </div>
    </section>
    {{ "<!--bookshop-live end-->" | safeHTML }}
 {{- else -}}
--- a/data/structures/_arguments.yml
+++ b/data/structures/_arguments.yml
@@ -151,13 +151,6 @@ arguments:
        - full
        - title
        - none
-  # # TODO: rename bodyStyle
-  # bodyStyle:
-  #   type: string
-  #   optional: true
-  #   default: lead text-muted
-  #   comment: >-
-  #     Style of the body text, if any..
  border:
    type: bool
    optional: true
@@ -355,6 +348,12 @@ arguments:
      - template.HTML
    optional: true
    comment: Section content displayed below the title.
+  content-style:
+    type: string
+    optional: true
+    default: lead text-muted
+    comment: >-
+      Style of the section content, if any.
  contrast:
    type: bool
    default: false
@@ -430,6 +429,11 @@ arguments:
    comment: Path to the download file, relative to the site's static folder.

  # e
+  elements:
+    type: elements
+    optional: false
+    comment: >-
+      Elements to include in the card group. Each element is rendered as a card.
  external:
    type: bool
    optional: true
@@ -567,17 +571,16 @@ arguments:
    optional: true
    comment: >-
      Heading of the content block, including a preheading and content element.
-  # # TODO: rename headingStyle
-  # headingStyle:
-  #   type: select
-  #   optional: true
-  #   default: display
-  #   options:
-  #     values:
-  #       - display
-  #       - fs
-  #   comment: >-
-  #     Style of the heading, either display or fs (regular).
+  heading-style:
+    type: select
+    optional: true
+    default: display
+    options:
+      values:
+        - display
+        - fs
+    comment: >-
+      Style of the heading, either display style or regular style (fs).
  # headline: 
  #   type: string
  #   optional: true
@@ -713,7 +716,7 @@ arguments:
    type: select
    optional: true
    default: center
-    comment: Justification of the link title and icon.
+    comment: Justification of the child elements.
    options:
      values:
        - start
--- a/data/structures/_types.yml
+++ b/data/structures/_types.yml
@@ -32,6 +32,12 @@ types:
  items:
    - title:
      description:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
  links:
    - title:
      url:
--- a/data/structures/hero-image.yml
+++ b/data/structures/hero-image.yml
@@ -11,3 +11,4 @@ arguments:
  wrapper:
  class:
  image-overlay:
+  justify:
--- a/data/structures/hero.yml
+++ b/data/structures/hero.yml
@@ -15,6 +15,7 @@ arguments:
  cover:
  orientation:
  width:
+  justify:
  use-section:
  use-title:
  class:
--- a/data/structures/nav-item.yml
+++ b/data/structures/nav-item.yml
@@ -1,6 +1,8 @@
 comment: >-
  Defines an individual item.
 arguments:
+  page:
+    group: partial
  id:
    group: partial
  parent-id:
--- a/data/structures/section-title.yml
+++ b/data/structures/section-title.yml
@@ -3,124 +3,13 @@ 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.
+  link-type:
+  use-section: 
  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.
+  heading-style:
+  content-style:
--- a/exampleSite/content/en/_index.md
+++ b/exampleSite/content/en/_index.md
@@ -8,20 +8,20 @@ content_blocks:
      title: Welcome to Hinode!
      content: |-
        A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-      align: start
+      width: 6
    background:
      color: primary
      subtle: true
    illustration:
      image: /img/sunrise.jpg
      ratio: 16x9
-      width: 8
-    width: 6
+    width: 8
    links:
      - title: About
        url: about
        icon: fas chevron-right
    orientation: horizontal
+    justify: center

  - _bookshop_name: articles
    heading:
--- a/exampleSite/content/en/blocks/articles.md
+++ b/exampleSite/content/en/blocks/articles.md
@@ -0,0 +1,40 @@
+---
+_schema: default
+title: Articles
+description: Use the articles content block to show a group of article cards.
+icon: fas grip
+---
+
+## Overview
+
+The `articles` content block renders a group of article cards.
+
+<!-- markdownlint-disable MD037 -->
+{{< example-bookshop lang="bookshop" >}}
+
+```yml
+- _bookshop_name: articles
+  heading:
+    title: Blog
+    align: start
+  input:
+    section: blog
+    reverse: false
+    sort: title
+  hide-empty: false
+  header-style: none
+  more:
+    title: More Blogs
+  padding: 0
+  max: 3
+  class: border-0 card-zoom card-body-margin
+```
+
+{{< /example-bookshop >}}
+<!-- markdownlint-enable MD037 -->
+
+## Arguments
+
+The content block supports the following arguments:
+
+{{< args bookshop-articles >}}
--- a/exampleSite/content/en/blocks/cards.md
+++ b/exampleSite/content/en/blocks/cards.md
@@ -0,0 +1,44 @@
+---
+_schema: default
+title: Cards
+description: Use the cards content block to show a card group of messages.
+icon: fa address-card
+---
+
+## Overview
+
+The `cards` content block renders a group of content cards.
+
+<!-- markdownlint-disable MD037 -->
+{{< example-bookshop lang="bookshop" >}}
+
+```yml
+- _bookshop_name: cards
+  heading:
+    preheading: Preheading
+    title: Heading
+    content: Cards content. It supports multiple lines.
+    align: start
+  background:
+    color: primary
+    subtle: true
+  orientation: stacked
+  icon-rounded: true
+  class: text-center
+  elements:
+    - title: First Card
+      icon: fas 1
+    - title: Second Card
+      icon: fas 2
+    - title: Third Card
+      icon: fas 3
+```
+
+{{< /example-bookshop >}}
+<!-- markdownlint-enable MD037 -->
+
+## Arguments
+
+The content block supports the following arguments:
+
+{{< args bookshop-cards >}}
--- a/exampleSite/content/en/blog/bootstrap-elements.md
+++ b/exampleSite/content/en/blog/bootstrap-elements.md
@@ -33,8 +33,9 @@ As an example, the following shortcode displays an accordion with three elements
 {{< example lang="hugo" >}}
 {{</* accordion */>}}
  {{</* accordion-item title="Accordion Item #1" show="true" */>}}
-    This is the first item's accordion body. It supports HTML content, if enabled in the goldmark
-    renderer. The item is shown by adding the value `show` to the `class` argument.
+    This is the first item's accordion body.
+    It supports Markdown content. The item
+    is shown by adding the value `show` to the `class` argument.
  {{</* /accordion-item */>}}
  {{</* accordion-item title="Accordion Item #2" */>}}
    This is the second item's accordion body.
@@ -352,8 +353,8 @@ As an example, the following shortcode displays a tab group with vertically alig
 {{< example lang="hugo" >}}
  {{</* nav tab-type="pills" vertical="true" */>}}
    {{</* nav-item title="Nav Item #1" show="true" */>}}
-      This is the first item's nav body. It supports HTML content, if enabled in the goldmark
-      renderer. The item is shown by adding the value `show` to the `class` argument.
+      This is the first item's nav body. It supports Markdown content.
+      The item is shown by adding the value `show` to the `class` argument.
    {{</* /nav-item */>}}
    {{</* nav-item title="Nav Item #2" */>}}
      This is the second item's nav body.
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -69,6 +69,7 @@
    ],
    "classes": [
      "%!s(<nil>)",
+      "%!s(MISSING)",
      "about",
      "accordion",
      "accordion-body",
@@ -99,6 +100,7 @@
      "bg-body",
      "bg-body-tertiary",
      "bg-danger",
+      "bg-info-subtle",
      "bg-opacity-10",
      "bg-primary",
      "bg-primary-subtle",
@@ -137,6 +139,7 @@
      "card-container-wrapper",
      "card-emphasize",
      "card-icon",
+      "card-icon-primary",
      "card-icon-secondary",
      "card-img-bg",
      "card-img-top",
@@ -144,6 +147,7 @@
      "card-text",
      "card-title",
      "card-zoom",
+      "cards",
      "carousel",
      "carousel-caption",
      "carousel-control-next",
@@ -169,7 +173,7 @@
      "col-lg-2",
      "col-lg-4",
      "col-lg-8",
-      "col-md-",
+      "col-md-10",
      "col-md-12",
      "col-md-2",
      "col-md-3",
@@ -181,9 +185,6 @@
      "col-sm-12",
      "col-sm-3",
      "col-sm-6",
-      "col-sm-9",
-      "col-xl-10",
-      "col-xl-2",
      "collapse",
      "collapsed",
      "container",
@@ -224,31 +225,39 @@
      "fa-3",
      "fa-4x",
      "fa-activity",
+      "fa-address-card",
      "fa-angle-left",
      "fa-arrow-left",
      "fa-arrow-right",
+      "fa-book-open",
      "fa-bootstrap",
      "fa-chevron-right",
+      "fa-circle",
      "fa-circle-check",
      "fa-circle-play",
      "fa-circle-question",
      "fa-code",
+      "fa-display",
      "fa-divide",
      "fa-docker",
      "fa-ellipsis",
      "fa-face-frown",
      "fa-facebook",
      "fa-fluid",
+      "fa-font-awesome",
      "fa-fw",
      "fa-github",
      "fa-globe",
+      "fa-grip",
      "fa-h",
      "fa-heart",
      "fa-house",
      "fa-info",
+      "fa-inverse",
      "fa-link",
      "fa-linkedin",
      "fa-magnifying-glass",
+      "fa-markdown",
      "fa-medium",
      "fa-moon",
      "fa-rocket",
@@ -256,6 +265,9 @@
      "fa-share-nodes",
      "fa-sort",
      "fa-square-check",
+      "fa-stack",
+      "fa-stack-1x",
+      "fa-stack-2x",
      "fa-sun",
      "fa-timeline",
      "fa-up-right-from-square",
@@ -319,6 +331,7 @@
      "justify-content-between",
      "justify-content-center",
      "justify-content-end",
+      "justify-content-md-start",
      "justify-content-start",
      "katex",
      "label",
@@ -332,6 +345,7 @@
      "link-warning",
      "lottie-animation",
      "m-0",
+      "m-auto",
      "m-md-n4",
      "m-n1",
      "main-content",
@@ -399,6 +413,7 @@
      "pb-3",
      "pb-4",
      "pb-5",
+      "pe-0",
      "pe-1",
      "pe-3",
      "pe-5",
@@ -557,6 +572,7 @@
      "animatie",
      "animation",
      "arguments",
+      "automated",
      "background-type",
      "badge",
      "barre-de-navigation",
@@ -575,6 +591,7 @@
      "carousel-0",
      "carrousel",
      "carte",
+      "check-our-guides-to-get-you-started",
      "chronologie",
      "class-diagram",
      "cloudinary",
@@ -586,42 +603,57 @@
      "container",
      "content-blocks",
      "cookies-etc",
+      "creating-your-website-has-never-been-easier",
      "custom-activity",
      "data-tables",
      "docs",
      "documentation",
+      "elements-type",
+      "embrace-the-power-of-open-source",
      "entity-relationship-diagram",
      "example",
      "exemple",
+      "fa-address-card",
      "fa-face-frown",
+      "fa-font-awesome",
      "fa-square-check",
      "fab-bootstrap",
      "fab-docker",
      "fab-facebook",
      "fab-github",
      "fab-linkedin",
+      "fab-markdown",
      "fab-medium",
      "fab-whatsapp",
      "fab-x-twitter",
-      "faq-422100b13f9388f5e5d9733a89582b72",
-      "faq-422100b13f9388f5e5d9733a89582b72-heading-faq-422100b13f9388f5e5d9733a89582b72",
-      "faq-422100b13f9388f5e5d9733a89582b72-item-0",
-      "faq-422100b13f9388f5e5d9733a89582b72-item-1",
-      "faq-422100b13f9388f5e5d9733a89582b72-item-2",
+      "faq-0531e8f162271c7364df25bde932ba4a",
+      "faq-0531e8f162271c7364df25bde932ba4a-heading-faq-0531e8f162271c7364df25bde932ba4a",
+      "faq-0531e8f162271c7364df25bde932ba4a-item-0",
+      "faq-0531e8f162271c7364df25bde932ba4a-item-1",
+      "faq-0531e8f162271c7364df25bde932ba4a-item-2",
+      "faq-25686b4e63cfe7fc2ad1ede047ee330d",
+      "faq-25686b4e63cfe7fc2ad1ede047ee330d-heading-faq-25686b4e63cfe7fc2ad1ede047ee330d",
+      "faq-25686b4e63cfe7fc2ad1ede047ee330d-item-0",
+      "faq-25686b4e63cfe7fc2ad1ede047ee330d-item-1",
+      "faq-25686b4e63cfe7fc2ad1ede047ee330d-item-2",
      "fas-1",
      "fas-2",
      "fas-3",
      "fas-angle-left",
      "fas-arrow-left",
      "fas-arrow-right",
+      "fas-book-open",
      "fas-chevron-right",
+      "fas-circle",
      "fas-circle-check",
      "fas-circle-play",
      "fas-circle-question",
      "fas-code",
+      "fas-display",
      "fas-divide",
      "fas-ellipsis",
      "fas-globe",
+      "fas-grip",
      "fas-h",
      "fas-heart",
      "fas-house",
@@ -635,6 +667,7 @@
      "fas-sun",
      "fas-timeline",
      "fas-up-right-from-square",
+      "fast",
      "fichier",
      "fil-dariane",
      "file",
@@ -660,6 +693,7 @@
      "imgix",
      "indicateur-de-chargement",
      "infobulle",
+      "input-type",
      "ins",
      "invite-de-commandes",
      "items-type",
@@ -678,6 +712,8 @@
      "mermaid-diagrams",
      "messages-type",
      "mindmap",
+      "more-type",
+      "multilingual",
      "nav",
      "nav-0-0",
      "nav-0-1",
@@ -695,6 +731,7 @@
      "navbar-sample-collapse",
      "navigation",
      "notification",
+      "optimized",
      "overview",
      "persona",
      "pie-chart",
@@ -706,7 +743,9 @@
      "que-sont-les-cookies-",
      "release",
      "requirement-chart",
+      "responsive",
      "réduire",
+      "secure",
      "security",
      "sequence-diagram",
      "spinner",
--- a/layouts/_partials/assets/card-group.html
+++ b/layouts/_partials/assets/card-group.html
@@ -136,8 +136,7 @@

 {{/* Main code */}}
 {{- if and (not $error) (or (gt (len $elements) 0) $args.cards) -}}
-<div class="{{- $args.wrapper -}}">
-    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0">
+    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0 {{ $args.wrapper }}">
        <div class="row g-{{ $args.gutter -}}
        {{- if $args.scroll }} d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end -}}
        {{- if $args.bento }}{{ with $args.valign }} align-items-{{ . }}{{ end }}{{ else }} {{ $colGrid }}{{ end }}">
@@ -198,5 +197,4 @@
            <a class="btn btn-outline-primary mt-4" href="{{ $href | safeURL }}" role="button">{{ $args.hrefTitle }}</a>
        {{- end -}}
    {{- end -}}
-</div>
 {{- end -}}
--- a/layouts/_partials/assets/card.html
+++ b/layouts/_partials/assets/card.html
@@ -148,19 +148,19 @@
    {{ if $thumbnail }}
        {{ if eq $args.orientation "horizontal-sm" }}
            {{ $stack = "fa-1x" }}
-            {{ $col1 = "col-4 col-md-2" }}
+            {{ $col1 = "col-4 col-md-2 pe-0" }}
            {{ $col2 = "col-8 col-md-10" }}
        {{ else }}
-            {{ $col1 = "col-4" }}
+            {{ $col1 = "col-4 pe-0" }}
            {{ $col2 = "col-8" }}
        {{ end }}
    {{ else if $icon }}
        {{ if eq $args.orientation "horizontal-sm" }}
            {{ $stack = "fa-1x" }}
-            {{ $col1 = "col-2 col-sm-3 col-md-4 col-xl-2" }}
-            {{ $col2 = "col-10 col-sm-9 col-md-8 col-xl-10" }}
+            {{ $col1 = "col-4 col-md-2 pe-0" }}
+            {{ $col2 = "col-8 col-md-10" }}
        {{ else }}
-            {{ $col1 = "col-4" }}
+            {{ $col1 = "col-4 pe-0" }}
            {{ $col2 = "col-8" }}
        {{ end }}

--- a/layouts/_partials/assets/hero-image.html
+++ b/layouts/_partials/assets/hero-image.html
@@ -16,8 +16,8 @@
    )}}
 {{ end }}

-{{ if not $args.err }}
-    <div class="hero-image-container">
+{{ if and (not $args.err) (or $args.image $args.icon) }}
+    <div class="hero-image-container {{ with $args.justify }}d-flex justify-content-center justify-content-md-{{ . }}{{ end }}">
        {{ partial "assets/featured-illustration.html" (dict 
            "page"    $args.page
            "icon"    $args.icon
--- a/layouts/_partials/assets/hero.html
+++ b/layouts/_partials/assets/hero.html
@@ -25,19 +25,17 @@

 {{/* Initialize local variables */}}
 {{ $align := $args.align }}
-{{ if and (not $align) (eq $args.orientation "stacked") }}{{ $align = "center" }}{{ end }}
-{{ $class := $args.class }}
+{{ $class := $args.class | default "" }}
 {{ $scale := $args.illustration.width }}

 {{ if $scale }}
-    {{ $class = trim (printf "%s col-%d " $class $scale) " " }}
+    {{ $class = trim (printf "%s col-%d text-center text-md-%s" $class $scale $align) " " }}
 {{ else }}
-    {{ $class = trim (printf "%s col-8 col-md-12" $class) " " }}
    {{ $scale = 12 }}
 {{ end }}

 {{ $iconWrapper := "col-6" }}
-{{ if $args.center }}{{ $iconWrapper = "col-6 mx-auto text-center" }}{{ end }}
+{{ $heading := cond (eq $args.orientation "horizontal") (merge $args.heading (dict "width" 12)) $args.heading }}

 {{ $sizes := "100vw" }}
 {{ if or (lt $args.width 12) (lt $scale 12) }}
@@ -58,79 +56,77 @@
 {{ end }}

 {{ if not $error }}
-    <div class="container-xxl {{ $args.padding }} d-flex flex-column">
-        {{ if and $args.breadcrumb (not page.IsHome) }}
-            <div class="d-flex flex-column align-items-{{ $align}} mb-4 pe-3">
-                {{ if site.Params.env_bookshop_live }}
-                    <i class="text-white">Breadcrumb preview not supported</i>
-                {{ else }}
-                    {{ partial "assets/breadcrumb.html" (dict "page" page) }}
-                {{ end }}            
-            </div>
-        {{ end }}
+    {{ if and $args.breadcrumb (not page.IsHome) }}
+        <div class="d-flex flex-column align-items-{{ $align}} mb-4 pe-3">
+            {{ if site.Params.env_bookshop_live }}
+                <i class="text-white">Breadcrumb preview not supported</i>
+            {{ else }}
+                {{ partial "assets/breadcrumb.html" (dict "page" page) }}
+            {{ end }}            
+        </div>
+    {{ end }}

-        {{ $imageWrapper := printf "mx-auto mx-md-0 %s" $class }}
-        {{ if eq $args.orientation "stacked" }}
-            {{ $imageWrapper = printf "pt-5 %s" $class }}
-            {{ if $args.center }}{{ $imageWrapper = printf "%s mx-auto" $imageWrapper }}{{ end }}
-            {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}
-        {{ end }}
-
-        {{ $sectionClass := cond (eq $args.orientation "stacked") "pt-5" "py-md-5" }}
+    {{ $imageWrapper := printf "mx-md-0 text-%s %s" $align $class }}
+    {{ $imageJustify := "" }}
+    {{ if eq $args.orientation "stacked" }}
+        {{ $imageWrapper = printf "pt-5 text-center %s" $class }}
        {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}
+    {{ else }}
+        {{ $imageJustify = $align }}
+    {{ end }}

-        {{ $illustration := partial $args.hook (dict
-            "page"         $args.page
-            "image"        $args.illustration.image
-            "icon"         $args.illustration.icon
-            "anchor"       $args.illustration.anchor
-            "mode"         $args.illustration.mode
-            "ratio"        $args.illustration.ratio
-            "sizes"        $sizes
-            "title"        (T "heroImage")
-            "wrapper"      $imageWrapper
-            "class"        "hero-image"
-            "image-overlay" $args.imageOverlay
-        ) }}
+    {{ $sectionClass := cond (eq $args.orientation "stacked") "pt-5" "py-md-5" }}
+    {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}

-        {{ $title := partial "assets/section-title.html" (dict
-            "heading"             $args.heading
-            "use-title"           $args.useTitle
-            "size"                $args.size
-            "links"               $args.links
-            "type"                (or $args.linkType $args.type)
-            "class"               (printf "hero-title %s" $sectionClass)
-            "arrangement"         $arrangement
-        ) }}
+    {{ $illustration := partial $args.hook (dict
+        "page"          $args.page
+        "image"         $args.illustration.image
+        "icon"          $args.illustration.icon
+        "anchor"        $args.illustration.anchor
+        "mode"          $args.illustration.mode
+        "ratio"         $args.illustration.ratio
+        "sizes"         $sizes
+        "title"         (T "heroImage")
+        "wrapper"       $imageWrapper
+        "class"         "hero-image"
+        "image-overlay" $args.imageOverlay
+        "justify"       $imageJustify
+    ) }}

-        {{ if eq $args.orientation "stacked" }}
-            {{/* Render stacked component */}}
-            <div class="row flex-fill">
-                <div class="col col-12 col-md-{{ $args.width }}{{ if $args.center }} m-auto{{ end }}">
-                    {{ $illustration | safeHTML }}
-                    {{ $title | safeHTML }}
-                </div>
+    {{ $title := partial "assets/section-title.html" (dict
+        "heading"     $heading
+        "use-title"   $args.useTitle
+        "size"        $args.size
+        "links"       $args.links
+        "link-type"   (or $args.linkType $args.type)
+        "class"       (printf "hero-title %s" $sectionClass)
+        "arrangement" $arrangement
+    ) }}
+
+    {{ if eq $args.orientation "stacked" }}
+        {{/* Render stacked component */}}
+
+        {{ $illustration | safeHTML }}
+        {{ $title | safeHTML }}
+    {{ else }}
+        {{/* Render horizontal component */}}
+        <div class="row row-cols-1 {{ if eq $args.orientation "stacked" }}row-cols-md-2 {{ end }} w-100">
+            {{ $order1 := "order-1 order-md-0" }}
+            {{ $order2 := "order-0 order-md-1" }}
+            {{ if eq $args.order "first" }}
+                {{ $order1 = "order-1" }}
+                {{ $order2 = "order-0" }}
+            {{ end }}
+
+            {{ $imgWidth := sub 12 (or $args.heading.width 12) }}
+            {{ if lt $imgWidth 1 }}{{ $imgWidth = 1 }}{{ end }}
+
+            <div class="col col-12 col-md-{{sub 12 $imgWidth }} {{ $order1 }} my-md-auto pt-5 pt-md-0 hero-content">
+                {{ $title | safeHTML }}
            </div>
-        {{ else }}
-            {{/* Render horizontal component */}}
-            <div class="row row-cols-1 row-cols-md-2 flex-fill">
-                {{ $order1 := "order-1 order-md-0 " }}
-                {{ $order2 := "order-0 order-md-1" }}
-                {{ if eq $args.order "first" }}
-                    {{ $order1 = "order-1" }}
-                    {{ $order2 = "order-0" }}
-                {{ end }}
-
-                <div class="col col-12 col-md-{{ $args.width }} {{ $order1 }} my-md-auto pt-5 pt-md-0 hero-content">
-                    {{ $title | safeHTML }}
-                </div>
-                <div class="col col-10 col-md-{{ sub 12 $args.width }}
-                    {{ $order2 }}{{ if $args.center }} text-center{{ end }} my-md-auto align-self-end">
-                    <div>
-                        {{ $illustration | safeHTML }}
-                    </div>
-                </div>
+            <div class="col col-8 col-md-{{ $imgWidth }} {{ $order2 }} m-auto my-md-auto align-self-end">
+                {{ $illustration | safeHTML }}
            </div>
-        {{ end }}
-    </div>
+        </div>
+    {{ end }}
 {{ end }}
--- a/layouts/_partials/assets/image.html
+++ b/layouts/_partials/assets/image.html
@@ -62,7 +62,10 @@

        {{- range $suffix := $modes -}}
            {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
-            {{- $params = merge $params (dict "src" $image) -}}
+            {{- $params = merge $params (dict
+                    "src"   $image
+                    "class" (printf "%s d-none-%s" $args.class (cond (eq $suffix "dark") "light" "dark"))
+            ) -}}
            {{- partial "assets/helpers/image-definition.html" $params -}}
        {{- end -}}
    {{ else }}
--- a/layouts/_partials/assets/nav-item.html
+++ b/layouts/_partials/assets/nav-item.html
@@ -72,7 +72,7 @@
                aria-labelledby="{{ $parentID }}-heading-{{ $args.id }}"
                data-bs-parent="#accordion-{{ $parentID }}"
            >
-                <div class="accordion-body">{{- $args.body | safeHTML -}}</div>
+                <div class="accordion-body">{{ $args.body | $args.page.RenderString | safeHTML }}</div>
            </div>
        </div>
    {{ else }}
@@ -87,7 +87,7 @@
            data-has-content="{{ gt (len $args.body) 0 }}"
            {{ if $args.disabled }} data-disabled-id="{{ $args.id }}"{{ end }}
        >
-            {{ $args.body }}
+            {{ $args.body | $args.page.RenderString | safeHTML }}
        </div>
    {{ end }}
 {{ end }}
--- a/layouts/_partials/assets/nav.html
+++ b/layouts/_partials/assets/nav.html
@@ -33,7 +33,8 @@
        <div class="d-lg-none">
            <div id="accordion-{{ $id }}" class="accordion mb-3{{ with $args.class }} {{ . }}{{ end }} nav-callout">
                {{- range $index, $item := $args.list -}}
-                    {{ partial "assets/nav-item.html" (dict 
+                    {{ partial "assets/nav-item.html" (dict
+                        "page"         $args.page
                        "id"           $index
                        "parentID"     $id
                        "fade"         false
--- a/layouts/_partials/assets/section-title.html
+++ b/layouts/_partials/assets/section-title.html
@@ -15,16 +15,15 @@
 {{ end }}

 {{/* Initialize local arguments */}}
-{{- $size := (or .size site.Params.modules.bookshop.title.size) | default 4 -}}
-{{- $arrangement := (or .arrangement site.Params.modules.bookshop.title.arrangement) | default "above" -}}
-{{- $headingStyle := (or .headingStyle site.Params.modules.bookshop.title.headingStyle) | default "display" -}}
-{{- $bodyStyle := (or .bodyStyle site.Params.modules.bookshop.title.bodyStyle) | default "lead text-muted" -}}
+{{- $size := (or $args.size site.Params.modules.bookshop.title.size) | default 4 -}}
+{{- $arrangement := (or $args.arrangement site.Params.modules.bookshop.title.arrangement) | default "above" -}}
+{{- $headingStyle := (or $args.headingStyle site.Params.modules.bookshop.title.headingStyle) | default "display" -}}
+{{- $contentStyle := (or $args.contentStyle site.Params.modules.bookshop.title.contentStyle) | default "lead text-muted" -}}
 {{- $preheading := $args.heading.preheading }}
 {{- $title := $args.heading.title }}
+{{- $width := $args.heading.width | default 12 -}}

-{{ if and (not $preheading) $args.section }}
-    {{ $preheading = page.CurrentSection.Name }}
-{{ end }}
+{{ if and (not $preheading) $args.useSection }}{{ $preheading = page.CurrentSection.Name }}{{ end }}

 {{ if site.Params.main.titleCase }}
    {{ $preheading = title $preheading }}
@@ -35,41 +34,76 @@

 {{ define "_partials/assets/section-title-header.html" }}
    {{ $headingStyle := .headingStyle }}
+
    {{ if (index . "use-title") }}
        {{ $title := .title | page.RenderString }}
        {{ $label := trim (replaceRE "\r\n?|\n" " " ($title | plainify)) " " }}
        <h1 id="{{ anchorize .title }}" {{ if ne $title $label }}aria-label="{{ $label }}"{{ end -}}        
-            class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">{{ .title | page.RenderString | safeHTML }}</h1>
+            class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
+                {{ .title | page.RenderString | safeHTML }}
+        </h1>
    {{ else }}
-        <div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">{{ .title | page.RenderString | safeHTML }}</div>
+        <div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
+            {{ .title | page.RenderString | safeHTML }}
+        </div>
    {{ end }}
 {{ end }}

+{{ $header := "" }}
+{{ if $title }}
+    {{ $header = partial "assets/section-title-header.html" (dict
+        "use-title"    $args.useTitle
+        "title"        $title
+        "headingStyle" $headingStyle
+        "color"        $args.color
+        "size"         $size
+    ) }}
+{{ end }}
+
+{{ $links := "" }}
+{{ if $args.links }}
+    {{ $links = partial "assets/links.html" (dict
+        "page"      $args.page
+        "links"     $args.links
+        "align"     $args.heading.align
+        "justify"   $args.justify
+        "link-type" $args.linkType
+    ) }}
+{{ end }}
+
+{{ $imgArgs := dict
+    "page"    page
+    "icon"    $args.icon
+    "image"   $args.image
+    "anchor"  $args.anchor
+    "mode"    true
+    "sizes"   "20vw"
+    "title"   (T "heroImage")
+    "mode"    $args.mode
+}}
+
 <!-- Main code -->
-<div class="text-{{ $args.heading.align }}{{ with $args.class }} {{ . }}{{ end }} col col-12 col-md-{{ $args.heading.width }}">
+<div class="text-{{ $args.heading.align }}{{ with $args.class }} {{ . }}{{ end }}{{ if lt $width 12 }} col-12 col-md-{{ $width }}{{ end }}">
    {{ if and $preheading (eq $arrangement "first") }}
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.next }}-2 p-0">
-                    {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
+                    {{ with $preheading }}
+                        <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                            {{ . | page.RenderString | safeHTML }}
+                        </p>
+                    {{ end }}
                </div>
                <div class="col-12 col-{{ $breakpoint.prev }}-8 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 p-0">
-                    {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
-                    {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
-                    {{ if .links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+                    {{ $header }}
+                    {{ with $args.heading.content }}
+                        <div class="{{ $contentStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>
+                    {{ end }}
+                    {{ $links }}
                </div>
                <div class="col-12 col-{{ $breakpoint.prev }}-4 col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 p-0 ps-{{ $breakpoint.prev }}-4">
-                    {{ partial "assets/featured-illustration.html" (dict 
-                        "page"    page
-                        "icon"    $args.icon
-                        "image"   $args.image
-                        "anchor"  $args.anchor
-                        "mode"    true
-                        "sizes"   "20vw"
-                        "wrapper" (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev)
-                        "title"   (T "heroImage")
-                        "mode"    $args.mode
-                    ) }}
+                    {{ $wrapper := (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev) }}
+                    {{ partial "assets/featured-illustration.html" (merge $imgArgs (dict "wrapper" $wrapper)) }}
                </div>
            </div>
        </div>
@@ -79,31 +113,29 @@
        <div class="container-fluid">
            <div class="row p-0">
                <div class="col-12 col-{{ $breakpoint.current }}-10 p-0">
-                    {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
-                    {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
-                    {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
-                    {{ if .links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+                    {{ with $preheading }}
+                        <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                            {{ . | page.RenderString | safeHTML }}
+                        </p>
+                    {{ end }}
+                    {{ $header }}
+                    {{ with $args.heading.content }}<div class="{{ $contentStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+                    {{ $links }}
                </div>
                <div class="col-12 col-{{ $breakpoint.current }}-2 p-0 pt-2 text-center">
-                    {{ partial "assets/featured-illustration.html" (dict 
-                        "page"    page
-                        "icon"    $args.icon
-                        "image"   $args.image
-                        "anchor"  $args.anchor
-                        "mode"    true
-                        "ratio"   $args.ratio
-                        "sizes"   "20vw"
-                        "wrapper" "mx-auto"
-                        "title"   (T "heroImage")
-                        "mode"    $args.mode
-                    ) }}
+                    {{ $wrapper := (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev) }}
+                    {{ partial "assets/featured-illustration.html" (merge $imgArgs (dict "ratio" $args.ratio "wrapper" "mx-auto")) }}
                </div>
            </div>
        </div>
    {{ else }}
-        {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
-        {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
-        {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
-        {{ if $args.links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+        {{ with $preheading }}
+            <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                {{ . | page.RenderString | safeHTML }}
+            </p>
+        {{ end }}
+        {{ $header }}
+        {{ with $args.heading.content }}<div class="{{ $contentStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+        {{ $links }}
    {{ end }}
 </div>
--- a/layouts/_partials/assets/timeline.html
+++ b/layouts/_partials/assets/timeline.html
@@ -13,7 +13,6 @@
 {{ if or $args.err $args.warnmsg }}
    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
        "partial" "assets/timeline.html" 
-        "warnid"  "warn-invalid-arguments"
        "msg"     "Invalid arguments"
        "details" ($args.errmsg | append $args.warnmsg)
        "file"    page.File
@@ -28,7 +27,12 @@
 {{- $page := $args.page -}}
 {{- $data := partial "utilities/GetI18nData.html" (dict "page" $page "data" $args.data) }}
 {{ if not $data -}}
-    {{ errorf "Invalid timeline data '%s': %s" $page.File -}}
+    {{ partial "utilities/LogErr.html" (dict 
+        "partial" "assets/timeline.html" 
+        "msg"     "Invalid arguments"
+        "details" (slice (printf "Invalid timeline data '%s'" $args.data))
+        "file"    page.File
+    )}}
    {{ $error = true }}
 {{ end -}}
 {{ $background := partial "utilities/GetBackgroundStyle.html" (dict "background" $args.background) }}
@@ -80,7 +84,10 @@
                    {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
                    <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
                {{ end }}
-                <p class="mt-3 mb-0">{{ $content | $page.RenderString }}</p>
+                <p class="mt-3 mb-0">
+                    <!-- TODO: $page.RenderString causes an out of bounds error -->
+                    {{ $content | markdownify }}
+                </p>
            </div>
        </div>
    </div>    
@@ -95,7 +102,7 @@
            "use-title"   $args.useTitle
            "size"        $args.size
            "links"       $args.links
-            "type"        (or $args.linkType $args.type)
+            "link-type"   (or $args.linkType $args.type)
            "class"       "pb-4"
            "arrangement" $arrangement
        ) }}
--- a/layouts/_shortcodes/nav-item.html
+++ b/layouts/_shortcodes/nav-item.html
@@ -30,11 +30,12 @@
    {{- if isset .Parent.Params "fade" }}{{ $parentFade = partial "utilities/CastBool.html" (.Parent.Get "fade") }}{{ end -}}
    {{- $fade = or $fade $parentFade -}}
    {{- $title := or $args.title $args.header -}}
-    {{- $body := trim .Inner " \r\n" | .Page.RenderString -}}
+    {{- $body := trim .Inner " \r\n" -}}
    {{- $current := "" -}}

    {{/* Main code */}}
    {{- $output := partial "assets/nav-item.html" (dict 
+        "page"      .Page
        "id"        $id
        "parent-id" $parent
        "fade"      $fade
@@ -57,6 +58,7 @@
    {{- end }}

    {{- $alternative := partial "assets/nav-item" (dict 
+        "page"         .Page
        "id"           $id
        "parent-id"    $parent
        "fade"         $fade
--- a/layouts/_shortcodes/nav.html
+++ b/layouts/_shortcodes/nav.html
@@ -21,9 +21,9 @@
 {{- $innerTitles := .Scratch.Get "inner-title" -}}
 {{- $input := trim .Inner " \r\n" -}}
 {{- if $input -}}
-    {{ $input = replace $input "\n" "\n  " -}}
-    {{ warnf "Unexpected inner content: %s\r\n      %s" .Position $input -}}
-{{ end }}
+    {{- $input = replace $input "\n" "\n  " -}}
+    {{- warnf "Unexpected inner content: %s\r\n      %s" .Position $input -}}
+{{- end -}}

 {{/* Main code */}}
 {{- if not $args.err -}}
@@ -41,4 +41,4 @@
        "width"      $args.width
        ) 
    -}}
-{{ end }}
+{{- end -}}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "1.0.0-alpha5",
+  "version": "1.0.0-alpha8",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "1.0.0-alpha5",
+      "version": "1.0.0-alpha8",
      "license": "MIT",
      "dependencies": {
        "@fullhuman/postcss-purgecss": "^7.0.2",
@@ -19,7 +19,7 @@
      "devDependencies": {
        "@gethinode/netlify-plugin-dartsass": "^0.3.0",
        "cpy-cli": "^5.0.0",
-        "eslint": "^9.28.0",
+        "eslint": "^9.29.0",
        "markdownlint-cli2": "^0.18.1",
        "neostandard": "^0.12.1",
        "netlify-plugin-hugo-cache-resources": "^0.2.1",
@@ -329,9 +329,9 @@
      }
    },
    "node_modules/@eslint/config-array": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
-      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.1.tgz",
+      "integrity": "sha512-OL0RJzC/CBzli0DrrR31qzj6d6i6Mm3HByuhflhl4LOBiWxN+3i6/t/ZQQNii4tjksXi8r2CRW1wMpWA2ULUEw==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -391,9 +391,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.28.0.tgz",
-      "integrity": "sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==",
+      "version": "9.29.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.29.0.tgz",
+      "integrity": "sha512-3PIF4cBw/y+1u2EazflInpV+lYsSG0aByVIQzAgb1m1MhHFSbqTyNqtBKHgWf/9Ykud+DhILS9EGkmekVhbKoQ==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -1187,10 +1187,11 @@
      }
    },
    "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
+      "license": "MIT",
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2874,19 +2875,19 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.28.0.tgz",
-      "integrity": "sha512-ocgh41VhRlf9+fVpe7QKzwLj9c92fDiqOj8Y3Sd4/ZmVA4Btx4PlUYPq4pp9JDyupkf1upbEXecxL2mwNV7jPQ==",
+      "version": "9.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz",
+      "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.20.0",
+        "@eslint/config-array": "^0.20.1",
        "@eslint/config-helpers": "^0.2.1",
        "@eslint/core": "^0.14.0",
        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.28.0",
+        "@eslint/js": "9.29.0",
        "@eslint/plugin-kit": "^0.3.1",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
@@ -2898,9 +2899,9 @@
        "cross-spawn": "^7.0.6",
        "debug": "^4.3.2",
        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.3.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
        "esquery": "^1.5.0",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
@@ -3230,9 +3231,9 @@
      }
    },
    "node_modules/eslint-scope": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
@@ -3259,10 +3260,11 @@
      }
    },
    "node_modules/eslint/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
      "dev": true,
+      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
@@ -3271,14 +3273,15 @@
      }
    },
    "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
      "dev": true,
+      "license": "BSD-2-Clause",
      "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
      },
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3288,10 +3291,11 @@
      }
    },
    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
      "dev": true,
+      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "1.0.0-alpha5",
+  "version": "1.0.0-alpha8",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -79,7 +79,7 @@
  "devDependencies": {
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
    "cpy-cli": "^5.0.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
    "markdownlint-cli2": "^0.18.1",
    "neostandard": "^0.12.1",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
Author	SHA1	Message	Date
Mark Dumay	05af8f72a3	Merge pull request #1461 from gethinode/develop Refactor bookshop components	2025-06-17 06:28:15 +02:00
Mark Dumay	977c82b10d	Fix separator padding and width	2025-06-17 06:17:31 +02:00
Mark Dumay	be92798dec	Merge branch 'main' into develop	2025-06-17 05:54:59 +02:00
Mark Dumay	db9b96797a	Bump package release	2025-06-17 05:54:11 +02:00
Mark Dumay	d41d58cf5d	Refactor bookshop components	2025-06-17 05:53:33 +02:00
github-actions[bot]	d3fe893287	Merge pull request #1460 from gethinode/dependabot/npm_and_yarn/eslint-9.29.0 Bump eslint from 9.28.0 to 9.29.0	2025-06-16 14:13:36 +00:00
dependabot[bot]	e64a08c339	Bump eslint from 9.28.0 to 9.29.0 Bumps [eslint](https://github.com/eslint/eslint) from 9.28.0 to 9.29.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.28.0...v9.29.0) --- updated-dependencies: - dependency-name: eslint dependency-version: 9.29.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2025-06-16 14:05:37 +00:00
Mark Dumay	900fce4169	Merge pull request #1459 from gethinode/develop Refine content blocks	2025-06-11 16:59:46 +02:00
Mark Dumay	c82f9a41d4	Merge branch 'main' into develop	2025-06-11 16:51:36 +02:00
Mark Dumay	ea83db2eeb	Fix image mode rendering	2025-06-11 16:48:35 +02:00
Mark Dumay	d37c2f6517	Add cards content block	2025-06-11 16:40:16 +02:00
Mark Dumay	68a4859638	Add articles example	2025-06-11 16:39:41 +02:00
Mark Dumay	81494cb1ed	Bump package release	2025-06-11 05:49:02 +02:00
Mark Dumay	8307e2ab57	FIx timeline bug using workaround	2025-06-11 05:48:08 +02:00
Mark Dumay	4e6aad33d6	Merge pull request #1458 from gethinode/develop FIx rendering of inner nav-item content	2025-06-10 17:24:04 +02:00
Mark Dumay	8c3989e4f1	Merge branch 'main' into develop	2025-06-10 17:12:37 +02:00
Mark Dumay	42a81bab5f	FIx rendering of inner nav-item content	2025-06-10 17:10:36 +02:00