Rewrite Hugo shortcode markup on in-app help pages
What does this MR do and why?
When the GitLab Docs website relaunches on Hugo, it will make use of shortcodes, which allow us to render templated elements beyond basic markdown.
In plain text/markdown files, shortcodes look like this:
{{< history >}}
- Introduced in [GitLab 17.0](https://about.gitlab.com/releases/2024/05/16/gitlab-17-0-released/)
- Deprecated in GitLab 17.1
{{< /history >}}
And on the website, these history blocks render like this:
This is a list of all the shortcodes we currently use on the website: https://new.docs.gitlab.com/shortcodes/
The GitLab product also renders a basic view of docs pages, under /help, when configured to use the built-in markdown pages. This view is more like plain markdown, and is not the default behavior, but users expect a more polished-looking page (no raw markup like shortcode tags).
While we cannot support a full render of something like tabs on both the website and the in-product basic help pages right now, we can at least provide methods to allow shortcodes to fall back to a more readable format.
This MR adds logic to the help controller to override rendering of shortcodes, providing basic text-only fallbacks for each shortcode.
References
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After |
|---|---|
|
|
|
|
|
|
|
|
How to set up and validate locally
- In GDK, update your settings to use the built-in help pages: under Admin > Settings > Preferences > Help page, set the "Documentation pages URL" field to empty instead of the default, docs.gitlab.com
- Because we are preparing for docs changes that have not happened yet, copy this test page to
doc/shortcodes.md.- You should now see the test page here: http://localhost:3000/help/shortcodes.md
- Compare the page view on this branch vs
master. Onmaster, without these changes, shortcode markup is visible to the reader. On this branch, shortcode markup is no longer visible, and appropriate fallbacks are rendered.
Intended fallbacks:
- Alert, details shortcodes: shortcode tags removed
- History shortcode: tags removed, "Version history" header above. Header level is one level below the header preceding it (e.g, if this is below an h2, this will be an h3).
- Tabs shortcode: tags removed, tab titles become headers of the appropriate level (same logic as for history labels)
- Icon shortcode: shortcode markup replaced with
**{$iconName}**- It would be cooler if we could render the actual icon, but there's not an existing way to do this from markdown, and it's not worth adding one for this purpose. Using
**{iconName}**just matches the current pre-Hugo behavior).
- It would be cooler if we could render the actual icon, but there's not an existing way to do this from markdown, and it's not worth adding one for this purpose. Using








