Redesign tab bars

Author: satya164

docusaurus.config.js

@@ -1,4 +1,4 @@
-import remarkNpm2Yarn from '@docusaurus/remark-plugin-npm2yarn';
+import remarkNpm2Yarn from './src/plugins/remark-npm2yarn.mjs';
 import rehypeCodeblockMeta from './src/plugins/rehype-codeblock-meta.mjs';
 import rehypeStaticToDynamic from './src/plugins/rehype-static-to-dynamic.mjs';
 import rehypeVideoAspectRatio from './src/plugins/rehype-video-aspect-ratio.mjs';

src/css/custom.css

@@ -176,7 +176,7 @@
 
   --docusaurus-highlighted-code-line-bg: hsla(45, 97%, 72%, 0.3);
 
-  --codeblock-background-color: #f6f8fa;
+  --codeblock-background-color: #fafafa;
 }
 
 :root[data-theme='dark'] {
@@ -313,7 +313,7 @@
 
   --docusaurus-highlighted-code-line-bg: hsla(45, 77%, 25%, 0.3);
 
-  --codeblock-background-color: #282a35;
+  --codeblock-background-color: #292c33;
 }
 
 :not([data-theme='dark']) body {
@@ -617,51 +617,99 @@ header {
   content: '← ';
 }
 
+.tabs-container {
+  --tabs-border-color: var(--ifm-toc-border-color);
+}
+
 .tabs {
+  position: relative;
   font-weight: var(--ifm-font-weight-semibold);
+  gap: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid var(--tabs-border-color);
+    z-index: 0;
+  }
 }
 
 .tabs__item {
-  border-bottom: 2px solid var(--ifm-toc-border-color);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  position: relative;
+  z-index: 1;
+  border: 1px solid transparent;
+  border-bottom-color: transparent;
+  border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;
+  background-color: transparent;
+
+  &:hover:not(.tabs__item--active) {
+    border-bottom-color: transparent;
+    background-color: var(--ifm-hover-overlay);
+  }
 }
 
 .tabs__item--active,
 .tabs__item--active:hover {
-  border-bottom-color: var(--ifm-tabs-color-active-border);
+  background-color: var(--ifm-background-surface-color);
+  border-color: var(--tabs-border-color);
+  border-bottom-color: var(--ifm-background-surface-color);
+  color: var(--ifm-tabs-color-active);
 }
 
 .tabs-container:has(
     > .margin-top--md > [role='tabpanel'] > .theme-code-block:only-child
   ):not(:has(> .margin-top--md > [role='tabpanel'] > :nth-child(2))) {
-  background-color: var(--codeblock-background-color);
-  border-radius: var(--ifm-code-border-radius);
-
   & > .margin-top--md {
     margin-top: 0 !important;
   }
 
   & > .tabs {
-    border-width: 1px 1px 0 1px;
-    border-style: solid;
-    border-color: var(--ifm-toc-border-color);
-    border-top-left-radius: var(--ifm-code-border-radius);
-    border-top-right-radius: var(--ifm-code-border-radius);
+    background-color: var(--codeblock-background-color);
+    border: 1px solid var(--ifm-toc-border-color);
+    border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0
+      0;
+
+    &::before {
+      display: none;
+    }
   }
 
   & > .tabs > .tabs__item {
-    border-top-right-radius: 0;
+    border: none;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
 
-    &:not(:first-child) {
-      border-top-left-radius: 0;
+    &:first-child {
+      border-top-left-radius: calc(var(--ifm-code-border-radius) - 1px);
     }
+
+    &:hover:not(.tabs__item--active) {
+      background-color: rgba(128, 128, 128, 0.1);
+    }
+  }
+
+  & > .tabs > .tabs__item--active,
+  & > .tabs > .tabs__item--active:hover {
+    background-color: transparent;
+    border-bottom-color: var(--ifm-tabs-color-active-border);
+  }
+
+  & [role='tabpanel'] > .theme-code-block:only-child {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
 
-[role='tabpanel'] > .theme-code-block:only-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.pm-icon {
+  width: 16px;
+  height: 16px;
+  margin: 0 0.5em 0 0;
+  vertical-align: -0.125em;
+  box-shadow: none;
 }
 
 .col:has(.table-of-contents) {

src/plugins/remark-npm2yarn.mjs

@@ -0,0 +1,93 @@
+import npmToYarn from 'npm-to-yarn';
+import { Parser } from 'acorn';
+import acornJsx from 'acorn-jsx';
+
+const parser = Parser.extend(acornJsx());
+
+function parseExpression(code) {
+  return parser.parse(code, { ecmaVersion: 'latest', sourceType: 'module' });
+}
+
+function createLabelWithIcon(pm) {
+  const value = `<><img className="pm-icon" src="/assets/pm/${pm}.svg" alt="" />${pm}</>`;
+
+  return {
+    type: 'mdxJsxAttributeValueExpression',
+    value,
+    data: { estree: parseExpression(value) },
+  };
+}
+
+function createTabItem({ code, node, pm }) {
+  return {
+    type: 'mdxJsxFlowElement',
+    name: 'TabItem',
+    attributes: [
+      { type: 'mdxJsxAttribute', name: 'value', value: pm },
+      { type: 'mdxJsxAttribute', name: 'label', value: createLabelWithIcon(pm) },
+    ],
+    children: [{ type: node.type, lang: node.lang, value: code }],
+  };
+}
+
+function transformNode(node, sync, converters) {
+  const npmCode = node.value;
+
+  return {
+    type: 'mdxJsxFlowElement',
+    name: 'Tabs',
+    attributes: sync
+      ? [{ type: 'mdxJsxAttribute', name: 'groupId', value: 'npm2yarn' }]
+      : [],
+    children: [
+      createTabItem({ code: npmCode, node, pm: 'npm' }),
+      ...converters.map((pm) =>
+        createTabItem({ code: npmToYarn(npmCode, pm), node, pm })
+      ),
+    ],
+  };
+}
+
+function createImportNode() {
+  const value =
+    "import Tabs from '@theme/Tabs'\nimport TabItem from '@theme/TabItem'";
+
+  return {
+    type: 'mdxjsEsm',
+    value,
+    data: { estree: parseExpression(value) },
+  };
+}
+
+export default function remarkNpm2Yarn(options = {}) {
+  const { sync = false, converters = ['yarn', 'pnpm', 'bun'] } = options;
+
+  return async (root) => {
+    const { visit } = await import('unist-util-visit');
+
+    let transformed = false;
+    let alreadyImported = false;
+
+    visit(root, (node) => {
+      if (node.type === 'mdxjsEsm' && node.value.includes('@theme/Tabs')) {
+        alreadyImported = true;
+      }
+
+      if (Array.isArray(node.children)) {
+        let i = 0;
+        while (i < node.children.length) {
+          const child = node.children[i];
+          if (child.type === 'code' && child.meta === 'npm2yarn') {
+            node.children[i] = transformNode(child, sync, converters);
+            transformed = true;
+          }
+          i++;
+        }
+      }
+    });
+
+    if (transformed && !alreadyImported) {
+      root.children.unshift(createImportNode());
+    }
+  };
+}