[BSv5] Adapt cardpane shortcode

CHANGELOG.md

@@ -30,6 +30,14 @@ For a list of issues targeted for the next release, see the [23Q1][] milestone.
   - `blocks/section`: **default** and accepted values of the `type` argument
     have changed! For details see [blocks/section] ([#1472]).
 
+- **[Adaptation of shortcodes for diplay of cards (#1376)][1376]:
+  - shortcode `cardpane`: renamed CSS class `td-card-deck` to `td-card-group`.
+  - shortcode `card`, `card-code`: markup of inner content (html/markdown)
+    now depends on the syntax of the calling shortcode, not on extension
+    of page file any more [#906][906].
+  - shortcode `card-code` is now deprecated, use shortcode `card` with named
+    parameter `code=true` instead.
+
 **Other changes**:
 
 - Non-breaking changes that result from the Bootstrap v5 upgrade:

assets/scss/shortcodes/cards-pane.scss

@@ -1,4 +1,4 @@
-.td-card-deck.card-deck {
+.td-card-group.card-group {
   @extend .td-max-width-on-larger-screens;
 }
 
@@ -8,6 +8,7 @@
 
     .highlight {
       border: none;
+      margin: 0;
     }
   }
 

layouts/shortcodes/card-code.html

@@ -1,20 +1,16 @@
-<div class="td-card card">
-  {{ $lang := "" }}
-  {{ with $.Get "lang" }}
-    {{ $lang = $.Get "lang" }}
-  {{ end }}
-  {{ $highlight := "" }}
-  {{ with $.Get "highlight" }}
-    {{ $highlight = $.Get "highlight" }}
-  {{ end }}
-  {{- with $.Get "header" -}}
+{{ warnf `shortcode 'card-code' is deprecated: use shortcode 'card' with named parameter 'code=true' instead.` -}}
+{{ $lang := default "" ($.Get "lang") -}}
+{{ $highlight := default "" ($.Get "highlight") -}}
+
+<div class="td-card card border me-4">
+  {{ with $.Get "header" -}}
     <div class="card-header bg-white">
-      {{- $.Get "header" | markdownify -}}
+      {{ . | markdownify -}}
     </div>
-  {{end}}
-  <div class="card-body code p-l0 m-0">
-      {{ with $.Inner }}
-        {{- highlight $.Inner $lang $highlight -}}
-      {{ end }}
+  {{ end -}}
+  <div class="card-body code p-0 m-0">
+    {{ with $.Inner -}}
+      {{ highlight . $lang $highlight -}}
+    {{ end -}}
   </div>
 </div>

layouts/shortcodes/card.html

@@ -1,49 +1,47 @@
-<div class="td-card card mb-4">
-  {{ with $.Get "header" }}
-    <div class="card-header">
-      {{ if eq $.Page.File.Ext "md" }}
-        {{ $.Get "header" | markdownify }}
-      {{ else }}
-        {{ $.Get "header" | htmlUnescape | safeHTML }}
-      {{ end }}
+{{/* Check parameter type */ -}}
+{{ $code := false -}}
+{{ with .Get "code" -}}
+  {{ $type := printf "%T" . -}}
+  {{ if ne $type "bool" -}}
+    {{ errorf `shortcode 'card': boolean value expected for parameter 'code', but got %s` $type -}}
+  {{ else }}
+    {{ $code = . -}}
+  {{ end -}}
+{{ end -}}
+
+{{ $lang := default "" (.Get "lang") -}}
+{{ $highlight := default "" (.Get "highlight") -}}
+
+<div class="td-card card border me-4">
+{{ with $.Get "header" -}}
+    <div class="card-header{{- cond $code " bg-white" "" -}}">
+      {{ . | markdownify }}
     </div>
-  {{ end }}
-  <div class="card-body">
-    {{ with $.Get "title" }}
+{{ end -}}
+  <div class="card-body{{- cond $code " code p-0 m-0" "" -}}">
+    {{ with $.Get "title" -}}
       <h5 class="card-title">
-        {{ if eq $.Page.File.Ext "md" }}
-          {{ $.Get "title" | markdownify }}
-        {{ else }}
-          {{ $.Get "title" | htmlUnescape | safeHTML }}
-        {{ end }}
+        {{ . | markdownify -}}
       </h5>
-    {{ end }}
-    {{ with $.Get "subtitle" }}
-      <h6 class="card-title mb-2 text-muted">
-        {{ if eq $.Page.File.Ext "md" }}
-          {{ $.Get "subtitle" | markdownify }}
-        {{ else }}
-          {{ $.Get "subtitle" | htmlUnescape | safeHTML }}
-        {{ end }}
+    {{ end -}}
+    {{ with $.Get "subtitle" -}}
+      <h6 class="card-title ms-2 text-muted">
+        {{ . | markdownify -}}
       </h6>
-    {{ end }}
-    {{ with $.Inner }}
+    {{ end -}}
+    {{ with $.Inner -}}
+      {{ if $code -}}
+        {{ highlight . $lang $highlight -}}
+      {{ else -}}
       <p class="card-text">
-        {{ if eq $.Page.File.Ext "md" }}
-          {{ $.Inner | markdownify }}
-        {{ else }}
-          {{ $.Inner | htmlUnescape | safeHTML }}
-        {{ end }}
+        {{ . -}}
       </p>
-    {{ end }}
+      {{ end -}}
+    {{ end -}}
   </div>
-  {{ with $.Get "footer" }}
+  {{ with $.Get "footer" -}}
     <div class="card-footer">
-      {{ if eq $.Page.File.Ext "md" }}
-        {{ $.Get "footer" | markdownify }}
-      {{ else }}
-        {{ $.Get "footer" | htmlUnescape | safeHTML }}
-      {{ end }}
+      {{ . | markdownify -}}
     </div>
-  {{ end }}
+  {{ end -}}
 </div>

layouts/shortcodes/cardpane.html

@@ -1,3 +1,3 @@
-<div class="td-card-deck card-deck mb-4">
+<div class="td-card-group card-group p-0 mb-4">
 {{- .Inner -}}
-</div>
+</div>