From 8db1b04b5687e433fb06f6f9a49ec5259eb92aff Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 16 Feb 2026 13:13:07 +1300
Subject: [PATCH 1/3] feat: filter markdown docs by framework and package
 manager

Add shared install command utility for server and client usage. Filter
markdown-only docs endpoints to respect framework and package manager
query params, with optional marker retention. Propagate current
framework into copy links so markdown exports match visible content.
---
 src/components/CopyPageDropdown.tsx           |  22 +-
 src/components/Doc.tsx                        |   1 +
 src/components/markdown/MarkdownContent.tsx   |  10 +-
 .../markdown/PackageManagerTabs.tsx           | 124 +---------
 ...ion.docs.framework.$framework.{$}[.]md.tsx |  18 +-
 .../$libraryId/$version.docs.{$}[.]md.tsx     |  21 +-
 src/utils/markdown/filterFrameworkContent.ts  | 233 ++++++++++++++++++
 src/utils/markdown/installCommand.ts          | 129 ++++++++++
 8 files changed, 432 insertions(+), 126 deletions(-)
 create mode 100644 src/utils/markdown/filterFrameworkContent.ts
 create mode 100644 src/utils/markdown/installCommand.ts

diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index 6a4da6fd..8e0ce100 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -92,23 +92,41 @@ type CopyPageDropdownProps = {
   branch?: string
   /** File path in the repo (e.g., 'src/blog/my-post.md'). Required if repo is provided. */
   filePath?: string
+  /** Current framework for filtering markdown content (appended as ?framework= query param) */
+  currentFramework?: string
 }
 
 export function CopyPageDropdown({
   repo,
   branch,
   filePath,
+  currentFramework,
 }: CopyPageDropdownProps = {}) {
   const [open, setOpen] = React.useState(false)
   const [copied, setCopied] = React.useState(false)
   const { notify } = useToast()
 
   // Determine if we should fetch from GitHub or use the page URL
-  const useGitHub = repo && branch && filePath
+  const useGitHub = repo === 'tanstack/tanstack.com'
   const gitHubUrl = useGitHub
     ? `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
     : null
-  const pageMarkdownUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}${typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') : ''}.md`
+  const pageMarkdownUrl = (() => {
+    const base = `${typeof window !== 'undefined' ? window.location.origin : ''}${typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') : ''}.md`
+    const params = new URLSearchParams()
+    if (currentFramework) {
+      params.set('framework', currentFramework)
+    }
+    // Read package manager from localStorage (same key as PackageManagerTabs)
+    if (typeof localStorage !== 'undefined') {
+      const pm = localStorage.getItem('packageManager')
+      if (pm && ['npm', 'pnpm', 'yarn', 'bun'].includes(pm)) {
+        params.set('pm', pm)
+      }
+    }
+    const queryString = params.toString()
+    return queryString ? `${base}?${queryString}` : base
+  })()
 
   const handleCopyPage = async () => {
     const urlToFetch = gitHubUrl || pageMarkdownUrl
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index c32e00b7..d267ceb9 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -164,6 +164,7 @@ export function Doc({
             libraryId={libraryId}
             libraryVersion={libraryVersion}
             pagePath={pagePath}
+            currentFramework={currentFramework}
             titleBarActions={
               setIsFullWidth ? (
                 <button
diff --git a/src/components/markdown/MarkdownContent.tsx b/src/components/markdown/MarkdownContent.tsx
index 86553d4a..187b84d7 100644
--- a/src/components/markdown/MarkdownContent.tsx
+++ b/src/components/markdown/MarkdownContent.tsx
@@ -26,6 +26,8 @@ type MarkdownContentProps = {
   libraryId?: string
   libraryVersion?: string
   pagePath?: string
+  /** Current framework for filtering markdown content */
+  currentFramework?: string
 }
 
 export function MarkdownContent({
@@ -41,6 +43,7 @@ export function MarkdownContent({
   libraryId,
   libraryVersion,
   pagePath,
+  currentFramework,
 }: MarkdownContentProps) {
   const renderMarkdownContent = () => {
     const markdownElement = htmlMarkup ? (
@@ -70,7 +73,12 @@ export function MarkdownContent({
         <div className="flex flex-wrap items-center justify-between gap-2">
           <DocTitle>{title}</DocTitle>
           <div className="flex items-center gap-2 shrink-0">
-            <CopyPageDropdown repo={repo} branch={branch} filePath={filePath} />
+            <CopyPageDropdown
+              repo={repo}
+              branch={branch}
+              filePath={filePath}
+              currentFramework={currentFramework}
+            />
             {titleBarActions}
           </div>
         </div>
diff --git a/src/components/markdown/PackageManagerTabs.tsx b/src/components/markdown/PackageManagerTabs.tsx
index 31bade62..1c6ba2a5 100644
--- a/src/components/markdown/PackageManagerTabs.tsx
+++ b/src/components/markdown/PackageManagerTabs.tsx
@@ -5,14 +5,11 @@ import { create } from 'zustand'
 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'
-  | 'local-install'
-  | 'create'
-  | 'custom'
+import {
+  getInstallCommand,
+  type PackageManager,
+  type InstallMode,
+} from '~/utils/markdown/installCommand'
 
 // Use zustand for cross-component synchronization
 // This ensures all PackageManagerTabs instances on the page stay in sync
@@ -38,117 +35,6 @@ type PackageManagerTabsProps = {
 
 const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
 
-function getInstallCommand(
-  packageManager: PackageManager,
-  packageGroups: string[][],
-  mode: InstallMode,
-): string[] {
-  const commands: string[] = []
-
-  if (mode === 'custom') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun ${pkgStr}`)
-          break
-      }
-    }
-  }
-
-  if (mode === 'create') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm create ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm create ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn create ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun create ${pkgStr}`)
-          break
-      }
-    }
-  }
-
-  if (mode === 'local-install') {
-    // Each group becomes one command line
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npx ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpx ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn dlx ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bunx ${pkgStr}`)
-          break
-      }
-    }
-    return commands
-  }
-
-  if (mode === 'dev-install') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm i -D ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm add -D ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn add -D ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun add -d ${pkgStr}`)
-          break
-      }
-    }
-    return commands
-  }
-
-  // install mode
-  for (const packages of packageGroups) {
-    const pkgStr = packages.join(' ')
-    switch (packageManager) {
-      case 'npm':
-        commands.push(`npm i ${pkgStr}`)
-        break
-      case 'pnpm':
-        commands.push(`pnpm add ${pkgStr}`)
-        break
-      case 'yarn':
-        commands.push(`yarn add ${pkgStr}`)
-        break
-      case 'bun':
-        commands.push(`bun add ${pkgStr}`)
-        break
-    }
-  }
-  return commands
-}
-
 export function PackageManagerTabs({
   packagesByFramework,
   mode,
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
index 6ace81ea..2c998e8c 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
+++ b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
@@ -1,6 +1,7 @@
 import { findLibrary, getBranch } from '~/libraries'
 import { loadDocs } from '~/utils/docs'
 import { notFound, createFileRoute } from '@tanstack/react-router'
+import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
 
 export const Route = createFileRoute(
   '/$libraryId/$version/docs/framework/$framework/{$}.md',
@@ -19,7 +20,13 @@ export const Route = createFileRoute(
           _splat: string
         }
       }) => {
-        const _url = new URL(request.url)
+        const url = new URL(request.url)
+        const pm = (url.searchParams.get('pm') || 'npm') as
+          | 'npm'
+          | 'pnpm'
+          | 'yarn'
+          | 'bun'
+        const keepMarkers = url.searchParams.get('keep_markers') === 'true'
 
         const { libraryId, version, framework, _splat: docsPath } = params
         const library = findLibrary(libraryId)
@@ -36,7 +43,14 @@ export const Route = createFileRoute(
           docsPath: `${root}/framework/${framework}/${docsPath}`,
         })
 
-        const markdownContent = `# ${doc.title}\n${doc.content}`
+        // Filter framework-specific content using framework from URL path
+        const filteredContent = filterFrameworkContent(doc.content, {
+          framework,
+          packageManager: pm,
+          keepMarkers,
+        })
+
+        const markdownContent = `# ${doc.title}\n${filteredContent}`
         const filename = (docsPath || 'file').split('/').join('-')
 
         return new Response(markdownContent, {
diff --git a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
index 4eac1af7..0320a007 100644
--- a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
+++ b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { getBranch, getLibrary, type LibraryId } from '~/libraries'
 import { loadDocs } from '~/utils/docs'
+import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
   server: {
@@ -12,7 +13,14 @@ export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
         request: Request
         params: { libraryId: string; version: string; _splat: string }
       }) => {
-        const _url = new URL(request.url)
+        const url = new URL(request.url)
+        const framework = url.searchParams.get('framework')
+        const pm = (url.searchParams.get('pm') || 'npm') as
+          | 'npm'
+          | 'pnpm'
+          | 'yarn'
+          | 'bun'
+        const keepMarkers = url.searchParams.get('keep_markers') === 'true'
 
         const { libraryId, version, _splat: docsPath } = params
         const library = getLibrary(libraryId as LibraryId)
@@ -24,7 +32,16 @@ export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
           docsPath: `${root}/${docsPath}`,
         })
 
-        const markdownContent = `# ${doc.title}\n${doc.content}`
+        // Filter framework-specific content only if framework is explicitly specified
+        const filteredContent = framework
+          ? filterFrameworkContent(doc.content, {
+              framework,
+              packageManager: pm,
+              keepMarkers,
+            })
+          : doc.content
+
+        const markdownContent = `# ${doc.title}\n${filteredContent}`
         const filename = (docsPath || 'file').split('/').join('-')
 
         return new Response(markdownContent, {
diff --git a/src/utils/markdown/filterFrameworkContent.ts b/src/utils/markdown/filterFrameworkContent.ts
new file mode 100644
index 00000000..66fa8d72
--- /dev/null
+++ b/src/utils/markdown/filterFrameworkContent.ts
@@ -0,0 +1,233 @@
+/**
+ * Filters framework-specific content blocks from raw markdown.
+ *
+ * Handles two types of blocks:
+ *
+ * 1. Framework blocks:
+ *   <!-- ::start:framework -->
+ *   # React
+ *   React-specific content...
+ *   # Vue
+ *   Vue-specific content...
+ *   <!-- ::end:framework -->
+ *
+ * 2. Package manager tabs (variant="package-manager"):
+ *   <!-- ::start:tabs variant="package-manager" mode="local-install" -->
+ *   react: create-tsrouter-app@latest my-app
+ *   solid: create-tsrouter-app@latest my-app --framework solid
+ *   <!-- ::end:tabs -->
+ */
+
+import {
+  getInstallCommand,
+  type PackageManager,
+  type InstallMode,
+} from './installCommand'
+
+type FilterOptions = {
+  framework?: string
+  packageManager?: PackageManager
+  /** Whether to keep the surrounding comment markers when filtering. Defaults to false. */
+  keepMarkers?: boolean
+}
+
+/**
+ * Filters framework-specific content and package-manager tabs from raw markdown.
+ * If no framework is specified, returns markdown unchanged.
+ */
+export function filterFrameworkContent(
+  markdown: string,
+  options: FilterOptions,
+): string {
+  const { framework, packageManager, keepMarkers = false } = options
+
+  if (!framework) {
+    return markdown
+  }
+
+  const normalizedFramework = framework.toLowerCase()
+
+  // First pass: filter framework blocks
+  let result = filterFrameworkBlocks(markdown, normalizedFramework, keepMarkers)
+
+  // Second pass: filter package-manager tabs
+  result = filterPackageManagerTabs(
+    result,
+    normalizedFramework,
+    packageManager,
+    keepMarkers,
+  )
+
+  return result
+}
+
+/**
+ * Filters <!-- ::start:framework --> blocks.
+ */
+function filterFrameworkBlocks(
+  markdown: string,
+  framework: string,
+  keepMarkers: boolean,
+): string {
+  const blockRegex =
+    /(<!--\s*::start:framework\s*-->)([\s\S]*?)(<!--\s*::end:framework\s*-->)/gi
+
+  return markdown.replace(
+    blockRegex,
+    (
+      _match,
+      startComment: string,
+      blockContent: string,
+      endComment: string,
+    ) => {
+      const sections = splitByFrameworkHeadings(blockContent)
+      const frameworkSection = sections.find((s) => s.framework === framework)
+
+      if (!frameworkSection) {
+        return ''
+      }
+
+      const content = frameworkSection.content.trim()
+      if (keepMarkers) {
+        return `${startComment}\n${content}\n${endComment}`
+      }
+      return content
+    },
+  )
+}
+
+/**
+ * Filters <!-- ::start:tabs variant="package-manager" --> blocks.
+ * If framework matches and packageManager is provided, outputs the command.
+ * Otherwise returns block as-is.
+ */
+function filterPackageManagerTabs(
+  markdown: string,
+  framework: string,
+  packageManager: PackageManager | undefined,
+  keepMarkers: boolean,
+): string {
+  // Match tabs blocks with attributes
+  const blockRegex =
+    /(<!--\s*::start:tabs\s+([^>]*?)-->)([\s\S]*?)(<!--\s*::end:tabs\s*-->)/gi
+
+  return markdown.replace(
+    blockRegex,
+    (
+      fullMatch,
+      startComment: string,
+      attrs: string,
+      blockContent: string,
+      endComment: string,
+    ) => {
+      // Parse attributes to check variant
+      const variant = parseAttribute(attrs, 'variant')
+      if (variant !== 'package-manager' && variant !== 'package-managers') {
+        return fullMatch
+      }
+
+      // Parse framework lines
+      const frameworkPackages = parseFrameworkLines(blockContent)
+      const packages = frameworkPackages[framework]
+
+      // If no match for framework, return as-is
+      if (!packages || packages.length === 0) {
+        return fullMatch
+      }
+
+      // If no package manager specified, return as-is
+      if (!packageManager) {
+        return fullMatch
+      }
+
+      // Generate command based on mode
+      const mode = (parseAttribute(attrs, 'mode') as InstallMode) || 'install'
+      const commands = getInstallCommand(packageManager, packages, mode)
+      const commandText = `\`\`\`sh\n${commands.join('\n')}\n\`\`\``
+
+      // Return with or without comment markers based on keepMarkers option
+      if (keepMarkers) {
+        return `${startComment}\n${commandText}\n${endComment}`
+      }
+      return commandText
+    },
+  )
+}
+
+/**
+ * Parse a single attribute from an attribute string.
+ * e.g., parseAttribute('variant="package-manager" mode="install"', 'variant') => 'package-manager'
+ */
+function parseAttribute(attrs: string, name: string): string | undefined {
+  const regex = new RegExp(`${name}=["']([^"']+)["']`, 'i')
+  const match = attrs.match(regex)
+  return match?.[1]
+}
+
+/**
+ * Parse framework lines like "react: @tanstack/react-query" from block content.
+ * Returns { framework: [[packages]] } structure.
+ */
+function parseFrameworkLines(content: string): Record<string, string[][]> {
+  const result: Record<string, string[][]> = {}
+  const lines = content.split('\n')
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed) continue
+
+    const colonIndex = trimmed.indexOf(':')
+    if (colonIndex === -1) continue
+
+    const framework = trimmed.slice(0, colonIndex).trim().toLowerCase()
+    const packagesStr = trimmed.slice(colonIndex + 1).trim()
+    const packages = packagesStr.split(/\s+/).filter(Boolean)
+
+    if (!framework || packages.length === 0) continue
+
+    if (result[framework]) {
+      result[framework].push(packages)
+    } else {
+      result[framework] = [packages]
+    }
+  }
+
+  return result
+}
+
+type FrameworkSection = {
+  framework: string
+  content: string
+}
+
+/**
+ * Splits block content by H1 framework headers.
+ */
+function splitByFrameworkHeadings(blockContent: string): FrameworkSection[] {
+  const sections: FrameworkSection[] = []
+  const headerRegex = /^#\s+(\w+)\s*$/gm
+  let lastIndex = 0
+  let lastFramework: string | null = null
+  let match: RegExpExecArray | null
+
+  while ((match = headerRegex.exec(blockContent)) !== null) {
+    if (lastFramework !== null) {
+      sections.push({
+        framework: lastFramework,
+        content: blockContent.slice(lastIndex, match.index),
+      })
+    }
+
+    lastFramework = match[1].toLowerCase()
+    lastIndex = match.index + match[0].length
+  }
+
+  if (lastFramework !== null) {
+    sections.push({
+      framework: lastFramework,
+      content: blockContent.slice(lastIndex),
+    })
+  }
+
+  return sections
+}
diff --git a/src/utils/markdown/installCommand.ts b/src/utils/markdown/installCommand.ts
new file mode 100644
index 00000000..41c42ee6
--- /dev/null
+++ b/src/utils/markdown/installCommand.ts
@@ -0,0 +1,129 @@
+/**
+ * Shared types and utility for generating package manager install commands.
+ * Used by both server-side markdown filtering and client-side PackageManagerTabs.
+ */
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
+
+export type InstallMode =
+  | 'install'
+  | 'dev-install'
+  | 'local-install'
+  | 'create'
+  | 'custom'
+
+/**
+ * Generate install command(s) for a package manager.
+ * Each group of packages becomes one command line.
+ */
+export function getInstallCommand(
+  packageManager: PackageManager,
+  packageGroups: string[][],
+  mode: InstallMode,
+): string[] {
+  const commands: string[] = []
+
+  if (mode === 'custom') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'create') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm create ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm create ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn create ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun create ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'local-install') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npx ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpx ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn dlx ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bunx ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'dev-install') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm i -D ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm add -D ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn add -D ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun add -d ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  // install mode (default)
+  for (const packages of packageGroups) {
+    const pkgStr = packages.join(' ')
+    switch (packageManager) {
+      case 'npm':
+        commands.push(`npm i ${pkgStr}`)
+        break
+      case 'pnpm':
+        commands.push(`pnpm add ${pkgStr}`)
+        break
+      case 'yarn':
+        commands.push(`yarn add ${pkgStr}`)
+        break
+      case 'bun':
+        commands.push(`bun add ${pkgStr}`)
+        break
+    }
+  }
+  return commands
+}

From 72a495a2b893fb41436703a1be2204e3aee33276 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 16 Feb 2026 13:18:54 +1300
Subject: [PATCH 2/3] refactor: share export for package managers

---
 src/components/CopyPageDropdown.tsx            | 3 ++-
 src/components/markdown/PackageManagerTabs.tsx | 3 +--
 src/utils/markdown/installCommand.ts           | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index 8e0ce100..672e1f74 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -10,6 +10,7 @@ import {
   DropdownContent,
   DropdownItem,
 } from './Dropdown'
+import { PACKAGE_MANAGERS } from '~/utils/markdown/installCommand'
 
 // Markdown icon component matching the screenshot
 function MarkdownIcon({ className }: { className?: string }) {
@@ -120,7 +121,7 @@ export function CopyPageDropdown({
     // Read package manager from localStorage (same key as PackageManagerTabs)
     if (typeof localStorage !== 'undefined') {
       const pm = localStorage.getItem('packageManager')
-      if (pm && ['npm', 'pnpm', 'yarn', 'bun'].includes(pm)) {
+      if (pm && PACKAGE_MANAGERS.includes(pm as any)) {
         params.set('pm', pm)
       }
     }
diff --git a/src/components/markdown/PackageManagerTabs.tsx b/src/components/markdown/PackageManagerTabs.tsx
index 1c6ba2a5..90fc6914 100644
--- a/src/components/markdown/PackageManagerTabs.tsx
+++ b/src/components/markdown/PackageManagerTabs.tsx
@@ -7,6 +7,7 @@ import { CodeBlock } from './CodeBlock'
 import type { Framework } from '~/libraries/types'
 import {
   getInstallCommand,
+  PACKAGE_MANAGERS,
   type PackageManager,
   type InstallMode,
 } from '~/utils/markdown/installCommand'
@@ -33,8 +34,6 @@ type PackageManagerTabsProps = {
   frameworks: Framework[]
 }
 
-const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
-
 export function PackageManagerTabs({
   packagesByFramework,
   mode,
diff --git a/src/utils/markdown/installCommand.ts b/src/utils/markdown/installCommand.ts
index 41c42ee6..5b888155 100644
--- a/src/utils/markdown/installCommand.ts
+++ b/src/utils/markdown/installCommand.ts
@@ -5,6 +5,8 @@
 
 export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
 
+export const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
+
 export type InstallMode =
   | 'install'
   | 'dev-install'

From 7f3f4518b7ed061f6e701ed2a6e5a700fb5f433d Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Mon, 16 Feb 2026 13:24:41 +1300
Subject: [PATCH 3/3] refactor: use shared utility for get package manager for
 markdown

---
 src/components/CopyPageDropdown.tsx                  | 10 ++++++----
 .../$version.docs.framework.$framework.{$}[.]md.tsx  |  7 ++-----
 src/routes/$libraryId/$version.docs.{$}[.]md.tsx     |  7 ++-----
 src/utils/markdown/installCommand.ts                 | 12 ++++++++++++
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index 672e1f74..db8bd936 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -10,7 +10,10 @@ import {
   DropdownContent,
   DropdownItem,
 } from './Dropdown'
-import { PACKAGE_MANAGERS } from '~/utils/markdown/installCommand'
+import {
+  getPackageManager,
+  PACKAGE_MANAGERS,
+} from '~/utils/markdown/installCommand'
 
 // Markdown icon component matching the screenshot
 function MarkdownIcon({ className }: { className?: string }) {
@@ -121,9 +124,8 @@ export function CopyPageDropdown({
     // Read package manager from localStorage (same key as PackageManagerTabs)
     if (typeof localStorage !== 'undefined') {
       const pm = localStorage.getItem('packageManager')
-      if (pm && PACKAGE_MANAGERS.includes(pm as any)) {
-        params.set('pm', pm)
-      }
+      const validPm = getPackageManager(pm)
+      params.set('pm', validPm)
     }
     const queryString = params.toString()
     return queryString ? `${base}?${queryString}` : base
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
index 2c998e8c..8a3a13f6 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
+++ b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
@@ -2,6 +2,7 @@ import { findLibrary, getBranch } from '~/libraries'
 import { loadDocs } from '~/utils/docs'
 import { notFound, createFileRoute } from '@tanstack/react-router'
 import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
+import { getPackageManager } from '~/utils/markdown/installCommand'
 
 export const Route = createFileRoute(
   '/$libraryId/$version/docs/framework/$framework/{$}.md',
@@ -21,11 +22,7 @@ export const Route = createFileRoute(
         }
       }) => {
         const url = new URL(request.url)
-        const pm = (url.searchParams.get('pm') || 'npm') as
-          | 'npm'
-          | 'pnpm'
-          | 'yarn'
-          | 'bun'
+        const pm = getPackageManager(url.searchParams.get('pm'))
         const keepMarkers = url.searchParams.get('keep_markers') === 'true'
 
         const { libraryId, version, framework, _splat: docsPath } = params
diff --git a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
index 0320a007..b92c8a6c 100644
--- a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
+++ b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { getBranch, getLibrary, type LibraryId } from '~/libraries'
 import { loadDocs } from '~/utils/docs'
 import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
+import { getPackageManager } from '~/utils/markdown/installCommand'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
   server: {
@@ -15,11 +16,7 @@ export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
       }) => {
         const url = new URL(request.url)
         const framework = url.searchParams.get('framework')
-        const pm = (url.searchParams.get('pm') || 'npm') as
-          | 'npm'
-          | 'pnpm'
-          | 'yarn'
-          | 'bun'
+        const pm = getPackageManager(url.searchParams.get('pm'))
         const keepMarkers = url.searchParams.get('keep_markers') === 'true'
 
         const { libraryId, version, _splat: docsPath } = params
diff --git a/src/utils/markdown/installCommand.ts b/src/utils/markdown/installCommand.ts
index 5b888155..9d74ca51 100644
--- a/src/utils/markdown/installCommand.ts
+++ b/src/utils/markdown/installCommand.ts
@@ -14,6 +14,18 @@ export type InstallMode =
   | 'create'
   | 'custom'
 
+/**
+ * Get package manager from query parameter, defaulting to 'npm' if not specified or invalid.
+ */
+export function getPackageManager(
+  pm: string | null | undefined,
+): PackageManager {
+  if (pm && PACKAGE_MANAGERS.includes(pm as PackageManager)) {
+    return pm as PackageManager
+  }
+  return 'npm' // default
+}
+
 /**
  * Generate install command(s) for a package manager.
  * Each group of packages becomes one command line.