refactor: revert changes to path matching

Author: danielroe

app/components/ClaimPackageModal.vue

@@ -192,7 +192,7 @@ const connectorModalOpen = shallowRef(false)
 
               <div class="flex gap-3">
                 <NuxtLink
-                  :to="`/package/${packageName}`"
+                  :to="getPackageRoute(packageName)"
                   class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
                   @click="open = false"
                 >
@@ -299,7 +299,7 @@ const connectorModalOpen = shallowRef(false)
                       <span v-else class="w-4 h-4 shrink-0" />
                       <div class="min-w-0">
                         <NuxtLink
-                          :to="`/package/${pkg.name}`"
+                          :to="getPackageRoute(pkg.name)"
                           class="font-mono text-sm text-fg hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                           target="_blank"
                         >

app/components/HeaderPackagesDropdown.vue

@@ -94,7 +94,7 @@ function handleKeydown(event: KeyboardEvent) {
           <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
             <li v-for="pkg in packages" :key="pkg">
               <NuxtLink
-                :to="`/${pkg}`"
+                :to="getPackageRoute(pkg)"
                 class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
               >
                 {{ pkg }}

app/components/VersionSelector.vue

@@ -625,7 +625,7 @@ watch(
         <!-- Link to package page for full version list -->
         <div class="border-t border-border mt-1 pt-1 px-3 py-2">
           <NuxtLink
-            :to="`/${packageName}`"
+            :to="getPackageRoute(packageName)"
             class="text-xs text-fg-subtle hover:text-fg transition-[color] focus-visible:outline-none focus-visible:text-fg"
             @click="isOpen = false"
           >

app/composables/usePackageRoute.ts

@@ -6,19 +6,12 @@
  * @returns Route object with name and params
  */
 export function getPackageRoute(pkg: string, version: string | null = null) {
-  const [org, name] = pkg.startsWith('@') ? pkg.split('/') : [null, pkg]
-  if (version) {
-    return {
-      name: 'package-version',
-      params: { org, name, version },
-    } as const
-  }
-
   return {
     name: 'package',
     params: {
-      org,
-      name,
+      package: [...pkg.split('/'), version ? 'v' : null, version].filter(
+        (a): a is NonNullable<typeof a> => !!a,
+      ),
     },
   } as const
 }
@@ -36,17 +29,39 @@ export function getPackageRoute(pkg: string, version: string | null = null) {
  * @public
  */
 export function usePackageRoute() {
-  const route = useRoute('package-version')
+  const route = useRoute('package')
+
+  const data = computed(() => {
+    const segments = route.params.package || []
 
-  const orgName = computed(() => route.params.org)
-  const requestedVersion = computed(() => route.params.version || null)
-  const packageName = computed(() =>
-    orgName.value ? `${orgName.value}/${route.params.name}` : route.params.name,
-  )
+    // Find the /v/ separator for version
+    const vIndex = segments.indexOf('v')
+    if (vIndex !== -1 && vIndex < segments.length - 1) {
+      return {
+        packageName: segments.slice(0, vIndex).join('/'),
+        requestedVersion: segments.slice(vIndex + 1).join('/'),
+      }
+    }
+
+    // Parse @ versioned package
+    const fullPath = segments.join('/')
+    const versionMatch = fullPath.match(/^(@[^/]+\/[^/]+|[^/]+)@([^/]+)$/)
+    if (versionMatch) {
+      const [, packageName, requestedVersion] = versionMatch as [string, string, string]
+      return {
+        packageName,
+        requestedVersion,
+      }
+    }
+
+    return {
+      packageName: fullPath,
+      requestedVersion: null as string | null,
+    }
+  })
 
   return {
-    packageName,
-    requestedVersion,
-    orgName,
+    packageName: computed(() => data.value.packageName),
+    requestedVersion: computed(() => data.value.requestedVersion),
   }
 }

app/pages/[[org]]/[name].vue app/pages/[...package].vueapp/pages/[[org]]/[name].vue renamed to app/pages/[...package].vue

@@ -8,11 +8,20 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 
 definePageMeta({
   name: 'package',
+  alias: ['/package/:package(.*)*'],
 })
 
 const router = useRouter()
 
-const { packageName, requestedVersion, orgName } = usePackageRoute()
+const { packageName, requestedVersion } = usePackageRoute()
+
+const orgName = computed(() => {
+  const name = packageName.value
+  if (!name.startsWith('@')) return null
+
+  const match = name.match(/^@([^/]+)\//)
+  return match ? match[1] : null
+})
 
 if (import.meta.server) {
   assertValidPackageName(packageName.value)
@@ -471,7 +480,7 @@ defineOgImageComponent('Package', {
 
               <NuxtLink
                 v-if="resolvedVersion !== requestedVersion"
-                :to="`/${pkg.name}/v/${displayVersion.version}`"
+                :to="getPackageRoute(pkg.name, displayVersion.version)"
                 :title="$t('package.view_permalink')"
                 >{{ displayVersion.version }}</NuxtLink
               >
@@ -992,7 +1001,7 @@ defineOgImageComponent('Package', {
                 >
                 <NuxtLink
                   v-if="typesPackageName"
-                  :to="`/${typesPackageName}`"
+                  :to="getPackageRoute(typesPackageName)"
                   class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   :title="$t('package.get_started.view_types', { package: typesPackageName })"
                 >
@@ -1076,7 +1085,7 @@ defineOgImageComponent('Package', {
                     }}</span>
                   </button>
                   <NuxtLink
-                    :to="`/${createPackageInfo.packageName}`"
+                    :to="getPackageRoute(createPackageInfo.packageName)"
                     class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                     :title="`View ${createPackageInfo.packageName}`"
                   >