Browse Source

feat: enable Figure to be nested within a `{{%` Markdown shortcode

Based on user request to parse both Markdown and nested HTML shortcodes (Figures) within Callout shortcode: https://discord.com/channels/722225264733716590/742863504515793149/813105748283883570

Uses `{{-` to unindent HTML so that Figure shortcode can be nested within a `{{%` Markdown shortcode, such as Callout, without the HTML being rendered as a Markdown code block. This way we utilise Hugo's HTML in Markdown approach (aka Goldmark `unsafe`) rather than separating HTML from Markdown.

Previously, Figure could only be nested within a `{{<` HTML shortcode.
George Cushen 4 năm trước cách đây
mục cha
commit
e27cbaca79

+ 1 - 1
wowchemy/layouts/shortcodes/callout.html

@@ -1,5 +1,5 @@
 <div class="alert alert-{{ .Get 0 }}">
   <div>
-    {{ .Inner }}
+    {{ .Inner | markdownify | emojify  }}
   </div>
 </div>

+ 7 - 5
wowchemy/layouts/shortcodes/figure.html

@@ -1,5 +1,7 @@
 {{/* Figure Shortcode for Wowchemy. */}}
 {{/* Load image from page dir falling back to media library at `assets/media/` and then to remote URI. */}}
+{{/* Note: Uses `{{-` to unindent HTML so that Figure shortcode can be nested within a `{{%` Markdown shortcode,
+     such as Callout, without the HTML being rendered as a Markdown code block. */}}
 
 {{ $destination := .Get "src" }}
 {{ $caption := .Get "caption" | default (.Get "title") | default "" }}{{/* Support legacy `title` option. */}}
@@ -16,13 +18,13 @@
 
   {{- if $img -}}
     {{ $isSVG := eq $img.MediaType.SubType "svg" }}
-    {{ if $isSVG }}
+    {{ if $isSVG -}}
       <img alt="{{ $alt }}"
        src="{{ $img.RelPermalink }}"
        loading="lazy"
        {{ if $zoom }}data-zoomable{{end}}
        {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
-    {{ else }}
+    {{- else }}
       {{- $img_lg := $img.Fit "1200x1200" -}}
       {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
       {{- $img_sm := $img_md.Fit "400x400" -}}
@@ -37,7 +39,7 @@
            height="{{ $height }}"
            loading="lazy"
            {{ if $zoom }}data-zoomable{{end}} />
-    {{ end }}
+    {{- end }}
   {{- else -}}
     <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
          {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
@@ -45,9 +47,9 @@
 
   {{ if $caption }}
     {{/* Localize the figure numbering (if enabled). */}}
-    {{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}
+    {{- $figure := split (i18n "figure" | default "Figure %d:") "%d" -}}
     <figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}}&nbsp;" data-post="{{ index $figure 1 }}&nbsp;" class="numbered"{{ end }}>
       {{ $caption | markdownify | emojify }}
     </figcaption>
-  {{ end }}
+  {{- end -}}
 </figure>