Markdown Tab Component

[ryyppy]

The official ReasonML docs started using Docusaurus' tabable component to make the code examples more compact:

We need an equivalent to represent the same code snippet in different languages and make them tabbable.

[ryyppy]

Thought about the design of this:

Docusaurus is using html comment strings to do the component injection. We don't need to do that, we can use MDX to do the dirty bits, leading to a much cleaner solution. This is how I'd imagine the markdown to look like:

<CodeTabs>

```re
let a = 1 + 1;
```

```js
const a = 1 + 1;
```

</CodeTabs>

Here, CodeTabs is injected as a shortcode. It's globally available to our editors. Note how we placed a newline after the opening tag / before the closing tag. This will instruct MDX to parse and pass the children as markdown components.

The Tab component has the same look and feel as a normal code example box, but displays available languages in the top right corner. Clicking on a language will toggle to the appropriate content.

Implementation wise, the component would need to look at its children, checking the mdxType to be code and then reuse some of the Markdown.Code logic to build the TabComponent (also mostly copy paste of the CodeExample component).

[woeps]

In the Screenshot the tabs are titled "Reason" and "Output". Where would the CodeTabs component get this information from? How would it handle several codeblocks of the same language?

[ryyppy]

@woeps I find Output to be a very weird description... would have been much more understandable if it'd be called JS or... ML .. depending on what the output actually is!

How would it handle several codeblocks of the same language? - That would be a "real tab component" with actual tabs (maybe CodeTabs should actually be called something like CodeToggle to disambiguate), but it would be another compoent then I guess. I am mostly referring on toggling between different representations of e.g. one Reason snippet to JS or ML.

[woeps]

I thought this might be some preparation for larger examples, where each "tab" would represent a file/module. Now, I see this was a misconception of mine. Then I guess the build will just fail with multiple code blocks of the same lang, which seems fine in this case.