Merge branch 'main' into style/center-card-keywords

Author: danielroe

.github/workflows/autofix.yml

@@ -14,6 +14,7 @@ permissions:
 
 jobs:
   code:
+    name: 🤖 Autofix code
     runs-on: ubuntu-latest
 
     steps:
@@ -24,7 +25,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 

.github/workflows/ci.yml

@@ -21,6 +21,7 @@ permissions:
 
 jobs:
   lint:
+    name: 🔠 Lint project
     runs-on: ubuntu-latest
 
     steps:
@@ -31,13 +32,58 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         # pnpm cache skipped deliberately as the project is not actually installed here
 
       - name: 🔠 Lint project
         run: node scripts/lint.ts
 
+  types:
+    name: 💪 Type check
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+        name: 🟧 Install pnpm
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 💪 Type check
+        run: pnpm test:types
+
+  unit:
+    name: 🧪 Unit tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+        name: 🟧 Install pnpm
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🧪 Unit tests
+        run: pnpm test:unit --project unit run --coverage
+
   test:
+    name: 🧪 Component tests
     runs-on: ubuntu-latest
 
     steps:
@@ -48,7 +94,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
@@ -58,16 +104,16 @@ jobs:
       - name: 🌐 Install browser
         run: pnpm playwright install chromium-headless-shell
 
-      - name: 💪 Type check
-        run: pnpm test:types
-
-      - name: 🧪 Unit and component tests
-        run: pnpm vite test run --coverage
+      - name: 🧪 Component tests
+        run: pnpm vite test --project nuxt run --coverage
 
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
+        env:
+          CODECOV_TOKEN: 17b4bed9-d407-4ce2-9c10-2ccd4328a1d9
 
   browser:
+    name: 🖥️ Browser tests
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.58.0-noble
@@ -80,7 +126,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
@@ -94,6 +140,7 @@ jobs:
         run: pnpm test:browser:prebuilt
 
   a11y:
+    name: ♿ Accessibility audit
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -107,15 +154,15 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
       - name: 📦 Install dependencies
         run: pnpm install
 
       - name: 🏗️ Build project
-        run: pnpm build
+        run: NODE_ENV=test pnpm build
 
       - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode)
         run: ./scripts/lighthouse-a11y.sh
@@ -124,6 +171,7 @@ jobs:
           LIGHTHOUSE_COLOR_MODE: ${{ matrix.mode }}
 
   knip:
+    name: 🧹 Unused code check
     runs-on: ubuntu-latest
 
     steps:
@@ -134,12 +182,12 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🔍 Check for unused code
+      - name: 🧹 Check for unused code
         run: pnpm knip

.github/workflows/lunaria.yml

@@ -17,7 +17,7 @@ permissions:
 
 jobs:
   lunaria-overview:
-    name: Generate Lunaria Overview
+    name: 🌝 Generate Lunaria Overview
     runs-on: ubuntu-latest
 
     steps:
@@ -33,7 +33,7 @@ jobs:
           node-version: lts/*
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
-        name: Install pnpm
+        name: 🟧 Install pnpm
         with:
           cache: true
 

.github/workflows/provenance.yml

@@ -20,6 +20,7 @@ permissions:
 
 jobs:
   check-provenance:
+    name: 🔒 Check provenance downgrades
     runs-on: ubuntu-slim
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

.github/workflows/semantic-pull-requests.yml

@@ -17,7 +17,7 @@ jobs:
       statuses: write # for amannn/action-semantic-pull-request to mark status of analyzed PR
     if: github.repository == 'npmx-dev/npmx.dev'
     runs-on: ubuntu-slim
-    name: semantic-pr
+    name: 🏷️ Validate PR title
     steps:
       - name: Validate PR title
         uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1

CONTRIBUTING.md

@@ -8,11 +8,21 @@ Thank you for your interest in contributing! ❤️ This document provides guide
 
 ## Goals
 
-We want to create 'a fast, modern browser for the npm registry.' This means, among other things:
+The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern and open-source browser for the npm registry, prioritizing speed, simplicity and a community-driven developer experience.
 
-- We don't aim to replace the [npmjs.com](https://www.npmjs.com/) registry, just provide a better UI and DX.
-- Layout shift, flakiness, slowness is The Worst. We need to continually iterate to create the most performant, best DX possible.
-- We want to provide information in the best way. We don't want noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
+### Core values
+
+- Speed
+- Simplicity
+- Community-first
+
+### Target audience
+
+npmx is built for open-source developers, by open-source developers.
+
+Our goal is to create tools and capabilities that solve real problems for package maintainers and power users, while also providing a great developer experience for everyone who works in the JavaScript ecosystem.
+
+This focus helps guide our project decisions as a community and what we choose to build.
 
 ## Table of Contents
 
@@ -42,6 +52,7 @@ We want to create 'a fast, modern browser for the npm registry.' This means, amo
   - [Unit tests](#unit-tests)
   - [Component accessibility tests](#component-accessibility-tests)
   - [End to end tests](#end-to-end-tests)
+  - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis)
 - [Submitting changes](#submitting-changes)
   - [Before submitting](#before-submitting)
   - [Pull request process](#pull-request-process)
@@ -148,6 +159,10 @@ To help with this, the project uses `oxfmt` to handle formatting via a pre-commi
 
 If you want to get ahead of any formatting issues, you can also run `pnpm lint:fix` before committing to fix formatting across the whole project.
 
+### npmx name
+
+When displaying the project name anywhere in the UI, use `npmx` in all lowercase letters.
+
 ### TypeScript
 
 - We care about good types – never cast things to `any` 💪
@@ -482,6 +497,69 @@ pnpm test:browser:ui     # Run with Playwright UI
 
 Make sure to read about [Playwright best practices](https://playwright.dev/docs/best-practices) and don't rely on classes/IDs but try to follow user-replicable behaviour (like selecting an element based on text content instead).
 
+### Test fixtures (mocking external APIs)
+
+E2E tests use a fixture system to mock external API requests, ensuring tests are deterministic and don't hit real APIs. This is handled at two levels:
+
+**Server-side mocking** (`modules/fixtures.ts` + `modules/runtime/server/cache.ts`):
+
+- Intercepts all `$fetch` calls during SSR
+- Serves pre-recorded fixture data from `test/fixtures/`
+- Enabled via `NUXT_TEST_FIXTURES=true` or Nuxt test mode
+
+**Client-side mocking** (`test/e2e/test-utils.ts`):
+
+- Uses Playwright's route interception to mock browser requests
+- All test files import from `./test-utils` instead of `@nuxt/test-utils/playwright`
+- Throws a clear error if an unmocked external request is detected
+
+#### Fixture files
+
+Fixtures are stored in `test/fixtures/` with this structure:
+
+```
+test/fixtures/
+├── npm-registry/
+│   ├── packuments/       # Package metadata (vue.json, @nuxt/kit.json)
+│   ├── search/           # Search results (vue.json, nuxt.json)
+│   └── orgs/             # Org package lists (nuxt.json)
+├── npm-api/
+│   └── downloads/        # Download stats
+└── users/                # User package lists
+```
+
+#### Adding new fixtures
+
+1. **Generate fixtures** using the script:
+
+   ```bash
+   pnpm generate:fixtures vue lodash @nuxt/kit
+   ```
+
+2. **Or manually create** a JSON file in the appropriate directory
+
+#### Environment variables
+
+| Variable                          | Purpose                            |
+| --------------------------------- | ---------------------------------- |
+| `NUXT_TEST_FIXTURES=true`         | Enable server-side fixture mocking |
+| `NUXT_TEST_FIXTURES_VERBOSE=true` | Enable detailed fixture logging    |
+
+#### When tests fail due to missing fixtures
+
+If a test fails with an error like:
+
+```
+UNMOCKED EXTERNAL API REQUEST DETECTED
+API:  npm registry
+URL:  https://registry.npmjs.org/some-package
+```
+
+You need to either:
+
+1. Add a fixture file for that package/endpoint
+2. Update the mock handlers in `test/e2e/test-utils.ts` (client) or `modules/runtime/server/cache.ts` (server)
+
 ## Submitting changes
 
 ### Before submitting

README.md

@@ -15,13 +15,13 @@
 
 The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern browser for the npm registry.
 
-We're not replacing the [npmjs.com](https://www.npmjs.com/) registry, but instead providing an elevated developer experience through a fast, modern UI.
+We're not replacing the [npm](https://www.npmjs.com/) registry, but instead providing an elevated developer experience through a fast, modern UI.
 
 What npmx offers:
 
 - **Speed** – Fast searching, filtering, and navigation.
 - **Simplicity** – Get the information you need when you need it in an intuitive UI.
-- **Compatibility** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
+- **URL Compatibility** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
 - **Enhanced admin experience** – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
 
 ## Shortcuts