merge main

Author: whitep4nth3r

.github/workflows/ci.yml

@@ -235,3 +235,8 @@ jobs:
 
       - name: 🌐 Check for missing or dynamic i18n keys
         run: pnpm i18n:report
+
+      - name: 🌐 Check i18n schema is up to date
+        run: |
+          pnpm i18n:schema
+          git diff --exit-code i18n/schema.json

.github/workflows/mirror-tangled.yml

@@ -0,0 +1,36 @@
+name: mirror
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+
+permissions:
+  contents: read
+
+jobs:
+  mirror:
+    name: 🕸️ Mirror to Tangled
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          fetch-depth: 0
+
+      - name: 🔑 Configure SSH
+        env:
+          TANGLED_SSH_KEY: ${{ secrets.TANGLED_SSH_KEY }}
+        run: |
+          mkdir -p ~/.ssh
+          echo "$TANGLED_SSH_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -t ed25519 tangled.org >> ~/.ssh/known_hosts 2>/dev/null
+
+      - name: ⬆︎ Push to Tangled
+        run: |
+          git remote add tangled git@tangled.org:npmx.dev/npmx.dev
+          git push tangled main --force
+          git push tangled --tags --force

.lighthouserc.cjs

@@ -35,14 +35,18 @@ module.exports = {
       chromePath: findChrome(),
       puppeteerScript: './lighthouse-setup.cjs',
       settings: {
-        onlyCategories: ['accessibility'],
+        onlyCategories: process.env.LH_PERF ? ['performance'] : ['accessibility'],
         skipAudits: ['valid-source-maps'],
       },
     },
     assert: {
-      assertions: {
-        'categories:accessibility': ['error', { minScore: 1 }],
-      },
+      assertions: process.env.LH_PERF
+        ? {
+            'cumulative-layout-shift': ['error', { maxNumericValue: 0 }],
+          }
+        : {
+            'categories:accessibility': ['error', { minScore: 1 }],
+          },
     },
     upload: {
       target: 'temporary-public-storage',

CONTRIBUTING.md

@@ -54,6 +54,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Unit tests](#unit-tests)
   - [Component accessibility tests](#component-accessibility-tests)
   - [Lighthouse accessibility tests](#lighthouse-accessibility-tests)
+  - [Lighthouse performance tests](#lighthouse-performance-tests)
   - [End to end tests](#end-to-end-tests)
   - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis)
 - [Submitting changes](#submitting-changes)
@@ -114,6 +115,7 @@ pnpm test:unit        # Unit tests only
 pnpm test:nuxt        # Nuxt component tests
 pnpm test:browser     # Playwright E2E tests
 pnpm test:a11y        # Lighthouse accessibility audits
+pnpm test:perf        # Lighthouse performance audits (CLS)
 ```
 
 ### Project structure
@@ -641,18 +643,38 @@ pnpm test:a11y:prebuilt
 
 # Or run a single color mode manually
 pnpm build:test
-LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse-a11y.sh
+LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse.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  |
+| 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.sh` | Shell wrapper that runs the audit for a given color mode  |
+
+### Lighthouse performance tests
+
+The project also runs Lighthouse performance audits to enforce zero Cumulative Layout Shift (CLS). These run separately from the accessibility audits and test the same set of URLs.
+
+#### How it works
+
+The same `.lighthouserc.cjs` config is shared between accessibility and performance audits. When the `LH_PERF` environment variable is set, the config switches from the `accessibility` category to the `performance` category and asserts that CLS is exactly 0.
+
+#### Running locally
+
+```bash
+# Build + run performance audit
+pnpm test:perf
+
+# Or against an existing test build
+pnpm test:perf:prebuilt
+```
+
+Unlike the accessibility audits, performance audits do not run in separate light/dark modes.
 
 ### End to end tests
 
@@ -767,8 +789,10 @@ Format: `type(scope): description`
 - `fix(i18n): update French translations`
 - `chore(deps): update vite to v6`
 
+Where front end changes are made, please include before and after screenshots in your pull request description.
+
 > [!NOTE]
-> The subject must start with a lowercase letter. Individual commit messages within your PR don't need to follow this format since they'll be squashed.
+> Use lowercase letters in your pull request title. Individual commit messages within your PR don't need to follow this format since they'll be squashed.
 
 ### PR descriptions
 

app/components/AppFooter.vue

@@ -14,7 +14,6 @@ const showModal = () => modalRef.value?.showModal?.()
       >
         <div>
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
-          <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
@@ -27,22 +26,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>
-          <LinkBase to="https://docs.npmx.dev">
-            {{ $t('footer.docs') }}
-          </LinkBase>
-          <LinkBase to="https://repo.npmx.dev">
-            {{ $t('footer.source') }}
-          </LinkBase>
-          <LinkBase to="https://social.npmx.dev">
-            {{ $t('footer.social') }}
-          </LinkBase>
-          <LinkBase to="https://chat.npmx.dev">
-            {{ $t('footer.chat') }}
-          </LinkBase>
-
           <button
             type="button"
-            class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >
@@ -106,8 +92,21 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
+          <LinkBase to="https://docs.npmx.dev">
+            {{ $t('footer.docs') }}
+          </LinkBase>
+          <LinkBase to="https://repo.npmx.dev">
+            {{ $t('footer.source') }}
+          </LinkBase>
+          <LinkBase to="https://social.npmx.dev">
+            {{ $t('footer.social') }}
+          </LinkBase>
+          <LinkBase to="https://chat.npmx.dev">
+            {{ $t('footer.chat') }}
+          </LinkBase>
         </div>
       </div>
+      <BuildEnvironment v-if="!isHome" footer />
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>

app/components/AppHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { LinkBase } from '#components'
+import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -13,6 +14,114 @@ withDefaults(
 
 const { isConnected, npmUser } = useConnector()
 
+const desktopLinks = computed<NavigationConfig>(() => [
+  {
+    name: 'Compare',
+    label: $t('nav.compare'),
+    to: { name: 'compare' },
+    keyshortcut: 'c',
+    type: 'link',
+    external: false,
+    iconClass: 'i-carbon:compare',
+  },
+  {
+    name: 'Settings',
+    label: $t('nav.settings'),
+    to: { name: 'settings' },
+    keyshortcut: ',',
+    type: 'link',
+    external: false,
+    iconClass: 'i-carbon:settings',
+  },
+])
+
+const mobileLinks = computed<NavigationConfigWithGroups>(() => [
+  {
+    name: 'Desktop Links',
+    type: 'group',
+    items: [...desktopLinks.value],
+  },
+  {
+    type: 'separator',
+  },
+  {
+    name: 'About & Policies',
+    type: 'group',
+    items: [
+      {
+        name: 'About',
+        label: $t('footer.about'),
+        to: { name: 'about' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:information',
+      },
+      {
+        name: 'Blog',
+        label: $t('footer.blog'),
+        to: { name: 'blog' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:blog',
+      },
+      {
+        name: 'Privacy Policy',
+        label: $t('privacy_policy.title'),
+        to: { name: 'privacy' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:security',
+      },
+    ],
+  },
+  {
+    type: 'separator',
+  },
+  {
+    name: 'External Links',
+    type: 'group',
+    label: $t('nav.links'),
+    items: [
+      {
+        name: 'Docs',
+        label: $t('footer.docs'),
+        href: 'https://docs.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:document',
+      },
+      {
+        name: 'Source',
+        label: $t('footer.source'),
+        href: 'https://repo.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:logo-github',
+      },
+      {
+        name: 'Social',
+        label: $t('footer.social'),
+        href: 'https://social.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-simple-icons:bluesky',
+      },
+      {
+        name: 'Chat',
+        label: $t('footer.chat'),
+        href: 'https://chat.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:chat',
+      },
+    ],
+  },
+])
+
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 
@@ -63,23 +172,18 @@ function handleSearchFocus() {
 }
 
 onKeyStroke(
-  e => isKeyWithoutModifiers(e, ',') && !isEditableElement(e.target),
   e => {
-    e.preventDefault()
-    navigateTo({ name: 'settings' })
-  },
-  { dedupe: true },
-)
+    if (isEditableElement(e.target)) {
+      return
+    }
 
-onKeyStroke(
-  e =>
-    isKeyWithoutModifiers(e, 'c') &&
-    !isEditableElement(e.target) &&
-    // Allow more specific handlers to take precedence
-    !e.defaultPrevented,
-  e => {
-    e.preventDefault()
-    navigateTo({ name: 'compare' })
+    for (const link of desktopLinks.value) {
+      if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
+        e.preventDefault()
+        navigateTo(link.to.name)
+        break
+      }
+    }
   },
   { dedupe: true },
 )
@@ -156,24 +260,16 @@ onKeyStroke(
 
       <!-- End: Desktop nav items + Mobile menu button -->
       <div class="hidden sm:flex flex-shrink-0">
-        <!-- Desktop: Compare link -->
-        <LinkBase
-          class="border-none"
-          variant="button-secondary"
-          :to="{ name: 'compare' }"
-          keyshortcut="c"
-        >
-          {{ $t('nav.compare') }}
-        </LinkBase>
-
-        <!-- Desktop: Settings link -->
+        <!-- Desktop: Explore link -->
         <LinkBase
+          v-for="link in desktopLinks"
+          :key="link.name"
           class="border-none"
           variant="button-secondary"
-          :to="{ name: 'settings' }"
-          keyshortcut=","
+          :to="link.to"
+          :aria-keyshortcuts="link.keyshortcut"
         >
-          {{ $t('nav.settings') }}
+          {{ link.label }}
         </LinkBase>
 
         <HeaderAccountMenu />
@@ -182,7 +278,7 @@ onKeyStroke(
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
-        class="sm:hidden flex"
+        class="sm:hidden"
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"
@@ -191,6 +287,6 @@ onKeyStroke(
     </nav>
 
     <!-- Mobile menu -->
-    <HeaderMobileMenu v-model:open="showMobileMenu" />
+    <HeaderMobileMenu :links="mobileLinks" v-model:open="showMobileMenu" />
   </header>
 </template>