Merge branch 'main' into i18n/ar

Author: danielroe

.github/workflows/autofix.yml

@@ -42,7 +42,8 @@ jobs:
       - name: 🏃 Update component test snapshots
         run: pnpm test:nuxt -u
 
-      - name: 🖥️ Update browser test snapshots
-        run: pnpm test:browser --update-snapshots
+      # 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

CONTRIBUTING.md

@@ -242,7 +242,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 ### Approach
 
 - All user-facing strings should use translation keys via `$t()` in templates and script
-- Translation files live in `i18n/locales/` (e.g., `en-US.json`)
+- Translation files live in [`i18n/locales/`](i18n/locales) (e.g., `en-US.json`)
 - We use the `no_prefix` strategy (no `/en-US/` or `/fr-FR/` in URLs)
 - Locale preference is stored in cookies and respected on subsequent visits
 

app/assets/main.css

@@ -281,6 +281,9 @@ html.light .shiki span {
   white-space: pre;
   word-break: normal;
   overflow-wrap: normal;
+  /* Makes unicode and ascii art work properly */
+  line-height: 1.25;
+  display: inline-block;
 }
 
 .readme-content ul,

app/components/AccentColorPicker.vue

@@ -5,25 +5,37 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
-    <button
+  <fieldset class="flex items-center gap-4">
+    <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
+    <label
       v-for="color in accentColors"
       :key="color.id"
-      type="button"
-      role="option"
-      :aria-selected="selectedAccentColor === color.id"
-      :aria-label="color.name"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
       :style="{ backgroundColor: color.value }"
-      @click="setAccentColor(color.id)"
-    />
-    <button
-      type="button"
-      :aria-label="$t('settings.clear_accent')"
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
-      @click="setAccentColor(null)"
     >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        :value="color.id"
+        :checked="selectedAccentColor === color.id"
+        :aria-label="color.name"
+        @change="setAccentColor(color.id)"
+      />
+    </label>
+    <label
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
+    >
+      <input
+        type="radio"
+        name="accent-color"
+        class="sr-only"
+        value=""
+        :checked="selectedAccentColor === null"
+        :aria-label="$t('settings.clear_accent')"
+        @change="setAccentColor(null)"
+      />
       <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
-    </button>
-  </div>
+    </label>
+  </fieldset>
 </template>

app/components/AppFooter.vue

@@ -1,50 +1,51 @@
 <template>
   <footer class="border-t border-border mt-auto">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-start gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
-        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-        <div class="flex items-center justify-start gap-3 sm:gap-6">
+      <div
+        class="flex flex-col sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
+      >
+        <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
+        <div class="flex items-center gap-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
           >
-            <span>{{ $t('footer.about') }}</span>
+            {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.docs') }}</span>
+            {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex justify-start items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.source') }}</span>
+            {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.social') }}</span>
+            {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.chat') }}</span>
+            {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
         </div>

app/components/PackageDependencies.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useVulnerabilityTree } from '~/composables/useVulnerabilityTree'
+import { useDependencyAnalysis } from '~/composables/useDependencyAnalysis'
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
 
 const props = defineProps<{
@@ -15,7 +15,7 @@ const props = defineProps<{
 const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
 
 // Get vulnerability info from shared cache (already fetched by PackageVulnerabilityTree)
-const { data: vulnTree } = useVulnerabilityTree(
+const { data: vulnTree } = useDependencyAnalysis(
   () => props.packageName,
   () => props.version,
 )
@@ -26,6 +26,12 @@ function getVulnerableDepInfo(depName: string) {
   return vulnTree.value.vulnerablePackages.find(p => p.name === depName && p.depth === 'direct')
 }
 
+// Check if a dependency is deprecated (only direct deps)
+function getDeprecatedDepInfo(depName: string) {
+  if (!vulnTree.value) return null
+  return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
+}
+
 // Expanded state for each section
 const depsExpanded = shallowRef(false)
 const peerDepsExpanded = shallowRef(false)
@@ -80,7 +86,7 @@ const sortedOptionalDependencies = computed(() => {
         >
           {{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
           <span
-            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
@@ -89,7 +95,7 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-center justify-start py-1 text-sm gap-2"
         >
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
@@ -105,8 +111,9 @@ const sortedOptionalDependencies = computed(() => {
               :title="getOutdatedTooltip(outdatedDeps[dep])"
               aria-hidden="true"
             >
-              <span class="i-carbon-warning-alt w-3 h-3 block" />
+              <span class="i-carbon:warning-alt w-3 h-3 block" />
             </span>
+            <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
             <NuxtLink
               v-if="getVulnerableDepInfo(dep)"
               :to="{
@@ -117,12 +124,24 @@ const sortedOptionalDependencies = computed(() => {
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
             >
-              <span class="i-carbon-security w-3 h-3 block" aria-hidden="true" />
+              <span class="i-carbon:security w-3 h-3 block" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </NuxtLink>
+            <NuxtLink
+              v-if="getDeprecatedDepInfo(dep)"
+              :to="{
+                name: 'package',
+                params: { package: [...dep.split('/'), 'v', getDeprecatedDepInfo(dep)!.version] },
+              }"
+              class="shrink-0 text-purple-500"
+              :title="getDeprecatedDepInfo(dep)!.message"
+            >
+              <span class="i-carbon-warning-hex w-3 h-3 block" aria-hidden="true" />
+              <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
+            </NuxtLink>
             <NuxtLink
               :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-              class="font-mono text-xs text-right truncate"
+              class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
             >
@@ -164,7 +183,7 @@ const sortedOptionalDependencies = computed(() => {
         >
           {{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
           <span
-            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
@@ -176,7 +195,7 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-center justify-start py-1 text-sm gap-2"
         >
           <div class="flex items-center gap-2 min-w-0">
             <NuxtLink
@@ -193,12 +212,13 @@ const sortedOptionalDependencies = computed(() => {
               {{ $t('package.dependencies.optional') }}
             </span>
           </div>
+          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
             :title="peer.version"
           >
             {{ peer.version }}
@@ -234,7 +254,7 @@ const sortedOptionalDependencies = computed(() => {
             $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
           }}
           <span
-            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
@@ -249,17 +269,18 @@ const sortedOptionalDependencies = computed(() => {
             optionalDepsExpanded ? undefined : 10,
           )"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-center justify-start py-1 text-sm gap-2"
         >
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
           </NuxtLink>
+          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-            class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
             :title="version"
           >
             {{ version }}