feat: use package header on all package pages

alexdln · alexdln · commit ab9b15e2ad1e · 2026-03-12T11:50:20.000Z
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
@@ -8,13 +8,14 @@ import { togglePackageLike } from '~/utils/atproto/likes'
 import { isEditableElement } from '~/utils/input'
 
 const props = defineProps<{
-  pkg: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
+  pkg?: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
   resolvedVersion?: string | null
-  displayVersion: PackumentVersion | null
-  latestVersion: SlimVersion | null
-  provenanceData: ProvenanceDetails | null
-  provenanceStatus: string
+  displayVersion?: PackumentVersion | null
+  latestVersion?: SlimVersion | null
+  provenanceData?: ProvenanceDetails | null
+  provenanceStatus?: string | null
   page: 'main' | 'docs' | 'code' | 'diff'
+  versionUrlPattern: string
 }>()
 
 const { requestedVersion, orgName } = usePackageRoute()
@@ -126,11 +127,6 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
-// URL pattern for version selector - includes file path if present
-const versionUrlPattern = computed(
-  () => `/package/${props.pkg?.name || packageName.value}/v/{version}`,
-)
-
 const keyboardShortcuts = useKeyboardShortcuts()
 
 onKeyStroke(
@@ -341,7 +337,7 @@ const likeAction = async () => {
         :tabindex="showScrollToTop ? 0 : -1"
       />
       <div class="flex-inline items-center flex-nowrap gap-1 font-mono text-fg-muted">
-        <template v-if="hasProvenance(displayVersion)">
+        <template v-if="displayVersion && hasProvenance(displayVersion)">
           <TooltipApp
             :text="
               provenanceData && provenanceStatus !== 'pending'
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
@@ -74,6 +74,7 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 
 /** Get URL for a specific version */
 function getVersionUrl(version: string): string {
+  console.log('props.urlPattern', props.urlPattern)
   return props.urlPattern.replace('{version}', version)
 }
 
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CompareResponse, FileChange } from '#shared/types'
+import type { RouteLocationRaw } from 'vue-router'
 import { diffRoute, packageRoute } from '~/utils/router'
 
 definePageMeta({
@@ -90,12 +91,24 @@ const groupedDeps = computed(() => {
   }
   return groups
 })
+// Keep latestVersion for comparison (to show "(latest)" badge)
+const latestVersionDetailed = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
+const normalizeRoutePath = (route: RouteLocationRaw) => {
+  const resolvedHref = router.resolve(route).href
+  return resolvedHref.replace(/%7B/g, '{').replace(/%7D/g, '}')
+}
 
 const fromVersionUrlPattern = computed(() => {
-  return router.resolve(diffRoute(packageName.value, '{version}', toVersion.value)).href
+  return normalizeRoutePath(diffRoute(packageName.value, '{version}', toVersion.value))
 })
 const toVersionUrlPattern = computed(() => {
-  return router.resolve(diffRoute(packageName.value, fromVersion.value, '{version}')).href
+  return normalizeRoutePath(diffRoute(packageName.value, fromVersion.value, '{version}'))
 })
 
 useSeoMeta({
@@ -112,53 +125,17 @@ useSeoMeta({
 
 <template>
   <main class="flex-1 flex flex-col min-h-0">
-    <!-- Header -->
-    <header class="border-b border-border bg-bg sticky top-14 z-20">
-      <div class="container py-4">
-        <!-- Package info -->
-        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
-          <NuxtLink
-            :to="packageRoute(packageName)"
-            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate"
-          >
-            {{ packageName }}
-          </NuxtLink>
-          <span class="text-fg-subtle">/</span>
-          <span class="font-mono text-sm text-fg-muted">compare</span>
-        </div>
-
-        <!-- Version selectors -->
-        <div class="flex items-center gap-3 flex-wrap">
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-fg-subtle uppercase tracking-wide">From</span>
-            <VersionSelector
-              v-if="pkg?.versions && pkg?.['dist-tags']"
-              :package-name="packageName"
-              :current-version="fromVersion"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags']"
-              :url-pattern="fromVersionUrlPattern"
-            />
-            <span v-else class="font-mono text-sm text-fg-muted">{{ fromVersion }}</span>
-          </div>
-
-          <span class="i-lucide:arrow-right w-4 h-4 text-fg-subtle" />
-
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-fg-subtle uppercase tracking-wide">To</span>
-            <VersionSelector
-              v-if="pkg?.versions && pkg?.['dist-tags']"
-              :package-name="packageName"
-              :current-version="toVersion"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags']"
-              :url-pattern="toVersionUrlPattern"
-            />
-            <span v-else class="font-mono text-sm text-fg-muted">{{ toVersion }}</span>
-          </div>
-        </div>
-      </div>
-    </header>
+    <div class="w-full container -mb-px">
+      <PackageHeader
+        :pkg="pkg"
+        :resolved-version="fromVersion"
+        :display-version="pkg?.requestedVersion"
+        :latest-version="latestVersionDetailed"
+        :version-url-pattern="fromVersionUrlPattern"
+        page="diff"
+      />
+    </div>
+    <span class="block h-px w-full bg-border" />
 
     <!-- Error: invalid route -->
     <div v-if="!versionRange" class="container py-20 text-center">
@@ -186,6 +163,20 @@ useSeoMeta({
       <aside
         class="hidden md:flex w-80 border-ie border-border bg-bg-subtle flex-col shrink-0 min-h-0"
       >
+        <div class="px-3 py-2 border-b border-border">
+          <p class="text-xs font-medium text-fg mb-1 flex items-center gap-1.5">
+            <span class="block i-lucide-git-compare-arrows w-3.5 h-3.5" />
+            {{ $t('compare.version_selector_title') }}
+          </p>
+          <VersionSelector
+            v-if="pkg?.versions && pkg?.['dist-tags']"
+            :package-name="packageName"
+            :current-version="toVersion"
+            :versions="pkg.versions"
+            :dist-tags="pkg['dist-tags']"
+            :url-pattern="toVersionUrlPattern"
+          />
+        </div>
         <DiffSidebarPanel
           :compare="compare"
           :grouped-deps="groupedDeps"
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -293,6 +293,14 @@ const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('
 
 const bytesFormatter = useBytesFormatter()
 
+// Keep latestVersion for comparison (to show "(latest)" badge)
+const latestVersion = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -330,69 +338,17 @@ defineOgImageComponent('Default', {
 
 <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="getCurrentCodeUrlWithPath()"
-            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="getCurrentCodeUrlWithPath(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>
+    <div class="w-full container -mb-px">
+      <PackageHeader
+        :pkg="pkg"
+        :resolved-version="version"
+        :display-version="pkg?.requestedVersion"
+        :latest-version="latestVersion"
+        :version-url-pattern="versionUrlPattern"
+        page="code"
+      />
+    </div>
+    <span class="block h-px w-full bg-border" />
 
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
@@ -93,6 +93,17 @@ const { data: docsData, status: docsStatus } = useLazyFetch<DocsResponse>(
     }),
   },
 )
+// Keep latestVersion for comparison (to show "(latest)" badge)
+const latestVersionDetailed = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
+const versionUrlPattern = computed(
+  () => `/package-docs/${pkg.value?.name || packageName.value}/v/{version}`,
+)
 
 const pageTitle = computed(() => {
   if (!packageName.value) return 'API Docs - npmx'
@@ -123,45 +134,17 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 
 <template>
   <div class="docs-page flex-1 flex flex-col">
-    <!-- Visually hidden h1 for accessibility -->
-    <h1 class="sr-only">{{ packageName }} API Documentation</h1>
-
-    <!-- Sticky header - positioned below AppHeader -->
-    <header
-      aria-label="Package documentation header"
-      class="docs-header sticky z-10 border-b border-border"
-    >
-      <div class="absolute inset-0 bg-bg/90 backdrop-blur" />
-      <div class="relative px-4 sm:px-6 lg:px-8 py-4 z-1">
-        <div class="flex items-center justify-between gap-4">
-          <div class="flex items-center gap-3 min-w-0">
-            <NuxtLink
-              v-if="packageName"
-              :to="packageRoute(packageName)"
-              class="font-mono text-lg sm:text-xl font-semibold text-fg hover:text-fg-muted transition-colors truncate"
-            >
-              {{ packageName }}
-            </NuxtLink>
-            <VersionSelector
-              v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
-              :package-name="packageName"
-              :current-version="resolvedVersion"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags']"
-              :url-pattern="`/package-docs/${packageName}/v/{version}`"
-            />
-            <span v-else-if="resolvedVersion" class="text-fg-subtle font-mono text-sm shrink-0">
-              {{ resolvedVersion }}
-            </span>
-          </div>
-          <div class="flex items-center gap-3 shrink-0">
-            <span class="text-xs px-2 py-1 rounded badge-green border border-badge-green/50">
-              API Docs
-            </span>
-          </div>
-        </div>
-      </div>
-    </header>
+    <div class="w-full container -mb-px">
+      <PackageHeader
+        :pkg="pkg"
+        :resolved-version="resolvedVersion"
+        :display-version="pkg?.requestedVersion"
+        :latest-version="latestVersionDetailed"
+        :version-url-pattern="versionUrlPattern"
+        page="docs"
+      />
+    </div>
+    <span class="block h-px w-full bg-border" />
 
     <div class="flex" dir="ltr">
       <!-- Sidebar TOC -->
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
@@ -517,6 +517,11 @@ const canonicalUrl = computed(() => {
   return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
 })
 
+// URL pattern for version selector - includes file path if present
+const versionUrlPattern = computed(
+  () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
+)
+
 const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
 
 const numberFormatter = useNumberFormatter()
@@ -585,6 +590,7 @@ const showSkeleton = shallowRef(false)
         :provenance-status="provenanceStatus"
         :class="$style.areaHeader"
         page="main"
+        :version-url-pattern="versionUrlPattern"
       />
       <article id="package-article" :class="$style.packagePage">
         <!-- Package details -->
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -1167,6 +1167,7 @@
     "file_size_warning": "{size} exceeds the 250KB limit for comparison",
     "compare_versions": "diff",
     "compare_versions_title": "Compare with latest version",
+    "version_selector_title": "Compare with version",
     "summary": "Summary",
     "deps_count": "{count} dep | {count} deps",
     "dependencies": "Dependencies",
diff --git a/i18n/schema.json b/i18n/schema.json
@@ -3505,6 +3505,9 @@
         "compare_versions_title": {
           "type": "string"
         },
+        "version_selector_title": {
+          "type": "string"
+        },
         "summary": {
           "type": "string"
         },
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
@@ -752,6 +752,7 @@ describe('component accessibility audits', () => {
           provenanceData: null,
           provenanceStatus: 'idle',
           page: 'docs',
+          versionUrlPattern: '/package/vue/v/{version}',
         },
       })
       const results = await runAxe(component)

Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,7 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))`
`74`	`74`
`75`	`75`	`/** Get URL for a specific version */`
`76`	`76`	`function getVersionUrl(version: string): string {`
	`77`	`+ console.log('props.urlPattern', props.urlPattern)`
`77`	`78`	`return props.urlPattern.replace('{version}', version)`
`78`	`79`	`}`
`79`	`80`