Merge pull request #503 from gethinode/develop

Improve cards and card-group
gethinode · Sep 1, 2023 · 75126f2 · 75126f2
2 parents 56f74e0 + df683a3
commit 75126f2
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 54 deletions.
diff --git a/assets/scss/components/_card.scss b/assets/scss/components/_card.scss
@@ -48,6 +48,10 @@
     color: $body-color if($enable-important-utilities, !important, null);
 }
 
+.card-body-margin {
+    margin-bottom: $spacer * 1.5; // equals mb-4
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .card-body-link {

diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -116,7 +116,7 @@
 #         header = "full"
 #         footer = "none"
 #         orientation = "stacked"
-#         style = "border-0 card-zoom"
+#         style = "border-0 card-zoom card-body-margin"
 #         homepage = 3
 #         separator = true
 # toml-docs-end sections

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -98,7 +98,7 @@
         header = "full"
         footer = "none"
         orientation = "stacked"
-        style = "border-0 card-zoom"
+        style = "border-0 card-zoom card-body-margin"
         homepage = 3
         separator = true
     [sections.projects]
@@ -113,7 +113,7 @@
         padding = "3"
         header = "none"
         footer = "tags"
-        orientation = "horizontal"
+        orientation = "horizontal-sm"
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false

diff --git a/exampleSite/content/en/blog/bootstrap-elements.md b/exampleSite/content/en/blog/bootstrap-elements.md
@@ -135,7 +135,7 @@ As an example, the following shortcode displays a card group of three elements.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card-group padding="3" */>}}
+{{</* card-group padding="3" gutter="3" */>}}
     {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
         Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
         Sass files.

diff --git a/exampleSite/content/fr/blog/bootstrap-elements.md b/exampleSite/content/fr/blog/bootstrap-elements.md
@@ -135,7 +135,7 @@ En-tête 6 {{</* badge title="Nouveau" */>}}
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card-group padding="3" */>}}
+{{</* card-group padding="3" gutter="3" */>}}
     {{</* card title="Framework Bootstrap" icon="fab bootstrap" */>}}
         Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site
         avec les fichiers source Sass.

diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
@@ -38,14 +38,8 @@
       "sub",
       "sup",
       "svg",
-      "table",
-      "tbody",
-      "td",
-      "th",
-      "thead",
       "time",
       "title",
-      "tr",
       "ul",
       "use"
     ],
@@ -100,6 +94,7 @@
       "card",
       "card-body",
       "card-body-link",
+      "card-body-margin",
       "card-emphasize",
       "card-img-top",
       "card-img-wrap",
@@ -219,6 +214,7 @@
       "fw-semibold",
       "g-0",
       "g-3",
+      "g-4",
       "gap-2",
       "gap-3",
       "gradient",
@@ -315,7 +311,6 @@
       "ps-1",
       "ps-3",
       "ps-xl-3",
-      "pt-3",
       "px-3",
       "px-4",
       "px-xxl-0",
@@ -354,10 +349,6 @@
       "syntax-highlight",
       "tab-content",
       "tab-pane",
-      "table",
-      "table-hover",
-      "table-striped",
-      "table-striped-columns",
       "tag-link",
       "text-bg-body",
       "text-bg-body-tertiary",

diff --git a/layouts/partials/assets/card-group.html b/layouts/partials/assets/card-group.html
@@ -10,14 +10,16 @@
     "cards"         Optional string of rendered cards.
     "max"           Required maximum number of cards to display.
     "cols"          Required number of columns for the grid, must be a value between 1 and 5.
+    "gutter"        Gutter between columns in a group, either "0", "1", "2", "3", "4" (default), or "5".
     "title"         Optional title of the card group.
     "paginate"      Optional flag indicating if pagination should be added to the card group, if the list exceeds the
                     maximum number of cards to display. 
     "href"          Optional address for the button or hyperlink. If set, a button is added if the list exceeds the
                     maximum number of cards to display.
     "hrefTitle"     Optional title of the button or hyperlink as companion to href.
     "separator"     Optional flag to indicate a horizontal line should be added between items on small screens.
-    "wrapper"       Optional class attributes of the wrapper element, e.g. "xxx".
+    "wrapper"       Optional class attributes of the wrapper element, e.g. "p-4 px-xxl-0".
+    "responsive"    Optional flag if the number of columns should be responsive, defaults to "true".
 
     In addition, the following arguments are passed to the individual cards.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
@@ -90,15 +92,31 @@
 {{- end -}}
 {{- $max = math.Min $max $count -}}
 
-{{- $cols := .cols -}}
-{{- if or (lt $cols 1) (gt $cols 5) -}}
-    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'cols': %d" $cols -}}
+{{- $responsive := .responsive | default true -}}
+{{- with .responsive -}}
+    {{- if ne (printf "%T" .) "bool" -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'responsive'" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $cols := string .cols | default "3" -}}
+{{- $supportedCols := slice "0" "1" "2" "3" "4" "5" "auto" -}}
+{{- if not (in $supportedCols $cols) -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'cols': %s" $cols -}}
+{{- end -}}
+{{- $colGrid := "" -}}
+{{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}}
+{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
+{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
+{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
+{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
+{{ end -}}
+
+{{- $gutter := .gutter | default "4" -}}
+{{- $supportedGutters := slice "0" "1" "2" "3" "4" "5" -}}
+{{- if not (in $supportedGutters $gutter) -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'gutter': %s" $gutter -}}
 {{- end -}}
-{{- $colGrid := "row-cols-1" -}}
-{{- if eq $cols 2 }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" -}}
-{{- else if eq $cols 3 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" -}}
-{{- else if eq $cols 4 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" -}}
-{{- else if eq $cols 5 }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ end -}}
 
 {{- if not $paginate -}}
     {{- $list = first $max $list -}}
@@ -125,8 +143,8 @@
 
 {{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
 
-<div class="container-fluid {{ with $wrapper }}{{ . }}{{ end }}">
-    <div class="row {{ $colGrid }}">
+<div class="container-fluid {{ $wrapper }}">
+    <div class="row {{ $colGrid }} g-{{ $gutter }}">
         {{ range $index, $element := $list }}
             {{- $params := (dict
                 "class" (printf "h-100 %s" $class)
@@ -138,7 +156,7 @@
             ) -}}
             {{- $params = merge $params $element }}
 
-            <div class="col pt-3 pb-3">
+            <div class="col">
                 {{- partial "assets/card.html" $params -}}
             </div>
             {{- if and (lt $index (sub $max 1)) $separator -}}

diff --git a/layouts/partials/assets/card.html b/layouts/partials/assets/card.html
@@ -11,6 +11,7 @@
                     "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
                     color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
+    "gutter"        Gutter between columns in a group, either "0" (default), "1", "2", "3", "4", or "5".
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
     "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
@@ -128,6 +129,12 @@
     {{- errorf "partial [assets/card.html] - Invalid value for param 'padding': %s" $padding -}}
 {{- end -}}
 
+{{- $gutter := .gutter | default "0" -}}
+{{ $supportedGutters:= slice "0" "1" "2" "3" "4" "5" -}}
+{{ if not (in $supportedGutters $gutter) -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'gutter': %s" $gutter -}}
+{{ end -}}
+
 {{- $orientation := "stacked" -}}
 {{- with .orientation }}{{ $orientation = . }}{{ end -}}
 {{- $supportedOrientations := slice "stacked" "horizontal" "horizontal-sm" "none" -}}
@@ -136,6 +143,7 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
+{{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}
 {{- if hasPrefix $orientation "horizontal" -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
@@ -175,3 +183,4 @@
         </div>
     </div>
 {{- end -}}
+{{ if ne $gutter "0" }}</div>{{ end }}
diff --git a/layouts/shortcodes/card-group.html b/layouts/shortcodes/card-group.html
@@ -8,8 +8,9 @@
     "cols"          Required number of columns for the grid, must be a value between 1 and 5.
     "title"         Optional title of the card group.
     "separator"     Optional flag to indicate a horizontal line should be added between items on small screens.
-    "gutter"        Gutter between columns in a group, either "0", "1", "2", "3" (default), "4", or "5".
-    "wrapper"       Optional class attributes of the wrapper element, e.g. "xxx".
+    "gutter"        Gutter between columns in a group, either "0", "1", "2", "3", "4" (default), or "5".
+    "wrapper"       Optional class attributes of the wrapper element, e.g. "p-4 px-xxl-0".
+    "responsive"    Optional flag if the number of columns should be responsive, defaults to "true".
 
     In addition, the following arguments are passed to the individual cards.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
@@ -23,25 +24,35 @@
     "orientation"   Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
 -->
 
-{{- $cols := 3 -}}
-{{ with .Get "cols" }}{{ $cols = int . }}{{ end -}}
+{{- $cols := .Get "cols" | default "3" -}}
+{{- $gutter := .Get "gutter" | default "4" -}}
 {{- $title := .Get "title" | default "" -}}
 {{- $separator := .Get "separator" | default "" -}}
 {{- $class := .Get "class" | default "" -}}
 {{- $wrapper := .Get "wrapper" | default "" -}}
+{{- $responsive := .Get "responsive" | default true -}}
 {{- $color := .Get "color" | default "" -}}
 {{- $padding := .Get "padding" | default "3" -}}
 {{- $header := .Get "header" | default "" -}}
 {{- $footer := .Get "footer" | default "" -}}
 {{- $orientation := .Get "orientation" | default "" -}}
 
+{{ $inner := .Scratch.Get "inner" }}
+{{ $input := trim .Inner " \r\n" }}
+{{ if $input }}
+    {{ $input = replace $input "\n" "\n  " }}
+    {{ warnf "Unexpected inner content: %s\r\n      %s" .Position $input }}
+{{ end }}
+
 {{- partial "assets/card-group.html" (dict 
     "page" .Page
-    "cards" .Inner
+    "cards" $inner
     "cols" $cols
+    "gutter" $gutter
     "title" $title
     "separator" $separator
     "wrapper" $wrapper
+    "responsive" $responsive
     "class" $class
     "color" $color
     "padding" $padding

diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
@@ -8,7 +8,7 @@
                     "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
                     color is specified.
     "padding"       Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
-    "gutter"        Gutter between columns in a group, either "0", "1", "2", "3" (default), "4", or "5".
+    "gutter"        Gutter between columns in a group, either "0" (default), "1", "2", "3", "4", or "5".
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
     "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
@@ -60,7 +60,7 @@
     {{ $error = true -}}
 {{ end -}}
 
-{{- $gutter := partial "utilities/GetArg" (dict "page" . "arg" "gutter") | default "3" -}}
+{{- $gutter := partial "utilities/GetArg" (dict "page" . "arg" "gutter") | default "0" -}}
 {{ $supportedGutters:= slice "0" "1" "2" "3" "4" "5" -}}
 {{ if not (in $supportedGutters $gutter) -}}
     {{ errorf "Invalid value for param 'gutter': %s" .Position -}}
@@ -88,20 +88,30 @@
 {{ $thumbnail := .Get "thumbnail" | default "" -}}
 
 {{ if not $error -}}
-    <div class="g-{{ $gutter }}">
-        {{- partial "assets/card.html" (dict 
-            "path" $path
-            "title" $title
-            "class" (printf "h-100 %s" $class)
-            "color" $color
-            "padding" $padding
-            "header" $header
-            "footer" $footer
-            "orientation" $orientation
-            "description" $description
-            "icon" $icon
-            "thumbnail" $thumbnail
-            "alt" $alt
-        ) -}}
-    </div>
+    {{- $output := partial "assets/card.html" (dict 
+        "path" $path
+        "title" $title
+        "class" (printf "h-100 %s" $class)
+        "gutter" $gutter
+        "color" $color
+        "padding" $padding
+        "header" $header
+        "footer" $footer
+        "orientation" $orientation
+        "description" $description
+        "icon" $icon
+        "thumbnail" $thumbnail
+        "alt" $alt
+    ) -}}
+
+    {{ with .Parent }}
+        {{ $current := .Scratch.Get "inner" }}
+        {{ if $current }}
+            {{ .Scratch.Set "inner" (print $current $output) }}
+        {{ else }}
+            {{ .Scratch.Set "inner" $output }}
+        {{ end }}
+    {{ else }}
+        {{ print $output | safeHTML }}
+    {{ end }}
 {{ end -}}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.19.0-beta2",
+  "version": "0.19.0-beta3",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",