From 845c5bb422d3667e19981dba956d31f9e7590cd3 Mon Sep 17 00:00:00 2001 From: ladybluenotes Date: Thu, 1 Jan 2026 21:14:30 -0800 Subject: [PATCH 1/4] fix: clean up codeblock styles and improve tab layout --- src/components/CodeBlock.tsx | 3 +-- src/components/Tabs.tsx | 10 +++++----- src/styles/app.css | 4 ---- src/utils/markdown/plugins/parseCommentComponents.ts | 2 +- 4 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx index ce137ffa2..ebee87245 100644 --- a/src/components/CodeBlock.tsx +++ b/src/components/CodeBlock.tsx @@ -167,7 +167,6 @@ export function CodeBlock({ setCodeElement(
pre]:h-full [&>pre]:rounded-none' : '', )} @@ -181,7 +180,7 @@ export function CodeBlock({ return (
-
+
{tabs.map((tab) => { return ( -
+
{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-50 dark:hover:bg-gray-800 rounded-t-md ${ activeSlug === tab.slug - ? 'border-current text-current' + ? 'border-current text-current bg-gray-900' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200' }`} > {options[0] ? ( - + ) : null} {tab.name} diff --git a/src/styles/app.css b/src/styles/app.css index 8fc5d9d7d..ede8c6e0e 100644 --- a/src/styles/app.css +++ b/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; } diff --git a/src/utils/markdown/plugins/parseCommentComponents.ts b/src/utils/markdown/plugins/parseCommentComponents.ts index 62d0154e9..ccf823b73 100644 --- a/src/utils/markdown/plugins/parseCommentComponents.ts +++ b/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:' From 6ca8383c34df6914d6f0aed434110203b8f6302f Mon Sep 17 00:00:00 2001 From: ladybluenotes Date: Thu, 1 Jan 2026 21:28:06 -0800 Subject: [PATCH 2/4] fix: enhance tab styles for improved visibility and layout --- src/components/Tabs.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index f5be664d2..87bd849c2 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -24,7 +24,7 @@ export function Tabs({ tabs, id, children }: TabsProps) { return (
-
+
{tabs.map((tab) => { return ( -
+
{children.map((child, index) => { const tab = tabs[index] if (!tab) return null @@ -76,9 +76,9 @@ 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 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-t-md ${ + 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 bg-gray-900' + ? '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' }`} > From db82b710c5b9155fc8ba954e551923d70c986c00 Mon Sep 17 00:00:00 2001 From: ladybluenotes Date: Thu, 1 Jan 2026 21:33:56 -0800 Subject: [PATCH 3/4] fix: improve heading collection logic within tab components --- src/utils/markdown/plugins/collectHeadings.ts | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/src/utils/markdown/plugins/collectHeadings.ts b/src/utils/markdown/plugins/collectHeadings.ts index 21e020b9d..c058783c0 100644 --- a/src/utils/markdown/plugins/collectHeadings.ts +++ b/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) { @@ -39,4 +66,4 @@ export function rehypeCollectHeadings( file.data.headings = headings } } -} +} \ No newline at end of file From bc5b8e1cada3ac6741a38cdb1a4d8fd1898d22b9 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 3 Jan 2026 17:23:29 +0000 Subject: [PATCH 4/4] ci: apply automated fixes --- src/utils/markdown/plugins/collectHeadings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/markdown/plugins/collectHeadings.ts b/src/utils/markdown/plugins/collectHeadings.ts index c058783c0..c912d1736 100644 --- a/src/utils/markdown/plugins/collectHeadings.ts +++ b/src/utils/markdown/plugins/collectHeadings.ts @@ -66,4 +66,4 @@ export function rehypeCollectHeadings( file.data.headings = headings } } -} \ No newline at end of file +}