feat: add i18n support to compare page

Author: wojtekmaj

app/components/compare/FacetSelector.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import type { ComparisonFacet } from '#shared/types'
-import { FACET_INFO, FACETS_BY_CATEGORY, CATEGORY_ORDER } from '#shared/types/comparison'
+import {
+  FACET_INFO,
+  FACETS_BY_CATEGORY,
+  CATEGORY_ORDER,
+  getFacetDescriptionKey,
+  getFacetLabelKey,
+} from '#shared/types/comparison'
 
 const {
   isFacetSelected,
@@ -96,10 +102,12 @@ function isCategoryNoneSelected(category: string): boolean {
           v-for="{ facet, info } in facetsByCategory[category]"
           :key="facet"
           type="button"
-          :title="info.comingSoon ? $t('compare.facets.coming_soon') : info.description"
+          :title="
+            info.comingSoon ? $t('compare.facets.coming_soon') : $t(getFacetDescriptionKey(facet))
+          "
           :disabled="info.comingSoon"
           :aria-pressed="isFacetSelected(facet)"
-          :aria-label="info.label"
+          :aria-label="$t(getFacetLabelKey(facet))"
           class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
           :class="
             info.comingSoon
@@ -116,7 +124,7 @@ function isCategoryNoneSelected(category: string): boolean {
             :class="isFacetSelected(facet) ? 'i-carbon:checkmark' : 'i-carbon:add'"
             aria-hidden="true"
           />
-          {{ info.label }}
+          {{ $t(getFacetLabelKey(facet)) }}
           <span v-if="info.comingSoon" class="text-[9px]"
             >({{ $t('compare.facets.coming_soon') }})</span
           >

app/composables/usePackageComparison.ts

@@ -29,7 +29,10 @@ export interface PackageComparisonData {
  * Composable for fetching and comparing multiple packages.
  *
  */
-export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
+export function usePackageComparison(
+  packageNames: MaybeRefOrGetter<string[]>,
+  t: (key: string, params?: Record<string, unknown>) => string = key => key,
+) {
   const packages = computed(() => toValue(packageNames))
 
   // Cache of fetched data by package name (source of truth)
@@ -195,7 +198,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
 
     return packagesData.value.map(pkg => {
       if (!pkg) return null
-      return computeFacetValue(facet, pkg)
+      return computeFacetValue(facet, pkg, t)
     })
   }
 
@@ -229,7 +232,11 @@ function encodePackageName(name: string): string {
   return encodeURIComponent(name)
 }
 
-function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData): FacetValue | null {
+function computeFacetValue(
+  facet: ComparisonFacet,
+  data: PackageComparisonData,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): FacetValue | null {
   switch (facet) {
     case 'downloads':
       if (data.downloads === undefined) return null
@@ -270,13 +277,19 @@ function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData):
       return {
         raw: types.kind,
         display:
-          types.kind === 'included' ? 'Included' : types.kind === '@types' ? '@types' : 'None',
+          types.kind === 'included'
+            ? t('compare.facets.values.types_included')
+            : types.kind === '@types'
+              ? '@types'
+              : t('compare.facets.values.types_none'),
         status: types.kind === 'included' ? 'good' : types.kind === '@types' ? 'info' : 'bad',
       }
 
     case 'engines':
       const engines = data.metadata?.engines
-      if (!engines?.node) return { raw: null, display: 'Any', status: 'neutral' }
+      if (!engines?.node) {
+        return { raw: null, display: t('compare.facets.values.any'), status: 'neutral' }
+      }
       return {
         raw: engines.node,
         display: `Node ${engines.node}`,
@@ -289,7 +302,14 @@ function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData):
       const sev = data.vulnerabilities.severity
       return {
         raw: count,
-        display: count === 0 ? 'None' : `${count} (${sev.critical}C/${sev.high}H)`,
+        display:
+          count === 0
+            ? t('compare.facets.values.none')
+            : t('compare.facets.values.vulnerabilities_summary', {
+                count,
+                critical: sev.critical,
+                high: sev.high,
+              }),
         status: count === 0 ? 'good' : sev.critical > 0 || sev.high > 0 ? 'bad' : 'warning',
       }
 
@@ -305,7 +325,9 @@ function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData):
 
     case 'license':
       const license = data.metadata?.license
-      if (!license) return { raw: null, display: 'Unknown', status: 'warning' }
+      if (!license) {
+        return { raw: null, display: t('compare.facets.values.unknown'), status: 'warning' }
+      }
       return {
         raw: license,
         display: license,
@@ -325,7 +347,9 @@ function computeFacetValue(facet: ComparisonFacet, data: PackageComparisonData):
       const isDeprecated = !!data.metadata?.deprecated
       return {
         raw: isDeprecated,
-        display: isDeprecated ? 'Deprecated' : 'No',
+        display: isDeprecated
+          ? t('compare.facets.values.deprecated')
+          : t('compare.facets.values.not_deprecated'),
         status: isDeprecated ? 'bad' : 'good',
       }
 

app/pages/compare.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { FACET_INFO, type ComparisonFacet } from '#shared/types/comparison'
+import {
+  FACET_INFO,
+  getFacetDescriptionKey,
+  getFacetLabelKey,
+  type ComparisonFacet,
+} from '#shared/types/comparison'
 import { useRouteQuery } from '@vueuse/router'
 
 definePageMeta({
@@ -28,9 +33,11 @@ const packages = computed({
 const { selectedFacets, selectAll, deselectAll, isAllSelected, isNoneSelected } =
   useFacetSelection()
 
+const { t } = useI18n()
+
 // Fetch comparison data
 const { packagesData, status, getFacetValues, isFacetLoading, isColumnLoading } =
-  usePackageComparison(packages)
+  usePackageComparison(packages, t)
 
 // Get loading state for each column
 const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoading(i)))
@@ -129,8 +136,8 @@ useSeoMeta({
               <CompareFacetRow
                 v-for="facet in selectedFacets"
                 :key="facet"
-                :label="FACET_INFO[facet].label"
-                :description="FACET_INFO[facet].description"
+                :label="$t(getFacetLabelKey(facet))"
+                :description="$t(getFacetDescriptionKey(facet))"
                 :values="getFacetValues(facet)"
                 :facet-loading="isFacetLoading(facet)"
                 :column-loading="columnLoading"
@@ -145,8 +152,8 @@ useSeoMeta({
             <CompareFacetCard
               v-for="facet in selectedFacets"
               :key="facet"
-              :label="FACET_INFO[facet].label"
-              :description="FACET_INFO[facet].description"
+              :label="$t(getFacetLabelKey(facet))"
+              :description="$t(getFacetDescriptionKey(facet))"
               :values="getFacetValues(facet)"
               :facet-loading="isFacetLoading(facet)"
               :column-loading="columnLoading"