Merge branch 'main' into vt/sort-dependents

Author: danielroe

README.md

@@ -29,15 +29,18 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Provenance indicators** – verified build badges for packages with npm provenance
 - **Multi-provider repository support** – stars/forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, and Sourcehut
 - **JSR availability** – see if scoped packages are also available on JSR
-- **Package badges** – module format (ESM/CJS/dual), TypeScript types, and engine constraints
+- **Package badges** – module format (ESM/CJS/dual), TypeScript types (with `@types/*` links), and engine constraints
 - **Outdated dependency indicators** – visual cues showing which dependencies are behind
 - **Vulnerability warnings** – security advisories from the OSV database
 - **Download statistics** – weekly download counts with sparkline charts
-- **Install size** – total install size including dependencies
+- **Install size** – total install size (including transitive dependencies)
 - **Playground links** – quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
 - **Infinite search** – auto-load additional search pages as you scroll
-- **Keyboard navigation** – press `/` to focus search, arrow keys to navigate results, Enter to select
+- **Keyboard navigation** – press `/` to focus search, `.` to open code viewer, arrow keys to navigate results
+- **Deprecation notices** – clear warnings for deprecated packages and versions
+- **Version range resolution** – dependency ranges (e.g., `^1.0.0`) resolve to actual installed versions
 - **Claim new packages** – register new package names directly from search results (via local connector)
+- **Clickable version tags** – navigate directly to any version from the versions list
 
 ### User & org pages
 
@@ -65,10 +68,12 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 | Install size calculation       |    ❌     |    ✅    |
 | JSR cross-reference            |    ❌     |    ✅    |
 | Vulnerability warnings         |    ✅     |    ✅    |
+| Deprecation notices            |    ✅     |    ✅    |
 | Download charts                |    ✅     |    ✅    |
 | Playground links               |    ❌     |    ✅    |
 | Keyboard navigation            |    ❌     |    ✅    |
 | Multi-provider repo support    |    ❌     |    ✅    |
+| Version range resolution       |    ❌     |    ✅    |
 | Dependents list                |    ✅     |    🚧    |
 | Package admin (access/owners)  |    ✅     |    🚧    |
 | Org/team management            |    ✅     |    🚧    |
@@ -105,12 +110,13 @@ npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev
 
 npmx.dev also supports shorter, cleaner URLs:
 
-| Pattern        | Example                                            |
-| -------------- | -------------------------------------------------- |
-| `/<package>`   | [`/nuxt`](https://npmx.dev/nuxt)                   |
-| `/@scope/name` | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit)         |
-| `/@org`        | [`/@nuxt`](https://npmx.dev/@nuxt)                 |
-| `/~username`   | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
+| Pattern            | Example                                            |
+| ------------------ | -------------------------------------------------- |
+| `/<package>`       | [`/nuxt`](https://npmx.dev/nuxt)                   |
+| `/<pkg>@<version>` | [`/vue@3.4.0`](https://npmx.dev/vue@3.4.0)         |
+| `/@scope/name`     | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit)         |
+| `/@org`            | [`/@nuxt`](https://npmx.dev/@nuxt)                 |
+| `/~username`       | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
 
 ## Tech stack
 
@@ -122,7 +128,7 @@ npmx.dev also supports shorter, cleaner URLs:
 
 ## Contributing
 
-I'd welcome contributions &ndash; please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
+We welcome contributions &ndash; please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
 
 ## Related projects
 
@@ -132,7 +138,7 @@ I'd welcome contributions &ndash; please do feel free to poke around and improve
 - [npm-alt](https://npm.willow.sh/) &ndash; An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) &ndash; An alternative frontend to npm made with as little client-side JavaScript as possible
 
-If you're building something cool, let me know! 🙏
+If you're building something cool, let us know! 🙏
 
 ## License
 

app/components/AppFooter.vue

@@ -83,9 +83,9 @@ onUnmounted(() => {
         : // JS-controlled: fixed position, hidden by default, transition only after mount
           isScrollable
           ? [
-              'fixed bottom-0 left-0 right-0 z-40 translate-y-full',
+              'fixed bottom-0 left-0 right-0 z-40',
               isMounted && 'transition-transform duration-300 ease-out',
-              isVisible && 'translate-y-0',
+              isVisible ? 'translate-y-0' : 'translate-y-full',
             ]
           : 'mt-auto',
     ]"

app/components/AppHeader.vue

@@ -30,12 +30,15 @@ withDefaults(
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+            aria-keyshortcuts="/"
           >
             search
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-              >/</kbd
+              aria-hidden="true"
             >
+              /
+            </kbd>
           </NuxtLink>
         </li>
         <li v-if="showConnector" class="flex">

app/components/PackageCard.vue

@@ -31,17 +31,17 @@ const emit = defineEmits<{
       @focus="index != null && emit('focus', index)"
       @mouseenter="index != null && emit('focus', index)"
     >
-      <header class="flex items-start justify-between gap-4 mb-2">
+      <header class="flex items-start justify-between gap-2 sm:gap-4 mb-2">
         <component
           :is="headingLevel ?? 'h3'"
-          class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
+          class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-words"
         >
           {{ result.package.name }}
         </component>
-        <div class="flex items-center gap-1.5 shrink-0 max-w-32">
+        <div class="flex items-center gap-1.5 shrink-0">
           <span
             v-if="result.package.version"
-            class="font-mono text-xs text-fg-subtle truncate"
+            class="font-mono text-xs text-fg-subtle truncate max-w-20 sm:max-w-32"
             :title="result.package.version"
           >
             v{{ result.package.version }}
@@ -56,11 +56,14 @@ const emit = defineEmits<{
         </div>
       </header>
 
-      <p v-if="result.package.description" class="text-fg-muted text-sm line-clamp-2 mb-3">
+      <p
+        v-if="result.package.description"
+        class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3"
+      >
         <MarkdownText :text="result.package.description" />
       </p>
 
-      <footer class="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-fg-subtle">
+      <footer class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
         <dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
           <div
             v-if="showPublisher && result.package.publisher?.username"

app/components/PackageDependencies.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useOutdatedDependencies, getOutdatedTooltip } from '~/composables/useNpmRegistry'
-import type { OutdatedDependencyInfo } from '~/composables/useNpmRegistry'
-
 const props = defineProps<{
   packageName: string
   dependencies?: Record<string, string>
@@ -13,20 +10,6 @@ const props = defineProps<{
 // Fetch outdated info for dependencies
 const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
 
-/**
- * Get CSS class for a dependency version based on outdated status
- */
-function getVersionClass(info: OutdatedDependencyInfo | undefined): string {
-  if (!info) return 'text-fg-subtle'
-
-  // Red for major versions behind
-  if (info.majorsBehind > 0) return 'text-red-500 cursor-help'
-  // Orange for minor versions behind
-  if (info.minorsBehind > 0) return 'text-orange-500 cursor-help'
-  // Yellow for patch versions behind
-  return 'text-yellow-500 cursor-help'
-}
-
 // Expanded state for each section
 const depsExpanded = ref(false)
 const peerDepsExpanded = ref(false)
@@ -89,15 +72,16 @@ const sortedOptionalDependencies = computed(() => {
               :title="getOutdatedTooltip(outdatedDeps[dep])"
               aria-hidden="true"
             >
-              <span class="i-carbon-warning-alt w-3 h-3" />
+              <span class="i-carbon-warning-alt w-3 h-3 block" />
             </span>
-            <span
+            <NuxtLink
+              :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
               class="font-mono text-xs text-right truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
             >
               {{ version }}
-            </span>
+            </NuxtLink>
             <span v-if="outdatedDeps[dep]" class="sr-only">
               ({{ getOutdatedTooltip(outdatedDeps[dep]) }})
             </span>
@@ -143,12 +127,16 @@ const sortedOptionalDependencies = computed(() => {
               optional
             </span>
           </div>
-          <span
+          <NuxtLink
+            :to="{
+              name: 'package',
+              params: { package: [...peer.name.split('/'), 'v', peer.version] },
+            }"
             class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
             :title="peer.version"
           >
             {{ peer.version }}
-          </span>
+          </NuxtLink>
         </li>
       </ul>
       <button
@@ -187,12 +175,13 @@ const sortedOptionalDependencies = computed(() => {
           >
             {{ dep }}
           </NuxtLink>
-          <span
+          <NuxtLink
+            :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
             class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
             :title="version"
           >
             {{ version }}
-          </span>
+          </NuxtLink>
         </li>
       </ul>
       <button

app/components/PackageInstallScripts.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const props = defineProps<{
+  packageName: string
+  installScripts: {
+    scripts: ('preinstall' | 'install' | 'postinstall')[]
+    content?: Record<string, string>
+    npxDependencies: Record<string, string>
+  }
+}>()
+
+const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
+const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
+const sortedNpxDeps = computed(() => {
+  return Object.entries(props.installScripts.npxDependencies).sort(([a], [b]) => a.localeCompare(b))
+})
+
+const isExpanded = ref(false)
+</script>
+
+<template>
+  <section aria-labelledby="install-scripts-heading">
+    <h2
+      id="install-scripts-heading"
+      class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"
+    >
+      <span class="i-carbon-warning-alt w-3 h-3 text-yellow-500" aria-hidden="true" />
+      Install Scripts
+    </h2>
+
+    <!-- Script list: name as label, content below -->
+    <dl class="space-y-2 m-0">
+      <div v-for="scriptName in installScripts.scripts" :key="scriptName">
+        <dt class="font-mono text-xs text-fg-muted">{{ scriptName }}</dt>
+        <dd
+          tabindex="0"
+          class="font-mono text-sm text-fg-subtle m-0 truncate focus:whitespace-normal focus:overflow-visible cursor-help rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :title="installScripts.content?.[scriptName]"
+        >
+          {{ installScripts.content?.[scriptName] || '(script)' }}
+        </dd>
+      </div>
+    </dl>
+
+    <!-- npx packages (expandable) -->
+    <div v-if="hasNpxDeps" class="mt-3">
+      <button
+        type="button"
+        class="flex items-center gap-1.5 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+        :aria-expanded="isExpanded"
+        aria-controls="npx-packages-details"
+        @click="isExpanded = !isExpanded"
+      >
+        <span
+          class="i-carbon-chevron-right w-3 h-3 transition-transform duration-200"
+          :class="{ 'rotate-90': isExpanded }"
+          aria-hidden="true"
+        />
+        {{ sortedNpxDeps.length }} npx package{{ sortedNpxDeps.length !== 1 ? 's' : '' }}
+      </button>
+
+      <ul
+        v-show="isExpanded"
+        id="npx-packages-details"
+        class="mt-2 space-y-1 list-none m-0 p-0 pl-4"
+      >
+        <li
+          v-for="[dep, version] in sortedNpxDeps"
+          :key="dep"
+          class="flex items-center justify-between py-0.5 text-sm gap-2"
+        >
+          <NuxtLink
+            :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 }}
+          </NuxtLink>
+          <span class="flex items-center gap-1">
+            <span
+              v-if="
+                outdatedNpxDeps[dep] &&
+                outdatedNpxDeps[dep].resolved !== outdatedNpxDeps[dep].latest
+              "
+              class="shrink-0"
+              :class="getVersionClass(outdatedNpxDeps[dep])"
+              :title="getOutdatedTooltip(outdatedNpxDeps[dep])"
+              aria-hidden="true"
+            >
+              <span class="i-carbon-warning-alt w-3 h-3 block" />
+            </span>
+            <span
+              class="font-mono text-xs text-right truncate"
+              :class="getVersionClass(outdatedNpxDeps[dep])"
+              :title="
+                outdatedNpxDeps[dep]
+                  ? outdatedNpxDeps[dep].resolved === outdatedNpxDeps[dep].latest
+                    ? `currently ${outdatedNpxDeps[dep].latest}`
+                    : getOutdatedTooltip(outdatedNpxDeps[dep])
+                  : version
+              "
+            >
+              {{ version }}
+            </span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>

app/components/PackageListControls.vue

@@ -52,40 +52,42 @@ const showFilteredCount = computed(() => {
     <!-- Filter input -->
     <div class="flex-1 relative">
       <label for="package-filter" class="sr-only">Filter packages</label>
-      <span
-        class="absolute left-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+      <div
+        class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
         aria-hidden="true"
       >
-        <span class="i-carbon-search inline-block w-4 h-4" />
-      </span>
+        <div class="i-carbon-search inline-block w-4 h-4" />
+      </div>
       <input
         id="package-filter"
         v-model="filterValue"
         type="search"
         :placeholder="placeholder ?? 'Filter packages...'"
         autocomplete="off"
-        class="w-full bg-bg-subtle border border-border rounded-lg pl-9 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
+        class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
       />
     </div>
 
     <!-- Sort select -->
-    <div class="relative shrink-0">
+    <div class="relative shrink-0 flex">
       <label for="package-sort" class="sr-only">Sort packages</label>
-      <select
-        id="package-sort"
-        v-model="sortValue"
-        class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
-      >
-        <option v-for="option in sortOptions" :key="option.value" :value="option.value">
-          {{ option.label }}
-        </option>
-      </select>
-      <span
-        class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
-        aria-hidden="true"
-      >
-        <span class="i-carbon-chevron-down w-4 h-4" />
-      </span>
+      <div class="relative">
+        <select
+          id="package-sort"
+          v-model="sortValue"
+          class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
+        >
+          <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+        <div
+          class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+          aria-hidden="true"
+        >
+          <div class="i-carbon-chevron-down w-4 h-4" />
+        </div>
+      </div>
     </div>
   </div>