Merge branch 'feat/changelog-1' of github.com:WilcoSp/npmx.dev into feat/changelog-1

Author: WilcoSp

.github/workflows/ci.yml

@@ -184,7 +184,7 @@ jobs:
         run: pnpm build:test
 
       - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode)
-        run: ./scripts/lighthouse-a11y.sh
+        run: pnpm test:a11y:prebuilt
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
           LIGHTHOUSE_COLOR_MODE: ${{ matrix.mode }}

CONTRIBUTING.md

@@ -43,6 +43,7 @@ This focus helps guide our project decisions as a community and what we choose t
 - [RTL Support](#rtl-support)
 - [Localization (i18n)](#localization-i18n)
   - [Approach](#approach)
+  - [i18n commands](#i18n-commands)
   - [Adding a new locale](#adding-a-new-locale)
   - [Update translation](#update-translation)
   - [Adding translations](#adding-translations)
@@ -52,6 +53,7 @@ This focus helps guide our project decisions as a community and what we choose t
 - [Testing](#testing)
   - [Unit tests](#unit-tests)
   - [Component accessibility tests](#component-accessibility-tests)
+  - [Lighthouse accessibility tests](#lighthouse-accessibility-tests)
   - [End to end tests](#end-to-end-tests)
   - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis)
 - [Submitting changes](#submitting-changes)
@@ -111,6 +113,7 @@ pnpm test             # Run all Vitest tests
 pnpm test:unit        # Unit tests only
 pnpm test:nuxt        # Nuxt component tests
 pnpm test:browser     # Playwright E2E tests
+pnpm test:a11y        # Lighthouse accessibility audits
 ```
 
 ### Project structure
@@ -378,6 +381,17 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 - We use the `no_prefix` strategy (no `/en-US/` or `/fr-FR/` in URLs)
 - Locale preference is stored in cookies and respected on subsequent visits
 
+### i18n commands
+
+The following scripts help manage translation files. `en.json` is the reference locale.
+
+| Command                        | Description                                                                                                                                                                             |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `pnpm i18n:check [locale]`     | Compares `en.json` with other locale files. Shows missing and extra keys. Optionally filter output by locale (e.g. `pnpm i18n:check ja-JP`).                                            |
+| `pnpm i18n:check:fix [locale]` | Same as check, but adds missing keys to other locales with English placeholders.                                                                                                        |
+| `pnpm i18n:report`             | Audits translation keys against code usage in `.vue` and `.ts` files. Reports missing keys (used in code but not in locale), unused keys (in locale but not in code), and dynamic keys. |
+| `pnpm i18n:report:fix`         | Removes unused keys from `en.json` and all other locale files.                                                                                                                          |
+
 ### Adding a new locale
 
 We are using localization using country variants (ISO-6391) via [multiple translation files](https://i18n.nuxtjs.org/docs/guide/lazy-load-translations#multiple-files-lazy-loading) to avoid repeating every key per country.
@@ -421,25 +435,7 @@ Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essential
 We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
 If you see any outdated translations in your language, feel free to update the keys to match the English version.
 
-In order to make sure you have everything up-to-date, you can run:
-
-```bash
-pnpm i18n:check <country-code>
-```
-
-For example to check if all Japanese translation keys are up-to-date, run:
-
-```bash
-pnpm i18n:check ja-JP
-```
-
-To automatically add missing keys with English placeholders, use `--fix`:
-
-```bash
-pnpm i18n:check:fix fr-FR
-```
-
-This will add missing keys with `"EN TEXT TO REPLACE: {english text}"` as placeholder values, making it easier to see what needs translation.
+Use `pnpm i18n:check` and `pnpm i18n:check:fix` to verify and fix your locale (see [i18n commands](#i18n-commands) above for details).
 
 #### Country variants (advanced)
 
@@ -527,6 +523,32 @@ See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/
 - Use `common.*` for shared strings (loading, retry, close, etc.)
 - Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
 - Do not use dashes (`-`) in translation keys; always use underscore (`_`): e.g., `privacy_policy` instead of `privacy-policy`
+- **Always use static string literals as translation keys.** Our i18n scripts (`pnpm i18n:report`) rely on static analysis to detect unused and missing keys. Dynamic keys cannot be analyzed and will be flagged as errors.
+
+  **Bad:**
+
+  ```vue
+  <!-- Template literal -->
+  <p>{{ $t(`package.tabs.${tab}`) }}</p>
+
+  <!-- Variable -->
+  <p>{{ $t(myKey) }}</p>
+  ```
+
+  **Good:**
+
+  ```typescript
+  const { t } = useI18n()
+
+  const tabLabels = computed(() => ({
+    readme: t('package.tabs.readme'),
+    versions: t('package.tabs.versions'),
+  }))
+  ```
+
+  ```vue
+  <p>{{ tabLabels[tab] }}</p>
+  ```
 
 ### Using i18n-ally (recommended)
 
@@ -598,6 +620,40 @@ A coverage test in `test/unit/a11y-component-coverage.spec.ts` ensures all compo
 > [!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.
 
+### Lighthouse accessibility tests
+
+In addition to component-level axe audits, the project runs full-page accessibility audits using [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci). These test the rendered pages in both light and dark mode against Lighthouse's accessibility category, requiring a perfect score.
+
+#### How it works
+
+1. The project is built in test mode (`pnpm build:test`), which activates server-side fixture mocking
+2. Lighthouse CI starts a preview server and audits three URLs: `/`, `/search?q=nuxt`, and `/package/nuxt`
+3. A Puppeteer setup script (`lighthouse-setup.cjs`) runs before each audit to set the color mode and intercept client-side API requests using the same fixtures as the E2E tests
+
+#### Running locally
+
+```bash
+# Build + run both light and dark audits
+pnpm test:a11y
+
+# Or against an existing test build
+pnpm test:a11y:prebuilt
+
+# Or run a single color mode manually
+pnpm build:test
+LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse-a11y.sh
+```
+
+This requires Chrome or Chromium to be installed. The script will auto-detect common installation paths. Results are printed to the terminal and saved in `.lighthouseci/`.
+
+#### Configuration
+
+| File                         | Purpose                                                   |
+| ---------------------------- | --------------------------------------------------------- |
+| `.lighthouserc.cjs`          | Lighthouse CI config (URLs, assertions, Chrome path)      |
+| `lighthouse-setup.cjs`       | Puppeteer script for color mode + client-side API mocking |
+| `scripts/lighthouse-a11y.sh` | Shell wrapper that runs the audit for a given color mode  |
+
 ### End to end tests
 
 Write end-to-end tests using Playwright:
@@ -619,10 +675,12 @@ E2E tests use a fixture system to mock external API requests, ensuring tests are
 - 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`):
+**Client-side mocking** (`test/fixtures/mock-routes.cjs`):
 
-- Uses Playwright's route interception to mock browser requests
-- All test files import from `./test-utils` instead of `@nuxt/test-utils/playwright`
+- Shared URL matching and response generation logic used by both Playwright E2E tests and Lighthouse CI
+- Playwright tests (`test/e2e/test-utils.ts`) use this via `page.route()` interception
+- Lighthouse tests (`lighthouse-setup.cjs`) use this via Puppeteer request interception
+- All E2E 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
@@ -670,7 +728,7 @@ 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)
+2. Update the mock handlers in `test/fixtures/mock-routes.cjs` (client) or `modules/runtime/server/cache.ts` (server)
 
 ## Submitting changes
 

README.md

@@ -116,7 +116,7 @@ npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev
 | `npmjs.com/org/nuxt`            | [`npmx.dev/org/nuxt`](https://npmx.dev/org/nuxt)                       |
 
 > [!TIP]
-> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension).
+> Want automatic redirects? Try the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) (Chrome only for now).
 
 #### Not yet supported
 
@@ -150,7 +150,7 @@ We welcome contributions – please do feel free to explore the project and
 
 ## Related projects
 
-- [npmx-replace-extension](https://github.com/tylersayshi/npmx-replace-extension) – Browser extension to redirect npmjs.com to npmx.dev
+- [npmx-replace-extension](https://github.com/tylersayshi/npmx-replace-extension) – Browser extension to redirect npmjs.com to npmx.dev (Chrome only for now)
 - [JSR](https://jsr.io/) – The open-source package registry for modern JavaScript and TypeScript
 - [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com
 - [npm-alt](https://npm.willow.sh/) – An alternative npm package browser

app/components/Code/DirectoryListing.vue

@@ -2,7 +2,6 @@
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import { getFileIcon } from '~/utils/file-icons'
-import { formatBytes } from '~/utils/formatters'
 
 const props = defineProps<{
   tree: PackageFileTree[]
@@ -51,6 +50,8 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
     params: { path: pathSegments as [string, ...string[]] },
   }
 }
+
+const bytesFormatter = useBytesFormatter()
 </script>
 
 <template>
@@ -107,7 +108,7 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
                 v-if="node.type === 'file' && node.size"
                 class="text-end font-mono text-xs text-fg-subtle"
               >
-                {{ formatBytes(node.size) }}
+                {{ bytesFormatter.format(node.size) }}
               </span>
             </NuxtLink>
           </td>

app/components/ColumnPicker.vue

@@ -41,7 +41,7 @@ onKeyDown(
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 
 // Map column IDs to i18n keys
-const columnLabelKey = computed(() => ({
+const columnLabels = computed(() => ({
   name: $t('filters.columns.name'),
   version: $t('filters.columns.version'),
   description: $t('filters.columns.description'),
@@ -57,7 +57,7 @@ const columnLabelKey = computed(() => ({
 }))
 
 function getColumnLabel(id: ColumnId): string {
-  const key = columnLabelKey.value[id]
+  const key = columnLabels.value[id]
   return key ?? id
 }
 

app/components/Compare/PackageSelector.vue

@@ -53,6 +53,8 @@ const filteredResults = computed(() => {
     .filter(r => !packages.value.includes(r.name))
 })
 
+const numberFormatter = useNumberFormatter()
+
 function addPackage(name: string) {
   if (packages.value.length >= maxPackages.value) return
   if (packages.value.includes(name)) return
@@ -209,8 +211,8 @@ function handleBlur() {
     <p class="text-xs text-fg-subtle">
       {{
         $t('compare.selector.packages_selected', {
-          count: packages.length,
-          max: maxPackages,
+          count: numberFormatter.format(packages.length),
+          max: numberFormatter.format(maxPackages),
         })
       }}
       <span v-if="packages.length < 2">{{ $t('compare.selector.add_hint') }}</span>