gethugothemes/dot-hugo

FAQ shortcode produces invalid HTML IDs

jamiek23 opened this issue · 1 comments

The FAQ shortcode is great feature, but seems to produce invalid IDs when encountering certain characters. Most notably '.' and '/' characters. This in turn stops the accordion from Bootstrap working properly.

Example markdown:

{{< faq "My computer sometimes / always stops working" >}}
Try turning it off and on again.
{{</ faq >}}

Which in turn produces:

<div class="card mb-4 rounded-0 shadow border-0">
  <div class="card-header rounded-0 bg-white border p-0 border-0">
    <a class="card-link h4 d-flex tex-dark mb-0 py-3 px-4 justify-content-between" data-toggle="collapse" href="#my-computer-sometimes-%2f-always-stops-working">
      <span>My computer sometimes / always stops working</span> <i class="ti-plus text-primary text-right"></i>
    </a>
  </div>
  <div id="my-computer-sometimes-/-always-stops-working" class="collapse" data-parent="#accordion">
    <div class="card-body font-secondary text-color">Try turning it off and on again.</div>
  </div>
</div>

I think the problematic lines are as follows:
https://github.com/themefisher/dot/blob/6f6257751b70c8493d5b815208d38c7802323831/layouts/shortcodes/faq.html#L5
https://github.com/themefisher/dot/blob/6f6257751b70c8493d5b815208d38c7802323831/layouts/shortcodes/faq.html#L9

Replacing urlize with anchorize has fixed it on my local copy. I'm happy to do a pull request with this change in? (Will change how the IDs were being generated, though.)

Hey @jamiek23

Thanks for your concern, You are right, it was an issue, but I fixed it now. Thanks for being with themefisher.