Merge remote-tracking branch 'origin/main' into neutrino2211/main

danielroe · danielroe · commit c99d5b1ac842 · 2026-01-25T17:05:26.000Z
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -8,13 +8,16 @@ on:
     branches:
       - main
 
+permissions:
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
@@ -31,7 +34,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
@@ -59,7 +62,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - run: npm i -g --force corepack && corepack enable
+      - run: corepack enable
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
diff --git a/README.md b/README.md
@@ -35,6 +35,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Install size** &ndash; total install size including dependencies
 - **Playground links** &ndash; quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
 - **Infinite search** &ndash; auto-load additional search pages as you scroll
+- **Keyboard navigation** &ndash; press `/` to focus search, arrow keys to navigate results, Enter to select
 - **Claim new packages** &ndash; register new package names directly from search results (via local connector)
 
 ### User & org pages
@@ -65,6 +66,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 | Vulnerability warnings         |    ✅     |    ✅    |
 | Download charts                |    ✅     |    ✅    |
 | Playground links               |    ❌     |    ✅    |
+| Keyboard navigation            |    ❌     |    ✅    |
 | Dependents list                |    ✅     |    🚧    |
 | Package admin (access/owners)  |    ✅     |    🚧    |
 | Org/team management            |    ✅     |    🚧    |
diff --git a/SECURITY.md b/SECURITY.md
@@ -2,6 +2,6 @@
 
 ## Reporting a Vulnerability
 
-To report a vulnerability, please [privately report it via the Security tab](https://github.com/danielroe/npmx.dev/security/advisories/new). If that is impossible, feel free to send an email to **security@roe.dev** instead.
+To report a vulnerability, please [privately report it via the Security tab](https://github.com/npmx-dev/npmx.dev/security/advisories/new). If that is impossible, feel free to send an email to **security@roe.dev** instead.
 
 All security vulnerabilities will be promptly verified and addressed.
diff --git a/app/app.vue b/app/app.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+
 const route = useRoute()
 const router = useRouter()
 
@@ -12,9 +14,12 @@ useHead({
 
 // Global keyboard shortcut: "/" focuses search or navigates to search page
 function handleGlobalKeydown(e: KeyboardEvent) {
-  // Ignore if user is typing in an input, textarea, or contenteditable
   const target = e.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+
+  const isEditableTarget =
+    target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
+
+  if (isEditableTarget) {
     return
   }
 
@@ -28,20 +33,16 @@ function handleGlobalKeydown(e: KeyboardEvent) {
 
     if (searchInput) {
       searchInput.focus()
-    } else {
-      // Navigate to search page
-      router.push('/search')
+      return
     }
+
+    router.push('/search')
   }
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', handleGlobalKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleGlobalKeydown)
-})
+if (import.meta.client) {
+  useEventListener(document, 'keydown', handleGlobalKeydown)
+}
 </script>
 
 <template>
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
@@ -5,7 +5,7 @@
         <p class="font-mono m-0">a better browser for the npm registry</p>
         <div class="flex items-center gap-6">
           <a
-            href="https://github.com/danielroe/npmx.dev"
+            href="https://github.com/npmx-dev/npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs"
           >
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -43,7 +43,7 @@ withDefaults(
         </li>
         <li v-else class="flex">
           <a
-            href="https://github.com/danielroe/npmx.dev"
+            href="https://github.com/npmx-dev/npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
           >
diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
@@ -9,15 +9,27 @@ defineProps<{
   /** Whether to show the publisher username */
   showPublisher?: boolean
   prefetch?: boolean
+  selected?: boolean
+  index?: number
+}>()
+
+const emit = defineEmits<{
+  focus: [index: number]
 }>()
 </script>
 
 <template>
-  <article class="group card-interactive">
+  <article
+    class="group card-interactive scroll-mt-48 scroll-mb-6"
+    :class="{ 'bg-bg-muted border-border-hover': selected }"
+  >
     <NuxtLink
       :to="{ name: 'package', params: { package: result.package.name.split('/') } }"
       :prefetch-on="prefetch ? 'visibility' : 'interaction'"
-      class="block focus:outline-none decoration-none"
+      class="block focus:outline-none decoration-none scroll-mt-48 scroll-mb-6"
+      :data-result-index="index"
+      @focus="index != null && emit('focus', index)"
+      @mouseenter="index != null && emit('focus', index)"
     >
       <header class="flex items-start justify-between gap-4 mb-2">
         <component
diff --git a/app/components/PackageList.vue b/app/components/PackageList.vue
@@ -18,13 +18,17 @@ const props = defineProps<{
   pageSize?: number
   /** Initial page to scroll to (1-indexed) */
   initialPage?: number
+  /** Selected result index (for keyboard navigation) */
+  selectedIndex?: number
 }>()
 
 const emit = defineEmits<{
   /** Emitted when scrolled near the bottom and more items should be loaded */
   loadMore: []
   /** Emitted when the visible page changes */
   pageChange: [page: number]
+  /** Emitted when a result is hovered/focused */
+  select: [index: number]
 }>()
 
 // Reference to WindowVirtualizer for infinite scroll detection
@@ -78,6 +82,14 @@ watch(
     }
   },
 )
+
+function scrollToIndex(index: number, smooth = true) {
+  listRef.value?.scrollToIndex(index, { align: 'center', smooth })
+}
+
+defineExpose({
+  scrollToIndex,
+})
 </script>
 
 <template>
@@ -97,8 +109,11 @@ watch(
             :result="item as NpmSearchResult"
             :heading-level="headingLevel"
             :show-publisher="showPublisher"
+            :selected="index === (selectedIndex ?? -1)"
+            :index="index"
             class="animate-fade-in animate-fill-both"
             :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+            @focus="emit('select', $event)"
           />
         </div>
       </template>
diff --git a/app/composables/useVirtualInfiniteScroll.ts b/app/composables/useVirtualInfiniteScroll.ts
@@ -5,7 +5,10 @@ export interface WindowVirtualizerHandle {
   readonly viewportSize: number
   findItemIndex: (offset: number) => number
   getItemOffset: (index: number) => number
-  scrollToIndex: (index: number, opts?: { align?: 'start' | 'center' | 'end' }) => void
+  scrollToIndex: (
+    index: number,
+    opts?: { align?: 'start' | 'center' | 'end'; smooth?: boolean },
+  ) => void
 }
 
 export interface UseVirtualInfiniteScrollOptions {
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
@@ -339,16 +339,17 @@ useSeoMeta({
 
         <!-- Breadcrumb navigation -->
         <nav
-          v-if="filePath"
           aria-label="File path"
           class="flex items-center gap-1 font-mono text-sm overflow-x-auto"
         >
           <NuxtLink
+            v-if="filePath"
             :to="getCodeUrl()"
             class="text-fg-muted hover:text-fg transition-colors shrink-0"
           >
             root
           </NuxtLink>
+          <span v-else class="text-fg shrink-0">root</span>
           <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
             <span class="text-fg-subtle">/</span>
             <NuxtLink
diff --git a/app/pages/search.vue b/app/pages/search.vue
@@ -47,6 +47,67 @@ watch(
 const isSearchFocused = ref(false)
 const searchInputRef = ref<HTMLInputElement>()
 
+const selectedIndex = ref(0)
+const packageListRef = useTemplateRef('packageListRef')
+
+const resultCount = computed(() => visibleResults.value?.objects.length ?? 0)
+
+function clampIndex(next: number) {
+  if (resultCount.value <= 0) return 0
+  return Math.max(0, Math.min(resultCount.value - 1, next))
+}
+
+function scrollToSelectedResult() {
+  // Use virtualizer's scrollToIndex to ensure the item is rendered and visible
+  packageListRef.value?.scrollToIndex(selectedIndex.value)
+}
+
+function focusSelectedResult() {
+  // First ensure the item is rendered by scrolling to it
+  scrollToSelectedResult()
+  // Then focus it after a tick to allow rendering
+  nextTick(() => {
+    const el = document.querySelector<HTMLElement>(`[data-result-index="${selectedIndex.value}"]`)
+    el?.focus()
+  })
+}
+
+function handleResultsKeydown(e: KeyboardEvent) {
+  if (resultCount.value <= 0) return
+
+  const isFromInput = (e.target as HTMLElement).tagName === 'INPUT'
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    selectedIndex.value = clampIndex(selectedIndex.value + 1)
+    // Only move focus if already in results, not when typing in search input
+    if (isFromInput) {
+      scrollToSelectedResult()
+    } else {
+      focusSelectedResult()
+    }
+    return
+  }
+
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    selectedIndex.value = clampIndex(selectedIndex.value - 1)
+    if (isFromInput) {
+      scrollToSelectedResult()
+    } else {
+      focusSelectedResult()
+    }
+    return
+  }
+
+  if (e.key === 'Enter') {
+    const el = document.querySelector<HTMLElement>(`[data-result-index="${selectedIndex.value}"]`)
+    if (!el) return
+    e.preventDefault()
+    el.click()
+  }
+}
+
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = ref(false)
 onMounted(() => {
@@ -148,12 +209,22 @@ function handlePageChange(page: number) {
   updateUrlPage(page)
 }
 
+function handleSelect(index: number) {
+  if (index < 0) return
+  selectedIndex.value = clampIndex(index)
+}
+
 // Reset pages when query changes
 watch(query, () => {
   loadedPages.value = 1
   hasInteracted.value = true
 })
 
+// Reset selection when query changes (new search)
+watch(query, () => {
+  selectedIndex.value = 0
+})
+
 // Check if current query could be a valid package name
 const isValidPackageName = computed(() => isValidNewPackageName(query.value.trim()))
 
@@ -299,6 +370,7 @@ defineOgImageComponent('Default', {
                   class="w-full max-w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-4 py-3 font-mono text-base text-fg placeholder:text-fg-subtle transition-colors duration-300 focus:(border-border-hover outline-none) appearance-none"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
+                  @keydown="handleResultsKeydown"
                 />
                 <!-- Hidden submit button for accessibility (form must have submit button per WCAG) -->
                 <button type="submit" class="sr-only">Search</button>
@@ -311,7 +383,7 @@ defineOgImageComponent('Default', {
 
     <!-- Results area with container padding -->
     <div class="container pt-20 pb-6">
-      <section v-if="query" aria-label="Search results">
+      <section v-if="query" aria-label="Search results" @keydown="handleResultsKeydown">
         <!-- Initial loading (only after user interaction, not during view transition) -->
         <LoadingSpinner v-if="showSearching" text="Searching…" />
 
@@ -370,7 +442,9 @@ defineOgImageComponent('Default', {
 
           <PackageList
             v-if="visibleResults.objects.length > 0"
+            ref="packageListRef"
             :results="visibleResults.objects"
+            :selected-index="selectedIndex"
             heading-level="h2"
             show-publisher
             :has-more="hasMore"
@@ -379,6 +453,7 @@ defineOgImageComponent('Default', {
             :initial-page="initialPage"
             @load-more="loadMore"
             @page-change="handlePageChange"
+            @select="handleSelect"
           />
         </div>
       </section>
diff --git a/cli/package.json b/cli/package.json
@@ -6,11 +6,11 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/danielroe/npmx.dev.git",
+    "url": "git+https://github.com/npmx-dev/npmx.dev.git",
     "directory": "cli"
   },
   "bugs": {
-    "url": "https://github.com/danielroe/npmx.dev/issues"
+    "url": "https://github.com/npmx-dev/npmx.dev/issues"
   },
   "homepage": "https://npmx.dev",
   "bin": {
diff --git a/server/api/registry/[...pkg].get.ts b/server/api/registry/[...pkg].get.ts
@@ -5,11 +5,10 @@ export default defineCachedEventHandler(
       throw createError({ statusCode: 400, message: 'Package name is required' })
     }
 
-    const packageName = pkg.replace(/\//g, '/')
-    assertValidPackageName(packageName)
+    assertValidPackageName(pkg)
 
     try {
-      return await fetchNpmPackage(packageName)
+      return await fetchNpmPackage(pkg)
     } catch (error) {
       if (error && typeof error === 'object' && 'statusCode' in error) {
         throw error
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
diff --git a/tests/interactions.spec.ts b/tests/interactions.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`<p class="font-mono m-0">a better browser for the npm registry</p>`
`6`	`6`	`<div class="flex items-center gap-6">`
`7`	`7`	`<a`
`8`		`- href="https://github.com/danielroe/npmx.dev"`
	`8`	`+ href="https://github.com/npmx-dev/npmx.dev"`
`9`	`9`	`rel="noopener noreferrer"`
`10`	`10`	`class="link-subtle font-mono text-xs"`
`11`	`11`	`>`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ withDefaults(`
`43`	`43`	`</li>`
`44`	`44`	`<li v-else class="flex">`
`45`	`45`	`<a`
`46`		`- href="https://github.com/danielroe/npmx.dev"`
	`46`	`+ href="https://github.com/npmx-dev/npmx.dev"`
`47`	`47`	`rel="noopener noreferrer"`
`48`	`48`	`class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"`
`49`	`49`	`>`