Merge pull request #1459 from gethinode/develop

Refine content blocks

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";

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

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

@@ -0,0 +1,32 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Benefits
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  icon-rounded:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  orientation:
+  class:

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

@@ -0,0 +1,71 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cards" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cards/cards.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ range $args.elements }}
+	<!-- TODO: check mode -->
+	{{ $list = $list | append (dict 
+		"title"       .title
+		"description" (.content | page.RenderString)
+		"icon"        .icon
+		"thumbnail"   .image
+	) }}
+{{ end}}
+
+{{ if not $error }}
+	<div class="container-xxl p-4 px-xxl-0">
+		{{- partial "assets/section-title.html" (dict "heading" $args.heading "class" "py-5") -}}
+
+		{{- partial "assets/card-group.html" (dict 
+			"page"         page
+			"list"         $list
+			"class"        (printf "border-0 card-icon-primary d-sm-none %s" $args.class)
+			"cols"         $args.cols
+			"gutter"       "4"
+			"padding"      $args.padding
+			"header-style" "none"
+			"footer-style" "none"
+			"icon-rounded" $args.iconRounded
+			"icon-style"   "fa-2x"
+			"align"        "start"
+			"orientation"  ($args.orientation | default "horizontal-sm")
+			"hook"         "assets/live-card.html"
+		) -}}
+
+		{{- partial "assets/card-group.html" (dict 
+			"page"         page
+			"list"         $list
+			"class"        (printf "border-0 card-icon-primary d-none d-sm-block %s" $args.class)
+			"cols"         $args.cols
+			"gutter"       "4"
+			"padding"      $args.padding
+			"header-style" "none"
+			"footer-style" "none"
+			"icon-rounded" $args.iconRounded
+			"icon-style"   "fa-2x"
+			"align"        "start"
+			"orientation"  ($args.orientation | default "stacked")
+			"hook"         "assets/live-card.html"
+		) -}}
+	</div>
+{{ end }}
+

data/structures/_arguments.yml

@@ -430,6 +430,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

data/structures/_types.yml

@@ -32,6 +32,12 @@ types:
   items:
     - title:
       description:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
   links:
     - title:
       url:

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 >}}

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 >}}

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",
       "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",
@@ -224,11 +228,13 @@
       "fa-3",
       "fa-4x",
       "fa-activity",
+      "fa-address-card",
       "fa-angle-left",
       "fa-arrow-left",
       "fa-arrow-right",
       "fa-bootstrap",
       "fa-chevron-right",
+      "fa-circle",
       "fa-circle-check",
       "fa-circle-play",
       "fa-circle-question",
@@ -242,10 +248,12 @@
       "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",
@@ -256,6 +264,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",
@@ -560,6 +571,7 @@
       "background-type",
       "badge",
       "barre-de-navigation",
+      "bento-layout",
       "block-diagram",
       "blog",
       "body-docs-collapse-15",
@@ -590,9 +602,12 @@
       "data-tables",
       "docs",
       "documentation",
+      "elements-type",
       "entity-relationship-diagram",
       "example",
+      "examples",
       "exemple",
+      "fa-address-card",
       "fa-face-frown",
       "fa-square-check",
       "fab-bootstrap",
@@ -603,11 +618,126 @@
       "fab-medium",
       "fab-whatsapp",
       "fab-x-twitter",
-      "faq-d60f86697e8e822c14f81bde047a063e",
+      "faq-0207ac25368a51b555ace9fb5d535d51",
-      "faq-d60f86697e8e822c14f81bde047a063e-heading-faq-d60f86697e8e822c14f81bde047a063e",
+      "faq-0207ac25368a51b555ace9fb5d535d51-heading-faq-0207ac25368a51b555ace9fb5d535d51",
-      "faq-d60f86697e8e822c14f81bde047a063e-item-0",
+      "faq-0207ac25368a51b555ace9fb5d535d51-item-0",
-      "faq-d60f86697e8e822c14f81bde047a063e-item-1",
+      "faq-0207ac25368a51b555ace9fb5d535d51-item-1",
-      "faq-d60f86697e8e822c14f81bde047a063e-item-2",
+      "faq-0207ac25368a51b555ace9fb5d535d51-item-2",
+      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd",
+      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-heading-faq-0d9cad3dcfdbf86c0dd499efd640f5fd",
+      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-item-0",
+      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-item-1",
+      "faq-0d9cad3dcfdbf86c0dd499efd640f5fd-item-2",
+      "faq-1d09cf5c427b65f8401538f5c27cd79a",
+      "faq-1d09cf5c427b65f8401538f5c27cd79a-heading-faq-1d09cf5c427b65f8401538f5c27cd79a",
+      "faq-1d09cf5c427b65f8401538f5c27cd79a-item-0",
+      "faq-1d09cf5c427b65f8401538f5c27cd79a-item-1",
+      "faq-1d09cf5c427b65f8401538f5c27cd79a-item-2",
+      "faq-23d1dc823666431d94080a47fbe2f135",
+      "faq-23d1dc823666431d94080a47fbe2f135-heading-faq-23d1dc823666431d94080a47fbe2f135",
+      "faq-23d1dc823666431d94080a47fbe2f135-item-0",
+      "faq-23d1dc823666431d94080a47fbe2f135-item-1",
+      "faq-23d1dc823666431d94080a47fbe2f135-item-2",
+      "faq-2a2e900fbf55c94afccd3e0096d75d43",
+      "faq-2a2e900fbf55c94afccd3e0096d75d43-heading-faq-2a2e900fbf55c94afccd3e0096d75d43",
+      "faq-2a2e900fbf55c94afccd3e0096d75d43-item-0",
+      "faq-2a2e900fbf55c94afccd3e0096d75d43-item-1",
+      "faq-2a2e900fbf55c94afccd3e0096d75d43-item-2",
+      "faq-385e9a800872a4ef6fc41f292e5ecad0",
+      "faq-385e9a800872a4ef6fc41f292e5ecad0-heading-faq-385e9a800872a4ef6fc41f292e5ecad0",
+      "faq-385e9a800872a4ef6fc41f292e5ecad0-item-0",
+      "faq-385e9a800872a4ef6fc41f292e5ecad0-item-1",
+      "faq-385e9a800872a4ef6fc41f292e5ecad0-item-2",
+      "faq-3ac1e6c7e282c0c3498e241151e870a3",
+      "faq-3ac1e6c7e282c0c3498e241151e870a3-heading-faq-3ac1e6c7e282c0c3498e241151e870a3",
+      "faq-3ac1e6c7e282c0c3498e241151e870a3-item-0",
+      "faq-3ac1e6c7e282c0c3498e241151e870a3-item-1",
+      "faq-3ac1e6c7e282c0c3498e241151e870a3-item-2",
+      "faq-3c82f796666ad7126f45191d8686190a",
+      "faq-3c82f796666ad7126f45191d8686190a-heading-faq-3c82f796666ad7126f45191d8686190a",
+      "faq-3c82f796666ad7126f45191d8686190a-item-0",
+      "faq-3c82f796666ad7126f45191d8686190a-item-1",
+      "faq-3c82f796666ad7126f45191d8686190a-item-2",
+      "faq-42527a8d6149bcb25ba67974f251c9c7",
+      "faq-42527a8d6149bcb25ba67974f251c9c7-heading-faq-42527a8d6149bcb25ba67974f251c9c7",
+      "faq-42527a8d6149bcb25ba67974f251c9c7-item-0",
+      "faq-42527a8d6149bcb25ba67974f251c9c7-item-1",
+      "faq-42527a8d6149bcb25ba67974f251c9c7-item-2",
+      "faq-459acb940e821ec7b38b2425729753a7",
+      "faq-459acb940e821ec7b38b2425729753a7-heading-faq-459acb940e821ec7b38b2425729753a7",
+      "faq-459acb940e821ec7b38b2425729753a7-item-0",
+      "faq-459acb940e821ec7b38b2425729753a7-item-1",
+      "faq-459acb940e821ec7b38b2425729753a7-item-2",
+      "faq-4816264872fdc6847c6a813550673dd0",
+      "faq-4816264872fdc6847c6a813550673dd0-heading-faq-4816264872fdc6847c6a813550673dd0",
+      "faq-4816264872fdc6847c6a813550673dd0-item-0",
+      "faq-4816264872fdc6847c6a813550673dd0-item-1",
+      "faq-4816264872fdc6847c6a813550673dd0-item-2",
+      "faq-501f4a6b834aa1a24043fb5b9f9928c2",
+      "faq-501f4a6b834aa1a24043fb5b9f9928c2-heading-faq-501f4a6b834aa1a24043fb5b9f9928c2",
+      "faq-501f4a6b834aa1a24043fb5b9f9928c2-item-0",
+      "faq-501f4a6b834aa1a24043fb5b9f9928c2-item-1",
+      "faq-501f4a6b834aa1a24043fb5b9f9928c2-item-2",
+      "faq-524a2784206986528a599f1fad6821f4",
+      "faq-524a2784206986528a599f1fad6821f4-heading-faq-524a2784206986528a599f1fad6821f4",
+      "faq-524a2784206986528a599f1fad6821f4-item-0",
+      "faq-524a2784206986528a599f1fad6821f4-item-1",
+      "faq-524a2784206986528a599f1fad6821f4-item-2",
+      "faq-53c9868792ab3037787bf28bb9675fa4",
+      "faq-53c9868792ab3037787bf28bb9675fa4-heading-faq-53c9868792ab3037787bf28bb9675fa4",
+      "faq-53c9868792ab3037787bf28bb9675fa4-item-0",
+      "faq-53c9868792ab3037787bf28bb9675fa4-item-1",
+      "faq-53c9868792ab3037787bf28bb9675fa4-item-2",
+      "faq-74cbe70765110cf6e9067513ca5741c2",
+      "faq-74cbe70765110cf6e9067513ca5741c2-heading-faq-74cbe70765110cf6e9067513ca5741c2",
+      "faq-74cbe70765110cf6e9067513ca5741c2-item-0",
+      "faq-74cbe70765110cf6e9067513ca5741c2-item-1",
+      "faq-74cbe70765110cf6e9067513ca5741c2-item-2",
+      "faq-90908ae510b7d45ff54c4b6c9c8ca008",
+      "faq-90908ae510b7d45ff54c4b6c9c8ca008-heading-faq-90908ae510b7d45ff54c4b6c9c8ca008",
+      "faq-90908ae510b7d45ff54c4b6c9c8ca008-item-0",
+      "faq-90908ae510b7d45ff54c4b6c9c8ca008-item-1",
+      "faq-90908ae510b7d45ff54c4b6c9c8ca008-item-2",
+      "faq-9801f2465268421d28e3a2e740e301ba",
+      "faq-9801f2465268421d28e3a2e740e301ba-heading-faq-9801f2465268421d28e3a2e740e301ba",
+      "faq-9801f2465268421d28e3a2e740e301ba-item-0",
+      "faq-9801f2465268421d28e3a2e740e301ba-item-1",
+      "faq-9801f2465268421d28e3a2e740e301ba-item-2",
+      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d",
+      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-heading-faq-c4ef1fd75a3eb53e09b547b23bc8dc7d",
+      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-item-0",
+      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-item-1",
+      "faq-c4ef1fd75a3eb53e09b547b23bc8dc7d-item-2",
+      "faq-d47a09f567ff25b85143b638bc68d60f",
+      "faq-d47a09f567ff25b85143b638bc68d60f-heading-faq-d47a09f567ff25b85143b638bc68d60f",
+      "faq-d47a09f567ff25b85143b638bc68d60f-item-0",
+      "faq-d47a09f567ff25b85143b638bc68d60f-item-1",
+      "faq-d47a09f567ff25b85143b638bc68d60f-item-2",
+      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb",
+      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-heading-faq-dc8be8c7cb908eadcc4f0cb98b4709fb",
+      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-item-0",
+      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-item-1",
+      "faq-dc8be8c7cb908eadcc4f0cb98b4709fb-item-2",
+      "faq-df9f1eb3ec26e3252a2d045e833601d9",
+      "faq-df9f1eb3ec26e3252a2d045e833601d9-heading-faq-df9f1eb3ec26e3252a2d045e833601d9",
+      "faq-df9f1eb3ec26e3252a2d045e833601d9-item-0",
+      "faq-df9f1eb3ec26e3252a2d045e833601d9-item-1",
+      "faq-df9f1eb3ec26e3252a2d045e833601d9-item-2",
+      "faq-eafa3d5085c4f74847a727982753379e",
+      "faq-eafa3d5085c4f74847a727982753379e-heading-faq-eafa3d5085c4f74847a727982753379e",
+      "faq-eafa3d5085c4f74847a727982753379e-item-0",
+      "faq-eafa3d5085c4f74847a727982753379e-item-1",
+      "faq-eafa3d5085c4f74847a727982753379e-item-2",
+      "faq-eb4b749d4172f3bcae459d57f9d4cfb5",
+      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-heading-faq-eb4b749d4172f3bcae459d57f9d4cfb5",
+      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-item-0",
+      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-item-1",
+      "faq-eb4b749d4172f3bcae459d57f9d4cfb5-item-2",
+      "faq-ff66f007edb5cdfca29cb7a3e0b4795c",
+      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-heading-faq-ff66f007edb5cdfca29cb7a3e0b4795c",
+      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-item-0",
+      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-item-1",
+      "faq-ff66f007edb5cdfca29cb7a3e0b4795c-item-2",
       "fas-1",
       "fas-2",
       "fas-3",
@@ -615,6 +745,7 @@
       "fas-arrow-left",
       "fas-arrow-right",
       "fas-chevron-right",
+      "fas-circle",
       "fas-circle-check",
       "fas-circle-play",
       "fas-circle-question",
@@ -622,6 +753,7 @@
       "fas-divide",
       "fas-ellipsis",
       "fas-globe",
+      "fas-grip",
       "fas-h",
       "fas-heart",
       "fas-house",
@@ -648,6 +780,7 @@
       "git-graph",
       "groupe-de-boutons",
       "groupe-de-cartes",
+      "guides",
       "gérer-les-préférences-des-cookies",
       "heading",
       "heading-type",
@@ -660,6 +793,7 @@
       "imgix",
       "indicateur-de-chargement",
       "infobulle",
+      "input-type",
       "ins",
       "invite-de-commandes",
       "items-type",
@@ -678,6 +812,7 @@
       "mermaid-diagrams",
       "messages-type",
       "mindmap",
+      "more-type",
       "nav",
       "nav-0-0",
       "nav-0-1",

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 }}

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>    

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "1.0.0-alpha6",
+  "version": "1.0.0-alpha7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "1.0.0-alpha6",
+      "version": "1.0.0-alpha7",
       "license": "MIT",
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^7.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "1.0.0-alpha6",
+  "version": "1.0.0-alpha7",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",