Add support for tabs / tabset panels

[astroDimitrios]

Closes https://github.com/carpentries/varnish/issues/32.

This request adds in css styling and javascript for tab and group-tab panels.

The css currently styles the panels like this: (with an outline on hover for non-active tabs which I forgot to screenshot)

The javascript makes the tabs navigable using a keyboard and syncs any group-tabs. The selected group-tab persists over the session. So say if you have group-tabs with names Linux, and Windows etc like below, and select Windows on one page the JS will:

• Sync all group-tabs to Windows
• Store the selection
• If the session reloads or you move to the next episode you will still see the Windows tabs since it loads the stored selection

I have made the decision to autoload tabs when clicked or navigated to using the keyboard arrows. Not sure if this was correct so happy to hear thoughts on this.

The JS was adapted from sphinx-tabs which is MIT license.

[astroDimitrios]

To test the new tab and group-tab you will also need:

• https://github.com/carpentries/sandpaper/pull/571
• https://github.com/carpentries/pegboard/pull/148

[ErinBecker]

Thank you for this PR @astroDimitrios, and for the excellent description and documentation. I do see this feature being very useful, especially for our workshop setup pages (for example https://datacarpentry.org/ecology-workshop/setup-python-workshop.html), which are currently using the spoiler callout class to hide different setup options. I know @froggleston responded in Slack to let you know we'll be taking a look at this in the next couple of weeks and wanted to also jump in to say I'm excited to dig in and test this new feature!

[tobyhodges]

@astroDimitrios I'm curious! Could you give an example here of how this would be encoded in the source Markdown of an episode, please? Or share a link to documentation where I could learn more on my own?

[astroDimitrios]

@astroDimitrios I'm curious! Could you give an example here of how this would be encoded in the source Markdown of an episode, please? Or share a link to documentation where I could learn more on my own?

Hello! Apologies it seems I only added in the .md syntax in the corresponding sandpaper pull request: https://github.com/carpentries/sandpaper/pull/571

But basically:

::: tab

# gnu

1

# Intel

2

# Craaaay

This is some text before the code block.

```fortran
  print *, 'WHAT is Cray today'

Text after

:::

or for a group tab:

::: group-tab

Linux

1

Windows

2

Archer

3

:::

::: group-tab

Linux

4

Windows

5

Archer

6

:::

[tobyhodges]

Great, thank you for sharing @astroDimitrios. Sorry I did not think of going to check the other PRs! This looks very simple from an authoring perspective, which is encouraging.