Merge remote-tracking branch 'origin/main' into refactor-remove-class-shortcuts

Author: danielroe

app/components/ColumnPicker.vue

@@ -42,7 +42,7 @@ const columnLabelKey: Record<string, string> = {
   version: 'filters.columns.version',
   description: 'filters.columns.description',
   downloads: 'filters.columns.downloads',
-  updated: 'filters.columns.updated',
+  updated: 'filters.columns.published',
   maintainers: 'filters.columns.maintainers',
   keywords: 'filters.columns.keywords',
   qualityScore: 'filters.columns.quality_score',

app/components/Package/Card.vue

@@ -85,7 +85,7 @@ const pkgDescription = useMarkdown(() => ({
               <dd class="font-mono">{{ result.package.publisher.username }}</dd>
             </div>
             <div v-if="result.package.date" class="flex items-center gap-1.5">
-              <dt class="sr-only">{{ $t('package.card.updated') }}</dt>
+              <dt class="sr-only">{{ $t('package.card.published') }}</dt>
               <dd>
                 <DateTime
                   :datetime="result.package.date"

app/components/Package/ListControls.vue

@@ -33,7 +33,7 @@ const sortOptions = computed(
   () =>
     [
       { value: 'downloads', label: $t('package.sort.downloads') },
-      { value: 'updated', label: $t('package.sort.updated') },
+      { value: 'updated', label: $t('package.sort.published') },
       { value: 'name-asc', label: $t('package.sort.name_asc') },
       { value: 'name-desc', label: $t('package.sort.name_desc') },
     ] as const,

app/components/Package/ListToolbar.vue

@@ -91,7 +91,7 @@ const sortKeyLabelKeys: Record<SortKey, string> = {
   'downloads-day': 'filters.sort.downloads_day',
   'downloads-month': 'filters.sort.downloads_month',
   'downloads-year': 'filters.sort.downloads_year',
-  'updated': 'filters.sort.updated',
+  'updated': 'filters.sort.published',
   'name': 'filters.sort.name',
   'quality': 'filters.sort.quality',
   'popularity': 'filters.sort.popularity',

app/components/Package/Skeleton.vue

@@ -70,10 +70,10 @@
           </dd>
         </div>
 
-        <!-- Updated -->
+        <!-- Published -->
         <div class="space-y-1 col-span-2">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.skeleton.updated') }}
+            {{ $t('package.skeleton.published') }}
           </dt>
           <dd class="font-mono text-sm">
             <SkeletonInline class="h-5 w-28" />

app/components/Package/Table.vue

@@ -85,7 +85,7 @@ const columnLabelKeys: Record<ColumnId, string> = {
   version: 'filters.columns.version',
   description: 'filters.columns.description',
   downloads: 'filters.columns.downloads',
-  updated: 'filters.columns.updated',
+  updated: 'filters.columns.published',
   maintainers: 'filters.columns.maintainers',
   keywords: 'filters.columns.keywords',
   qualityScore: 'filters.columns.quality_score',

app/components/Readme.vue

@@ -3,41 +3,66 @@ defineProps<{
   html: string
 }>()
 
+const router = useRouter()
 const { copy } = useClipboard()
 
-const handleCopy = async (e: MouseEvent) => {
-  const target = (e.target as HTMLElement).closest('[data-copy]')
+// Combined click handler for:
+// 1. Intercepting npmjs.com links to route internally
+// 2. Copy button functionality for code blocks
+function handleClick(event: MouseEvent) {
+  const target = event.target as HTMLElement | undefined
   if (!target) return
 
-  const wrapper = target.closest('.readme-code-block')
-  if (!wrapper) return
+  // Handle copy button clicks
+  const copyTarget = target.closest('[data-copy]')
+  if (copyTarget) {
+    const wrapper = copyTarget.closest('.readme-code-block')
+    if (!wrapper) return
 
-  const pre = wrapper.querySelector('pre')
-  if (!pre?.textContent) return
+    const pre = wrapper.querySelector('pre')
+    if (!pre?.textContent) return
 
-  await copy(pre.textContent)
+    copy(pre.textContent)
 
-  const icon = target.querySelector('span')
-  if (!icon) return
+    const icon = copyTarget.querySelector('span')
+    if (!icon) return
 
-  const originalIcon = 'i-carbon:copy'
-  const successIcon = 'i-carbon:checkmark'
+    const originalIcon = 'i-carbon:copy'
+    const successIcon = 'i-carbon:checkmark'
 
-  icon.classList.remove(originalIcon)
-  icon.classList.add(successIcon)
+    icon.classList.remove(originalIcon)
+    icon.classList.add(successIcon)
 
-  setTimeout(() => {
-    icon.classList.remove(successIcon)
-    icon.classList.add(originalIcon)
-  }, 2000)
+    setTimeout(() => {
+      icon.classList.remove(successIcon)
+      icon.classList.add(originalIcon)
+    }, 2000)
+    return
+  }
+
+  // Handle npmjs.com link clicks - route internally
+  const anchor = target.closest('a')
+  if (!anchor) return
+
+  const href = anchor.getAttribute('href')
+  if (!href) return
+
+  const match = href.match(/^(?:https?:\/\/)?(?:www\.)?npmjs\.(?:com|org)(\/.+)$/)
+  if (!match || !match[1]) return
+
+  const route = router.resolve(match[1])
+  if (route) {
+    event.preventDefault()
+    router.push(route)
+  }
 }
 </script>
 
 <template>
   <article
     class="readme prose prose-invert max-w-[70ch] lg:max-w-none"
     v-html="html"
-    @click="handleCopy"
+    @click="handleClick"
   />
 </template>
 

app/composables/usePackageComparison.ts

@@ -21,6 +21,12 @@ export interface PackageComparisonData {
   }
   metadata?: {
     license?: string
+    /**
+     * Publish date of this version (ISO 8601 date-time string).
+     * Uses `time[version]` from the registry, NOT `time.modified`.
+     * For example, if the package was most recently published 3 years ago
+     * but a maintainer was removed last week, this would show the '3 years ago' time.
+     */
     lastUpdated?: string
     engines?: { node?: string; npm?: string }
     deprecated?: string
@@ -133,7 +139,9 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
               },
               metadata: {
                 license: pkgData.license,
-                lastUpdated: pkgData.time?.modified,
+                // Use version-specific publish time, NOT time.modified (which can be
+                // updated by metadata changes like maintainer additions)
+                lastUpdated: pkgData.time?.[latestVersion],
                 engines: analysis?.engines,
                 deprecated: versionData?.deprecated,
               },

app/pages/package/[...package].vue

@@ -385,24 +385,6 @@ defineOgImageComponent('Package', {
   stars: () => stars.value ?? 0,
   primaryColor: '#60a5fa',
 })
-
-// We're using only @click because it catches touch events and enter hits
-function handleClick(event: MouseEvent) {
-  const target = (event?.target as HTMLElement | undefined)?.closest('a')
-  if (!target) return
-
-  const href = target.getAttribute('href')
-  if (!href) return
-
-  const match = href.match(/^(?:https?:\/\/)?(?:www\.)?npmjs\.(?:com|org)(\/.+)$/)
-  if (!match || !match[1]) return
-
-  const route = router.resolve(match[1])
-  if (route) {
-    event.preventDefault()
-    router.push(route)
-  }
-}
 </script>
 
 <template>
@@ -855,12 +837,23 @@ function handleClick(event: MouseEvent) {
             </template>
           </ClientOnly>
 
-          <div v-if="pkg.time?.modified" class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.updated') }}
+          <div
+            v-if="resolvedVersion && pkg.time?.[resolvedVersion]"
+            class="space-y-1 sm:col-span-2"
+          >
+            <dt
+              class="text-xs text-fg-subtle uppercase tracking-wider"
+              :title="
+                $t('package.stats.published_tooltip', {
+                  package: pkg.name,
+                  version: resolvedVersion,
+                })
+              "
+            >
+              {{ $t('package.stats.published') }}
             </dt>
             <dd class="font-mono text-sm text-fg">
-              <DateTime :datetime="pkg.time.modified" date-style="medium" />
+              <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
             </dd>
           </div>
         </dl>
@@ -870,7 +863,7 @@ function handleClick(event: MouseEvent) {
           <PackageSkillsModal
             :skills="skillsData?.skills ?? []"
             :package-name="pkg.name"
-            :version="displayVersion?.version"
+            :version="resolvedVersion || undefined"
           />
         </ClientOnly>
       </section>
@@ -968,7 +961,7 @@ function handleClick(event: MouseEvent) {
           </a>
         </h2>
         <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-        <Readme v-if="readmeData?.html" :html="readmeData.html" @click="handleClick" />
+        <Readme v-if="readmeData?.html" :html="readmeData.html" />
         <p v-else class="text-fg-subtle italic">
           {{ $t('package.readme.no_readme') }}
           <a
@@ -1025,7 +1018,7 @@ function handleClick(event: MouseEvent) {
               v-if="skillsData?.skills?.length"
               :skills="skillsData.skills"
               :package-name="pkg.name"
-              :version="displayVersion?.version"
+              :version="resolvedVersion || undefined"
             />
           </ClientOnly>
 

app/utils/install-command.ts

@@ -25,7 +25,9 @@ export const packageManagers = [
     id: 'yarn',
     label: 'yarn',
     action: 'add',
-    executeLocal: 'yarn',
+    // For both yarn v1 and v2+ support
+    // local exec defers to npx instead
+    executeLocal: 'npx',
     executeRemote: 'yarn dlx',
     create: 'yarn create',
     icon: 'i-simple-icons:yarn',