Merge branch 'main' into feat/badge-support-colorLeft

Author: btea

.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,16 +56,16 @@ 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
 
-      - name: 🧪 Unit test
-        run: pnpm test:unit
+      - name: 🧪 Unit and component tests
+        run: pnpm vite test run --coverage
 
-      - name: 🏃 Component tests
-        run: pnpm test:nuxt
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
 
   browser:
     runs-on: ubuntu-latest
@@ -91,11 +87,17 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
+      - name: 🏗️ Build project
+        run: pnpm build:playwright
+
       - name: 🖥️ Test project (browser)
-        run: pnpm test:browser
+        run: pnpm test:browser:prebuilt
 
   a11y:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        mode: [dark, light]
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -115,10 +117,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.

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>

app/components/compare/ComparisonGrid.vue app/components/Compare/ComparisonGrid.vueapp/components/compare/ComparisonGrid.vue renamed to app/components/Compare/ComparisonGrid.vue

@@ -38,23 +38,49 @@ function getBarWidth(value: FacetValue | null | undefined): number {
   return (value.raw / maxValue.value) * 100
 }
 
-function getStatusClass(status?: FacetValue['status']): string {
+function getStatusClass(status?: FacetValue['status'], hasBar = false): string {
+  // When there's a bar, only apply text color, not background
+  if (hasBar) {
+    switch (status) {
+      case 'muted':
+        return 'text-fg-subtle'
+      default:
+        return 'text-fg'
+    }
+  }
+
+  // Original behavior when no bar
   switch (status) {
     case 'good':
-      return 'text-emerald-400'
+      return 'bg-emerald-400/20 px-3 py-0.5 rounded-xl'
     case 'info':
-      return 'text-blue-400'
+      return 'bg-blue-400/20 px-3 py-0.5 rounded-xl'
     case 'warning':
-      return 'text-amber-400'
+      return 'bg-amber-400/20 px-3 py-0.5 rounded-xl'
     case 'bad':
-      return 'text-red-400'
+      return 'bg-red-400/20 px-3 py-0.5 rounded-xl'
     case 'muted':
       return 'text-fg-subtle'
     default:
       return 'text-fg'
   }
 }
 
+function getStatusBarClass(status?: FacetValue['status']): string {
+  switch (status) {
+    case 'good':
+      return 'bg-emerald-500/20'
+    case 'info':
+      return 'bg-blue-500/20'
+    case 'warning':
+      return 'bg-amber-500/20'
+    case 'bad':
+      return 'bg-red-500/20'
+    default:
+      return 'bg-fg/5'
+  }
+}
+
 // Check if a specific cell is loading
 function isCellLoading(index: number): boolean {
   return props.facetLoading || (props.columnLoading?.[index] ?? false)
@@ -80,7 +106,8 @@ function isCellLoading(index: number): boolean {
       <!-- Background bar for numeric values -->
       <div
         v-if="showBar && value && getBarWidth(value) > 0"
-        class="absolute inset-y-1 inset-is-1 bg-fg/5 rounded-sm transition-all duration-300"
+        class="absolute inset-y-1 inset-is-1 rounded-sm transition-all duration-300"
+        :class="getStatusBarClass(value.status)"
         :style="{ width: `calc(${getBarWidth(value)}% - 8px)` }"
         aria-hidden="true"
       />
@@ -103,7 +130,8 @@ function isCellLoading(index: number): boolean {
         <TooltipApp v-if="value.tooltip" :text="value.tooltip" position="top">
           <span
             class="relative font-mono text-sm text-center tabular-nums cursor-help"
-            :class="getStatusClass(value.status)"
+            :class="getStatusClass(value.status, showBar && getBarWidth(value) > 0)"
+            :data-status="value.status"
           >
             <!-- Date values use DateTime component for i18n and user settings -->
             <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
@@ -113,7 +141,8 @@ function isCellLoading(index: number): boolean {
         <span
           v-else
           class="relative font-mono text-sm text-center tabular-nums"
-          :class="getStatusClass(value.status)"
+          :class="getStatusClass(value.status, showBar && getBarWidth(value) > 0)"
+          :data-status="value.status"
         >
           <!-- Date values use DateTime component for i18n and user settings -->
           <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />