Merge remote-tracking branch 'origin/main' into cta-section-card-headings

# Conflicts:
#	app/components/CallToAction.vue

Author: danielroe

.github/workflows/autofix.yml

@@ -31,8 +31,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 📦 Install browsers
-        run: pnpm playwright install
+      - name: 🌐 Install browser
+        run: pnpm playwright install chromium-headless-shell
 
       - name: 🌐 Compare translations
         run: pnpm i18n:check

.github/workflows/ci.yml

@@ -56,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
@@ -92,6 +92,9 @@ jobs:
 
   a11y:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        mode: [dark, light]
 
     steps:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -111,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

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/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>
@@ -14,72 +35,26 @@ const socialLinks = {
 
     <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
       <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"
       >
         <h3 class="z-1 flex gap-2">
-          <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+          <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>
         </h3>
-        <p class="z-1 inline text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.contribute.description') }}
+        <p class="z-1 text-sm text-fg-muted leading-relaxed">
+          {{ link.descriptionKey }}
         </p>
         <a
-          :href="socialLinks.github"
+          :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') }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-          <span class="absolute z-0 inset-0" aria-hidden="true" />
-        </a>
-      </div>
-
-      <div
-        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"
-      >
-        <h3 class="z-1 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>
-        </h3>
-        <p class="z-1 inline text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.community.description') }}
-        </p>
-        <a
-          :href="socialLinks.discord"
-          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.community.cta') }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-          <span class="absolute z-0 inset-0" aria-hidden="true" />
-        </a>
-      </div>
-
-      <div
-        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"
-      >
-        <h3 class="z-1 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>
-        </h3>
-        <p class="z-1 inline text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.follow.description') }}
-        </p>
-        <a
-          :href="socialLinks.bluesky"
-          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.follow.cta') }}
+          {{ link.ctaKey }}
           <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
           <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>

app/components/Filter/Chips.vue

@@ -21,7 +21,7 @@ const emit = defineEmits<{
         }}</span>
         <button
           type="button"
-          class="ms-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          class="flex items-center ms-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >

app/components/Package/ListToolbar.vue

@@ -173,7 +173,7 @@ function getSortKeyLabelKey(key: SortKey): string {
               </option>
             </select>
             <div
-              class="absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+              class="flex items-center absolute inset-ie-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
               aria-hidden="true"
             >
               <span class="i-carbon-chevron-down w-4 h-4" />

app/components/Package/Table.vue

@@ -115,7 +115,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <!-- Name (always visible) -->
           <th
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
             }"
@@ -149,23 +149,23 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('version')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
           >
             {{ $t(getColumnLabelKey('version')) }}
           </th>
 
           <th
             v-if="isColumnVisible('description')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
           >
             {{ $t(getColumnLabelKey('description')) }}
           </th>
 
           <th
             v-if="isColumnVisible('downloads')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200':
                 isSortable('downloads'),
@@ -200,7 +200,7 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('updated')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
             :class="{
               'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
             }"
@@ -234,55 +234,55 @@ function getColumnLabelKey(id: ColumnId): string {
           <th
             v-if="isColumnVisible('maintainers')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('maintainers')) }}
           </th>
 
           <th
             v-if="isColumnVisible('keywords')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('keywords')) }}
           </th>
 
           <th
             v-if="isColumnVisible('qualityScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('qualityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('popularityScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('popularityScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('maintenanceScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('maintenanceScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('combinedScore')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('combinedScore')) }}
           </th>
 
           <th
             v-if="isColumnVisible('security')"
             scope="col"
-            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
           >
             {{ $t(getColumnLabelKey('security')) }}
           </th>
@@ -301,17 +301,17 @@ function getColumnLabelKey(id: ColumnId): string {
             <td v-if="isColumnVisible('description')" class="py-3 px-3">
               <div class="h-4 w-48 bg-bg-muted rounded animate-pulse" />
             </td>
-            <td v-if="isColumnVisible('downloads')" class="py-3 px-3 text-end">
+            <td v-if="isColumnVisible('downloads')" class="py-3 px-3">
               <div class="h-4 w-16 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('updated')" class="py-3 px-3">
-              <div class="h-4 w-20 bg-bg-muted rounded animate-pulse" />
+              <div class="h-4 w-20 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('maintainers')" class="py-3 px-3">
-              <div class="h-4 w-24 bg-bg-muted rounded animate-pulse" />
+              <div class="h-4 w-24 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
             <td v-if="isColumnVisible('keywords')" class="py-3 px-3">
-              <div class="h-4 w-32 bg-bg-muted rounded animate-pulse" />
+              <div class="h-4 w-32 bg-bg-muted rounded animate-pulse ms-auto" />
             </td>
           </tr>
         </template>