Remove whitespace

[TetraTheta]

If shortcode contains whitespace in front of the part where be rendered as HTML, it will cause those codes to be rendered as code block, resulting improperly render result.

So I removed all whitespace for those parts.

Unfortunately, this will make code ugly.

Image comparison

Rendered result without this change:

Rendered result with this change:

The only difference is image.html and picture.html.

[razonyang]

Is this neccessary? If not, please do not inline it, it's hard to read (review) and maintain the code.
Hugo has --minify flag to minify the HTML codes, we don't need to take care of this manually (extra whitespaces line break etc.).

[TetraTheta]

I tested with this code:

<picture{{ with .wrapperClass }} class="{{ . }}"{{ end }}>
{{- range .sources }}
<source srcset="{{ .srcset }}" type="{{ .type }}" />
{{- end }}
<img class="{{ .className }}"
  src="{{ .src }}"
  alt="{{ .alt }}"
  {{ if .lazyLoading }}loading="lazy"{{ end }}
  {{ with .naturalHeight }}height="{{ . }}"{{ end }}
  {{ with .naturalWidth }}width="{{ . }}"{{ end }}
  {{ with .style }}{{ printf ` style="%s"` (delimit . `; `) | safeHTMLAttr }}{{ end }}
  {{ if and .original .originalSrc }}data-src="{{ .originalSrc }}"{{ end }}
  {{ if and .original .originalWidth }} data-width="{{ .originalWidth }}"{{ end }}
  {{ if and .original .originalHeight }} data-height="{{ .originalHeight }}"{{ end }} />
</picture>

In this code, I only removed HTML tag indentation.

But this will leave /> appear in render result.

I also removed two whitespace in front of src=, alt= etc. but that didn't make any difference.

I think every whitespace and line break must be removed to prevent this kind of problem.

[razonyang]

Please share your use case (how do you use it and reproduce), not sure what cause this.

[razonyang]

Could you please provide a real example for reproducing the issue? So that I can confirm and test if this PR have side affect.

[TetraTheta]

I use images/image in my custom shortcode file, and modified bs/collapse as collapse.

Save this as gallery/image.html.

{{/* This requires github.com/hugomods/images */}}
{{- $src := .Get "src" -}}
{{- $align := default "center" (.Get "align") -}}
{{- $width := default "100%" (.Get "width") -}}
{{- $caption := default "" (.Get "caption") -}}
{{- $style := "" -}}
{{- $page := .Page -}}

{{- $id := delimit (shuffle (seq 1 9)) "" -}}

{{- if strings.Contains $src ":" -}}
  {{- $src = split $src ":" -}}
{{- else -}}
  {{- $src = slice $src -}}
{{- end -}}

{{- if gt (len $src) 3 -}}
  {{- errorf "Too many images. Maximum allowed is 3." -}}
{{- else if lt (len $src) 1 -}}
  {{- errorf "Not enough images. Minimum required is 1." -}}
{{- end -}}

{{- if eq (len $src) 1 -}}
  {{- $style = "width: 100%" -}}
{{- else if eq (len $src) 2 -}}
  {{- $style = "width: 49.5%" -}}
{{- else -}}
  {{- $style = "width: 32.5%" -}}
{{- end -}}
<div class="gallery" align="{{ $align }}">
  <div id="gallery-container-{{ $id }}" style="width: {{ $width }}">
    <figure class="gallery-figure">
      <div class="gallery-container">
        {{- range $src -}}
          {{- $filename := (printf "%s" .) | default "" -}}
          {{- if eq (path.Ext $filename) "" -}}
            {{- $filename = printf "%s.webp" $filename -}}
          {{- end -}}
        <div class="gallery-inner" style="{{ $style }}">{{ partial "images/image" (dict "Page" $page "Filename" $filename) }}</div>
        {{- end -}}
      </div>
      {{- if ne $caption "" -}}
      <figcaption>{{ (printf "%s" $caption) }}</figcaption>
      {{- end -}}
    </figure>
  </div>
</div>

And save this content as collapse.html.

{{/* Local alternative to 'bs/collapse' */}}
{{- $id := printf "collapse-%d" now.UnixNano }}
{{- $heading := "" }}
{{- $style := "primary" }}
{{- $expand := false }}
{{- if .IsNamedParams }}
  {{- $heading = .Get "heading" }}
  {{- with .Get "style" }}{{ $style = . }}{{ end }}
  {{- with .Get "expand" }}{{ $expand = . }}{{ end }}
{{- else }}
  {{- $heading = .Get 0 }}
  {{- with .Get 1 }}{{ $style = . }}{{ end }}
  {{- with .Get 2 }}{{ $expand = . }}{{ end }}
{{- end -}}
<div
  class="collapse-wrapper border-2 border-start border-{{ $style }} ps-3 mb-3">
  <a type="button" class="collapse-toggle text-decoration-none text-{{ $style }} fw-bold" data-bs-toggle="collapse" href="#{{ $id }}" aria-expanded="{{ cond $expand `true` `false` }}" aria-controls="{{ $id }}" style="">
    {{- $heading | safeHTML | markdownify -}}
  </a>
  <div class="collapse mt-2 mb-3{{ cond $expand ` show` `` }}" id="{{ $id }}" style="">{{- .InnerDeindent | safeHTML -}}</div>
</div>

---

Then, use gallery/image inside of bs/collapse like this:

Test string **Test string** *Test String*

{{% collapse heading="Example heading" %}}

{{< gallery/image src="001:002" >}}

Some **example** *markdown* text.

{{% /collapse %}}

{{% collapse heading="Another *example* heading" %}}

{{< gallery/image src="001:002" >}}

Some **example** *markdown* text.

{{% /collapse %}}

Final *test* string

(shortcodes are used twice to check if they 'eats up' contents below of them by improperly render result)

Use any image named as 001.webp and 002.webp.

I think is minimal reproduction steps.

[razonyang]

Thanks for your example, will check this later.

[razonyang]

Just tested and reproduced this issue, as you said, it was caused by the indentations and empty line break.
I created an alternative PR #33, please feel free to test with the branch patch-nested-shortcode.

Though we can fix this this way, it's not recommend to combine RAW HTML shortcode and Markdown content, in this case,

1. gallery/image.html produces HTML markup.
2. But collapse (with %) parse the HTML markup generated by gallery/image.html again as Markdown syntax.

It will produce unexpected similar issues if the Markdown parser doesn't recognize it correctly.

Besides, I don't like to use nested shortcodes recently, you'll noticed that the inner shortcode changes won't be hot-reload, you've to restart server and see the changes.

[razonyang]

Alternatively, to avoid similar issues, you can pass the markdown content to gallery/image, and use RenderString (or sthelse) to render it. But as I mentioned, inner shortcode (nested shortcode) changes may not be live-reload...

See https://discourse.gohugo.io/t/nested-shortcodes-seems-wont-be-reloaded-after-modifying/45616/2.

I don't have ideal solution for this, please share if you found one.

But sure, we can fix this issue by merging #33 for this case, I'm looking forward your feedback.