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