Merge pull request #1494 from gethinode/develop

feat: extend navbar styling options
Merge branch 'main' into develop
2025-10-16 06:23:11 +00:00 · 2025-07-04 12:56:42 +02:00 · 2025-07-04 12:51:29 +02:00 · 2025-07-04 12:50:41 +02:00 · 2025-07-04 07:43:32 +02:00 · 2025-07-04 07:38:09 +02:00
32 changed files with 616 additions and 56 deletions
--- a/.github/workflows/lint-build.yml
+++ b/.github/workflows/lint-build.yml
@@ -14,6 +14,10 @@ env:
  CACHE_PATH_WIN: '~\AppData\Local\hugo_cache'
  CACHE_PATH_MAC: '/Users/runner/Library/Caches/hugo_cache'

+permissions:
+  pull-requests: read
+  contents: read
+
 jobs:
  lint:
    runs-on: ubuntu-latest
--- 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,12 @@
    {{- $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) "" -}}
+    {{- $paddingOuter := cond (ne $component_name "separator") (printf "px-xxl-0 px-%d py-0" $padding.x) "" -}}
+    {{- $padding := cond (ne $component_name "separator") (printf "px-%d %spy-%d" $padding.x (cond $fluid "px-xxl-0 " "") $padding.y) "" -}}
    {{- $wrapper := $style }}
    {{ with $background }}
        {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
@@ -42,14 +45,16 @@
            {{ 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 not $fluid }}<div class="container-xxl {{ $paddingOuter }}">{{ end }}
+    <section {{ with $id }}id="{{ . }}" {{ end }}class="{{ $component_name }}
+        container-fluid {{ $class }}
+        {{ with $wrapper }}{{ . }}{{ end -}}
        {{- if and $backdrop $overlayMode }} background-container{{ end -}}
        {{- if $cover }} section-cover d-flex align-items-center{{ end }}" 
        {{ with $overlayMode -}}
@@ -60,12 +65,16 @@
        {{- end -}}
        >
        {{- if $backdrop -}}
-            {{ partial "assets/live-image.html" (dict "src" $backdrop "class" (printf "background-img-fluid %s" $bgclass) "title" (T "backgroundImage")) }}
+            {{ partial "assets/live-image.html" (dict
+                "src" $backdrop
+                "class" (printf "background-img-fluid %s" $bgclass)
+                "title" (T "backgroundImage"))
+            }}
        {{- end -}}

        {{ $col := cond (and $width (lt $width 12)) (printf "col-12 col-md-%d" $width) "" }}

-        <div class="container-xxl {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
+        <div class="container-{{ cond $fluid "xxl" "fluid" }} {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
            {{ with $col }}
                <div class="{{ . }}">{{ partial $resolved_component $component_props }}</div>
            {{ else }}
@@ -73,6 +82,7 @@
            {{ end}}
        </div>
    </section>
+    {{ if not $fluid }}</div>{{ end }}
    {{ "<!--bookshop-live end-->" | safeHTML }}
 {{- else -}}
    {{- $file_loc := slicestr $component_path 9 -}}
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -84,6 +84,7 @@
 [navigation]
    anchor = true
    logo = "/img/logo_icon.svg"
+    logo-height = 30
    color = "body"
    fixed = true
    overlay = false
@@ -96,6 +97,9 @@
    toc = true
    sidebar = true
    size = "md"
+    [navigation.padding]
+        x = 4
+        y = 4
 # toml-docs-end navigation

 # toml-docs-start messages
--- 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/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -37,6 +37,7 @@
 [navigation]
    anchor = true
    logo = "/img/logo_icon.svg"
+    logo-height = 30
    color = "body"
    fixed = true
    overlay = false
@@ -50,6 +51,9 @@
    toc = true
    sidebar = true
    size = "md"
+    [navigation.padding]
+        x = 4
+        y = 4

 [messages]
    placement = "bottom-right"
--- 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.10.0 // 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,14 @@ 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/gethinode/mod-utils/v4 v4.9.2 h1:lzcihwAsm8R2k2v+tWu5nfWvXMA8uRKi0nGIzZCygZ8=
+github.com/gethinode/mod-utils/v4 v4.9.2/go.mod h1:bYmvRdAo4ICy5MpSGafDvO4p5bTDpsDKFCPL3bH0mN4=
+github.com/gethinode/mod-utils/v4 v4.10.0 h1:CfVa57r52wXd0bUqSJlpux2cloHQNBBe13aeqLJ8FXE=
+github.com/gethinode/mod-utils/v4 v4.10.0/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/helpers/image-definition.html
+++ b/layouts/_partials/assets/helpers/image-definition.html
@@ -77,10 +77,10 @@
        {{- with $wrapper }}<div class="{{ . }}">{{ end }}
    {{- end -}}
    {{- if $data -}}
-        {{- if site.Params.debugging.includeSVGOrigin -}}
+        {{- if and site.Params.debugging.includeSVGOrigin $.url -}}
            {{- printf "{{/* <svg src=\"%s\"> */}}" $.url | safeHTML -}}
        {{- end -}}
-        {{- $data = replace $data "<svg" (printf "<svg class=\"%s\"" $args.class) -}}
+        {{- with $args.class }}{{ $data = replace $data "<svg" (printf "<svg class=\"%s\"" .) }}{{ end -}}
        {{- $data | safeHTML -}}
    {{- else if not $fileAnchor -}}
        <img class="img-fluid {{ $args.class }}"
--- a/layouts/_partials/assets/helpers/image-dimension.html
+++ b/layouts/_partials/assets/helpers/image-dimension.html
@@ -67,7 +67,9 @@
 {{- if hasSuffix $src "svg" -}}
    {{- $res = partial "utilities/GetResource.html" (dict "url" $src "page" $args.page) -}}
    {{ if not $res }}
-        {{- $targetURL := partial "utilities/GetStaticURL" (dict "url" (strings.TrimPrefix "/static" $src)) -}}
+        {{- $targetURL := strings.TrimPrefix "/static" $src -}}
+        {{- $u := urls.Parse site.BaseURL }}
+        {{- $targetURL = strings.TrimPrefix $u.Path $src -}}
        {{- if not (fileExists (path.Join "/static" $targetURL)) -}}
            {{ warnf "Cannot find vector image resource: %q" $src -}}
        {{ else }}
--- a/layouts/_partials/assets/hero.html
+++ b/layouts/_partials/assets/hero.html
@@ -78,7 +78,24 @@

    {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}

-    {{ $illustration := partial $args.hook (dict
+    {{ $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
@@ -88,10 +105,11 @@
            "sizes"         $sizes
            "title"         (T "heroImage")
            "wrapper"       $imageWrapper
-        "class"         "hero-image"
+            "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/navbar.html
+++ b/layouts/_partials/assets/navbar.html
@@ -80,7 +80,7 @@
 {{ end }}

 {{/* Initialize global variables */}}
-{{- $padding := partial "utilities/GetPadding.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" (dict "section" "navigation") -}}

 {{/* Initialize local arguments */}}
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
@@ -124,7 +124,8 @@

 {{ $logo := "" }}
 {{ with $args.logo | default site.Params.navigation.logo }}
-    {{ $logo = partial "assets/image.html" (dict "src" . "loading" "eager" "title" $title "image-height" 30) }}
+    {{ $height := index site.Params.navigation "logo-height" | default 30 }}
+    {{ $logo = partial "assets/image.html" (dict "src" . "loading" "eager" "title" $title "image-height" $height) }}
 {{ end }}

 {{- $pre := $args.pre -}}
--- 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 }}
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
        "commitizen": "^4.3.1",
        "cpy-cli": "^5.0.0",
        "cz-conventional-changelog": "^3.3.0",
-        "eslint": "^9.30.0",
+        "eslint": "^9.30.1",
        "husky": "^9.1.7",
        "markdownlint-cli2": "^0.18.1",
        "neostandard": "^0.12.1",
@@ -36,7 +36,7 @@
        "rimraf": "^6.0.1",
        "semantic-release": "^24.2.6",
        "shx": "^0.4.0",
-        "stylelint": "^16.21.0",
+        "stylelint": "^16.21.1",
        "stylelint-config-standard-scss": "^15.0.1"
      },
      "optionalDependencies": {
@@ -689,11 +689,10 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.30.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.30.0.tgz",
-      "integrity": "sha512-Wzw3wQwPvc9sHM+NjakWTcPx11mbZyiYHuwWa/QfZ7cIRX7WK54PSk7bdyXDaoaopUcMatv1zaQvOAAO8hCdww==",
+      "version": "9.30.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.30.1.tgz",
+      "integrity": "sha512-zXhuECFlyep42KZUhWjfvsmXGX39W8K8LFb8AWXM9gSV9dQB+MrJGLKvW6Zw0Ggnbpw0VHTtrhFXYe3Gym18jg==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
@@ -5193,11 +5192,10 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.30.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.30.0.tgz",
-      "integrity": "sha512-iN/SiPxmQu6EVkf+m1qpBxzUhE12YqFLOSySuOyVLJLEF9nzTf+h/1AJYc1JWzCnktggeNrjvQGLngDzXirU6g==",
+      "version": "9.30.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.30.1.tgz",
+      "integrity": "sha512-zmxXPNMOXmwm9E0yQLi5uqXHs7uq2UIiqEKo3Gq+3fwo1XrJ+hijAZImyF7hclW3E6oHz43Yk3RP8at6OTKflQ==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -5205,7 +5203,7 @@
        "@eslint/config-helpers": "^0.3.0",
        "@eslint/core": "^0.14.0",
        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.30.0",
+        "@eslint/js": "9.30.1",
        "@eslint/plugin-kit": "^0.3.1",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
@@ -15696,9 +15694,9 @@
      }
    },
    "node_modules/stylelint": {
-      "version": "16.21.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.21.0.tgz",
-      "integrity": "sha512-ki3PpJGG7xhm3WtINoWGnlvqAmbqSexoRMbEMJzlwewSIOqPRKPlq452c22xAdEJISVi80r+I7KL9GPUiwFgbg==",
+      "version": "16.21.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.21.1.tgz",
+      "integrity": "sha512-WCXdXnYK2tpCbebgMF0Bme3YZH/Rh/UXerj75twYo4uLULlcrLwFVdZTvTEF8idFnAcW21YUDJFyKOfaf6xJRw==",
      "dev": true,
      "funding": [
        {
@@ -15710,7 +15708,6 @@
          "url": "https://github.com/sponsors/stylelint"
        }
      ],
-      "license": "MIT",
      "dependencies": {
        "@csstools/css-parser-algorithms": "^3.0.5",
        "@csstools/css-tokenizer": "^3.0.4",
@@ -15739,7 +15736,7 @@
        "micromatch": "^4.0.8",
        "normalize-path": "^3.0.0",
        "picocolors": "^1.1.1",
-        "postcss": "^8.5.5",
+        "postcss": "^8.5.6",
        "postcss-resolve-nested-selector": "^0.1.6",
        "postcss-safe-parser": "^7.0.1",
        "postcss-selector-parser": "^7.1.0",
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
    "commitizen": "^4.3.1",
    "cpy-cli": "^5.0.0",
    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.30.0",
+    "eslint": "^9.30.1",
    "husky": "^9.1.7",
    "markdownlint-cli2": "^0.18.1",
    "neostandard": "^0.12.1",
@@ -98,7 +98,7 @@
    "rimraf": "^6.0.1",
    "semantic-release": "^24.2.6",
    "shx": "^0.4.0",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.21.1",
    "stylelint-config-standard-scss": "^15.0.1"
  },
  "optionalDependencies": {
Author	SHA1	Message	Date
Mark Dumay	863b81efbb	Merge pull request #1494 from gethinode/develop feat: extend navbar styling options	2025-07-04 12:56:42 +02:00
Mark Dumay	9b0683d176	Merge branch 'main' into develop	2025-07-04 12:51:29 +02:00
Mark Dumay	dd1b2eb97f	feat: extend navbar styling options	2025-07-04 12:50:41 +02:00
Mark Dumay	3f6dc3b2d7	Merge pull request #1493 from gethinode/develop Develop	2025-07-04 07:43:32 +02:00
Mark Dumay	873277b691	Merge branch 'main' into develop	2025-07-04 07:38:09 +02:00
Mark Dumay	7a456a12d2	fix: improve handling of static svg files Removes the subfolder from the static file path, if any. Only applicable to sites deployed to a subfolder (when setting `baseURL`).	2025-07-04 07:36:22 +02:00
Mark Dumay	b437b414b0	fix: suppress empty class and origin of svg files	2025-07-04 07:14:38 +02:00
Mark Dumay	80ac704d81	Merge pull request #1491 from gethinode/develop fix: improve non-fluid section rendering	2025-07-03 19:18:02 +02:00
Mark Dumay	996e9ec294	Merge branch 'main' into develop	2025-07-03 19:09:14 +02:00
Mark Dumay	0ab274d6f5	fix: improve non-fluid section rendering	2025-07-03 19:08:26 +02:00
github-actions[bot]	3742e8ef04	Merge pull request #1490 from gethinode/dependabot/npm_and_yarn/stylelint-16.21.1 Bump stylelint from 16.21.0 to 16.21.1	2025-07-03 13:29:37 +00:00
dependabot[bot]	3eadaa02b8	Bump stylelint from 16.21.0 to 16.21.1 Bumps [stylelint](https://github.com/stylelint/stylelint) from 16.21.0 to 16.21.1. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/16.21.0...16.21.1) --- updated-dependencies: - dependency-name: stylelint dependency-version: 16.21.1 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2025-07-03 13:24:13 +00:00
Mark Dumay	90bc571b76	Merge pull request #1489 from gethinode/develop ci: set read-only permissions for lint & build	2025-07-02 17:51:11 +02:00
Mark Dumay	aad5b59a48	fix: update dependencies	2025-07-02 16:56:37 +02:00
Mark Dumay	4d7fdffd4a	Merge branch 'main' into develop	2025-07-02 16:35:22 +02:00
Mark Dumay	c384836224	ci: set read-only permissions for lint & build	2025-07-02 16:34:30 +02:00
github-actions[bot]	cb547351d9	Merge pull request #1487 from gethinode/dependabot/npm_and_yarn/eslint-9.30.1 Bump eslint from 9.30.0 to 9.30.1	2025-07-02 13:37:17 +00:00
dependabot[bot]	3b47a5b66f	Bump eslint from 9.30.0 to 9.30.1 Bumps [eslint](https://github.com/eslint/eslint) from 9.30.0 to 9.30.1. - [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.30.0...v9.30.1) --- updated-dependencies: - dependency-name: eslint dependency-version: 9.30.1 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2025-07-02 13:30:03 +00:00
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