Skip to content

Add shortcode for Tabs

Sarah German requested to merge 15-tabs-shortcode into main

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
image image
image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Visit the shortcodes page to demo the tabs: http://localhost:1313/shortcodes/#tabs
  3. 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.

Edited by Sarah German

Merge request reports