feat: filter markdown docs by framework and package manager

SeanCassiere · SeanCassiere · commit 8db1b04b5687 · 2026-02-16T13:13:07.000+13:00
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.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/utils/markdown/installCommand.ts b/src/utils/markdown/installCommand.ts
