feat: add package manager tabs component and integrate with Markdown parser

Author: LadyBluenotes

src/components/Markdown.tsx

@@ -13,6 +13,8 @@ import { renderMarkdown } from '~/utils/markdown'
 import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 import { Tabs } from '~/components/Tabs'
 import { CodeBlock } from './CodeBlock'
+import { PackageManagerTabs } from './PackageManagerTabs'
+import type { Framework } from '~/libraries/types'
 
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -112,6 +114,7 @@ const options: HTMLReactParserOptions = {
       if (domNode.name === 'md-comment-component') {
         const componentName = domNode.attribs['data-component']
         const rawAttributes = domNode.attribs['data-attributes']
+        const pmMeta = domNode.attribs['data-package-manager-meta']
         const attributes: Record<string, any> = {}
         try {
           Object.assign(attributes, JSON.parse(rawAttributes))
@@ -121,9 +124,39 @@ const options: HTMLReactParserOptions = {
 
         switch (componentName?.toLowerCase()) {
           case 'tabs': {
+            // Check if this is a package-manager tabs (has metadata)
+            if (pmMeta) {
+              try {
+                const { packagesByFramework, mode } = JSON.parse(pmMeta)
+                const id =
+                  attributes.id ||
+                  `package-manager-tabs-${Math.random().toString(36).slice(2, 9)}`
+                const frameworks = Object.keys(
+                  packagesByFramework,
+                ) as Framework[]
+
+                return (
+                  <PackageManagerTabs
+                    id={id}
+                    packagesByFramework={packagesByFramework}
+                    mode={mode}
+                    frameworks={frameworks}
+                  />
+                )
+              } catch {
+                // Fall through to default tabs if parsing fails
+              }
+            }
+
+            // Default tabs variant
             const tabs = attributes.tabs
             const id =
               attributes.id || `tabs-${Math.random().toString(36).slice(2, 9)}`
+
+            if (!tabs || !Array.isArray(tabs)) {
+              return null
+            }
+
             const panelElements = domNode.children?.filter(
               (child): child is Element =>
                 child instanceof Element && child.name === 'md-tab-panel',

src/components/PackageManagerTabs.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { useCurrentFramework } from './FrameworkSelect'
+import { useLocalStorage } from '~/utils/useLocalStorage'
+import { Tabs, type TabDefinition } from './Tabs'
+import { CodeBlock } from './CodeBlock'
+import type { Framework } from '~/libraries/types'
+
+type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
+type InstallMode = 'install' | 'dev-install'
+
+type PackageManagerTabsProps = {
+  id: string
+  packagesByFramework: Record<string, string>
+  mode: InstallMode
+  frameworks: Framework[]
+}
+
+const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
+
+function getInstallCommand(
+  packageManager: PackageManager,
+  packages: string,
+  mode: InstallMode,
+): string {
+  if (mode === 'dev-install') {
+    switch (packageManager) {
+      case 'npm':
+        return `npm i -D ${packages}`
+      case 'pnpm':
+        return `pnpm add -D ${packages}`
+      case 'yarn':
+        return `yarn add -D ${packages}`
+      case 'bun':
+        return `bun add -d ${packages}`
+    }
+  }
+
+  // install mode
+  switch (packageManager) {
+    case 'npm':
+      return `npm i ${packages}`
+    case 'pnpm':
+      return `pnpm add ${packages}`
+    case 'yarn':
+      return `yarn add ${packages}`
+    case 'bun':
+      return `bun add ${packages}`
+  }
+}
+
+export function PackageManagerTabs({
+  id,
+  packagesByFramework,
+  mode,
+  frameworks,
+}: PackageManagerTabsProps) {
+  const { framework: currentFramework } = useCurrentFramework(frameworks)
+  const [storedPackageManager, setStoredPackageManager] =
+    useLocalStorage<PackageManager>('packageManager', PACKAGE_MANAGERS[0])
+
+  // Normalize framework key to lowercase for lookup
+  const normalizedFramework = currentFramework.toLowerCase()
+  const packages = packagesByFramework[normalizedFramework]
+
+  // Hide component if current framework not in package list
+  if (!packages) {
+    return null
+  }
+
+  // Use stored package manager if valid, otherwise default to first one
+  const selectedPackageManager = PACKAGE_MANAGERS.includes(storedPackageManager)
+    ? storedPackageManager
+    : PACKAGE_MANAGERS[0]
+
+  // Generate tabs for each package manager
+  const tabs: TabDefinition[] = PACKAGE_MANAGERS.map((pm) => ({
+    slug: pm,
+    name: pm,
+    headers: [],
+  }))
+
+  // Generate children (command blocks) for each package manager
+  const children = PACKAGE_MANAGERS.map((pm) => {
+    const command = getInstallCommand(pm, packages, mode)
+    return (
+      <CodeBlock key={pm}>
+        <code className="language-bash">{command}</code>
+      </CodeBlock>
+    )
+  })
+
+  return (
+    <Tabs
+      id={id}
+      tabs={tabs}
+      children={children}
+      activeSlug={selectedPackageManager}
+      onTabChange={(slug) => setStoredPackageManager(slug as PackageManager)}
+    />
+  )
+}

src/components/Tabs.tsx

@@ -12,16 +12,28 @@ export type TabsProps = {
   tabs: Array<TabDefinition>
   children: Array<React.ReactNode>
   id: string
+  activeSlug?: string
+  onTabChange?: (slug: string) => void
 }
 
-export function Tabs({ tabs, id, children }: TabsProps) {
+export function Tabs({ tabs, id, children, activeSlug: controlledActiveSlug, onTabChange }: TabsProps) {
   const params = useParams({ strict: false })
   const framework = 'framework' in params ? params.framework : undefined
 
-  const [activeSlug, setActiveSlug] = React.useState(
+  const [internalActiveSlug, setInternalActiveSlug] = React.useState(
     () => tabs.find((tab) => tab.slug === framework)?.slug || tabs[0].slug,
   )
 
+  // Use controlled state if provided, otherwise use internal state
+  const activeSlug = controlledActiveSlug ?? internalActiveSlug
+  const setActiveSlug = React.useCallback((slug: string) => {
+    if (onTabChange) {
+      onTabChange(slug)
+    } else {
+      setInternalActiveSlug(slug)
+    }
+  }, [onTabChange])
+
   return (
     <div className="not-prose my-4">
       <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">
@@ -65,7 +77,7 @@ const Tab = ({
   id: string
   tab: TabDefinition
   activeSlug: string
-  setActiveSlug: React.Dispatch<React.SetStateAction<string>>
+  setActiveSlug: (slug: string) => void
 }) => {
   const option = React.useMemo(
     () => frameworkOptions.find((o) => o.value === tab.slug),

src/utils/markdown/plugins/transformTabsComponent.ts

@@ -1,28 +1,135 @@
-import { visit } from 'unist-util-visit'
 import { toString } from 'hast-util-to-string'
 
 import { headingLevel, isHeading, slugify } from './helpers'
 
+type InstallMode = 'install' | 'dev-install'
+
 type HastNode = {
   type: string
   tagName: string
   properties?: Record<string, unknown>
   children?: HastNode[]
 }
 
-type HastElement = HastNode
-
 type TabDescriptor = {
   slug: string
   name: string
-  headers: string[]
 }
 
 type TabExtraction = {
   tabs: TabDescriptor[]
   panels: HastNode[][]
 }
 
+type PackageManagerExtraction = {
+  packagesByFramework: Record<string, string>
+  mode: InstallMode
+}
+
+function parseAttributes(node: HastNode): Record<string, string> {
+  const rawAttributes = node.properties?.['data-attributes']
+  if (typeof rawAttributes === 'string') {
+    try {
+      return JSON.parse(rawAttributes)
+    } catch {
+      return {}
+    }
+  }
+  return {}
+}
+
+
+function resolveMode(attributes: Record<string, string>): InstallMode {
+  const mode = attributes.mode?.toLowerCase()
+  return mode === 'dev-install' ? 'dev-install' : 'install'
+}
+
+function normalizeFrameworkKey(key: string): string {
+  return key.trim().toLowerCase()
+}
+
+/**
+ * Parse a line like "react: @tanstack/react-query @tanstack/react-query-devtools"
+ * Returns { framework: 'react', packages: '@tanstack/react-query @tanstack/react-query-devtools' }
+ */
+function parseFrameworkLine(text: string): {
+  framework: string
+  packages: string
+} | null {
+  const colonIndex = text.indexOf(':')
+  if (colonIndex === -1) {
+    return null
+  }
+
+  const framework = normalizeFrameworkKey(text.slice(0, colonIndex))
+  const packages = text.slice(colonIndex + 1).trim()
+
+  if (!framework || !packages) {
+    return null
+  }
+
+  return { framework, packages }
+}
+
+function extractPackageManagerData(
+  node: HastNode,
+  mode: InstallMode,
+): PackageManagerExtraction | null {
+  const children = node.children ?? []
+  const packagesByFramework: Record<string, string> = {}
+
+  // Recursively extract text from all children (including nested in <p> tags)
+  function extractText(nodes: any[]): string {
+    let text = ''
+    for (const node of nodes) {
+      if (node.type === 'text') {
+        text += node.value
+      } else if (node.type === 'element' && node.children) {
+        text += extractText(node.children)
+      }
+    }
+    return text
+  }
+
+  const allText = extractText(children)
+  const lines = allText.split('\n')
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed) continue
+
+    const parsed = parseFrameworkLine(trimmed)
+    if (parsed) {
+      packagesByFramework[parsed.framework] = parsed.packages
+    }
+  }
+
+  if (Object.keys(packagesByFramework).length === 0) {
+    return null
+  }
+
+  return { packagesByFramework, mode }
+}
+
+function createPackageManagerHeadings(): HastNode[] {
+  const packageManagers = ['npm', 'pnpm', 'yarn', 'bun']
+  const nodes: HastNode[] = []
+
+  for (const pm of packageManagers) {
+    // Create heading for package manager
+    const heading: any = {
+      type: 'element',
+      tagName: 'h1',
+      properties: { id: pm },
+      children: [{ type: 'text', value: pm }],
+    }
+
+    nodes.push(heading)
+  }
+
+  return nodes
+}
+
 function extractTabPanels(node: HastNode): TabExtraction | null {
   const children = node.children ?? []
   const headings = children.filter(isHeading)
@@ -60,7 +167,6 @@ function extractTabPanels(node: HastNode): TabExtraction | null {
         tabs.push({
           slug: headingId,
           name: toString(child as any),
-          headers: [],
         })
 
         currentPanel = []
@@ -84,24 +190,35 @@ function extractTabPanels(node: HastNode): TabExtraction | null {
     return null
   }
 
-  panels.forEach((panelChildren, index) => {
-    const nestedHeadings: string[] = []
-    visit(
-      { type: 'root', children: panelChildren },
-      'element',
-      (child: HastNode) => {
-        if (isHeading(child) && typeof child.properties?.id === 'string') {
-          nestedHeadings.push(String(child.properties.id))
-        }
-      },
-    )
-    tabs[index]!.headers = nestedHeadings
-  })
 
   return { tabs, panels }
 }
 
 export function transformTabsComponent(node: HastNode) {
+  const attributes = parseAttributes(node)
+  const variant = attributes.variant?.toLowerCase()
+
+  // Handle package-manager variant
+  if (variant === 'package-manager') {
+    const mode = resolveMode(attributes)
+    const result = extractPackageManagerData(node, mode)
+
+    if (!result) {
+      return
+    }
+
+    // Replace children with package manager headings
+    node.children = createPackageManagerHeadings()
+
+    // Store metadata for the React component
+    node.properties = node.properties || {}
+    node.properties['data-package-manager-meta'] = JSON.stringify({
+      packagesByFramework: result.packagesByFramework,
+      mode: result.mode,
+    })
+  }
+
+  // Handle default tabs variant
   const result = extractTabPanels(node)
   if (!result) {
     return