feat: new routing schema - updated components and server utils

Author: mikouaji

app/components/Header/PackagesDropdown.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="`/package/${pkg}`"
                 class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
               >
                 {{ pkg }}

app/components/Package/MetricsBadges.vue

@@ -45,7 +45,7 @@ const typesTooltip = computed(() => {
 const typesHref = computed(() => {
   if (!analysis.value) return null
   if (analysis.value.types?.kind === '@types') {
-    return `/${analysis.value.types.packageName}`
+    return `/package/${analysis.value.types.packageName}`
   }
   return null
 })

app/components/Package/SkillsModal.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 }>()
 
 function getSkillSourceUrl(skill: SkillListItem): string {
-  const base = `/code/${props.packageName}`
+  const base = `/package-code/${props.packageName}`
   const versionPath = props.version ? `/v/${props.version}` : ''
   return `${base}${versionPath}/skills/${skill.dirName}/SKILL.md`
 }
@@ -101,7 +101,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         </template>
       </i18n-t>
       <a
-        href="/skills-npm"
+        href="/package/skills-npm"
         class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors shrink-0"
       >
         {{ $t('package.skills.learn_more') }}

app/components/Terminal/Install.vue

@@ -149,7 +149,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
               ></code
             >
             <NuxtLink
-              :to="`/${typesPackageName}`"
+              :to="`/package/${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 })"
             >
@@ -228,7 +228,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
               }}</span>
             </button>
             <NuxtLink
-              :to="`/${createPackageInfo.packageName}`"
+              :to="`/package/${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}`"
             >

app/components/VersionSelector.vue

@@ -620,7 +620,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="`/package/${packageName}`"
             class="text-xs text-fg-subtle hover:text-fg transition-[color] focus-visible:outline-none focus-visible:text-fg"
             @click="isOpen = false"
           >

app/components/compare/PackageSelector.vue

@@ -64,7 +64,7 @@ function handleBlur() {
         class="inline-flex items-center gap-2 px-3 py-1.5 bg-bg-subtle border border-border rounded-md"
       >
         <NuxtLink
-          :to="`/${pkg}`"
+          :to="`/package/${pkg}`"
           class="font-mono text-sm text-fg hover:text-accent transition-colors"
         >
           {{ pkg }}

server/utils/code-highlight.ts

@@ -187,10 +187,10 @@ function linkifyImports(html: string, options?: LinkifyOptions): string {
     const dep = dependencies?.[packageName]
     if (dep) {
       // Link to code browser with resolved version
-      return `/code/${packageName}/v/${dep.version}`
+      return `/package-code/${packageName}/v/${dep.version}`
     }
     // Fall back to package page if not a known dependency
-    return `/${packageName}`
+    return `/package/${packageName}`
   }
 
   // Match: from keyword span followed by string span containing module specifier

server/utils/import-resolver.ts

@@ -212,7 +212,7 @@ export function createImportResolver(
   return (specifier: string) => {
     const resolved = resolveRelativeImport(specifier, currentFile, files)
     if (resolved) {
-      return `/code/${packageName}/v/${version}/${resolved.path}`
+      return `/package-code/${packageName}/v/${version}/${resolved.path}`
     }
     return null
   }