From a1f61b72f31c1039d1e3be3ae582c76fbf1a4d8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 18:59:22 +0100
Subject: [PATCH 01/10] refactor: extract reusable function

---
 .../v/[version]/[...filePath].vue             | 587 ++++++++++++++++++
 app/pages/package-code/[...path].vue          |  36 +-
 2 files changed, 611 insertions(+), 12 deletions(-)
 create mode 100644 app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue

diff --git a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
new file mode 100644
index 000000000..fc99399d1
--- /dev/null
+++ b/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -0,0 +1,587 @@
+<script setup lang="ts">
+import type {
+  PackageFileTree,
+  PackageFileTreeResponse,
+  PackageFileContentResponse,
+} from '#shared/types'
+
+definePageMeta({
+  name: 'code',
+  path: '/package-code/:path+',
+  alias: ['/package/code/:path+', '/code/:path+'],
+})
+
+const route = useRoute('code')
+
+// Parse package name, version, and file path from URL
+// Patterns:
+//   /code/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0", filePath: null (show tree)
+//   /code/nuxt/v/4.2.0/src/index.ts → packageName: "nuxt", version: "4.2.0", filePath: "src/index.ts"
+//   /code/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0", filePath: null
+const parsedRoute = computed(() => {
+  const segments = route.params.path
+
+  // Find the /v/ separator for version
+  const vIndex = segments.indexOf('v')
+  if (vIndex === -1 || vIndex >= segments.length - 1) {
+    // No version specified - redirect or error
+    return {
+      packageName: segments.join('/'),
+      version: null as string | null,
+      filePath: null as string | null,
+    }
+  }
+
+  const packageName = segments.slice(0, vIndex).join('/')
+  const afterVersion = segments.slice(vIndex + 1)
+  const version = afterVersion[0] ?? null
+  const filePath = afterVersion.length > 1 ? afterVersion.slice(1).join('/') : null
+
+  return { packageName, version, filePath }
+})
+
+const packageName = computed(() => parsedRoute.value.packageName)
+const version = computed(() => parsedRoute.value.version)
+const filePathOrig = computed(() => parsedRoute.value.filePath)
+const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
+
+// Navigation helper - build URL for a path
+function getCodeUrl(args: { packageName: string; version: string; filePath?: string }): string {
+  const base = `/package-code/${args.packageName}/v/${args.version}`
+  return args.filePath ? `${base}/${args.filePath}` : base
+}
+
+// Fetch package data for version list
+const { data: pkg } = usePackage(packageName)
+
+// URL pattern for version selector - includes file path if present
+const versionUrlPattern = computed(() =>
+  getCodeUrl({
+    packageName: packageName.value,
+    version: '{version}',
+    filePath: filePath.value,
+  }),
+)
+
+// Fetch file tree
+const { data: fileTree, status: treeStatus } = useFetch<PackageFileTreeResponse>(
+  () => `/api/registry/files/${packageName.value}/v/${version.value}`,
+  {
+    immediate: !!version.value,
+  },
+)
+
+// Determine what to show based on the current path
+// Note: This needs fileTree to be loaded first
+const currentNode = computed(() => {
+  if (!fileTree.value?.tree || !filePathOrig.value) return null
+
+  // We use original file path to correctly handle trailing slashes for file tree navigation
+  // - /src/index.ts - correct file path
+  // - /src/index.ts/ - incorrect file path (but formally can exist as a directory)
+  // - /src/index and /src/index/ - correct directory paths
+  const parts = filePathOrig.value.split('/')
+  let current: PackageFileTree[] | undefined = fileTree.value.tree
+  let lastFound: PackageFileTree | null = null
+  const partsLength = parts.length
+
+  for (let i = 0; i < partsLength; i++) {
+    const part = parts[i]
+    const isLast = i === partsLength - 1
+    // If the previous part is a directory and the last one is empty (like /lib/) then return the previous directory
+    if (!part && isLast && lastFound?.type === 'directory') return lastFound
+    const found: PackageFileTree | undefined = current?.find(n => n.name === part)
+    if (!found) return null
+    lastFound = found
+    if (found.type === 'file' && isLast) return found
+    current = found.children
+  }
+
+  return lastFound
+})
+
+const isViewingFile = computed(() => currentNode.value?.type === 'file')
+
+// Maximum file size we'll try to load (500KB) - must match server
+const MAX_FILE_SIZE = 500 * 1024
+const isFileTooLarge = computed(() => {
+  const size = currentNode.value?.size
+  return size !== undefined && size > MAX_FILE_SIZE
+})
+
+// Fetch file content when a file is selected (and not too large)
+const fileContentUrl = computed(() => {
+  // Don't fetch if no file path, file tree not loaded, file is too large, or it's a directory
+  if (!filePath.value || !fileTree.value || isFileTooLarge.value || !isViewingFile.value) {
+    return null
+  }
+  return `/api/registry/file/${packageName.value}/v/${version.value}/${filePath.value}`
+})
+
+const {
+  data: fileContent,
+  status: fileStatus,
+  execute: fetchFileContent,
+} = useFetch<PackageFileContentResponse>(() => fileContentUrl.value!, { immediate: false })
+
+watch(
+  fileContentUrl,
+  url => {
+    if (url) fetchFileContent()
+  },
+  { immediate: true },
+)
+
+// Track hash manually since we update it via history API to avoid scroll
+const currentHash = shallowRef('')
+
+onMounted(() => {
+  currentHash.value = window.location.hash
+})
+
+useEventListener('popstate', () => (currentHash.value = window.location.hash))
+
+// Also sync when route changes (e.g., navigating to a different file)
+watch(
+  () => route.hash,
+  hash => {
+    currentHash.value = hash
+  },
+)
+
+// Line number handling from hash
+const selectedLines = computed(() => {
+  const hash = currentHash.value
+  if (!hash) return null
+
+  // Parse #L10 or #L10-L20
+  const match = hash.match(/^#L(\d+)(?:-L(\d+))?$/)
+  if (!match) return null
+
+  const start = parseInt(match[1] ?? '0', 10)
+  const end = match[2] ? parseInt(match[2], 10) : start
+
+  return { start, end }
+})
+
+// Scroll to selected line only on initial load or file change (not on click)
+const shouldScrollOnHashChange = shallowRef(true)
+
+function scrollToLine() {
+  if (!shouldScrollOnHashChange.value) return
+  if (!selectedLines.value) return
+  const lineEl = document.getElementById(`L${selectedLines.value.start}`)
+  if (lineEl) {
+    lineEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+}
+
+// Scroll on file content load (initial or file change)
+watch(fileContent, () => {
+  shouldScrollOnHashChange.value = true
+  nextTick(scrollToLine)
+})
+
+// Build breadcrumb path segments
+const breadcrumbs = computed(() => {
+  const parts = filePath.value?.split('/').filter(Boolean) ?? []
+  const result: { name: string; path: string }[] = []
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i]
+    if (part) {
+      result.push({
+        name: part,
+        path: parts.slice(0, i + 1).join('/'),
+      })
+    }
+  }
+
+  return result
+})
+
+// Navigation helper - build URL for a path
+function getCurrentCodeUrl(path?: string): string {
+  return getCodeUrl({
+    packageName: packageName.value,
+    version: version.value!,
+    filePath: path,
+  })
+}
+
+// Base path segments for route objects (e.g., ['nuxt', 'v', '4.2.0'] or ['@nuxt', 'kit', 'v', '1.0.0'])
+const basePath = computed(() => {
+  const segments = packageName.value.split('/')
+  return [...segments, 'v', version.value ?? '']
+})
+
+// Extract org name from scoped package
+const orgName = computed(() => {
+  const name = packageName.value
+  if (!name.startsWith('@')) return null
+  const match = name.match(/^@([^/]+)\//)
+  return match ? match[1] : null
+})
+
+// Line number click handler - update URL hash without scrolling
+function handleLineClick(lineNum: number, event: MouseEvent) {
+  let newHash: string
+  if (event.shiftKey && selectedLines.value) {
+    // Shift+click: select range
+    const start = Math.min(selectedLines.value.start, lineNum)
+    const end = Math.max(selectedLines.value.end, lineNum)
+    newHash = `#L${start}-L${end}`
+  } else {
+    // Single click: select line
+    newHash = `#L${lineNum}`
+  }
+
+  // Don't scroll when user clicks - only scroll on initial load
+  shouldScrollOnHashChange.value = false
+
+  // Update URL without triggering scroll - use history API directly
+  const url = new URL(window.location.href)
+  url.hash = newHash
+  window.history.replaceState(history.state, '', url.toString())
+
+  // Update our reactive hash tracker
+  currentHash.value = newHash
+}
+
+// Copy link to current line(s)
+const { copied: permalinkCopied, copy: copyPermalink } = useClipboard({ copiedDuring: 2000 })
+function copyPermalinkUrl() {
+  const url = new URL(window.location.href)
+  copyPermalink(url.toString())
+}
+
+// Canonical URL for this code page
+const canonicalUrl = computed(() => `https://npmx.dev${getCurrentCodeUrl()}`)
+
+// Toggle markdown view mode
+const markdownViewModes = [
+  {
+    key: 'preview',
+    label: $t('code.markdown_view_mode.preview'),
+    icon: 'i-carbon-view',
+  },
+  {
+    key: 'code',
+    label: $t('code.markdown_view_mode.code'),
+    icon: 'i-carbon-code',
+  },
+] as const
+
+const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
+
+const bytesFormatter = useBytesFormatter()
+
+useHead({
+  link: [{ rel: 'canonical', href: canonicalUrl }],
+})
+
+useSeoMeta({
+  title: () => {
+    if (filePath.value) {
+      return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
+    }
+    return `Code - ${packageName.value}@${version.value} - npmx`
+  },
+  ogTitle: () => {
+    if (filePath.value) {
+      return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
+    }
+    return `Code - ${packageName.value}@${version.value} - npmx`
+  },
+  twitterTitle: () => {
+    if (filePath.value) {
+      return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
+    }
+    return `Code - ${packageName.value}@${version.value} - npmx`
+  },
+  description: () => `Browse source code for ${packageName.value}@${version.value}`,
+  ogDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
+  twitterDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
+})
+
+defineOgImageComponent('Default', {
+  title: () => `${pkg.value?.name ?? 'Package'} - Code`,
+  description: () => pkg.value?.license ?? '',
+  primaryColor: '#60a5fa',
+})
+</script>
+
+<template>
+  <main class="flex-1 flex flex-col">
+    <!-- Header -->
+    <header class="border-b border-border bg-bg sticky top-14 z-20">
+      <div class="container py-4">
+        <!-- Package info and navigation -->
+        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
+          <NuxtLink
+            :to="packageRoute(packageName, version)"
+            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate max-w-[60vw] sm:max-w-none"
+            :title="packageName"
+          >
+            <span v-if="orgName" class="text-fg-muted">@{{ orgName }}/</span
+            >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
+          </NuxtLink>
+          <!-- Version selector -->
+          <VersionSelector
+            v-if="version && pkg?.versions && pkg?.['dist-tags']"
+            :package-name="packageName"
+            :current-version="version"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="versionUrlPattern"
+          />
+          <span
+            v-else-if="version"
+            class="px-2 py-0.5 font-mono text-sm bg-bg-muted border border-border rounded truncate max-w-32 sm:max-w-48"
+            :title="`v${version}`"
+          >
+            v{{ version }}
+          </span>
+          <span class="text-fg-subtle shrink-0">/</span>
+          <span class="font-mono text-sm text-fg-muted shrink-0">{{
+            $t('package.links.code')
+          }}</span>
+        </div>
+
+        <!-- Breadcrumb navigation -->
+        <nav
+          :aria-label="$t('code.file_path')"
+          class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
+          dir="ltr"
+        >
+          <NuxtLink
+            v-if="filePath"
+            :to="getCurrentCodeUrl()"
+            class="text-fg-muted hover:text-fg transition-colors shrink-0"
+          >
+            {{ $t('code.root') }}
+          </NuxtLink>
+          <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
+          <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
+            <span class="text-fg-subtle">/</span>
+            <NuxtLink
+              v-if="i < breadcrumbs.length - 1"
+              :to="getCurrentCodeUrl(crumb.path)"
+              class="text-fg-muted hover:text-fg transition-colors"
+            >
+              {{ crumb.name }}
+            </NuxtLink>
+            <span v-else class="text-fg">{{ crumb.name }}</span>
+          </template>
+        </nav>
+      </div>
+    </header>
+
+    <!-- Error: no version -->
+    <div v-if="!version" class="container py-20 text-center">
+      <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName)">{{
+        $t('code.go_to_package')
+      }}</LinkBase>
+    </div>
+
+    <!-- Loading state -->
+    <div v-else-if="treeStatus === 'pending'" class="container py-20 text-center">
+      <div class="i-svg-spinners:ring-resize w-8 h-8 mx-auto text-fg-muted" />
+      <p class="mt-4 text-fg-muted">{{ $t('code.loading_tree') }}</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
+      <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName, version)">{{
+        $t('code.back_to_package')
+      }}</LinkBase>
+    </div>
+
+    <!-- Main content: file tree + file viewer -->
+    <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
+      <!-- File tree sidebar - sticky with internal scroll -->
+      <aside
+        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+      >
+        <CodeFileTree
+          :tree="fileTree.tree"
+          :current-path="filePath ?? ''"
+          :base-url="getCurrentCodeUrl()"
+          :base-path="basePath"
+        />
+      </aside>
+
+      <!-- File content / Directory listing - sticky with internal scroll on desktop -->
+      <div
+        class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+      >
+        <!-- File viewer -->
+        <template v-if="isViewingFile && fileContent">
+          <div
+            class="sticky z-10 top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
+          >
+            <div class="flex items-center gap-2">
+              <div
+                v-if="fileContent.markdownHtml"
+                class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+                role="tablist"
+                aria-label="Markdown view mode selector"
+              >
+                <button
+                  v-for="mode in markdownViewModes"
+                  :key="mode.key"
+                  role="tab"
+                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
+                  :class="
+                    markdownViewMode === mode.key
+                      ? 'bg-bg shadow text-fg border-border'
+                      : 'text-fg-subtle hover:text-fg border-transparent'
+                  "
+                  @click="markdownViewMode = mode.key"
+                >
+                  <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
+                  {{ mode.label }}
+                </button>
+              </div>
+              <div class="flex items-center gap-3 text-sm">
+                <span class="text-fg-muted" dir="auto">{{
+                  $t('code.lines', { count: fileContent.lines })
+                }}</span>
+                <span v-if="currentNode?.size" class="text-fg-subtle">{{
+                  bytesFormatter.format(currentNode.size)
+                }}</span>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                v-if="selectedLines"
+                type="button"
+                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors active:scale-95"
+                @click="copyPermalinkUrl"
+              >
+                {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
+              </button>
+              <a
+                :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
+              >
+                {{ $t('code.raw') }}
+                <span class="i-carbon:launch w-3 h-3" />
+              </a>
+            </div>
+          </div>
+          <div
+            v-if="fileContent.markdownHtml"
+            v-show="markdownViewMode === 'preview'"
+            class="flex justify-center p-4"
+          >
+            <Readme :html="fileContent.markdownHtml.html" />
+          </div>
+
+          <CodeViewer
+            v-show="!fileContent.markdownHtml || markdownViewMode === 'code'"
+            :html="fileContent.html"
+            :lines="fileContent.lines"
+            :selected-lines="selectedLines"
+            @line-click="handleLineClick"
+          />
+        </template>
+
+        <!-- File too large warning -->
+        <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
+          <div class="i-carbon:document w-12 h-12 mx-auto text-fg-subtle mb-4" />
+          <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
+          <p class="text-fg-subtle text-sm mb-4">
+            {{
+              $t('code.file_size_warning', { size: bytesFormatter.format(currentNode?.size ?? 0) })
+            }}
+          </p>
+          <LinkBase
+            variant="button-secondary"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+          >
+            {{ $t('code.view_raw') }}
+          </LinkBase>
+        </div>
+
+        <!-- Loading file content -->
+        <div
+          v-else-if="filePath && fileStatus === 'pending'"
+          class="flex min-h-full"
+          aria-busy="true"
+          :aria-label="$t('common.loading')"
+        >
+          <!-- Fake line numbers column -->
+          <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
+            <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
+              <SkeletonInline class="w-4 h-3 rounded-sm" />
+            </div>
+          </div>
+          <!-- Fake code content -->
+          <div class="flex-1 p-4 space-y-1.5">
+            <SkeletonBlock class="h-4 w-32 rounded-sm" />
+            <SkeletonBlock class="h-4 w-48 rounded-sm" />
+            <SkeletonBlock class="h-4 w-24 rounded-sm" />
+            <div class="h-4" />
+            <SkeletonBlock class="h-4 w-64 rounded-sm" />
+            <SkeletonBlock class="h-4 w-56 rounded-sm" />
+            <SkeletonBlock class="h-4 w-40 rounded-sm" />
+            <SkeletonBlock class="h-4 w-72 rounded-sm" />
+            <div class="h-4" />
+            <SkeletonBlock class="h-4 w-36 rounded-sm" />
+            <SkeletonBlock class="h-4 w-52 rounded-sm" />
+            <SkeletonBlock class="h-4 w-44 rounded-sm" />
+            <SkeletonBlock class="h-4 w-28 rounded-sm" />
+            <div class="h-4" />
+            <SkeletonBlock class="h-4 w-60 rounded-sm" />
+            <SkeletonBlock class="h-4 w-48 rounded-sm" />
+            <SkeletonBlock class="h-4 w-32 rounded-sm" />
+            <SkeletonBlock class="h-4 w-56 rounded-sm" />
+            <SkeletonBlock class="h-4 w-40 rounded-sm" />
+            <SkeletonBlock class="h-4 w-24 rounded-sm" />
+          </div>
+        </div>
+
+        <!-- Error loading file -->
+        <div v-else-if="filePath && fileStatus === 'error'" class="py-20 text-center" role="alert">
+          <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
+          <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
+          <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
+          <LinkBase
+            variant="button-secondary"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+          >
+            {{ $t('code.view_raw') }}
+          </LinkBase>
+        </div>
+
+        <!-- Directory listing (when no file selected or viewing a directory) -->
+        <template v-else>
+          <CodeDirectoryListing
+            :tree="fileTree.tree"
+            :current-path="filePath ?? ''"
+            :base-url="getCurrentCodeUrl()"
+            :base-path="basePath"
+          />
+        </template>
+      </div>
+    </div>
+
+    <!-- Mobile file tree toggle -->
+    <ClientOnly>
+      <Teleport to="body">
+        <CodeMobileTreeDrawer
+          v-if="fileTree"
+          :tree="fileTree.tree"
+          :current-path="filePath ?? ''"
+          :base-url="getCurrentCodeUrl()"
+          :base-path="basePath"
+        />
+      </Teleport>
+    </ClientOnly>
+  </main>
+</template>
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index b3b4a02bd..29b0b6600 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -45,14 +45,23 @@ const version = computed(() => parsedRoute.value.version)
 const filePathOrig = computed(() => parsedRoute.value.filePath)
 const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
 
+// Navigation helper - build URL for a path
+function getCodeUrl(args: { packageName: string; version: string; filePath?: string }): string {
+  const base = `/package-code/${args.packageName}/v/${args.version}`
+  return args.filePath ? `${base}/${args.filePath}` : base
+}
+
 // Fetch package data for version list
 const { data: pkg } = usePackage(packageName)
 
 // URL pattern for version selector - includes file path if present
-const versionUrlPattern = computed(() => {
-  const base = `/package-code/${packageName.value}/v/{version}`
-  return filePath.value ? `${base}/${filePath.value}` : base
-})
+const versionUrlPattern = computed(() =>
+  getCodeUrl({
+    packageName: packageName.value,
+    version: '{version}',
+    filePath: filePath.value,
+  }),
+)
 
 // Fetch file tree
 const { data: fileTree, status: treeStatus } = useFetch<PackageFileTreeResponse>(
@@ -192,9 +201,12 @@ const breadcrumbs = computed(() => {
 })
 
 // Navigation helper - build URL for a path
-function getCodeUrl(path?: string): string {
-  const base = `/package-code/${packageName.value}/v/${version.value}`
-  return path ? `${base}/${path}` : base
+function getCurrentCodeUrl(path?: string): string {
+  return getCodeUrl({
+    packageName: packageName.value,
+    version: version.value!,
+    filePath: path,
+  })
 }
 
 // Base path segments for route objects (e.g., ['nuxt', 'v', '4.2.0'] or ['@nuxt', 'kit', 'v', '1.0.0'])
@@ -350,7 +362,7 @@ defineOgImageComponent('Default', {
         >
           <NuxtLink
             v-if="filePath"
-            :to="getCodeUrl()"
+            :to="getCurrentCodeUrl()"
             class="text-fg-muted hover:text-fg transition-colors shrink-0"
           >
             {{ $t('code.root') }}
@@ -360,7 +372,7 @@ defineOgImageComponent('Default', {
             <span class="text-fg-subtle">/</span>
             <NuxtLink
               v-if="i < breadcrumbs.length - 1"
-              :to="getCodeUrl(crumb.path)"
+              :to="getCurrentCodeUrl(crumb.path)"
               class="text-fg-muted hover:text-fg transition-colors"
             >
               {{ crumb.name }}
@@ -402,7 +414,7 @@ defineOgImageComponent('Default', {
         <CodeFileTree
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
-          :base-url="getCodeUrl()"
+          :base-url="getCurrentCodeUrl()"
           :base-path="basePath"
         />
       </aside>
@@ -558,7 +570,7 @@ defineOgImageComponent('Default', {
           <CodeDirectoryListing
             :tree="fileTree.tree"
             :current-path="filePath ?? ''"
-            :base-url="getCodeUrl()"
+            :base-url="getCurrentCodeUrl()"
             :base-path="basePath"
           />
         </template>
@@ -572,7 +584,7 @@ defineOgImageComponent('Default', {
           v-if="fileTree"
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
-          :base-url="getCodeUrl()"
+          :base-url="getCurrentCodeUrl()"
           :base-path="basePath"
         />
       </Teleport>

From 58ae1e12c9f0629a27370c85cd28dae470457ebf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 21:52:29 +0100
Subject: [PATCH 02/10] Rename file

---
 app/pages/package-code/[...path].vue | 593 ---------------------------
 1 file changed, 593 deletions(-)
 delete mode 100644 app/pages/package-code/[...path].vue

diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
deleted file mode 100644
index 29b0b6600..000000000
--- a/app/pages/package-code/[...path].vue
+++ /dev/null
@@ -1,593 +0,0 @@
-<script setup lang="ts">
-import type {
-  PackageFileTree,
-  PackageFileTreeResponse,
-  PackageFileContentResponse,
-} from '#shared/types'
-
-definePageMeta({
-  name: 'code',
-  path: '/package-code/:path+',
-  alias: ['/package/code/:path+', '/code/:path+'],
-})
-
-const route = useRoute('code')
-
-// Parse package name, version, and file path from URL
-// Patterns:
-//   /code/nuxt/v/4.2.0 → packageName: "nuxt", version: "4.2.0", filePath: null (show tree)
-//   /code/nuxt/v/4.2.0/src/index.ts → packageName: "nuxt", version: "4.2.0", filePath: "src/index.ts"
-//   /code/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0", filePath: null
-const parsedRoute = computed(() => {
-  const segments = route.params.path
-
-  // Find the /v/ separator for version
-  const vIndex = segments.indexOf('v')
-  if (vIndex === -1 || vIndex >= segments.length - 1) {
-    // No version specified - redirect or error
-    return {
-      packageName: segments.join('/'),
-      version: null as string | null,
-      filePath: null as string | null,
-    }
-  }
-
-  const packageName = segments.slice(0, vIndex).join('/')
-  const afterVersion = segments.slice(vIndex + 1)
-  const version = afterVersion[0] ?? null
-  const filePath = afterVersion.length > 1 ? afterVersion.slice(1).join('/') : null
-
-  return { packageName, version, filePath }
-})
-
-const packageName = computed(() => parsedRoute.value.packageName)
-const version = computed(() => parsedRoute.value.version)
-const filePathOrig = computed(() => parsedRoute.value.filePath)
-const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
-
-// Navigation helper - build URL for a path
-function getCodeUrl(args: { packageName: string; version: string; filePath?: string }): string {
-  const base = `/package-code/${args.packageName}/v/${args.version}`
-  return args.filePath ? `${base}/${args.filePath}` : base
-}
-
-// Fetch package data for version list
-const { data: pkg } = usePackage(packageName)
-
-// URL pattern for version selector - includes file path if present
-const versionUrlPattern = computed(() =>
-  getCodeUrl({
-    packageName: packageName.value,
-    version: '{version}',
-    filePath: filePath.value,
-  }),
-)
-
-// Fetch file tree
-const { data: fileTree, status: treeStatus } = useFetch<PackageFileTreeResponse>(
-  () => `/api/registry/files/${packageName.value}/v/${version.value}`,
-  {
-    immediate: !!version.value,
-  },
-)
-
-// Determine what to show based on the current path
-// Note: This needs fileTree to be loaded first
-const currentNode = computed(() => {
-  if (!fileTree.value?.tree || !filePathOrig.value) return null
-
-  // We use original file path to correctly handle trailing slashes for file tree navigation
-  // - /src/index.ts - correct file path
-  // - /src/index.ts/ - incorrect file path (but formally can exist as a directory)
-  // - /src/index and /src/index/ - correct directory paths
-  const parts = filePathOrig.value.split('/')
-  let current: PackageFileTree[] | undefined = fileTree.value.tree
-  let lastFound: PackageFileTree | null = null
-  const partsLength = parts.length
-
-  for (let i = 0; i < partsLength; i++) {
-    const part = parts[i]
-    const isLast = i === partsLength - 1
-    // If the previous part is a directory and the last one is empty (like /lib/) then return the previous directory
-    if (!part && isLast && lastFound?.type === 'directory') return lastFound
-    const found: PackageFileTree | undefined = current?.find(n => n.name === part)
-    if (!found) return null
-    lastFound = found
-    if (found.type === 'file' && isLast) return found
-    current = found.children
-  }
-
-  return lastFound
-})
-
-const isViewingFile = computed(() => currentNode.value?.type === 'file')
-
-// Maximum file size we'll try to load (500KB) - must match server
-const MAX_FILE_SIZE = 500 * 1024
-const isFileTooLarge = computed(() => {
-  const size = currentNode.value?.size
-  return size !== undefined && size > MAX_FILE_SIZE
-})
-
-// Fetch file content when a file is selected (and not too large)
-const fileContentUrl = computed(() => {
-  // Don't fetch if no file path, file tree not loaded, file is too large, or it's a directory
-  if (!filePath.value || !fileTree.value || isFileTooLarge.value || !isViewingFile.value) {
-    return null
-  }
-  return `/api/registry/file/${packageName.value}/v/${version.value}/${filePath.value}`
-})
-
-const {
-  data: fileContent,
-  status: fileStatus,
-  execute: fetchFileContent,
-} = useFetch<PackageFileContentResponse>(() => fileContentUrl.value!, { immediate: false })
-
-watch(
-  fileContentUrl,
-  url => {
-    if (url) fetchFileContent()
-  },
-  { immediate: true },
-)
-
-// Track hash manually since we update it via history API to avoid scroll
-const currentHash = shallowRef('')
-
-onMounted(() => {
-  currentHash.value = window.location.hash
-})
-
-useEventListener('popstate', () => (currentHash.value = window.location.hash))
-
-// Also sync when route changes (e.g., navigating to a different file)
-watch(
-  () => route.hash,
-  hash => {
-    currentHash.value = hash
-  },
-)
-
-// Line number handling from hash
-const selectedLines = computed(() => {
-  const hash = currentHash.value
-  if (!hash) return null
-
-  // Parse #L10 or #L10-L20
-  const match = hash.match(/^#L(\d+)(?:-L(\d+))?$/)
-  if (!match) return null
-
-  const start = parseInt(match[1] ?? '0', 10)
-  const end = match[2] ? parseInt(match[2], 10) : start
-
-  return { start, end }
-})
-
-// Scroll to selected line only on initial load or file change (not on click)
-const shouldScrollOnHashChange = shallowRef(true)
-
-function scrollToLine() {
-  if (!shouldScrollOnHashChange.value) return
-  if (!selectedLines.value) return
-  const lineEl = document.getElementById(`L${selectedLines.value.start}`)
-  if (lineEl) {
-    lineEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  }
-}
-
-// Scroll on file content load (initial or file change)
-watch(fileContent, () => {
-  shouldScrollOnHashChange.value = true
-  nextTick(scrollToLine)
-})
-
-// Build breadcrumb path segments
-const breadcrumbs = computed(() => {
-  const parts = filePath.value?.split('/').filter(Boolean) ?? []
-  const result: { name: string; path: string }[] = []
-
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i]
-    if (part) {
-      result.push({
-        name: part,
-        path: parts.slice(0, i + 1).join('/'),
-      })
-    }
-  }
-
-  return result
-})
-
-// Navigation helper - build URL for a path
-function getCurrentCodeUrl(path?: string): string {
-  return getCodeUrl({
-    packageName: packageName.value,
-    version: version.value!,
-    filePath: path,
-  })
-}
-
-// Base path segments for route objects (e.g., ['nuxt', 'v', '4.2.0'] or ['@nuxt', 'kit', 'v', '1.0.0'])
-const basePath = computed(() => {
-  const segments = packageName.value.split('/')
-  return [...segments, 'v', version.value ?? '']
-})
-
-// Extract org name from scoped package
-const orgName = computed(() => {
-  const name = packageName.value
-  if (!name.startsWith('@')) return null
-  const match = name.match(/^@([^/]+)\//)
-  return match ? match[1] : null
-})
-
-// Line number click handler - update URL hash without scrolling
-function handleLineClick(lineNum: number, event: MouseEvent) {
-  let newHash: string
-  if (event.shiftKey && selectedLines.value) {
-    // Shift+click: select range
-    const start = Math.min(selectedLines.value.start, lineNum)
-    const end = Math.max(selectedLines.value.end, lineNum)
-    newHash = `#L${start}-L${end}`
-  } else {
-    // Single click: select line
-    newHash = `#L${lineNum}`
-  }
-
-  // Don't scroll when user clicks - only scroll on initial load
-  shouldScrollOnHashChange.value = false
-
-  // Update URL without triggering scroll - use history API directly
-  const url = new URL(window.location.href)
-  url.hash = newHash
-  window.history.replaceState(history.state, '', url.toString())
-
-  // Update our reactive hash tracker
-  currentHash.value = newHash
-}
-
-// Copy link to current line(s)
-const { copied: permalinkCopied, copy: copyPermalink } = useClipboard({ copiedDuring: 2000 })
-function copyPermalinkUrl() {
-  const url = new URL(window.location.href)
-  copyPermalink(url.toString())
-}
-
-// Canonical URL for this code page
-const canonicalUrl = computed(() => {
-  let url = `https://npmx.dev/package-code/${packageName.value}/v/${version.value}`
-  if (filePath.value) {
-    url += `/${filePath.value}`
-  }
-  return url
-})
-
-// Toggle markdown view mode
-const markdownViewModes = [
-  {
-    key: 'preview',
-    label: $t('code.markdown_view_mode.preview'),
-    icon: 'i-carbon-view',
-  },
-  {
-    key: 'code',
-    label: $t('code.markdown_view_mode.code'),
-    icon: 'i-carbon-code',
-  },
-] as const
-
-const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
-
-const bytesFormatter = useBytesFormatter()
-
-useHead({
-  link: [{ rel: 'canonical', href: canonicalUrl }],
-})
-
-useSeoMeta({
-  title: () => {
-    if (filePath.value) {
-      return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
-    }
-    return `Code - ${packageName.value}@${version.value} - npmx`
-  },
-  ogTitle: () => {
-    if (filePath.value) {
-      return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
-    }
-    return `Code - ${packageName.value}@${version.value} - npmx`
-  },
-  twitterTitle: () => {
-    if (filePath.value) {
-      return `${filePath.value} - ${packageName.value}@${version.value} - npmx`
-    }
-    return `Code - ${packageName.value}@${version.value} - npmx`
-  },
-  description: () => `Browse source code for ${packageName.value}@${version.value}`,
-  ogDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
-  twitterDescription: () => `Browse source code for ${packageName.value}@${version.value}`,
-})
-
-defineOgImageComponent('Default', {
-  title: () => `${pkg.value?.name ?? 'Package'} - Code`,
-  description: () => pkg.value?.license ?? '',
-  primaryColor: '#60a5fa',
-})
-</script>
-
-<template>
-  <main class="flex-1 flex flex-col">
-    <!-- Header -->
-    <header class="border-b border-border bg-bg sticky top-14 z-20">
-      <div class="container py-4">
-        <!-- Package info and navigation -->
-        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
-          <NuxtLink
-            :to="packageRoute(packageName, version)"
-            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate max-w-[60vw] sm:max-w-none"
-            :title="packageName"
-          >
-            <span v-if="orgName" class="text-fg-muted">@{{ orgName }}/</span
-            >{{ orgName ? packageName.replace(`@${orgName}/`, '') : packageName }}
-          </NuxtLink>
-          <!-- Version selector -->
-          <VersionSelector
-            v-if="version && pkg?.versions && pkg?.['dist-tags']"
-            :package-name="packageName"
-            :current-version="version"
-            :versions="pkg.versions"
-            :dist-tags="pkg['dist-tags']"
-            :url-pattern="versionUrlPattern"
-          />
-          <span
-            v-else-if="version"
-            class="px-2 py-0.5 font-mono text-sm bg-bg-muted border border-border rounded truncate max-w-32 sm:max-w-48"
-            :title="`v${version}`"
-          >
-            v{{ version }}
-          </span>
-          <span class="text-fg-subtle shrink-0">/</span>
-          <span class="font-mono text-sm text-fg-muted shrink-0">{{
-            $t('package.links.code')
-          }}</span>
-        </div>
-
-        <!-- Breadcrumb navigation -->
-        <nav
-          :aria-label="$t('code.file_path')"
-          class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
-          dir="ltr"
-        >
-          <NuxtLink
-            v-if="filePath"
-            :to="getCurrentCodeUrl()"
-            class="text-fg-muted hover:text-fg transition-colors shrink-0"
-          >
-            {{ $t('code.root') }}
-          </NuxtLink>
-          <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
-          <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
-            <span class="text-fg-subtle">/</span>
-            <NuxtLink
-              v-if="i < breadcrumbs.length - 1"
-              :to="getCurrentCodeUrl(crumb.path)"
-              class="text-fg-muted hover:text-fg transition-colors"
-            >
-              {{ crumb.name }}
-            </NuxtLink>
-            <span v-else class="text-fg">{{ crumb.name }}</span>
-          </template>
-        </nav>
-      </div>
-    </header>
-
-    <!-- Error: no version -->
-    <div v-if="!version" class="container py-20 text-center">
-      <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <LinkBase variant="button-secondary" :to="packageRoute(packageName)">{{
-        $t('code.go_to_package')
-      }}</LinkBase>
-    </div>
-
-    <!-- Loading state -->
-    <div v-else-if="treeStatus === 'pending'" class="container py-20 text-center">
-      <div class="i-svg-spinners:ring-resize w-8 h-8 mx-auto text-fg-muted" />
-      <p class="mt-4 text-fg-muted">{{ $t('code.loading_tree') }}</p>
-    </div>
-
-    <!-- Error state -->
-    <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
-      <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <LinkBase variant="button-secondary" :to="packageRoute(packageName, version)">{{
-        $t('code.back_to_package')
-      }}</LinkBase>
-    </div>
-
-    <!-- Main content: file tree + file viewer -->
-    <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
-      <!-- File tree sidebar - sticky with internal scroll -->
-      <aside
-        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
-      >
-        <CodeFileTree
-          :tree="fileTree.tree"
-          :current-path="filePath ?? ''"
-          :base-url="getCurrentCodeUrl()"
-          :base-path="basePath"
-        />
-      </aside>
-
-      <!-- File content / Directory listing - sticky with internal scroll on desktop -->
-      <div
-        class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
-      >
-        <!-- File viewer -->
-        <template v-if="isViewingFile && fileContent">
-          <div
-            class="sticky z-10 top-0 bg-bg border-b border-border px-4 py-2 flex items-center justify-between"
-          >
-            <div class="flex items-center gap-2">
-              <div
-                v-if="fileContent.markdownHtml"
-                class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
-                role="tablist"
-                aria-label="Markdown view mode selector"
-              >
-                <button
-                  v-for="mode in markdownViewModes"
-                  :key="mode.key"
-                  role="tab"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
-                  :class="
-                    markdownViewMode === mode.key
-                      ? 'bg-bg shadow text-fg border-border'
-                      : 'text-fg-subtle hover:text-fg border-transparent'
-                  "
-                  @click="markdownViewMode = mode.key"
-                >
-                  <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
-                  {{ mode.label }}
-                </button>
-              </div>
-              <div class="flex items-center gap-3 text-sm">
-                <span class="text-fg-muted" dir="auto">{{
-                  $t('code.lines', { count: fileContent.lines })
-                }}</span>
-                <span v-if="currentNode?.size" class="text-fg-subtle">{{
-                  bytesFormatter.format(currentNode.size)
-                }}</span>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <button
-                v-if="selectedLines"
-                type="button"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors active:scale-95"
-                @click="copyPermalinkUrl"
-              >
-                {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
-              </button>
-              <a
-                :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
-              >
-                {{ $t('code.raw') }}
-                <span class="i-carbon:launch w-3 h-3" />
-              </a>
-            </div>
-          </div>
-          <div
-            v-if="fileContent.markdownHtml"
-            v-show="markdownViewMode === 'preview'"
-            class="flex justify-center p-4"
-          >
-            <Readme :html="fileContent.markdownHtml.html" />
-          </div>
-
-          <CodeViewer
-            v-show="!fileContent.markdownHtml || markdownViewMode === 'code'"
-            :html="fileContent.html"
-            :lines="fileContent.lines"
-            :selected-lines="selectedLines"
-            @line-click="handleLineClick"
-          />
-        </template>
-
-        <!-- File too large warning -->
-        <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
-          <div class="i-carbon:document w-12 h-12 mx-auto text-fg-subtle mb-4" />
-          <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
-          <p class="text-fg-subtle text-sm mb-4">
-            {{
-              $t('code.file_size_warning', { size: bytesFormatter.format(currentNode?.size ?? 0) })
-            }}
-          </p>
-          <LinkBase
-            variant="button-secondary"
-            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-          >
-            {{ $t('code.view_raw') }}
-          </LinkBase>
-        </div>
-
-        <!-- Loading file content -->
-        <div
-          v-else-if="filePath && fileStatus === 'pending'"
-          class="flex min-h-full"
-          aria-busy="true"
-          :aria-label="$t('common.loading')"
-        >
-          <!-- Fake line numbers column -->
-          <div class="shrink-0 bg-bg-subtle border-ie border-border w-14 py-0">
-            <div v-for="n in 20" :key="n" class="px-3 h-6 flex items-center justify-end">
-              <SkeletonInline class="w-4 h-3 rounded-sm" />
-            </div>
-          </div>
-          <!-- Fake code content -->
-          <div class="flex-1 p-4 space-y-1.5">
-            <SkeletonBlock class="h-4 w-32 rounded-sm" />
-            <SkeletonBlock class="h-4 w-48 rounded-sm" />
-            <SkeletonBlock class="h-4 w-24 rounded-sm" />
-            <div class="h-4" />
-            <SkeletonBlock class="h-4 w-64 rounded-sm" />
-            <SkeletonBlock class="h-4 w-56 rounded-sm" />
-            <SkeletonBlock class="h-4 w-40 rounded-sm" />
-            <SkeletonBlock class="h-4 w-72 rounded-sm" />
-            <div class="h-4" />
-            <SkeletonBlock class="h-4 w-36 rounded-sm" />
-            <SkeletonBlock class="h-4 w-52 rounded-sm" />
-            <SkeletonBlock class="h-4 w-44 rounded-sm" />
-            <SkeletonBlock class="h-4 w-28 rounded-sm" />
-            <div class="h-4" />
-            <SkeletonBlock class="h-4 w-60 rounded-sm" />
-            <SkeletonBlock class="h-4 w-48 rounded-sm" />
-            <SkeletonBlock class="h-4 w-32 rounded-sm" />
-            <SkeletonBlock class="h-4 w-56 rounded-sm" />
-            <SkeletonBlock class="h-4 w-40 rounded-sm" />
-            <SkeletonBlock class="h-4 w-24 rounded-sm" />
-          </div>
-        </div>
-
-        <!-- Error loading file -->
-        <div v-else-if="filePath && fileStatus === 'error'" class="py-20 text-center" role="alert">
-          <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
-          <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
-          <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
-          <LinkBase
-            variant="button-secondary"
-            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-          >
-            {{ $t('code.view_raw') }}
-          </LinkBase>
-        </div>
-
-        <!-- Directory listing (when no file selected or viewing a directory) -->
-        <template v-else>
-          <CodeDirectoryListing
-            :tree="fileTree.tree"
-            :current-path="filePath ?? ''"
-            :base-url="getCurrentCodeUrl()"
-            :base-path="basePath"
-          />
-        </template>
-      </div>
-    </div>
-
-    <!-- Mobile file tree toggle -->
-    <ClientOnly>
-      <Teleport to="body">
-        <CodeMobileTreeDrawer
-          v-if="fileTree"
-          :tree="fileTree.tree"
-          :current-path="filePath ?? ''"
-          :base-url="getCurrentCodeUrl()"
-          :base-path="basePath"
-        />
-      </Teleport>
-    </ClientOnly>
-  </main>
-</template>

From 771b3d0bac231bbe6a580a4372437bf243f426f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 23:06:15 +0100
Subject: [PATCH 03/10] refactor: use proper route segments for code editor

---
 app/components/Code/DirectoryListing.vue      | 15 +++---
 app/components/Code/FileTree.vue              | 14 +++--
 app/components/Code/MobileTreeDrawer.vue      |  6 +--
 .../v/[version]/[...filePath].vue             | 53 ++++++++-----------
 app/pages/package/[[org]]/[name].vue          | 29 +++++++---
 test/nuxt/a11y.spec.ts                        | 20 +++++--
 6 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/app/components/Code/DirectoryListing.vue b/app/components/Code/DirectoryListing.vue
index 95e894a1e..d913d9e9c 100644
--- a/app/components/Code/DirectoryListing.vue
+++ b/app/components/Code/DirectoryListing.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
   currentPath: string
   baseUrl: string
-  /** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
-  basePath: string[]
+  baseRoute: Pick<RouteNamedMap['code'], 'params'>
 }>()
 
 // Get the current directory's contents
@@ -41,13 +41,14 @@ const parentPath = computed(() => {
 
 // Build route object for a path
 function getCodeRoute(nodePath?: string): RouteLocationRaw {
-  if (!nodePath) {
-    return { name: 'code', params: { path: props.basePath as [string, ...string[]] } }
-  }
-  const pathSegments = [...props.basePath, ...nodePath.split('/')]
   return {
     name: 'code',
-    params: { path: pathSegments as [string, ...string[]] },
+    params: {
+      org: props.baseRoute.params.org,
+      packageName: props.baseRoute.params.packageName,
+      version: props.baseRoute.params.version,
+      filePath: nodePath ?? '',
+    },
   }
 }
 
diff --git a/app/components/Code/FileTree.vue b/app/components/Code/FileTree.vue
index c7b7434d9..bae942138 100644
--- a/app/components/Code/FileTree.vue
+++ b/app/components/Code/FileTree.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { getFileIcon } from '~/utils/file-icons'
 
 const props = defineProps<{
   tree: PackageFileTree[]
   currentPath: string
   baseUrl: string
-  /** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
-  basePath: string[]
+  baseRoute: Pick<RouteNamedMap['code'], 'params'>
   depth?: number
 }>()
 
@@ -23,10 +23,14 @@ function isNodeActive(node: PackageFileTree): boolean {
 
 // Build route object for a file path
 function getFileRoute(nodePath: string): RouteLocationRaw {
-  const pathSegments = [...props.basePath, ...nodePath.split('/')]
   return {
     name: 'code',
-    params: { path: pathSegments as [string, ...string[]] },
+    params: {
+      org: props.baseRoute.params.org,
+      packageName: props.baseRoute.params.packageName,
+      version: props.baseRoute.params.version,
+      filePath: nodePath ?? '',
+    },
   }
 }
 
@@ -72,7 +76,7 @@ watch(
           :tree="node.children"
           :current-path="currentPath"
           :base-url="baseUrl"
-          :base-path="basePath"
+          :base-route="baseRoute"
           :depth="depth + 1"
         />
       </template>
diff --git a/app/components/Code/MobileTreeDrawer.vue b/app/components/Code/MobileTreeDrawer.vue
index ef03191b7..3162bc674 100644
--- a/app/components/Code/MobileTreeDrawer.vue
+++ b/app/components/Code/MobileTreeDrawer.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { PackageFileTree } from '#shared/types'
+import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 defineProps<{
   tree: PackageFileTree[]
   currentPath: string
   baseUrl: string
-  /** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
-  basePath: string[]
+  baseRoute: Pick<RouteNamedMap['code'], 'params'>
 }>()
 
 const isOpen = shallowRef(false)
@@ -75,7 +75,7 @@ watch(isOpen, open => (isLocked.value = open))
         :tree="tree"
         :current-path="currentPath"
         :base-url="baseUrl"
-        :base-path="basePath"
+        :base-route="baseRoute"
       />
     </aside>
   </Transition>
diff --git a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
index fc99399d1..ef2c007f1 100644
--- a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -7,8 +7,11 @@ import type {
 
 definePageMeta({
   name: 'code',
-  path: '/package-code/:path+',
-  alias: ['/package/code/:path+', '/code/:path+'],
+  path: '/package-code/@:org?/:packageName/v/:version/:filePath(.*)?',
+  alias: [
+    '/package/code/@:org?/:packageName/v/:version/:filePath(.*)?',
+    '/code/@:org?/:packageName/v/:version/:filePath(.*)?',
+  ],
 })
 
 const route = useRoute('code')
@@ -19,23 +22,11 @@ const route = useRoute('code')
 //   /code/nuxt/v/4.2.0/src/index.ts → packageName: "nuxt", version: "4.2.0", filePath: "src/index.ts"
 //   /code/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0", filePath: null
 const parsedRoute = computed(() => {
-  const segments = route.params.path
-
-  // Find the /v/ separator for version
-  const vIndex = segments.indexOf('v')
-  if (vIndex === -1 || vIndex >= segments.length - 1) {
-    // No version specified - redirect or error
-    return {
-      packageName: segments.join('/'),
-      version: null as string | null,
-      filePath: null as string | null,
-    }
-  }
-
-  const packageName = segments.slice(0, vIndex).join('/')
-  const afterVersion = segments.slice(vIndex + 1)
-  const version = afterVersion[0] ?? null
-  const filePath = afterVersion.length > 1 ? afterVersion.slice(1).join('/') : null
+  const packageName = route.params.org
+    ? `@${route.params.org}/${route.params.packageName}`
+    : route.params.packageName
+  const version = route.params.version
+  const filePath = route.params.filePath || null
 
   return { packageName, version, filePath }
 })
@@ -46,8 +37,15 @@ const filePathOrig = computed(() => parsedRoute.value.filePath)
 const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
 
 // Navigation helper - build URL for a path
-function getCodeUrl(args: { packageName: string; version: string; filePath?: string }): string {
-  const base = `/package-code/${args.packageName}/v/${args.version}`
+function getCodeUrl(args: {
+  org?: string
+  packageName: string
+  version: string
+  filePath?: string
+}): string {
+  const base = args.org
+    ? `/package-code/@${args.org}/${args.packageName}/v/${args.version}`
+    : `/package-code/${args.packageName}/v/${args.version}`
   return args.filePath ? `${base}/${args.filePath}` : base
 }
 
@@ -203,18 +201,13 @@ const breadcrumbs = computed(() => {
 // Navigation helper - build URL for a path
 function getCurrentCodeUrl(path?: string): string {
   return getCodeUrl({
+    org: route.params.org,
     packageName: packageName.value,
     version: version.value!,
     filePath: path,
   })
 }
 
-// Base path segments for route objects (e.g., ['nuxt', 'v', '4.2.0'] or ['@nuxt', 'kit', 'v', '1.0.0'])
-const basePath = computed(() => {
-  const segments = packageName.value.split('/')
-  return [...segments, 'v', version.value ?? '']
-})
-
 // Extract org name from scoped package
 const orgName = computed(() => {
   const name = packageName.value
@@ -409,7 +402,7 @@ defineOgImageComponent('Default', {
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
           :base-url="getCurrentCodeUrl()"
-          :base-path="basePath"
+          :base-route="route"
         />
       </aside>
 
@@ -565,7 +558,7 @@ defineOgImageComponent('Default', {
             :tree="fileTree.tree"
             :current-path="filePath ?? ''"
             :base-url="getCurrentCodeUrl()"
-            :base-path="basePath"
+            :base-route="route"
           />
         </template>
       </div>
@@ -579,7 +572,7 @@ defineOgImageComponent('Default', {
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
           :base-url="getCurrentCodeUrl()"
-          :base-path="basePath"
+          :base-route="route"
         />
       </Teleport>
     </ClientOnly>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 7253e8648..605017e09 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -516,17 +516,29 @@ useSeoMeta({
   twitterDescription: () => pkg.value?.description ?? '',
 })
 
+const linkCode = computed((): Parameters<typeof navigateTo>[0] | null => {
+  if (pkg.value == null || resolvedVersion.value == null) {
+    return null
+  }
+  const split = pkg.value.name.split('/')
+  return {
+    name: 'code',
+    params: {
+      org: split.length === 2 ? split[0]?.replace(/^@/, '') : undefined,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: resolvedVersion.value,
+      filePath: '',
+    },
+  }
+})
+
 onKeyStroke(
   e => isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
   e => {
-    if (pkg.value == null || resolvedVersion.value == null) return
+    if (linkCode.value === null) return
     e.preventDefault()
-    navigateTo({
-      name: 'code',
-      params: {
-        path: [pkg.value.name, 'v', resolvedVersion.value],
-      },
-    })
+
+    navigateTo(linkCode.value)
   },
   { dedupe: true },
 )
@@ -662,8 +674,9 @@ onKeyStroke(
               {{ $t('package.links.docs') }}
             </LinkBase>
             <LinkBase
+              v-if="linkCode"
               variant="button-secondary"
-              :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
+              :to="linkCode"
               aria-keyshortcuts="."
               classicon="i-carbon:code"
             >
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index af4f3dd2d..da22f425f 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -921,7 +921,9 @@ describe('component accessibility audits', () => {
           tree: mockTree,
           currentPath: '',
           baseUrl: '/package-code/vue',
-          basePath: ['vue', 'v', '3.0.0'],
+          baseRoute: {
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+          },
         },
       })
       const results = await runAxe(component)
@@ -934,7 +936,9 @@ describe('component accessibility audits', () => {
           tree: mockTree,
           currentPath: 'src',
           baseUrl: '/package-code/vue',
-          basePath: ['vue', 'v', '3.0.0'],
+          baseRoute: {
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+          },
         },
       })
       const results = await runAxe(component)
@@ -959,7 +963,9 @@ describe('component accessibility audits', () => {
           tree: mockTree,
           currentPath: '',
           baseUrl: '/package-code/vue',
-          basePath: ['vue', 'v', '3.0.0'],
+          baseRoute: {
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+          },
         },
       })
       const results = await runAxe(component)
@@ -972,7 +978,9 @@ describe('component accessibility audits', () => {
           tree: mockTree,
           currentPath: 'src/index.ts',
           baseUrl: '/package-code/vue',
-          basePath: ['vue', 'v', '3.0.0'],
+          baseRoute: {
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+          },
         },
       })
       const results = await runAxe(component)
@@ -1222,7 +1230,9 @@ describe('component accessibility audits', () => {
           tree: mockTree,
           currentPath: '',
           baseUrl: '/package-code/vue',
-          basePath: ['vue', 'v', '3.0.0'],
+          baseRoute: {
+            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
+          },
         },
       })
       const results = await runAxe(component)

From b08b19db769eef5dc1daf314c17a483b88cb532a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 23:17:35 +0100
Subject: [PATCH 04/10] fix: route creation

---
 .../[packageName]/v/[version]/[...filePath].vue       |  4 +---
 app/pages/package/[[org]]/[name].vue                  | 11 ++++++-----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
index ef2c007f1..e88edeb80 100644
--- a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -201,9 +201,7 @@ const breadcrumbs = computed(() => {
 // Navigation helper - build URL for a path
 function getCurrentCodeUrl(path?: string): string {
   return getCodeUrl({
-    org: route.params.org,
-    packageName: packageName.value,
-    version: version.value!,
+    ...route.params,
     filePath: path,
   })
 }
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 605017e09..5fc58fafe 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -18,6 +18,7 @@ import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 import { LinkBase } from '#components'
+import type { RouteLocationRaw } from 'vue-router'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
@@ -516,7 +517,7 @@ useSeoMeta({
   twitterDescription: () => pkg.value?.description ?? '',
 })
 
-const linkCode = computed((): Parameters<typeof navigateTo>[0] | null => {
+const codeLink = computed((): RouteLocationRaw | null => {
   if (pkg.value == null || resolvedVersion.value == null) {
     return null
   }
@@ -535,10 +536,10 @@ const linkCode = computed((): Parameters<typeof navigateTo>[0] | null => {
 onKeyStroke(
   e => isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
   e => {
-    if (linkCode.value === null) return
+    if (codeLink.value === null) return
     e.preventDefault()
 
-    navigateTo(linkCode.value)
+    navigateTo(codeLink.value)
   },
   { dedupe: true },
 )
@@ -674,9 +675,9 @@ onKeyStroke(
               {{ $t('package.links.docs') }}
             </LinkBase>
             <LinkBase
-              v-if="linkCode"
+              v-if="codeLink"
               variant="button-secondary"
-              :to="linkCode"
+              :to="codeLink"
               aria-keyshortcuts="."
               classicon="i-carbon:code"
             >

From 7648ef99feb9e9105566ae13b04abf9b1ff28e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 9 Feb 2026 23:46:11 +0100
Subject: [PATCH 05/10] fix: optionality of org

---
 app/components/Package/InstallScripts.vue     | 21 ++++++++++++++++---
 .../v/[version]/[...filePath].vue             | 11 +++++-----
 app/pages/package/[[org]]/[name].vue          |  2 +-
 3 files changed, 25 insertions(+), 9 deletions(-)
 rename app/pages/package-code/{@[[org]] => [[org]]}/[packageName]/v/[version]/[...filePath].vue (98%)

diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index b7747042d..8c9fdc223 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
+import type { RouteLocationRaw } from 'vue-router'
 
 const props = defineProps<{
   packageName: string
@@ -11,12 +12,26 @@ const props = defineProps<{
   }
 }>()
 
-function getCodeLink(filePath: string): string {
-  return `/code/${props.packageName}/v/${props.version}/${filePath}`
+function getCodeLink(filePath: string): RouteLocationRaw {
+  const split = props.packageName.split('/')
+
+  console.log({ split })
+  return {
+    name: 'code',
+    params: {
+      org: split.length === 2 ? split[0] : null,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.version,
+      filePath: '',
+    },
+  }
 }
 
 const scriptParts = computed(() => {
-  const parts: Record<string, { prefix: string | null; filePath: string | null; link: string }> = {}
+  const parts: Record<
+    string,
+    { prefix: string | null; filePath: string | null; link: RouteLocationRaw }
+  > = {}
   for (const scriptName of props.installScripts.scripts) {
     const content = props.installScripts.content?.[scriptName]
     if (!content) continue
diff --git a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
similarity index 98%
rename from app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
rename to app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index e88edeb80..76e28049b 100644
--- a/app/pages/package-code/@[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -7,10 +7,11 @@ import type {
 
 definePageMeta({
   name: 'code',
-  path: '/package-code/@:org?/:packageName/v/:version/:filePath(.*)?',
+  path: '/package-code/:org?/:packageName/v/:version/:filePath(.*)?',
   alias: [
-    '/package/code/@:org?/:packageName/v/:version/:filePath(.*)?',
-    '/code/@:org?/:packageName/v/:version/:filePath(.*)?',
+    '/package/code/:org?/:packageName/v/:version/:filePath(.*)?',
+    '/package/code/:packageName/v/:version/:filePath(.*)?',
+    // '/code/@:org?/:packageName/v/:version/:filePath(.*)?',
   ],
 })
 
@@ -23,7 +24,7 @@ const route = useRoute('code')
 //   /code/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", version: "1.0.0", filePath: null
 const parsedRoute = computed(() => {
   const packageName = route.params.org
-    ? `@${route.params.org}/${route.params.packageName}`
+    ? `${route.params.org}/${route.params.packageName}`
     : route.params.packageName
   const version = route.params.version
   const filePath = route.params.filePath || null
@@ -44,7 +45,7 @@ function getCodeUrl(args: {
   filePath?: string
 }): string {
   const base = args.org
-    ? `/package-code/@${args.org}/${args.packageName}/v/${args.version}`
+    ? `/package-code/${args.org}/${args.packageName}/v/${args.version}`
     : `/package-code/${args.packageName}/v/${args.version}`
   return args.filePath ? `${base}/${args.filePath}` : base
 }
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 5fc58fafe..f56831970 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -525,7 +525,7 @@ const codeLink = computed((): RouteLocationRaw | null => {
   return {
     name: 'code',
     params: {
-      org: split.length === 2 ? split[0]?.replace(/^@/, '') : undefined,
+      org: split.length === 2 ? split[0] : undefined,
       packageName: split.length === 2 ? split[1]! : split[0]!,
       version: resolvedVersion.value,
       filePath: '',

From a9013b2504b33a9e3eb5df53fa3c3b4d47f06fd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 10 Feb 2026 09:47:33 +0100
Subject: [PATCH 06/10] fix: function

---
 app/components/Package/InstallScripts.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index 8c9fdc223..f45a572fe 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -15,14 +15,13 @@ const props = defineProps<{
 function getCodeLink(filePath: string): RouteLocationRaw {
   const split = props.packageName.split('/')
 
-  console.log({ split })
   return {
     name: 'code',
     params: {
       org: split.length === 2 ? split[0] : null,
       packageName: split.length === 2 ? split[1]! : split[0]!,
       version: props.version,
-      filePath: '',
+      filePath: filePath,
     },
   }
 }

From 12d4656ff7eb382aa26d449e8e8e3580243a3756 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 10 Feb 2026 09:48:39 +0100
Subject: [PATCH 07/10] fix: function call

---
 .../[[org]]/[packageName]/v/[version]/[...filePath].vue        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 76e28049b..4df45c190 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -56,7 +56,8 @@ const { data: pkg } = usePackage(packageName)
 // URL pattern for version selector - includes file path if present
 const versionUrlPattern = computed(() =>
   getCodeUrl({
-    packageName: packageName.value,
+    org: route.params.org,
+    packageName: route.params.packageName,
     version: '{version}',
     filePath: filePath.value,
   }),

From fc64ccb381cd1b8869788d052aa511aff79ecdd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 10 Feb 2026 09:52:37 +0100
Subject: [PATCH 08/10] refactor: rename function

---
 .../[packageName]/v/[version]/[...filePath].vue    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 4df45c190..ec566e4c9 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -201,7 +201,7 @@ const breadcrumbs = computed(() => {
 })
 
 // Navigation helper - build URL for a path
-function getCurrentCodeUrl(path?: string): string {
+function getCurrentCodeUrlWithPath(path?: string): string {
   return getCodeUrl({
     ...route.params,
     filePath: path,
@@ -249,7 +249,7 @@ function copyPermalinkUrl() {
 }
 
 // Canonical URL for this code page
-const canonicalUrl = computed(() => `https://npmx.dev${getCurrentCodeUrl()}`)
+const canonicalUrl = computed(() => `https://npmx.dev${getCurrentCodeUrlWithPath()}`)
 
 // Toggle markdown view mode
 const markdownViewModes = [
@@ -349,7 +349,7 @@ defineOgImageComponent('Default', {
         >
           <NuxtLink
             v-if="filePath"
-            :to="getCurrentCodeUrl()"
+            :to="getCurrentCodeUrlWithPath()"
             class="text-fg-muted hover:text-fg transition-colors shrink-0"
           >
             {{ $t('code.root') }}
@@ -359,7 +359,7 @@ defineOgImageComponent('Default', {
             <span class="text-fg-subtle">/</span>
             <NuxtLink
               v-if="i < breadcrumbs.length - 1"
-              :to="getCurrentCodeUrl(crumb.path)"
+              :to="getCurrentCodeUrlWithPath(crumb.path)"
               class="text-fg-muted hover:text-fg transition-colors"
             >
               {{ crumb.name }}
@@ -401,7 +401,7 @@ defineOgImageComponent('Default', {
         <CodeFileTree
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
-          :base-url="getCurrentCodeUrl()"
+          :base-url="getCurrentCodeUrlWithPath()"
           :base-route="route"
         />
       </aside>
@@ -557,7 +557,7 @@ defineOgImageComponent('Default', {
           <CodeDirectoryListing
             :tree="fileTree.tree"
             :current-path="filePath ?? ''"
-            :base-url="getCurrentCodeUrl()"
+            :base-url="getCurrentCodeUrlWithPath()"
             :base-route="route"
           />
         </template>
@@ -571,7 +571,7 @@ defineOgImageComponent('Default', {
           v-if="fileTree"
           :tree="fileTree.tree"
           :current-path="filePath ?? ''"
-          :base-url="getCurrentCodeUrl()"
+          :base-url="getCurrentCodeUrlWithPath()"
           :base-route="route"
         />
       </Teleport>

From a84de510166499b9c43b538f63550b80f9e15efa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 10 Feb 2026 09:52:55 +0100
Subject: [PATCH 09/10] fix: use correct function

---
 .../[[org]]/[packageName]/v/[version]/[...filePath].vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index ec566e4c9..12ec17eca 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -249,7 +249,7 @@ function copyPermalinkUrl() {
 }
 
 // Canonical URL for this code page
-const canonicalUrl = computed(() => `https://npmx.dev${getCurrentCodeUrlWithPath()}`)
+const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl()}`)
 
 // Toggle markdown view mode
 const markdownViewModes = [

From 23dcde5adf840de3bda311ac3361045ed71f675c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 10 Feb 2026 10:11:15 +0100
Subject: [PATCH 10/10] fix: function call

---
 .../[[org]]/[packageName]/v/[version]/[...filePath].vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 12ec17eca..0e6321356 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -249,7 +249,7 @@ function copyPermalinkUrl() {
 }
 
 // Canonical URL for this code page
-const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl()}`)
+const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
 // Toggle markdown view mode
 const markdownViewModes = [