FAQ shortcode produces invalid HTML IDs
jamiek23 opened this issue · 1 comments
jamiek23 commented
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.)