Sketch idea for tabs component and plugin.

content/material/Components-Gallery/09-Tab-Container.mdx

@@ -0,0 +1,22 @@
+# Tabs
+Here you can find all necessary instructions for your operating system.
+
+::Tabs
+:Tab :mdi-microsoft-windows: Windows
+Here's how to do it in Windows.
+
+:Tab :mdi-apple: macOS
+
+These are the required steps for macOS.
+
+:Tab :mdi-linux: Linux
+<details>
+  <summary>Do you really want to try?</summary>
+  <div>
+    If you're brave enough to use Linux (hats off to you), here's how to get it working (maybe probably).
+  </div>
+</details>
+
+::EndTabs
+
+We use this text to trigger rebuilds...

docusaurus.config.ts

@@ -7,6 +7,7 @@ import {SCRIPTS_ROOT} from "./config/builder-config";
 import * as osPath from "path";
 import { Logger } from './src/builder/util/logger';
 import remarkMdi from "./src/plugins/remark-mdi";
+import remarkTabs from "./src/plugins/remark-tabs";
 
 const siteConfig = loadSiteConfig();
 Logger.instance.info(`🔧 Building site '${siteConfig.siteId}'`);
@@ -23,6 +24,7 @@ const docsConfigs = scriptRoots.map((scriptRoot, index) => {
       routeBasePath: `${scriptRoot}`,
       sidebarPath: `./config/sidebars/${siteConfig.siteId}.sidebars.ts`,
       remarkPlugins: [
+        remarkTabs,
         remarkMdi,
       ]
     }

src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,53 @@
+$outside-padding: 0.7rem;
+
+.tabContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--ifm-pagination-nav-border-radius);
+  overflow: hidden;
+  box-shadow: var(--custom-global-shadow-lw);
+}
+
+.tabContainer .tabHeader {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  // background: linear-gradient(to top, #f5f5f5, #ffffff 40%);
+
+  //border-bottom: var(--ifm-hr-height) solid var(--ifm-hr-background-color);
+
+  .tab {
+    padding: $outside-padding;
+    cursor: pointer;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1.05rem;
+    background: none;
+    box-shadow: inset var(--custom-global-shadow-lw);
+    border: none;
+    border-right: var(--ifm-hr-height) solid var(--ifm-hr-background-color);
+    transition: color var(--ifm-transition-fast), box-shadow var(--ifm-transition-fast);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      color: var(--ifm-color-primary)
+    }
+
+    &.active {
+      color: var(--ifm-color-primary);
+      box-shadow: none;
+    }
+  }
+}
+
+.tabContainer .tabBody {
+  width: 100%;
+  display: flex;
+  padding: $outside-padding;
+}

src/components/Tabs/Tabs.tsx

@@ -0,0 +1,25 @@
+import React, {Children, ReactNode} from "react";
+import styles from "./Tabs.module.scss";
+import clsx from "clsx";
+
+export interface Props {
+  children?: React.ReactNode // TODO: Type to <Tab>
+}
+
+interface TabElement {
+  title: string;
+  node: ReactNode;
+}
+
+export default function ({children}: Props): React.ReactNode {
+  return (
+    <div className={styles.tabContainer}>
+      <div className={styles.tabHeader}>
+        <button className={styles.tab}>TBD</button>
+      </div>
+      <div className={styles.tabBody}>
+        Here is some text about macOS.
+      </div>
+    </div>
+  );
+};

src/plugins/remark-tabs.ts

@@ -0,0 +1,47 @@
+import {Transformer} from "unified";
+
+import {Node, Parent} from "unist";
+import {visit} from "unist-util-visit";
+import {Directives} from "mdast-util-directive";
+
+
+/** @type {import('unified').Plugin<[], MdastRoot>} */
+export default function remarkTabs(): Transformer {
+  return (mdast: Node) => {
+    console.log(mdast);
+
+    let tabsParent: Parent;
+    let tabsNode: Directives;
+    let endTabsNode: Directives;
+
+    visit(
+      mdast,
+      (node) => node.type === 'textDirective' || node.type === 'leafDirective',
+      (node: Directives, _, parent) => {
+        const tag = node.name.toLowerCase();
+        if (tag === 'tabs' || tag === 'endtabs') {
+          if (tabsParent && parent !== tabsParent) {
+            throw 'Unexpected tree: ::Tabs and ::EndTabs do not have the same parent.';
+          }
+          tabsParent = parent;
+        }
+        if (tag === 'tabs') {
+          tabsNode = node;
+        } else if (tag === 'endtabs') {
+          endTabsNode = node;
+        }
+    });
+
+    if (!(tabsNode && endTabsNode)) {
+      return;
+    }
+
+    const tabsIndex = tabsParent.children.indexOf(tabsNode);
+    const endTabsIndex = tabsParent.children.indexOf(endTabsNode);
+    const tabsContentRoot: Parent = {
+      type: 'root',
+      children: [...tabsParent.children].slice(tabsIndex + 1, endTabsIndex)
+    }
+    console.log(tabsContentRoot);
+  }
+}