Shortode 'code': Use Hugo's native support for processing HTML & mark…

…down (#906)

CHANGELOG.md

@@ -21,8 +21,13 @@ For a list of issues targeted for the next release, see the [23Q1][] milestone.
     - Dropped `$primary-light`.
     - Dropped `color-diff()`.
 
-- **[Adaptation of shortcode 'cardpane'][1376]. renamed CSS class `td-card-deck`
-  to `td-card-group`.
+- **[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**:
 

layouts/shortcodes/card-code.html

@@ -1,20 +1,15 @@
+{{ $lang := default "" ($.Get "lang") -}}
+{{ $highlight := default "" ($.Get "highlight") -}}
+
 <div class="td-card card border me-4">
-  {{ $lang := "" }}
-  {{ with $.Get "lang" }}
-    {{ $lang = $.Get "lang" }}
-  {{ end }}
-  {{ $highlight := "" }}
-  {{ with $.Get "highlight" }}
-    {{ $highlight = $.Get "highlight" }}
-  {{ end }}
-  {{- with $.Get "header" -}}
+  {{ with $.Get "header" -}}
     <div class="card-header bg-white">
-      {{- $.Get "header" | markdownify -}}
+      {{ . | markdownify -}}
     </div>
-  {{end}}
+  {{ end -}}
   <div class="card-body code p-0 m-0">
-      {{ with $.Inner }}
-        {{- highlight $.Inner $lang $highlight -}}
-      {{ end }}
+    {{ with $.Inner -}}
+      {{ highlight . $lang $highlight -}}
+    {{ end -}}
   </div>
 </div>

layouts/shortcodes/card.html

@@ -1,49 +1,44 @@
+{{/* Check parameter type */ -}}
+{{ with .Get "code" -}}
+  {{ if ne ( printf "%T" . ) "bool" -}}
+    {{ errorf "shortcode card: parameter 'code' must be either true or false" -}}
+  {{ end -}}
+{{ end -}}
+
+{{ $code := default false (.Get "code") -}}
+{{ $lang := default "" (.Get "lang") -}}
+{{ $highlight := default "" (.Get "highlight") -}}
+
 <div class="td-card card border me-4">
-  {{ with $.Get "header" }}
-    <div class="card-header">
-      {{ if eq $.Page.File.Ext "md" }}
-        {{ $.Get "header" | markdownify }}
-      {{ else }}
-        {{ $.Get "header" | htmlUnescape | safeHTML }}
-      {{ end }}
+{{ 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" }}
+    {{ end -}}
+    {{ with $.Get "subtitle" -}}
       <h6 class="card-title ms-2 text-muted">
-        {{ if eq $.Page.File.Ext "md" }}
-          {{ $.Get "subtitle" | markdownify }}
-        {{ else }}
-          {{ $.Get "subtitle" | htmlUnescape | safeHTML }}
-        {{ end }}
+        {{ . | 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>