Tab shortcut: Console error if tab name contains spaces

[andreaslennartz]

Hi,
thanks again for this wonderful hugo theme (and it has become actually quite more), and also for maintaining and updating it. I really appreciate all the hard work that you have put into this documentation theme.

Just encountered a minor bug after upgrading to Doks 1.8.0 (or is thulite now?):

I am using the shortcode <tabs> and <tab name="xx"> in my markdown.
Works fine so far, but after updating (and perhaps it was there before as well) I saw this console exception was thrown:

Here is the code for the tabs:

{{< tabs "create-new-site" >}}
{{< tab "Dynamic TableCopy" >}}
...
{{< /tab >}}
{{< tab "Import Csv" >}}
...
{{< /tab >}}
{{< /tabs >}}

It was only thrown after clicking on the tab itself (so changing the active tab). I am using the latest Edge browser.

After removing the space in the names, the error disappeared. I guess that Chromium now complains if spaces are used in Ids.

In this case , the tabs.html shortcode contains this: data-toggle-tab="{{ $tab.Name }}" which is the root cause of the error (if the name contains spaces).

So, for the next version, could you strip off the spaces of the name when using them as Id's in the shortcode? I am not quite sure how this is translated into the hugo syntax, just assuming a function like this exists, and that it will be a quick fix?

Thanks again for your support,

Andreas

[andreaslennartz]

Just created the shortcode tabs.html as a workaround:

<!--
  Based on: https://github.com/alex-shpak/hugo-book/blob/master/layouts/shortcodes/tabs.html
-->

{{ if .Inner }}{{ end }}
{{ $id := .Get 0 }}
{{ $group := printf "tabs-%s" $id }}

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
  {{ range $index, $tab := .Scratch.Get $group -}}
    <button data-toggle-tab="{{ replaceRE "(\\s)" "" $tab.Name }}" class="nav-link{{ if not $index }} active{{ end }}" id="{{ printf "%s-%d" $group $index }}-tab" data-bs-toggle="tab" data-bs-target="#{{ printf "%s-%d" $group $index }}" type="button" role="tab" aria-controls="{{ printf "%s-%d" $group $index }}" aria-selected="true">
      {{ $tab.Name -}}
    </button>
  {{ end -}}
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  {{ range $index, $tab := .Scratch.Get $group -}}
    <div data-pane="{{ replaceRE "(\\s)" "" $tab.Name }}" class="tab-pane fade{{ if not $index }} show active{{ end }}" id="{{ printf "%s-%d" $group $index }}" role="tabpanel" aria-labelledby="{{ printf "%s-%d" $group $index }}-tab" tabindex="0">
      {{ .Content | $.Page.RenderString -}}
    </div>
  {{ end -}}
</div>