Use toml for card data (#468)

* Use yaml for card data

* Correct indentation of shortcode output in YAML

* Use TOML instead of YAML

* Update grid

---------

Co-authored-by: Stefan van der Walt <stefanv@berkeley.edu>

Author: jarrodmillman

layouts/shortcodes/badge.html

@@ -27,14 +27,11 @@
 {{< /badge >}}
 
 */}}
-
 <!-- These CSS classes are irregularly named, so the code to translate
 into them is a bit awkward. -->
-
-{{ $badge_style := .Get 0 }}
-{{ $badge_outline := (eq "outline" (.Get 1)) }}
-{{ $badge_variant := (cond $badge_outline "outline" "bg") }}
-{{ $badge_variant_text := (cond $badge_outline "text" "bg-text") }}
-{{ $badge_label := trim .Inner "\n\r" }}
-
+{{- $badge_style := .Get 0 }}
+{{- $badge_outline := (eq "outline" (.Get 1)) }}
+{{- $badge_variant := (cond $badge_outline "outline" "bg") }}
+{{- $badge_variant_text := (cond $badge_outline "text" "bg-text") }}
+{{- $badge_label := trim .Inner "\n\r" -}}
 <span class="sd-badge sd-{{$badge_variant}}-{{$badge_style}} sd-{{$badge_variant_text}}-{{$badge_style}}">{{$badge_label}}</span>

layouts/shortcodes/card.html

@@ -2,51 +2,57 @@
 
 doc: Cards
 
-{{< card title="Only heading" >}}{{< /card >}}
+{{< card >}}
+title = 'Only title'
+{{< /card >}}
 
 {{< card >}}
+body = '''
 Only body.
 
 But with multiple text paragraphs.
+'''
 {{< /card >}}
 
-{{< card title="Heading and body" >}}
+{{< card >}}
+title = 'Heading and body'
+body = '''
 Content of the third card.
 
-{{< badge primary >}}
-Sample badge
-{{< /badge >}}
-
+{{< badge primary >}}Sample badge{{< /badge >}}
+'''
 {{< /card >}}
 
 
-{{< card title="Card Title" header="Header" footer="Footer">}}
-Card content
+{{< card >}}
+header = 'Header'
+title = 'Card Title'
+body = 'Card content'
+footer = 'Footer'
 {{< /card >}}
 
-
 */}}
 
-
+{{- $data := .Inner | transform.Unmarshal -}}
 
 <div class="bd-content">
 <div class="sd-card sd-shadow-sm sd-mb-3">
-{{ with .Get "header" }}
-<div class="sd-card-header">
-  {{ . | markdownify }}
-</div>
-{{ end }}
-<div class="sd-card-body">
-  {{ with .Get "title" }}
+    {{ 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 .Inner }}
+  {{ with (trim $data.body "\n") }}
     {{ . | markdownify }}
   {{ end }}
 </div>
-{{ with .Get "footer" }}
+{{ with $data.footer }}
 <div class="sd-card-footer">
   {{ . | markdownify }}
 </div>

layouts/shortcodes/grid.html

@@ -4,21 +4,33 @@
 
 {{< grid >}}
 
-{{< card title="Only heading" >}}{{< /card >}}
+{{< card >}}
+title = 'Only title'
+{{< /card >}}
 
 {{< card >}}
+body = '''
 Only body.
 
 But with multiple text paragraphs.
+'''
 {{< /card >}}
 
-{{< card title="Heading and body" >}}
+{{< card >}}
+title = 'Heading and body'
+body = '''
 Content of the third card.
 
-{{< badge primary >}}
-Sample badge
-{{< /badge >}}
+{{< badge primary >}}Sample badge{{< /badge >}}
+'''
+{{< /card >}}
+
 
+{{< card >}}
+header = 'Header'
+title = 'Card Title'
+body = 'Card content'
+footer = 'Footer'
 {{< /card >}}
 
 {{< /grid >}}