Merge pull request #734 from gethinode/develop

Extend card style configuration

data/structures/card.yml

@@ -157,19 +157,39 @@ arguments:
     optional: true
     comment: >-
       Font Awesome icon, displayed on top or the left of the card.
+  align:
+    type: select
+    optional: true
+    default: start
+    release: v0.23.0-alpha2
+    comment: Icon alignment.
+    options:
+      values:
+        - start
+        - end
+        - center
+  style:
+    type: string
+    optional: true
+    release: v0.23.0-alpha2
+    comment: Icon style.
   orientation:
     type: select
     optional: true
     default: stacked
     parent: cascade
-    comment: >-
+    comment: Placement of the thumbnail or icon.
-      Placement of the thumbnail or icon.
     options:
       values:
         - stacked
         - horizontal
         - horizontal-sm
         - none
+  subtle:
+    type: bool
+    optional: true
+    release: v0.23.0-alpha2
+    comment: Apply subtle background colors.
 body:
   optional: true
   comment: >-

exampleSite/hugo_stats.json

@@ -26,7 +26,6 @@
       "mark",
       "meta",
       "nav",
-      "nil",
       "noscript",
       "ol",
       "p",
@@ -63,6 +62,7 @@
       "alert-dismissible",
       "align-items-center",
       "align-items-end",
+      "align-items-start",
       "align-middle",
       "align-self-center",
       "align-self-end",
@@ -126,13 +126,11 @@
       "col-3",
       "col-4",
       "col-6",
-      "col-8",
       "col-9",
       "col-auto",
       "col-lg-2",
       "col-lg-4",
       "col-lg-8",
-      "col-md-10",
       "col-md-2",
       "col-md-3",
       "col-md-4",

layouts/partials/assets/card-group.html

@@ -27,6 +27,9 @@
 {{- $orientation := .orientation -}}
 {{- $ratio := .ratio -}}
 {{- $wrapper := .wrapper | default "p-0" -}}
+{{- $style := .style -}}
+{{- $align := .align -}}
+{{- $subtle := .subtle }}
 {{- $loading := .loading -}}
 
 <!-- Override arguments -->
@@ -90,6 +93,9 @@
                 "orientation" $orientation
                 "padding" $padding
                 "ratio" $ratio
+                "subtle" $subtle
+                "style" $style
+                "align" $align
             ) -}}
             {{- $params = merge $params $element }}
 
@@ -102,7 +108,7 @@
                 </div>
             {{- end -}}
         {{- end -}}
-        {{- print $cards | safeHTML }}
+        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
     </div>
 
     {{ if $paginate }}

layouts/partials/assets/card.html

@@ -19,12 +19,24 @@
 {{- $header := .header | default "full" -}}
 {{- $href := .href -}}
 {{- $icon := .icon -}}
+{{- $iconStyle := "" -}}
+{{- $align := .align | default "start" -}}
+{{- $style := .style | default "" -}}
 {{- $loading := .loading -}}
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := .padding | default "auto" -}}
 {{- $ratio := .ratio -}}
 {{- $thumbnail := .thumbnail -}}
 {{- $title := .title -}}
+{{- $subtle := .subtle -}}
+{{- $colorStyle := "" -}}
+{{ if $color }}
+    {{ if $subtle }}
+        {{- $colorStyle = printf "bg-%s-subtle text-%s-emphasis" $color $color -}}
+    {{ else }}
+        {{- $colorStyle = printf "bg-%s text-bg-%s" $color $color -}}
+    {{ end }}
+{{ end }}
 
 <!-- Override arguments -->
 {{- $page := "" }}
@@ -42,6 +54,13 @@
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
 
+{{ if (hasPrefix $orientation "horizontal") }}
+    {{ if not $style }}{{ $style = "fa-fluid fa-fw" }}{{ end }}
+{{ else }}
+    {{ if not $style }}{{ $style = "fa-4x" }}{{ end }}
+    {{- $iconStyle = "pb-3" -}}
+{{ end }}
+
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
 <!-- Inline partial to render the card's body -->
@@ -100,18 +119,18 @@
 
 {{- if hasPrefix $orientation "horizontal" -}}
     <!-- Render horizontal card -->
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    <div class="card {{ $colorStyle }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
-            <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
+            <div class="{{ if eq $orientation "horizontal-sm" }}col-2{{ else }}col-4{{ end }}">
                 {{- if $thumbnail -}}
                     {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
                 {{- else if $icon -}}
-                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
+                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
                     </div>
                 {{- end -}}
             </div>
-            <div class="col-8{{ if eq  $orientation "horizontal-sm" }} col-md-10{{ end }}">
+            <div class="{{ if eq $orientation "horizontal-sm" }}col-10{{ else }}col-8{{ end }}">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="h-100">
@@ -124,12 +143,12 @@
     </div>
 {{- else -}}
     <!-- Render stacked / default card -->
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- if $thumbnail -}}
             {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
-            <div class="card-icon  p-{{ $padding }}">
+            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">

layouts/shortcodes/card-group.html

@@ -24,6 +24,9 @@
 {{- $header := .Get "header" | default "" -}}
 {{- $footer := .Get "footer" | default "" -}}
 {{- $orientation := .Get "orientation" | default "" -}}
+{{- $align := .Get "align" | default "start" -}}
+{{- $style := .Get  "style" | default "" -}}
+{{- $subtle := .Get "subtle" | default false -}}
 
 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}

layouts/shortcodes/card.html

@@ -21,6 +21,9 @@
 {{- $gutter := partial "utilities/GetArgParent" (dict "page" . "arg" "gutter") | default "0" -}}
 {{- $header := partial "utilities/GetArgParent" (dict "page" . "arg" "header") | default "full" -}}
 {{- $icon := .Get "icon" -}}
+{{- $align := partial "utilities/GetArgParent" (dict "page" . "arg" "align") | default "start" -}}
+{{- $style := partial "utilities/GetArgParent" (dict "page" . "arg" "style") | default "" -}}
+{{- $subtle := partial "utilities/GetArgParent" (dict "page" . "arg" "subtle") | default false -}}
 {{- $loading := .Get "loading" -}}
 {{- $orientation := partial "utilities/GetArgParent" (dict "page" . "arg" "orientation") | default "stacked" -}}
 {{- $padding := partial "utilities/GetArgParent" (dict "page" . "arg" "padding") | default "auto" -}}
@@ -59,6 +62,9 @@
         "description" $description
         "ratio" $ratio
         "icon" $icon
+        "align" $align
+        "style" $style
+        "subtle" $subtle
         "thumbnail" $thumbnail
         "loading" $loading
         "alt" $alt

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha",
+  "version": "0.23.0-alpha2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-alpha",
+      "version": "0.23.0-alpha2",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

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