Merge remote-tracking branch 'origin/main' into feat/detect-npx-deps

Author: danielroe

.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/*

.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/*
@@ -70,3 +73,25 @@ jobs:
 
       - name: 🖥️ Test project (browser)
         run: pnpm test:browser
+
+  a11y:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🏗️ Build project
+        run: pnpm build
+
+      - name: ♿ Accessibility audit (Lighthouse)
+        run: pnpx @lhci/cli autorun
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

.gitignore

@@ -33,3 +33,6 @@ coverage/
 # Playwright
 playwright-report/
 test-results/
+
+# Lighthouse
+.lighthouseci

.lighthouserc.json

@@ -0,0 +1,26 @@
+{
+  "ci": {
+    "collect": {
+      "startServerCommand": "pnpm preview",
+      "startServerReadyPattern": "Listening",
+      "url": [
+        "http://localhost:3000/",
+        "http://localhost:3000/search?q=nuxt",
+        "http://localhost:3000/nuxt"
+      ],
+      "numberOfRuns": 1,
+      "settings": {
+        "onlyCategories": ["accessibility"],
+        "skipAudits": ["valid-source-maps"]
+      }
+    },
+    "assert": {
+      "assertions": {
+        "categories:accessibility": ["warn", { "minScore": 0.9 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}

CONTRIBUTING.md

@@ -110,6 +110,59 @@ The connector will check your npm authentication, generate a connection token, a
 - We care about good types – never cast things to `any` 💪
 - Validate rather than just assert
 
+### Server API patterns
+
+#### Input validation with Valibot
+
+Use Valibot schemas from `#shared/schemas/` to validate API inputs. This ensures type safety and provides consistent error messages:
+
+```typescript
+import * as v from 'valibot'
+import { PackageRouteParamsSchema } from '#shared/schemas/package'
+
+// In your handler:
+const { packageName, version } = v.parse(PackageRouteParamsSchema, {
+  packageName: rawPackageName,
+  version: rawVersion,
+})
+```
+
+#### Error handling with `handleApiError`
+
+Use the `handleApiError` utility for consistent error handling in API routes. It re-throws H3 errors (like 404s) and wraps other errors with a fallback message:
+
+```typescript
+import { ERROR_NPM_FETCH_FAILED } from '#shared/utils/constants'
+
+try {
+  // API logic...
+} catch (error: unknown) {
+  handleApiError(error, {
+    statusCode: 502,
+    message: ERROR_NPM_FETCH_FAILED,
+  })
+}
+```
+
+#### URL parameter parsing with `parsePackageParams`
+
+Use `parsePackageParams` to extract package name and version from URL segments:
+
+```typescript
+const pkgParamSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+const { rawPackageName, rawVersion } = parsePackageParams(pkgParamSegments)
+```
+
+This handles patterns like `/pkg`, `/pkg/v/1.0.0`, `/@scope/pkg`, and `/@scope/pkg/v/1.0.0`.
+
+#### Constants
+
+Define error messages and other string constants in `#shared/utils/constants.ts` to ensure consistency across the codebase:
+
+```typescript
+export const ERROR_NPM_FETCH_FAILED = 'Failed to fetch package from npm registry.'
+```
+
 ### Import order
 
 1. Type imports first (`import type { ... }`)
@@ -174,7 +227,32 @@ describe('featureName', () => {
 > [!TIP]
 > If you need access to the Nuxt context in your unit or component test, place your test in the `test/nuxt/` directory and run with `pnpm test:nuxt`
 
-### E2e tests
+### Component accessibility tests
+
+All new components should have a basic accessibility test in `test/nuxt/components.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations.
+
+```typescript
+import MyComponent from '~/components/MyComponent.vue'
+
+describe('MyComponent', () => {
+  it('should have no accessibility violations', async () => {
+    const component = await mountSuspended(MyComponent, {
+      props: {
+        /* required props */
+      },
+    })
+    const results = await runAxe(component)
+    expect(results.violations).toEqual([])
+  })
+})
+```
+
+The `runAxe` helper handles DOM isolation and disables page-level rules that don't apply to isolated component testing.
+
+> [!IMPORTANT]
+> Just because axe-core doesn't find any obvious issues, it does not mean a component is accessible. Please do additional checks and use best practices.
+
+### End to end tests
 
 Write end-to-end tests using Playwright:
 

README.md

@@ -27,15 +27,20 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Package details** – READMEs, versions, dependencies, and metadata
 - **Code viewer** – browse package source code with syntax highlighting and permalink to specific lines
 - **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, `.` 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
 
@@ -63,8 +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            |    ✅     |    🚧    |
@@ -101,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
 
@@ -118,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
 
@@ -128,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
 

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.

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>
@@ -50,15 +51,17 @@ onUnmounted(() => {
 
     <AppHeader :show-logo="!isHomepage" />
 
-    <div id="main-content" class="flex-1">
+    <div id="main-content" class="flex-1 flex flex-col">
       <NuxtPage />
     </div>
 
     <AppFooter />
+
+    <ScrollToTop />
   </div>
 </template>
 
-<style>
+<style lang="postcss">
 /* Base reset and defaults */
 *,
 *::before,
@@ -72,11 +75,23 @@ html {
   text-rendering: optimizeLegibility;
 }
 
+/*
+ * Enable CSS scroll-state container queries for the document
+ * This allows the footer to query the scroll state using pure CSS
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
+ */
+@supports (container-type: scroll-state) {
+  html {
+    container-type: scroll-state;
+  }
+}
+
 body {
   margin: 0;
   background-color: #0a0a0a;
   color: #fafafa;
   line-height: 1.6;
+  padding-bottom: var(--footer-height, 0);
 }
 
 /* Default link styling for accessibility on dark background */
@@ -284,7 +299,7 @@ button {
   border-left: 2px solid #262626;
   padding-left: 1rem;
   margin: 1.5rem 0;
-  color: #666666;
+  color: #8a8a8a;
   font-style: italic;
 }