Merge branch 'main' into fix/fallback-missing-plural

Author: BobbieGoede

.github/workflows/ci.yml

@@ -117,7 +117,7 @@ jobs:
         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

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

app/components/Header/ConnectorModal.vue

@@ -81,10 +81,8 @@ function handleDisconnect() {
     <form v-else class="space-y-4" @submit.prevent="handleConnect">
       <!-- Contributor-only notice -->
       <div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-        <div class="space-y-2">
-          <span
-            class="inline-block px-2 py-0.5 text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 rounded"
-          >
+        <div>
+          <span class="inline-block text-xs font-bold uppercase tracking-wider text-fg rounded">
             {{ $t('connector.modal.contributor_badge') }}
           </span>
           <p class="text-sm text-fg-muted">
@@ -94,7 +92,7 @@ function handleDisconnect() {
                   href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="text-amber-400 hover:underline"
+                  class="text-blue-400 hover:underline"
                 >
                   {{ $t('connector.modal.contributor_link') }}
                 </a>
@@ -213,7 +211,7 @@ function handleDisconnect() {
         role="alert"
         class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
       >
-        <p class="font-mono text-sm text-fg font-bold">
+        <p class="inline-block text-xs font-bold uppercase tracking-wider text-fg rounded">
           {{ $t('connector.modal.warning') }}
         </p>
         <p class="text-sm text-fg-muted">

app/components/Modal.client.vue

@@ -25,7 +25,7 @@ defineExpose({
     <dialog
       ref="dialogRef"
       closedby="any"
-      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
+      class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg"
       :aria-labelledby="modalTitleId"
       v-bind="$attrs"
     >

app/composables/useAtproto.ts

@@ -1,11 +1,9 @@
-import type { UserSession } from '#shared/schemas/userSession'
-
 export function useAtproto() {
   const {
     data: user,
     pending,
     clear,
-  } = useFetch<UserSession | null>('/api/auth/session', {
+  } = useFetch('/api/auth/session', {
     server: false,
     immediate: !import.meta.test,
   })

i18n/locales/es-419.json

@@ -1,4 +1,6 @@
 {
+  "built_at": "generado {0}",
+  "alt_logo": "logo de npmx",
   "connector": {
     "modal": {
       "connected_hint": "Ahora puedes administrar paquetes y organizaciones desde la interfaz web.",