Add a span around SVG shortcode output
What does this MR do and why?
Closes #89 (closed)
Nested shortcodes (like the icon inside the alert) render with malformed HTML if the inner shortcode doesn't have a wrapper element around it. Extra <p> tags are inserted in unexpected places (in this case, right in the middle of the SVG).
I didn't find documentation about this, but there are a few similar-looking issues in Hugo's GitHub issue queue (e.g, https://github.com/gohugoio/hugo/issues/1642, https://github.com/gohugoio/hugo/issues/10680).
Screenshots, screen recordings, or links to review app
http://localhost:1313/api/graphql/reference/
| Before | After |
|---|---|
|
|
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
Compile the site and visit the GraphQL reference page: http://localhost:1313/api/graphql/reference/
The alert box with the warning SVG in it should display as it does on the live site.
Other SVG icons should not be impacted.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Closes #89 (closed)