Merge pull request #1486 from gethinode/develop

Develop
fix: correct page handling
2025-10-15 14:03:19 +00:00 · 2025-07-02 12:53:05 +02:00 · 2025-07-02 12:46:29 +02:00 · 2025-07-02 12:24:10 +02:00 · 2025-07-02 12:23:45 +02:00 · 2025-07-02 12:23:16 +02:00
24 changed files with 566 additions and 30 deletions
--- a/component-library/bookshop.scss
+++ b/component-library/bookshop.scss
@@ -2,6 +2,7 @@
@import "modules/bookshop/components/about/about";
@import "modules/bookshop/components/articles/articles";
@import "modules/bookshop/components/cards/cards";
+@import "modules/bookshop/components/cta/cta";
@import "modules/bookshop/components/faq/faq";
@import "modules/bookshop/components/hero/hero";
@import "modules/bookshop/components/releases/releases";
--- a/component-library/components/about/about.hugo.html
+++ b/component-library/components/about/about.hugo.html
@@ -19,6 +19,7 @@
 {{/* Main code */}}
 {{ if not $args.error }}
    {{ partial "assets/hero.html"  (dict 
+        "page"         page
        "heading"      $args.heading
        "background"   $args.background
        "illustration" (merge (dict "ratio" "auto") $args.illustration)
--- a/component-library/components/cta/cta.bookshop.yml
+++ b/component-library/components/cta/cta.bookshop.yml
@@ -0,0 +1,43 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: CTA
+  description: Call to action
+  icon: contact_page
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    arrangement:
+    width:
+    size:
+  contact:
+  caption-url:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+  background:
+    backdrop:
+    color:
+    subtle:
+  links:
+    -
+      title:
+      url:
+      icon:
+      force:
+  align:
+  fluid:
+  padding:
+  order:
+  width:
--- a/component-library/components/cta/cta.hugo.html
+++ b/component-library/components/cta/cta.hugo.html
@@ -0,0 +1,43 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cta" "args" .) }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cta/cta.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{- end -}}
+
+{{/* Main code */}}
+{{ if not $args.error }}
+	{{ $links := slice }}
+	{{ if and (reflect.IsSlice .links) (gt (len .links) 0) }}
+		{{ $links = .links }}
+	{{ else }}
+		{{ with site.Params.modules.bookshop.cta.defaultURL }}
+			{{ $links = $links | append (dict "title" (T "contactAction") "url" . "icon" "fas chevron-right") }}
+		{{ end }}
+	{{ end }}
+
+	{{ partial "assets/contact.html" (dict 
+		"page"         page
+		"orientation"  "horizontal"
+		"heading"      $args.heading
+		"contact"      $args.contact
+		"caption-url"  $args.captionUrl
+		"illustration" $args.illustration
+		"class"        "contact-img"
+		"links"        $links
+		"align"        $args.align
+		"order"        $args.order
+		"data"         site.Params.modules.bookshop.cta.section 
+	) }}
+{{ end }}
--- a/component-library/components/cta/cta.scss
+++ b/component-library/components/cta/cta.scss
@@ -0,0 +1,8 @@
+.cta {
+    background-color: var(--#{$prefix}primary-bg-subtle);
+}
+
+.cta .contact-img {
+    background-color: var(--#{$prefix}body-bg);
+    border-radius: var(--bs-border-radius);
+}
--- a/component-library/components/hero/hero.hugo.html
+++ b/component-library/components/hero/hero.hugo.html
@@ -18,6 +18,7 @@

 {{ if not $args.err }}
 	{{ partial "assets/hero.html"  (dict 
+        "page"         page
 		"breadcrumb"   $args.breadcrumb
 		"heading"      $args.heading
 		"background"   $args.background
--- a/component-library/helpers/component.html
+++ b/component-library/helpers/component.html
@@ -16,6 +16,7 @@
 {{- $class := index . 2 | default "p-0" -}}
 {{- $bgclass := index . 3 | default "" -}}
 {{- $padding := partial "utilities/GetPadding.html" -}}
+{{- with index $component_props "padding" }}{{ $padding = dict "x" . "y" . }}{{ end -}}
 {{- $component_path := partial "_bookshop/helpers/component_key" $component_name -}}
 {{- $flat_component_path := partial "_bookshop/helpers/flat_component_key" $component_name -}}

@@ -31,10 +32,11 @@
    {{- $cover := index $component_props "cover" -}}
    {{- $background := index $component_props "background" -}}
    {{- $backdrop := "" -}}
+    {{- $fluid := index $component_props "fluid" | default true -}}
    {{- $style := index $component_props "wrapper" -}}
    {{- $width := index $component_props "width" -}}
    {{- $justify := index $component_props "justify" | default "start" -}}
-    {{- $padding := cond (ne $component_name "separator") (printf "px-%d px-xxl-0 py-%d" $padding.x $padding.y) "" -}}
+    {{- $padding := cond (ne $component_name "separator") (printf "px-%d %spy-%d" $padding.x (cond $fluid "px-xxl-0 " "") $padding.y) "" -}}
    {{- $wrapper := $style }}
    {{ with $background }}
        {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
@@ -49,7 +51,7 @@
    {{ 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 -}}
+    <section {{ with $id }}id="{{ . }}" {{ end }}class="{{ $component_name }} container-{{ cond $fluid "fluid" "xxl" }} {{ $class }} {{ with $wrapper }}{{ . }}{{ end -}}
        {{- if and $backdrop $overlayMode }} background-container{{ end -}}
        {{- if $cover }} section-cover d-flex align-items-center{{ end }}" 
        {{ with $overlayMode -}}
--- a/content/_index.md
+++ b/content/_index.md
@@ -16,8 +16,8 @@ content_blocks:
      ratio: 16x9
    width: 8
    links:
-      - title: About
-        url: about
+      - title: Getting started
+        url: https://gethinode.com/docs
        icon: fas chevron-right
    orientation: horizontal
    justify: center
--- a/data/structures/contact.yml
+++ b/data/structures/contact.yml
@@ -0,0 +1,36 @@
+comment: >-
+  Displays a contact banner, typically placed at the bottom or right-hand side of the page.
+arguments:
+  page:
+  data:
+  heading:
+  contact:
+    type: string
+    optional: false
+    comment: >-
+      The full name of the contact to retrieve.
+  caption-url:
+    type:
+      - string
+      - template.URL
+    optional: true
+    comment: >-
+      Address of the contact's page, either a local reference or an external
+      address. Include the `scheme` when referencing an external address, such
+      as `https://google.com`. Local references may include an optional anchor
+      link such as `blog/bootstrap-elements/#docs`.
+  illustration:
+  background:
+  link-type:
+  links:
+  align:
+  order:
+    default: first
+  orientation:
+  width:
+  justify:
+  class:
+  width:
+    default: 12
+  hook:
+    default: assets/hero-image.html
--- a/data/structures/hero.yml
+++ b/data/structures/hero.yml
@@ -3,6 +3,7 @@ comment: >-
  supports a heading, featured illustration, and navigation links. You can
  can also add a background image with an overlay to improve contrast.
 arguments:
+  page:
  breadcrumb:
  heading:
  background:
@@ -18,6 +19,7 @@ arguments:
  justify:
  use-section:
  use-title:
+  size:
  class:
  padding:
    default: px-4 px-xxl-0 py-4
--- a/exampleSite/assets/img/foto-sushi-6anudmpILw4-unsplash-1x1.png
+++ b/exampleSite/assets/img/foto-sushi-6anudmpILw4-unsplash-1x1.png
--- a/exampleSite/assets/img/jake-nackos-IF9TK5Uy-KI-unsplash.png
+++ b/exampleSite/assets/img/jake-nackos-IF9TK5Uy-KI-unsplash.png
--- a/exampleSite/assets/img/joseph-gonzalez-iFgRcqHznqg-unsplash.png
+++ b/exampleSite/assets/img/joseph-gonzalez-iFgRcqHznqg-unsplash.png
--- a/exampleSite/content/en/blocks/cta.md
+++ b/exampleSite/content/en/blocks/cta.md
@@ -0,0 +1,36 @@
+---
+_schema: default
+title: CTA
+description: Use the CTA content block to display an action link with an optional contact.
+icon: fas address-card
+---
+
+## Overview
+
+The `cta` content block renders a call to action link or button. You can include an optional contact or provide your own illustration. By default, the `cta` uses a generic title and message. Set the `heading` attribute to override these values.
+
+<!-- markdownlint-disable MD037 -->
+{{< example-bookshop lang="bookshop" >}}
+
+```yml
+- _bookshop_name: cta
+  contact: Betty White
+  caption-url: /en/blocks/cta/
+  background:
+    color: primary
+    subtle: true
+  order: first
+  links:
+    - title: Get in touch
+      url: '#!'
+      icon: fas chevron-right
+```
+
+{{< /example-bookshop >}}
+<!-- markdownlint-enable MD037 -->
+
+## Arguments
+
+The content block supports the following arguments:
+
+{{< args bookshop-cta >}}
--- a/exampleSite/data/contacts.en.yml
+++ b/exampleSite/data/contacts.en.yml
@@ -0,0 +1,45 @@
+- name: Alex Smith
+  preferred: Alex
+  image: /assets/img/joseph-gonzalez-iFgRcqHznqg-unsplash.png
+  function: Digital Strategy Lead
+  linkedin: https://www.linkedin.com
+  keywords:
+    - transformation
+  biography: >-
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan
+    venenatis dapibus. Proin placerat mauris ac interdum gravida. Proin
+    consequat feugiat sagittis. Sed vel augue nec est auctor semper. Curabitur
+    mauris ante, euismod eu sem in, sagittis porttitor urna. Mauris sodales at
+    quam condimentum malesuada. Vivamus erat augue, euismod nec ligula quis,
+    molestie lobortis ante. Proin venenatis non diam ac interdum.
+
+- name: Betty White
+  preferred: Betty
+  image: /assets/img/jake-nackos-IF9TK5Uy-KI-unsplash.png
+  function: UX Expert
+  linkedin: https://www.linkedin.com
+  keywords:
+    - experience
+  biography: >-
+    Duis rutrum, justo eleifend sagittis facilisis, leo orci hendrerit elit, ac
+    tristique nisl justo non neque. Mauris semper egestas massa, nec dapibus ex
+    tincidunt nec. Quisque lectus quam, finibus sed hendrerit id, accumsan eget
+    sapien. Nam facilisis diam eu felis tempus euismod. Nullam id neque
+    fringilla purus vestibulum mattis elementum vitae lectus. Fusce vel libero
+    consectetur urna egestas molestie eget sit amet elit.
+
+- name: Charles Green
+  preferred: Charles
+  image: /assets/img/foto-sushi-6anudmpILw4-unsplash-1x1.png
+  function: UX Expert
+  linkedin: https://www.linkedin.com
+  keywords:
+    - technology
+    - transformation
+    - experience
+  biography: >-
+    Suspendisse potenti. Aenean elit nisl, viverra eu volutpat at, sodales a sem.
+    Aliquam blandit nunc non mi posuere, quis laoreet ex congue. Donec fringilla
+    porttitor lacus accumsan porttitor. Integer vel sagittis diam. Nullam vehicula
+    fermentum risus nec facilisis. Fusce eleifend gravida orci, in efficitur enim
+    fermentum nec. Sed quis malesuada lorem. Ut vitae sodales sapien.
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -14,6 +14,7 @@
      "figure",
      "footer",
      "form",
+      "h1",
      "h2",
      "h3",
      "head",
@@ -188,9 +189,11 @@
      "col-sm-6",
      "collapse",
      "collapsed",
+      "contact-img",
      "container",
      "container-fluid",
      "container-xxl",
+      "cta",
      "custom",
      "d-block",
      "d-flex",
@@ -210,6 +213,7 @@
      "disabled",
      "display-1",
      "display-4",
+      "display-6",
      "dropdown",
      "dropdown-divider-bg",
      "dropdown-item",
@@ -430,9 +434,11 @@
      "ptw-5",
      "ptw-lg-5",
      "ptw-sm-4",
+      "px-%!d(string=0)",
      "px-2",
      "px-4",
      "px-xxl-0",
+      "py-%!d(string=0)",
      "py-1",
      "py-2",
      "py-3",
@@ -615,14 +621,15 @@
      "fab-medium",
      "fab-whatsapp",
      "fab-x-twitter",
-      "faq-46cc9ad0fb899a0f4539dbaa956f4df4",
-      "faq-46cc9ad0fb899a0f4539dbaa956f4df4-heading-faq-46cc9ad0fb899a0f4539dbaa956f4df4",
-      "faq-46cc9ad0fb899a0f4539dbaa956f4df4-item-0",
-      "faq-46cc9ad0fb899a0f4539dbaa956f4df4-item-1",
-      "faq-46cc9ad0fb899a0f4539dbaa956f4df4-item-2",
+      "faq-9ef13ff2bd73b0e328491bd048c7a1ef",
+      "faq-9ef13ff2bd73b0e328491bd048c7a1ef-heading-faq-9ef13ff2bd73b0e328491bd048c7a1ef",
+      "faq-9ef13ff2bd73b0e328491bd048c7a1ef-item-0",
+      "faq-9ef13ff2bd73b0e328491bd048c7a1ef-item-1",
+      "faq-9ef13ff2bd73b0e328491bd048c7a1ef-item-2",
      "fas-1",
      "fas-2",
      "fas-3",
+      "fas-address-card",
      "fas-angle-left",
      "fas-arrow-left",
      "fas-arrow-right",
@@ -677,6 +684,7 @@
      "infobulle",
      "input-type",
      "ins",
+      "interested-in-this-topic",
      "invite-de-commandes",
      "items-type",
      "kaart",
--- a/go.mod
+++ b/go.mod
@@ -18,7 +18,7 @@ require (
 	github.com/gethinode/mod-simple-datatables v1.1.7 // indirect
 	github.com/gethinode/mod-simple-datatables/v2 v2.0.1 // indirect
 	github.com/gethinode/mod-utils/v3 v3.3.1 // indirect
-	github.com/gethinode/mod-utils/v4 v4.8.4 // indirect
+	github.com/gethinode/mod-utils/v4 v4.9.1 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20250606060143-c28f52c09b7a // indirect
 	github.com/twbs/bootstrap v5.3.7+incompatible // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -452,6 +452,10 @@ github.com/gethinode/mod-utils/v4 v4.8.3 h1:CSaFR/c1cGrSPpH5ZfrNOoMhAbNb8sw0SCRh
 github.com/gethinode/mod-utils/v4 v4.8.3/go.mod h1:bYmvRdAo4ICy5MpSGafDvO4p5bTDpsDKFCPL3bH0mN4=
 github.com/gethinode/mod-utils/v4 v4.8.4 h1:ExD2zZCGonAmbIxC9wBU2dp+V4ZfvG46NWaz+LaV3iQ=
 github.com/gethinode/mod-utils/v4 v4.8.4/go.mod h1:bYmvRdAo4ICy5MpSGafDvO4p5bTDpsDKFCPL3bH0mN4=
+github.com/gethinode/mod-utils/v4 v4.9.0 h1:v7+prGZPETqgI6t/LN0UhrtRKU4mqpJUQu6jEUU5MYg=
+github.com/gethinode/mod-utils/v4 v4.9.0/go.mod h1:bYmvRdAo4ICy5MpSGafDvO4p5bTDpsDKFCPL3bH0mN4=
+github.com/gethinode/mod-utils/v4 v4.9.1 h1:9D2AJcrlS5r2moHEoo70GrNBmq1pJHd9oT4G14DsZRs=
+github.com/gethinode/mod-utils/v4 v4.9.1/go.mod h1:bYmvRdAo4ICy5MpSGafDvO4p5bTDpsDKFCPL3bH0mN4=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 h1:H/qVR5O4BXjRjD+5PZB+r4ug2BSJ2Of4RtwOntd+OKo=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -1,7 +1,209 @@
 {
  "htmlElements": {
-    "tags": null,
-    "classes": null,
-    "ids": null
+    "tags": [
+      "a",
+      "body",
+      "button",
+      "div",
+      "footer",
+      "form",
+      "head",
+      "html",
+      "img",
+      "input",
+      "label",
+      "li",
+      "link",
+      "meta",
+      "nav",
+      "ol",
+      "p",
+      "path",
+      "script",
+      "section",
+      "small",
+      "span",
+      "strong",
+      "svg",
+      "symbol",
+      "title",
+      "ul",
+      "use"
+    ],
+    "classes": [
+      "%!s(<nil>)",
+      "active",
+      "align-items-center",
+      "align-self-center",
+      "align-self-end",
+      "ball",
+      "bg-body",
+      "bg-opacity-10",
+      "bg-primary",
+      "bg-primary-subtle",
+      "bottom-0",
+      "bottom-bar",
+      "breadcrumb",
+      "breadcrumb-item",
+      "btn",
+      "btn-close",
+      "btn-primary",
+      "checkbox",
+      "col",
+      "col-12",
+      "col-6",
+      "col-8",
+      "col-md-2",
+      "col-md-6",
+      "col-md-8",
+      "col-sm-12",
+      "collapse",
+      "collapsed",
+      "container-fluid",
+      "container-xxl",
+      "d-flex",
+      "d-inline",
+      "d-md-block",
+      "d-md-none",
+      "d-none",
+      "d-sm-block",
+      "d-sm-none",
+      "display-1",
+      "display-4",
+      "emphasis",
+      "end-0",
+      "fa",
+      "fa-10x",
+      "fa-2x",
+      "fa-angle-left",
+      "fa-chevron-right",
+      "fa-ellipsis",
+      "fa-face-frown",
+      "fa-fw",
+      "fa-github",
+      "fa-linkedin",
+      "fa-medium",
+      "fa-moon",
+      "fa-sun",
+      "fab",
+      "fas",
+      "fixed-top",
+      "flex-column",
+      "flex-fill",
+      "flex-grow-1",
+      "footer",
+      "form-control",
+      "fs-3",
+      "fw-30",
+      "fw-bold",
+      "h-100",
+      "hero",
+      "hero-content",
+      "hero-image",
+      "hero-image-container",
+      "hero-title",
+      "hstack",
+      "img-fluid",
+      "img-wrap",
+      "invisible",
+      "is-search",
+      "justify-content-center",
+      "justify-content-end",
+      "justify-content-md-start",
+      "justify-content-start",
+      "label",
+      "lead",
+      "link-bg-footer",
+      "link-secondary",
+      "m-auto",
+      "main",
+      "main-nav-toggler",
+      "me-auto",
+      "middle-bar",
+      "mode-switch",
+      "ms-auto",
+      "ms-md-3",
+      "mt-3",
+      "mt-4",
+      "mt-5",
+      "mt-md-0",
+      "mx-auto",
+      "mx-md-0",
+      "my-auto",
+      "my-md-auto",
+      "nav-item",
+      "nav-link",
+      "navbar",
+      "navbar-brand",
+      "navbar-collapse",
+      "navbar-container",
+      "navbar-expand-md",
+      "navbar-fixed-top",
+      "navbar-mode-selector",
+      "navbar-nav",
+      "navbar-toggler",
+      "no-js",
+      "order-0",
+      "order-1",
+      "order-md-0",
+      "order-md-1",
+      "p-0",
+      "p-2",
+      "p-3",
+      "p-4",
+      "position-fixed",
+      "position-relative",
+      "ps-1",
+      "pt-1",
+      "pt-4",
+      "pt-md-0",
+      "px-4",
+      "px-xxl-0",
+      "py-3",
+      "py-4",
+      "rounded",
+      "row",
+      "row-cols-1",
+      "row-cols-2",
+      "row-cols-sm-3",
+      "search",
+      "search-input",
+      "search-suggestions",
+      "section-cover",
+      "shadow",
+      "svg-inline--fa",
+      "text-",
+      "text-body",
+      "text-center",
+      "text-decoration-none",
+      "text-muted",
+      "text-secondary",
+      "text-sm-start",
+      "text-start",
+      "toast",
+      "toast-body",
+      "toast-container",
+      "toast-header",
+      "toggler-icon",
+      "top-bar"
+    ],
+    "ids": [
+      "container",
+      "fa-face-frown",
+      "fab-github",
+      "fab-linkedin",
+      "fab-medium",
+      "fas-angle-left",
+      "fas-chevron-right",
+      "fas-ellipsis",
+      "fas-moon",
+      "fas-sun",
+      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
+      "toast-container",
+      "toast-copied-code-message",
+      "welcome-to-hinode"
+    ]
  }
 }
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -177,3 +177,11 @@
 # Nav & Tab
 - id: clickToExpand
  translation: "Click to expand"
+
+# Contact information
+- id: contactHeaderTopic
+  translation: "Interested in this topic?"
+- id: contactBody
+  translation: "Please leave your contact details so we can get in touch."
+- id: contactAction
+  translation: "Get in touch"
--- a/i18n/nl.yaml
+++ b/i18n/nl.yaml
@@ -174,3 +174,11 @@
 # Nav & Tab
 - id: clickToExpand
  translation: "Klik om open te klappen"
+
+# Contact information
+- id: contactHeaderTopic
+  translation: "Wil je meer weten over dit onderwerp?"
+- id: contactBody
+  translation: "Laat je gegevens achter en dan neem ik contact met je op."
+- id: contactAction
+  translation: "Neem contact op"
--- a/layouts/_partials/assets/contact.html
+++ b/layouts/_partials/assets/contact.html
@@ -0,0 +1,66 @@
+{{/* 
+    Copyright © 2024 - 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 "structure" "contact" "args" . "group" "partial") }}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "assets/contact.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+{{ end }}
+
+{{/* Main code */}}
+{{ if not $args.err }}
+    {{ $contact := partial "utilities/GetContact" (dict
+        "contact"      $args.contact
+        "data"         $args.data
+        "language-tag" site.Language.Lang
+    ) }}
+
+    {{ $illustration := dict }}
+    {{ if and $contact $contact.image }}
+        {{ $illustration = dict
+            "image"       $contact.image
+            "ratio"       "1x1"
+            "class"       $args.class
+            "caption"     $contact.name 
+            "caption-url" $args.captionUrl
+        }}
+    {{ else if $args.illustration }}
+        {{ $illustration = $args.illustration }}
+    {{ end }}
+
+    {{ $heading := "" }}
+    {{ if and (not $args.heading.title) (not $args.heading.content) }}
+        {{ $heading = dict
+            "title"     (T "contactHeaderTopic")
+            "content"   (T "contactBody")
+            "align"     "start"
+            "width"     (cond $illustration.image 10 12)
+        }}
+    {{ else }}
+        {{ $heading = $args.heading }}
+    {{ end }}
+
+    {{ partial "assets/hero.html"  (dict
+        "page"         $args.page
+        "heading"      $heading
+        "background"   $args.background
+        "illustration" $illustration 
+        "order"        $args.order
+        "link-type"    $args.linkType
+        "links"        $args.links
+        "orientation"  $args.orientation
+        "width"        (or $args.width 12)
+        "use-title"    true
+        "size"         6
+        )
+    }}
+{{ end }}
--- a/layouts/_partials/assets/hero.html
+++ b/layouts/_partials/assets/hero.html
@@ -78,20 +78,38 @@

    {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ 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
-        "justify"       $imageJustify
-    ) }}
+    {{ $caption := "" }}
+    {{ if $args.illustration.caption }}
+        {{ if index $args.illustration "caption-url" }}
+            {{ $caption = partial "assets/link.html" (dict
+                "href"  (index $args.illustration "caption-url")
+                "text"  $args.illustration.caption
+                "page"  $args.page
+                "class" "text-center"
+            ) }}
+        {{ else }}
+            {{ $caption = $args.illustration.caption }}
+        {{ end }}
+        {{ $caption = printf `<div class="text-center">%s</div>` $caption }}
+    {{ end }}
+
+    {{ $illustration := "" }}
+    {{ if or $args.illustration.image  $args.illustration.icon }}
+        {{ $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"         (printf "hero-image %s" $args.illustration.class)
+            "image-overlay" $args.imageOverlay
+            "justify"       $imageJustify
+        ) }}
+    {{ end }}

    {{ $title := partial "assets/section-title.html" (dict
        "heading"     $heading
@@ -108,6 +126,7 @@
        {{/* Render stacked component */}}

        {{ $illustration | safeHTML }}
+        {{ $caption | safeHTML }}
        {{ $title | safeHTML }}
    {{ else }}
        {{/* Render horizontal component */}}
@@ -122,12 +141,15 @@
            {{ $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-{{ $padding.y }} pt-md-0 hero-content">
+            <div class="col col-12 {{ if $illustration }} col-md-{{sub 12 $imgWidth }}{{ end }} {{ $order1 }} my-md-auto pt-{{ $padding.y }} pt-md-0 hero-content">
                {{ $title | safeHTML }}
            </div>
+            {{ if $illustration }}
            <div class="col col-8 col-md-{{ $imgWidth }} {{ $order2 }} m-auto my-md-auto align-self-end">
                {{ $illustration | safeHTML }}
+                {{ $caption | safeHTML }}
            </div>
+            {{ end }}
        </div>
    {{ end }}
 {{ end }}
--- a/layouts/_partials/assets/section-title.html
+++ b/layouts/_partials/assets/section-title.html
@@ -27,8 +27,8 @@
 {{- $title := $args.heading.title }}
 {{- $width := $args.heading.width | default 12 -}}
 {{- $width = cond (lt $width 12) (printf "col-12 col-%s-%d" $breakpoint.current $width) "" }}
-{{ if and (not $preheading) $args.useSection }}{{ $preheading = page.CurrentSection.Name }}{{ end }}
-{{ $justify := cond (eq $args.justify "start") "" (cond (eq $args.justify "end") "me-0" "mx-auto") }}
+{{- if and (not $preheading) $args.useSection }}{{ $preheading = page.CurrentSection.Name }}{{ end -}}
+{{- $justify := cond (eq $args.justify "start") "" (cond (eq $args.justify "end") "me-0" "mx-auto") -}}

 {{ if site.Params.main.titleCase }}
    {{ $preheading = title $preheading }}
Author	SHA1	Message	Date
Mark Dumay	9f9029baf0	Merge pull request #1486 from gethinode/develop Develop	2025-07-02 12:53:05 +02:00
Mark Dumay	3079f1f7dd	fix: correct page handling	2025-07-02 12:46:29 +02:00
Mark Dumay	e546d34422	Merge branch 'main' into develop	2025-07-02 12:24:10 +02:00
Mark Dumay	00e80f6400	docs: add cta example	2025-07-02 12:23:45 +02:00
Mark Dumay	b46dd52101	feat: add cta content block	2025-07-02 12:23:16 +02:00
Mark Dumay	b1a8c956fc	feat: make fluid layout of sections configurable	2025-07-02 12:21:46 +02:00
Mark Dumay	1b8aa10d11	fix: update broken link in main index file	2025-07-02 12:16:00 +02:00