Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for tabs / tabset panels #121

Merged
merged 5 commits into from
Apr 5, 2024

Conversation

astroDimitrios
Copy link
Contributor

Closes #32.

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

The css currently styles the panels like this:
tab
(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

group-tab

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.

Add css styling for tabs and javascript to make them keyboard navigable.
Add in group-tabs like sphinx-tabs has. These are persistent across sessions and pages.
@astroDimitrios
Copy link
Contributor Author

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

@ErinBecker
Copy link
Contributor

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
Copy link
Member

@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
Copy link
Contributor Author

@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: carpentries/sandpaper#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
Copy link
Member

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.

astroDimitrios and others added 3 commits February 26, 2024 18:27
Sometimes when hovering over a non-active tab header the outline is hidden. This should fix. This also text-underlines non-active tabs to emphasise the separation between the headers.
@froggleston froggleston merged commit c152f43 into carpentries:main Apr 5, 2024
1 check passed
@astroDimitrios astroDimitrios deleted the feature/tab-admonition branch April 5, 2024 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for tabset panels
4 participants