Use card partial in card shortcode (#538)

Author: jarrodmillman

layouts/partials/_elements/card.html

@@ -1,33 +1,42 @@
-{{- $class := "" }}
-{{- with .classcard }}{{ $class = . }}{{- end }}
+{{- $grid_item_card := default false .grid_item_card -}}
+{{- $card := .card -}}
+{{- $class := "" }}{{- with $card.classcard }}{{ $class = . }}{{- end }}
+{{- if $grid_item_card -}}
 <div class="sd-col sd-d-flex-row">
- {{- with .link }}
+ {{ with $card.link }}
   <div class="sd-card sd-w-100 sd-shadow-sm sd-card-hover {{ $class }}">
- {{- else }}
+ {{ else }}
   <div class="sd-card sd-w-100 sd-shadow-sm {{ $class }}">
- {{- end }}
-  {{- with .header }}
+ {{ end }}
+{{- else -}}
+ {{ with $card.link }}
+  <div class="sd-card sd-mb-3 sd-shadow-sm sd-card-hover {{ $class }}">
+ {{ else }}
+  <div class="sd-card sd-mb-3 sd-shadow-sm {{ $class }}">
+ {{ end }}
+{{- end -}}
+  {{- with $card.header }}
    <div class="sd-card-header">
      {{ . | markdownify }}
    </div>
   {{- end }}
    <div class="sd-card-body">
-    {{- with .title }}
+    {{- with $card.title }}
     <div class="sd-card-title sd-font-weight-bold">
       {{ . }}
     </div>
     {{- end }}
-    {{- with (trim .body "\n") }}
+    {{- with (trim $card.body "\n") }}
       {{ . | markdownify }}
     {{- end }}
    </div>
-  {{- with .footer }}
+  {{- with $card.footer }}
    <div class="sd-card-footer">
     {{ . | markdownify }}
    </div>
   {{- end }}
- {{- with .link }}
+ {{- with $card.link }}
     <a class="sd-stretched-link" href="{{.}}"></a>
  {{- end }}
   </div>
-</div>
+{{ if $grid_item_card -}}</div>{{- end }}

layouts/partials/_elements/grid.html

@@ -15,11 +15,11 @@
   {{- $lg := index $columns 3 }}
   <div class="sd-row sd-row-cols-{{ $xs }} sd-row-cols-xs-{{ $xs }} sd-row-cols-sm-{{ $sm }} sd-row-cols-md-{{ $md }} sd-row-cols-lg-{{ $lg }} sd-g-2 sd-g-xs-{{ $xs }} sd-g-sm-{{ $sm }} sd-g-md-{{ $md }} sd-g-lg-{{ $lg }}">
 {{- end }}
-{{- range $key, $d := $items -}}
-  {{- if eq $d.type "card" }}
-    {{- partial "_elements/card.html" $d -}}
+{{- range $key, $item := $items -}}
+  {{- if eq $item.type "card" }}
+    {{- partial "_elements/card.html" (dict "grid_item_card" true "card" $item) -}}
   {{- else }}
-    {{- partial "_elements/item.html" $d -}}
+    {{- partial "_elements/item.html" $item -}}
   {{- end }}
 {{- end }}
   </div>

layouts/shortcodes/card.html

@@ -1,42 +1,56 @@
-{{- $data := .Inner | transform.Unmarshal -}}
+{{/*
+
+doc: Cards
+
+{{< card >}}
+title = 'Only title'
+{{< /card >}}
+
+{{< card >}}
+body = '''
+Only body.
+
+But with multiple text paragraphs.
+'''
+{{< /card >}}
+
+{{< card >}}
+title = 'Heading and body'
+body = '''
+Content of the third card.
+
+{{< badge primary >}}Sample badge{{< /badge >}}
+'''
+{{< /card >}}
+
+{{< card >}}
+title = 'A card with a dropdown menu'
+body = '''
+{{< dropdown >}}
+title = 'Click to expand dropdown'
+icon = 'fa-solid fa-eye'
+body = 'Hidden content'
+{{< /dropdown >}}
+'''
+{{< /card >}}
+
+{{< card >}}
+title = 'A clickable card'
+link = 'https://example.com'
+{{< /card >}}
+
+{{< card >}}
+header = 'Header'
+title = 'Card Title'
+body = 'Card content'
+footer = 'Footer'
+{{< /card >}}
+
+*/}}
+
+{{- $card := .Inner | transform.Unmarshal -}}
 {{- with .Parent -}}
-<div class="sd-col sd-d-flex-row">
-{{ with $data.link }}
-<div class="sd-card sd-w-100 sd-shadow-sm sd-card-hover">
-{{ else }}
-<div class="sd-card sd-w-100 sd-shadow-sm">
-{{ end }}
+  {{- partial "_elements/card.html" (dict "grid_item_card" true "card" $card) -}}
 {{- else -}}
-{{ with $data.link }}
-<div class="sd-card sd-mb-3 sd-shadow-sm sd-card-hover">
-{{ else }}
-<div class="sd-card sd-mb-3 sd-shadow-sm">
-{{ end }}
+  {{- partial "_elements/card.html" (dict "grid_item_card" false "card" $card) -}}
 {{- end -}}
-  {{ with $data.header }}
-  <div class="sd-card-header">
-      {{ . | markdownify }}
-  </div>
-  {{ end }}
-  <div class="sd-card-body">
-    {{ with $data.title }}
-    <div class="sd-card-title sd-font-weight-bold">
-      {{ . }}
-    </div>
-    {{ end }}
-    {{ with (trim $data.body "\n") }}
-      {{ . | markdownify }}
-    {{ end }}
-  </div>
-  {{ with $data.link }}
-  <a class="sd-stretched-link" href="{{.}}"></a>
-  {{ end }}
-  {{ with $data.footer }}
-  <div class="sd-card-footer">
-    {{ . | markdownify }}
-  </div>
-  {{ end }}
-{{- with .Parent -}}
-</div>
-{{ end }}
-</div>