Merge branch 'danielroe:main' into main

Author: graphieros

app/components/ConnectorModal.vue

@@ -165,6 +165,17 @@ watch(open, isOpen => {
                 {{ error }}
               </div>
 
+              <!-- Warning message -->
+              <div
+                role="alert"
+                class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+              >
+                <p class="font-mono text-sm text-fg font-bold">WARNING</p>
+                <p class="text-sm text-fg-muted">
+                  This allows npmx to access your npm cli and any authenticated contexts.
+                </p>
+              </div>
+
               <button
                 type="submit"
                 :disabled="!tokenInput.trim() || isConnecting"

app/components/PackageCard.vue

@@ -23,7 +23,7 @@ function formatDate(dateStr: string): string {
 <template>
   <article class="group card-interactive">
     <NuxtLink
-      :to="`/package/${result.package.name}`"
+      :to="{ name: 'package', params: { package: result.package.name.split('/') } }"
       :prefetch-on="prefetch ? 'visibility' : 'interaction'"
       class="block focus:outline-none decoration-none"
     >
@@ -78,7 +78,7 @@ function formatDate(dateStr: string): string {
     >
       <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
         <NuxtLink
-          :to="`/search?q=keywords:${encodeURIComponent(keyword)}`"
+          :to="{ name: 'search', query: { q: `keywords:${keyword}` } }"
           class="tag decoration-none"
         >
           {{ keyword }}

app/components/PackageDependencies.vue

@@ -71,7 +71,7 @@ function truncateVersion(version: string, maxLength = 20): string {
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
           <NuxtLink
-            :to="`/package/${dep}`"
+            :to="{ name: 'package', params: { package: dep.split('/') } }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
@@ -111,7 +111,7 @@ function truncateVersion(version: string, maxLength = 20): string {
         >
           <div class="flex items-center gap-2 min-w-0">
             <NuxtLink
-              :to="`/package/${peer.name}`"
+              :to="{ name: 'package', params: { package: peer.name.split('/') } }"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
             >
               {{ peer.name }}

app/components/PackageDownloadStats.vue

@@ -24,6 +24,9 @@ const config = computed(() => ({
   theme: 'dark', // enforced dark mode for now
   style: {
     backgroundColor: 'transparent',
+    animation: {
+      show: false,
+    },
     area: {
       color: '#6A6A6A',
       useGradient: false,
@@ -67,7 +70,34 @@ const config = computed(() => ({
       </div>
       <div class="w-full">
         <ClientOnly>
-          <VueUiSparkline :dataset :config />
+          <div>
+            <VueUiSparkline :dataset :config />
+          </div>
+          <template #fallback>
+            <!-- Skeleton matching sparkline layout: title row + chart with data label -->
+            <div class="min-h-[100px]">
+              <!-- Title row: date range (24px height) -->
+              <div class="h-6 flex items-center pl-3">
+                <span class="skeleton h-3 w-36" />
+              </div>
+              <!-- Chart area: data label left, sparkline right -->
+              <div class="aspect-[500/80] flex items-center">
+                <!-- Data label (covers ~42% width) -->
+                <div class="w-[42%] flex items-center pl-0.5">
+                  <span class="skeleton h-7 w-24" />
+                </div>
+                <!-- Sparkline area (~58% width) -->
+                <div class="flex-1 flex items-end gap-0.5 h-4/5 pr-3">
+                  <span
+                    v-for="i in 16"
+                    :key="i"
+                    class="skeleton flex-1 rounded-sm"
+                    :style="{ height: `${25 + ((i * 7) % 50)}%` }"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
         </ClientOnly>
       </div>
     </section>

app/components/PackageVersions.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PackumentVersion, PackageVersionInfo } from '#shared/types'
+import type { RouteLocationRaw } from 'vue-router'
 
 const props = defineProps<{
   packageName: string
@@ -56,6 +57,14 @@ function compareVersions(a: string, b: string): number {
   return 0
 }
 
+// Build route object for package version link
+function versionRoute(version: string): RouteLocationRaw {
+  return {
+    name: 'package',
+    params: { package: [...props.packageName.split('/'), 'v', version] },
+  }
+}
+
 // Get prerelease channel or empty string for stable
 function getPrereleaseChannel(version: string): string {
   const parsed = parseVersion(version)
@@ -333,7 +342,7 @@ function formatDate(dateStr: string): string {
           <div class="flex-1 flex items-center justify-between py-1.5 text-sm gap-2 min-w-0">
             <div class="flex items-center gap-2 min-w-0">
               <NuxtLink
-                :to="`/package/${packageName}/v/${row.primaryVersion.version}`"
+                :to="versionRoute(row.primaryVersion.version)"
                 class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
               >
                 {{ row.primaryVersion.version }}
@@ -374,7 +383,7 @@ function formatDate(dateStr: string): string {
           >
             <div class="flex items-center gap-2 min-w-0">
               <NuxtLink
-                :to="`/package/${packageName}/v/${v.version}`"
+                :to="versionRoute(v.version)"
                 class="font-mono text-xs text-fg-subtle hover:text-fg-muted transition-colors duration-200 truncate"
               >
                 {{ v.version }}
@@ -452,10 +461,11 @@ function formatDate(dateStr: string): string {
               <div v-else class="flex items-center gap-2 py-1">
                 <span class="w-3" />
                 <NuxtLink
-                  :to="`/package/${packageName}/v/${group.versions[0]?.version}`"
+                  v-if="group.versions[0]"
+                  :to="versionRoute(group.versions[0].version)"
                   class="font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200"
                 >
-                  {{ group.versions[0]?.version }}
+                  {{ group.versions[0].version }}
                 </NuxtLink>
                 <span
                   v-if="group.versions[0]?.tag"
@@ -474,7 +484,7 @@ function formatDate(dateStr: string): string {
                 >
                   <div class="flex items-center gap-2 min-w-0">
                     <NuxtLink
-                      :to="`/package/${packageName}/v/${v.version}`"
+                      :to="versionRoute(v.version)"
                       class="font-mono text-xs text-fg-subtle hover:text-fg-muted transition-colors duration-200 truncate"
                     >
                       {{ v.version }}

app/middleware/canonical-redirects.global.ts

@@ -0,0 +1,28 @@
+/**
+ * Redirect legacy URLs to canonical paths (client-side only)
+ *
+ * - /package/* → /*
+ * - /package/code/* → /code/*
+ * - /org/* → /@*
+ */
+export default defineNuxtRouteMiddleware(to => {
+  // Only redirect on client-side to avoid breaking crawlers mid-transition
+  if (import.meta.server) return
+
+  const path = to.path
+
+  // /package/code/* → /code/*
+  if (path.startsWith('/package/code/')) {
+    return navigateTo(path.replace('/package/code/', '/code/'), { replace: true })
+  }
+
+  // /package/* → /*
+  if (path.startsWith('/package/')) {
+    return navigateTo(path.replace('/package/', '/'), { replace: true })
+  }
+
+  // /org/* → /@*
+  if (path.startsWith('/org/')) {
+    return navigateTo(path.replace('/org/', '/@'), { replace: true })
+  }
+})

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

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { formatNumber } from '#imports'
 
-const route = useRoute('org-name')
+definePageMeta({
+  name: 'org',
+  alias: ['/org/:org()'],
+})
+
+const route = useRoute('org')
 
-const orgName = computed(() => route.params.name)
+const orgName = computed(() => route.params.org)
 
 const { isConnected } = useConnector()
 
@@ -26,6 +31,13 @@ const packageCount = computed(() => scopedPackages.value.length)
 
 const activeTab = ref<'members' | 'teams'>('members')
 
+// Canonical URL for this org page
+const canonicalUrl = computed(() => `https://npmx.dev/@${orgName.value}`)
+
+useHead({
+  link: [{ rel: 'canonical', href: canonicalUrl }],
+})
+
 useSeoMeta({
   title: () => `@${orgName.value} - npmx`,
   description: () => `npm packages published by the ${orgName.value} organization`,

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

@@ -2,16 +2,21 @@
 import { joinURL } from 'ufo'
 import type { PackumentVersion, NpmVersionDist } from '#shared/types'
 
-const route = useRoute('package-name')
+definePageMeta({
+  name: 'package',
+  alias: ['/package/:package(.*)*'],
+})
+
+const route = useRoute('package')
 
 // Parse package name and optional version from URL
 // Patterns:
-//   /package/nuxt → packageName: "nuxt", requestedVersion: null
-//   /package/nuxt/v/4.2.0 → packageName: "nuxt", requestedVersion: "4.2.0"
-//   /package/@nuxt/kit → packageName: "@nuxt/kit", requestedVersion: null
-//   /package/@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", requestedVersion: "1.0.0"
+//   /nuxt → packageName: "nuxt", requestedVersion: null
+//   /nuxt/v/4.2.0 → packageName: "nuxt", requestedVersion: "4.2.0"
+//   /@nuxt/kit → packageName: "@nuxt/kit", requestedVersion: null
+//   /@nuxt/kit/v/1.0.0 → packageName: "@nuxt/kit", requestedVersion: "1.0.0"
 const parsedRoute = computed(() => {
-  const segments = Array.isArray(route.params.name) ? route.params.name : [route.params.name ?? '']
+  const segments = route.params.package || []
 
   // Find the /v/ separator for version
   const vIndex = segments.indexOf('v')
@@ -220,6 +225,16 @@ onMounted(() => {
   nextTick(checkDescriptionOverflow)
 })
 
+// Canonical URL for this package page
+const canonicalUrl = computed(() => {
+  const base = `https://npmx.dev/${packageName.value}`
+  return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
+})
+
+useHead({
+  link: [{ rel: 'canonical', href: canonicalUrl }],
+})
+
 useSeoMeta({
   title: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
   description: () => pkg.value?.description ?? '',
@@ -246,7 +261,7 @@ defineOgImageComponent('Package', {
             <h1 class="font-mono text-2xl sm:text-3xl font-medium">
               <NuxtLink
                 v-if="orgName"
-                :to="`/org/${orgName}`"
+                :to="{ name: 'org', params: { org: orgName } }"
                 class="text-fg-muted hover:text-fg transition-colors duration-200"
                 >@{{ orgName }}</NuxtLink
               ><span v-if="orgName">/</span
@@ -432,7 +447,10 @@ defineOgImageComponent('Package', {
             </li>
             <li v-if="displayVersion">
               <NuxtLink
-                :to="`/package/code/${pkg.name}/v/${displayVersion.version}`"
+                :to="{
+                  name: 'code',
+                  params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
+                }"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon-code w-4 h-4" />
@@ -560,7 +578,7 @@ defineOgImageComponent('Package', {
             </h2>
             <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
               <li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
-                <NuxtLink :to="`/search?q=keywords:${encodeURIComponent(keyword)}`" class="tag">
+                <NuxtLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }" class="tag">
                   {{ keyword }}
                 </NuxtLink>
               </li>