Merge branch 'main' into feat/org-search-url-operators

Author: Moshyfawn

.github/workflows/autofix.yml

@@ -31,9 +31,6 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 📦 Install browsers
-        run: pnpm playwright install
-
       - name: 🌐 Compare translations
         run: pnpm i18n:check
 
@@ -43,14 +40,4 @@ jobs:
       - name: 🔠 Fix lint errors
         run: pnpm lint:fix
 
-      - name: 🧪 Update unit test snapshots
-        run: pnpm test:unit -u
-
-      - name: 🏃 Update component test snapshots
-        run: pnpm test:nuxt -u
-
-      # TODO: re-enable when we have snapshots in browser tests
-      # - name: 🖥️ Update browser test snapshots
-      #   run: pnpm test:browser --update-snapshots
-
       - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27

.github/workflows/ci.yml

@@ -32,14 +32,10 @@ jobs:
 
       - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: Install pnpm
-        with:
-          cache: true
-
-      - name: 📦 Install dependencies
-        run: pnpm install
+        # pnpm cache skipped deliberately as the project is not actually installed here
 
       - name: 🔠 Lint project
-        run: pnpm lint
+        run: node scripts/lint.ts
 
   test:
     runs-on: ubuntu-latest
@@ -60,7 +56,7 @@ jobs:
         run: pnpm install
 
       - name: 🌐 Install browser
-        run: pnpm playwright install
+        run: pnpm playwright install chromium-headless-shell
 
       - name: 💪 Type check
         run: pnpm test:types
@@ -96,6 +92,9 @@ jobs:
 
   a11y:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        mode: [dark, light]
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -115,10 +114,11 @@ jobs:
       - name: 🏗️ Build project
         run: pnpm build
 
-      - name: ♿ Accessibility audit (Lighthouse - dark & light mode)
+      - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode)
         run: ./scripts/lighthouse-a11y.sh
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+          LIGHTHOUSE_COLOR_MODE: ${{ matrix.mode }}
 
   knip:
     runs-on: ubuntu-latest

.github/workflows/provenance.yml

@@ -4,21 +4,28 @@ on:
   push:
     branches:
       - main
+    paths:
+      - pnpm-lock.yaml
   pull_request:
     branches:
       - main
+    paths:
+      - pnpm-lock.yaml
   merge_group:
     branches:
       - main
+
 permissions:
   contents: read
+
 jobs:
   check-provenance:
     runs-on: ubuntu-slim
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
+
       - name: Check provenance downgrades
         uses: danielroe/provenance-action@41bcc969e579d9e29af08ba44fcbfdf95cee6e6c # v0.1.1
         with:

CONTRIBUTING.md

@@ -522,6 +522,31 @@ Format: `type(scope): 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.
 
+### PR descriptions
+
+If your pull request directly addresses an open issue, use the following inside your PR description.
+
+```text
+Resolves | Fixes | Closes: #xxx
+```
+
+Replace `#xxx` with either a URL to the issue, or the number of the issue. For example:
+
+```text
+Fixes #123
+```
+
+or
+
+```text
+Closes https://github.com/npmx-dev/npmx.dev/issues/123
+```
+
+This provides the following benefits:
+
+- it links the pull request to the issue (the merge icon will appear in the issue), so everybody can see there is an open PR
+- when the pull request is merged, the linked issue is automatically closed
+
 ## Pre-commit hooks
 
 The project uses `lint-staged` with `simple-git-hooks` to automatically lint files on commit.

README.md

@@ -13,12 +13,16 @@
 
 ## Vision
 
-The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the npm registry – fast, modern, and accessible. We don't aim to replace the [npmjs.com](https://www.npmjs.com/) registry, just provide a better UI, DX, and admin experience.
+The goal of [npmx.dev](https://npmx.dev) is to build a fast, modern browser for the npm registry.
 
-- **Speed first** – Layout shift, flakiness, slowness is The Worst. Fast searching, filtering, and navigation.
-- **URL compatible** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
-- **Simplicity** – No noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
-- **Admin UI** – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
+We're not replacing the [npmjs.com](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.
+- **Enhanced admin experience** – Manage your packages, teams, and organizations from the browser, powered by your local npm CLI.
 
 ## Shortcuts
 
@@ -36,7 +40,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 
 ### Package browsing
 
-- **Dark mode by default** – easier on the eyes
+- **Dark mode and light mode** – plus customize the color palette to your preferences
 - **Fast search** – quick package search with instant results
 - **Package details** – READMEs, versions, dependencies, and metadata
 - **Code viewer** – browse package source code with syntax highlighting and permalink to specific lines
@@ -100,7 +104,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 
 ### npm compatibility
 
-npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` and it works:
+npmx.dev supports npm permalinks – just replace `npmjs.com` with `npmx.dev` or `xnpmjs.com` to get the npmx experience:
 
 | npm URL                         | npmx.dev equivalent                                                    |
 | ------------------------------- | ---------------------------------------------------------------------- |
@@ -142,7 +146,7 @@ npmx.dev also supports shorter, cleaner URLs:
 
 ## Contributing
 
-We welcome contributions – please do feel free to poke around and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
+We welcome contributions – please do feel free to explore the project and improve things. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get up and running!
 
 ## Related projects
 
@@ -151,6 +155,7 @@ We welcome contributions – please do feel free to poke around and improve
 - [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
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible
+- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – VSCode extension for npmx
 
 If you're building something cool, let us know! 🙏
 

app/app.vue

@@ -69,7 +69,8 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     router.push('/search')
   }
 
-  if (isKeyWithoutModifiers(e, '?')) {
+  // For "?" we check the key property directly since it's usually combined with shift
+  if (e.key === '?') {
     e.preventDefault()
     showKbdHints.value = true
   }

app/assets/main.css

@@ -154,17 +154,9 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  scroll-behavior: smooth;
   scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
 }
 
-/* Disable smooth scrolling if user prefers reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
 /*
  * Enable CSS scroll-state container queries for the document
  * This allows the footer to query the scroll state using pure CSS

app/components/CallToAction.vue

@@ -1,9 +1,30 @@
 <script setup lang="ts">
-const socialLinks = {
-  github: 'https://repo.npmx.dev',
-  discord: 'https://chat.npmx.dev',
-  bluesky: 'https://social.npmx.dev',
-}
+const socialLinks = computed(() => [
+  {
+    id: 'github',
+    href: 'https://repo.npmx.dev',
+    icon: 'i-carbon:logo-github',
+    titleKey: $t('about.get_involved.contribute.title'),
+    descriptionKey: $t('about.get_involved.contribute.description'),
+    ctaKey: $t('about.get_involved.contribute.cta'),
+  },
+  {
+    id: 'discord',
+    href: 'https://chat.npmx.dev',
+    icon: 'i-carbon:chat',
+    titleKey: $t('about.get_involved.community.title'),
+    descriptionKey: $t('about.get_involved.community.description'),
+    ctaKey: $t('about.get_involved.community.cta'),
+  },
+  {
+    id: 'bluesky',
+    href: 'https://social.npmx.dev',
+    icon: 'i-simple-icons:bluesky',
+    titleKey: $t('about.get_involved.follow.title'),
+    descriptionKey: $t('about.get_involved.follow.description'),
+    ctaKey: $t('about.get_involved.follow.cta'),
+  },
+])
 </script>
 
 <template>
@@ -13,74 +34,31 @@ const socialLinks = {
     </h2>
 
     <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
-      <a
-        :href="socialLinks.github"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
+      <div
+        v-for="link in socialLinks"
+        :key="link.id"
+        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
       >
-        <div class="flex gap-2">
-          <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+        <h3 class="z-1 flex gap-2">
+          <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
-            {{ $t('about.get_involved.contribute.title') }}
+            {{ link.titleKey }}
           </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.contribute.description') }}
+        </h3>
+        <p class="z-1 text-sm text-fg-muted leading-relaxed">
+          {{ link.descriptionKey }}
         </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+        <a
+          :href="link.href"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
         >
-          {{ $t('about.get_involved.contribute.cta') }}
+          {{ link.ctaKey }}
           <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
-
-      <a
-        :href="socialLinks.discord"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
-      >
-        <div class="flex gap-2">
-          <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
-          <span class="font-medium text-fg">
-            {{ $t('about.get_involved.community.title') }}
-          </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.community.description') }}
-        </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
-        >
-          {{ $t('about.get_involved.community.cta') }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
-
-      <a
-        :href="socialLinks.bluesky"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
-      >
-        <div class="flex gap-2">
-          <span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
-          <span class="font-medium text-fg">
-            {{ $t('about.get_involved.follow.title') }}
-          </span>
-        </div>
-        <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.follow.description') }}
-        </p>
-        <span
-          class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
-        >
-          {{ $t('about.get_involved.follow.cta') }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
+          <span class="absolute z-0 inset-0" aria-hidden="true" />
+        </a>
+      </div>
     </div>
   </div>
 </template>