Implement a tab component and an associated MDX extension.

SilasBerger / teaching-website

My teaching website 👨‍🏫

https://teach.silasberger.ch

1 stars 0 forks source link

Implement a tab component and an associated MDX extension. #16

Closed SilasBerger closed 7 months ago

SilasBerger commented 8 months ago

See feature/tabs-component for a first approach.

The MDX syntax should look about as follows:

# Instructions
Here are the instructions for each operating system.

::Tabs
:Tab :mdi-microsoft-windows: Windows
This is some text about Windows.

:Tab :mdi-apple: macOS
This is some text about macOS.

:Tab :mdi-linux: Linux
<details>
  <summary>See Linux instructions...</summary>
  <div>The instructions for Linux.</div>
</details>

::EndTabs

SilasBerger commented 8 months ago

As for the visual design of the tab container, this is what it might look like:

lebalz commented 7 months ago

Suggestion: usage of docusaurus' tab components and then swizzling the components/styles as needed...? https://docusaurus.io/docs/markdown-features/tabs

SilasBerger commented 7 months ago

Suggestion: usage of docusaurus' tab components and then swizzling the components/styles as needed...? https://docusaurus.io/docs/markdown-features/tabs

Didn't know they already had that 😆 That's definitely the better solution, thanks!