fix: tabs update (#624)

* fix: clean up codeblock styles and improve tab layout

* fix: enhance tab styles for improved visibility and layout

* fix: improve heading collection logic within tab components

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: LadyBluenotes

src/components/CodeBlock.tsx

@@ -167,7 +167,6 @@ export function CodeBlock({
 
       setCodeElement(
         <div
-          // className={`m-0 text-sm rounded-md w-full border border-gray-500/20 dark:border-gray-500/30`}
           className={twMerge(
             isEmbedded ? 'h-full [&>pre]:h-full [&>pre]:rounded-none' : '',
           )}
@@ -181,7 +180,7 @@ export function CodeBlock({
   return (
     <div
       className={twMerge(
-        'codeblock w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md [*[data-tab]_&]:only:border-0',
+        'codeblock w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md',
         props.className,
       )}
       style={props.style}

src/components/Tabs.tsx

@@ -24,7 +24,7 @@ export function Tabs({ tabs, id, children }: TabsProps) {
 
   return (
     <div className="not-prose my-4">
-      <div className="flex items-center justify-start gap-2 rounded-t-md border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide bg-white dark:bg-[#1a1b26]">
+      <div className="flex items-center justify-start gap-2 rounded-t-md border-1 border-b-none border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-950">
         {tabs.map((tab) => {
           return (
             <Tab
@@ -37,7 +37,7 @@ export function Tabs({ tabs, id, children }: TabsProps) {
           )
         })}
       </div>
-      <div className="border border-gray-500/20 rounded-b-md p-4 bg-white dark:bg-[#1a1b26]">
+      <div className="border border-gray-500/20 rounded-b-md p-4 bg-gray-100 dark:bg-gray-900">
         {children.map((child, index) => {
           const tab = tabs[index]
           if (!tab) return null
@@ -76,14 +76,14 @@ const Tab = ({
       title={tab.name}
       type="button"
       onClick={() => setActiveSlug(tab.slug)}
-      className={`inline-flex items-center justify-center gap-2 px-3 py-1.5 -mb-[1px] border-b-2 text-sm font-bold transition-colors ${
+      className={`inline-flex items-center justify-center gap-2 px-3 py-1.5 -mb-[1px] border-b-2 text-sm font-bold transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-md overflow-y-none ${
         activeSlug === tab.slug
-          ? 'border-current text-current'
+          ? 'border-current text-current bg-gray-100 dark:bg-gray-900'
           : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
       }`}
     >
       {options[0] ? (
-        <img src={options[0].logo} alt="" className="w-4 h-4" />
+        <img src={options[0].logo} alt="" className="w-4 h-4 -ml-1" />
       ) : null}
       <span>{tab.name}</span>
     </button>

src/styles/app.css

@@ -772,10 +772,6 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply bg-gray-100 dark:bg-gray-900;
 }
 
-[data-tab] > .codeblock:not(:only-child) pre {
-  @apply dark:bg-white/5! bg-black/5!;
-}
-
 [data-tab] > .markdown-alert [aria-label] svg {
   @apply stroke-current fill-current;
 }

src/utils/markdown/plugins/collectHeadings.ts

@@ -1,5 +1,7 @@
 import { visit } from 'unist-util-visit'
 import { toString } from 'hast-util-to-string'
+import type { Element, Root } from 'hast'
+import type { VFile } from 'vfile'
 
 import { isHeading } from './helpers'
 
@@ -9,19 +11,44 @@ export type MarkdownHeading = {
   level: number
 }
 
+const isTabsAncestor = (ancestor: Element) => {
+  if (ancestor.type !== 'element') {
+    console.log('skip')
+    return false
+  }
+
+  if (ancestor.tagName !== 'md-comment-component') {
+    console.log('skip')
+    return false
+  }
+
+  const component = ancestor.properties?.['data-component']
+  console.log('dont skip', component)
+  return typeof component === 'string' && component.toLowerCase() === 'tabs'
+}
+
 export function rehypeCollectHeadings(
-  tree,
-  file,
+  _tree: Root,
+  _file: VFile,
   initialHeadings?: MarkdownHeading[],
 ) {
   const headings = initialHeadings ?? []
 
-  return function collectHeadings(tree, file: any) {
-    visit(tree, 'element', (node) => {
+  return function collectHeadings(tree: Root, file?: VFile) {
+    visit(tree, 'element', (node: Element, _index, ancestors) => {
       if (!isHeading(node)) {
         return
       }
 
+      if (Array.isArray(ancestors)) {
+        const insideTabs = ancestors.some((ancestor) =>
+          isTabsAncestor(ancestor as Element),
+        )
+        if (insideTabs) {
+          return
+        }
+      }
+
       const id =
         typeof node.properties?.id === 'string' ? node.properties.id : ''
       if (!id) {

src/utils/markdown/plugins/parseCommentComponents.ts

@@ -1,6 +1,6 @@
 import { unified } from 'unified'
 import rehypeParse from 'rehype-parse'
-import { visit } from 'unist-util-visit'
+import { SKIP, visit } from 'unist-util-visit'
 
 const COMPONENT_PREFIX = '::'
 const START_PREFIX = '::start:'