Merge branch 'main' into sb-design-guidelines

Author: cylewaitforit

.github/workflows/ci.yml

@@ -111,14 +111,14 @@ jobs:
         run: pnpm vp test --project nuxt --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
       - name: ⬆︎ Upload coverage reports to Codecov
-        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5
+        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
         with:
           report_type: test_results
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
       - name: ⬆︎ Upload coverage reports to Codecov
-        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5
+        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 

.github/workflows/welcome-open.yml

@@ -16,6 +16,7 @@ jobs:
     steps:
       - uses: zephyrproject-rtos/action-first-interaction@58853996b1ac504b8e0f6964301f369d2bb22e5c
         with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-opened-message: |
             Hello! Thank you for opening your **first PR** to npmx, @${{ github.event.pull_request.user.login }}! 🚀
 

.storybook/main.ts

@@ -9,7 +9,7 @@ const config = {
     'storybook-i18n',
   ],
   framework: '@storybook-vue/nuxt',
-  staticDirs: ['./.public'],
+  staticDirs: ['./.public', { from: '../public', to: '/' }],
   features: {
     backgrounds: false,
   },

.storybook/preview-head.html

@@ -1,4 +1,61 @@
 <style>
+  /* Load Geist fonts to match the production app (normally handled by @nuxt/fonts,
+     which is disabled in Storybook at this time) */
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-SemiBold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Bold.ttf') format('truetype');
+  }
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
   /* Override docs story canvas background to match npmx theme */
   .docs-story {
     background-color: var(--bg, oklch(0.171 0 0)) !important;

CONTRIBUTING.md

@@ -119,7 +119,7 @@ pnpm npmx-connector   # Start the real connector (requires npm login)
 pnpm mock-connector   # Start the mock connector (no npm login needed)
 
 # Code Quality
-pnpm lint             # Run linter (oxlint + oxfmt)
+pnpm vp run lint      # Run linter (oxlint + oxfmt)
 pnpm lint:fix         # Auto-fix lint issues
 pnpm test:types       # TypeScript type checking
 
@@ -460,13 +460,13 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 
 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.                                                                                                                          |
-| `pnpm i18n:schema`             | Generates a JSON Schema from `en.json` at `i18n/schema.json`. Locale files reference this schema for IDE validation and autocompletion.                                                 |
+| Command                           | Description                                                                                                                                                                             |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `pnpm i18n:check:fix [locale]`    | Compares `en.json` with other locale files and adds missing keys with English placeholders. Optionally filter output by locale (e.g. `pnpm i18n:check:fix ja-JP`).                      |
+| `pnpm i18n:report:fix`            | Removes unused keys from `en.json` and all other locale files.                                                                                                                          |
+| `pnpm vp run i18n:check [locale]` | Same as check:fix, but only show missing and extra keys.                                                                                                                                |
+| `pnpm vp run 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 vp run i18n:schema`         | Generates a JSON Schema from `en.json` at `i18n/schema.json`. Locale files reference this schema for IDE validation and autocompletion.                                                 |
 
 ### Adding a new locale
 
@@ -502,7 +502,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.
 
-Use `pnpm i18n:check` and `pnpm i18n:check:fix` to verify and fix your locale (see [i18n commands](#i18n-commands) above for details).
+Use `pnpm i18n:check:fix` to fix your locale (see [i18n commands](#i18n-commands) above for details).
 
 #### Country variants (advanced)
 
@@ -590,7 +590,7 @@ 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.
+- **Always use static string literals as translation keys.** Our i18n scripts (`pnpm i18n:report:fix`) rely on static analysis to detect unused and missing keys. Dynamic keys cannot be analyzed and will be flagged as errors.
 
   **Bad:**
 

README.md

@@ -114,7 +114,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) (Chrome only for now) or the separate [npmx-redirect extension](https://github.com/iaverages/npmx-redirect) for [Chrome](https://chromewebstore.google.com/detail/lbhjgfgpnlihfmobnohoipeljollhlnb) / [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/npmx-redirect/).
+> Want automatic redirects? Try the [npmx-redirect extension](https://github.com/iaverages/npmx-redirect) for [Chrome](https://chromewebstore.google.com/detail/lbhjgfgpnlihfmobnohoipeljollhlnb) / [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/npmx-redirect/).
 
 #### Not yet supported
 
@@ -148,7 +148,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 (Chrome only for now)
+- [npmx-redirect](https://github.com/iaverages/npmx-redirect) – Browser extension that automatically redirects npmjs.com URLs to npmx.dev.
 - [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
@@ -158,7 +158,6 @@ We welcome contributions – please do feel free to explore the project and
 - [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
 - [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
 - [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.
-- [npmx-redirect](https://github.com/iaverages/npmx-redirect) – Browser extension that automatically redirects npmjs.com URLs to npmx.dev.
 - [npmx-badge](https://npmx-badge.vercel.app/) – A playground to help you create custom badges quickly.
 
 If you're building something cool, let us know! 🙏

app/assets/main.css

@@ -153,7 +153,6 @@
     --fg: oklch(1 0 0);
     --fg-muted: oklch(0.769 0 0);
     --fg-subtle: oklch(0.693 0 0);
-
     /* border, separator colors */
     --border: oklch(0.769 0 0);
     --border-subtle: oklch(0.739 0 0);
@@ -275,7 +274,8 @@ dd {
 }
 
 /* Shiki theme colors */
-html.light .shiki {
+/* html.light .shiki { */
+html .shiki {
   color: var(--shiki-light) !important;
   background-color: var(--shiki-light-bg) !important;
 

app/components/AppFooter.vue

@@ -38,6 +38,9 @@ const closeModal = () => modalRef.value?.close?.()
             <LinkBase :to="{ name: 'translation-status' }">
               {{ $t('translation_status.title') }}
             </LinkBase>
+            <LinkBase :to="{ name: 'brand' }">
+              {{ $t('footer.brand') }}
+            </LinkBase>
             <button
               type="button"
               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"

app/components/AppHeader.vue

@@ -92,6 +92,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-lucide:languages',
       },
+      {
+        name: 'Brand',
+        label: $t('footer.brand'),
+        to: { name: 'brand' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:palette',
+      },
     ],
   },
   {
@@ -218,17 +226,18 @@ onKeyStroke(
       class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
     >
       <!-- Mobile: Logo (navigates home) -->
-      <NuxtLink
-        v-if="!isSearchExpanded && !isOnHomePage"
-        to="/"
-        :aria-label="$t('header.home')"
-        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
-      >
-        <AppMark class="w-6 h-auto" />
-      </NuxtLink>
+      <LogoContextMenu v-if="!isSearchExpanded && !isOnHomePage" class="sm:hidden flex-shrink-0">
+        <NuxtLink
+          to="/"
+          :aria-label="$t('header.home')"
+          class="font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring me-4"
+        >
+          <AppMark class="w-6 h-auto" />
+        </NuxtLink>
+      </LogoContextMenu>
 
       <!-- Desktop: Logo (navigates home) -->
-      <div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
+      <LogoContextMenu v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
         <NuxtLink
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
@@ -243,7 +252,7 @@ onKeyStroke(
             {{ env === 'release' ? 'alpha' : env }}
           </span>
         </NuxtLink>
-      </div>
+      </LogoContextMenu>
 
       <NuxtLink
         v-if="showLogo && !isSearchExpanded && prNumber"