Add shortcode for Tabs
What does this MR do and why?
Adds a shortcode for tabbed content.
This is almost entirely copied from the Nanoc version, with a few exceptions:
- Adjusted a few CSS classes to work with Tailwind
- Adds the Hugo-specific shortcode templates
- Adds a Jest test for the
getNextUntil
function
This MR is part 1 of 2 for #15 (closed). This MR does not migrate existing tabs to this new format; we'll do that in a follow-up MR.
Known limitation: We still are unable to render Mermaid charts within tabs. If we need to support this, we'll need to prioritize gitlab-org/gitlab-docs#1276.
Screenshots, screen recordings, or links to review app
Example tabs | Markup |
---|---|
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. -
Visit the shortcodes page to demo the tabs: http://localhost:1313/shortcodes/#tabs -
Try adding tabs to another page, and/or modify the tabs example on the shortcode page.
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.
Edited by Sarah German