refactor: use shared utility for get package manager for markdown

Author: SeanCassiere

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

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

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

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.