feat: add i18n support to compare page

wojtekmaj · wojtekmaj · commit 7dbd791380a3 · 2026-02-02T15:04:04.000+01:00
diff --git a/app/components/compare/FacetSelector.vue b/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, toggleFacet, selectCategory, deselectCategory } = useFacetSelection()
 
@@ -87,10 +93,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
@@ -107,7 +115,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
           >
diff --git a/app/composables/usePackageComparison.ts b/app/composables/usePackageComparison.ts
@@ -244,7 +244,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
 function computeFacetValue(
   facet: ComparisonFacet,
   data: PackageComparisonData,
-  t: (key: string) => string,
+  t: (key: string, params?: Record<string, unknown>) => string,
 ): FacetValue | null {
   switch (facet) {
     case 'downloads':
@@ -294,13 +294,19 @@ function computeFacetValue(
       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}`,
@@ -313,7 +319,14 @@ function computeFacetValue(
       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',
       }
 
@@ -329,7 +342,9 @@ function computeFacetValue(
 
     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,
@@ -349,7 +364,9 @@ function computeFacetValue(
       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',
       }
 
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { FACET_INFO } from '#shared/types/comparison'
+import {
+  getFacetDescriptionKey,
+  getFacetLabelKey,
+} from '#shared/types/comparison'
 import { useRouteQuery } from '@vueuse/router'
 
 definePageMeta({
@@ -129,8 +132,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 +148,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"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -860,6 +860,66 @@
         "health": "Health",
         "compatibility": "Compatibility",
         "security": "Security & Compliance"
+      },
+      "items": {
+        "packageSize": {
+          "label": "Package Size",
+          "description": "Size of the package itself (unpacked)"
+        },
+        "installSize": {
+          "label": "Install Size",
+          "description": "Total install size including all dependencies"
+        },
+        "dependencies": {
+          "label": "# Direct Deps",
+          "description": "Number of direct dependencies"
+        },
+        "totalDependencies": {
+          "label": "# Total Deps",
+          "description": "Total number of dependencies including transitive"
+        },
+        "downloads": {
+          "label": "Downloads/wk",
+          "description": "Weekly download count"
+        },
+        "lastUpdated": {
+          "label": "Published",
+          "description": "When this version was published"
+        },
+        "deprecated": {
+          "label": "Deprecated?",
+          "description": "Whether the package is deprecated"
+        },
+        "engines": {
+          "label": "Engines",
+          "description": "Node.js version requirements"
+        },
+        "types": {
+          "label": "Types",
+          "description": "TypeScript type definitions"
+        },
+        "moduleFormat": {
+          "label": "Module Format",
+          "description": "ESM/CJS support"
+        },
+        "license": {
+          "label": "License",
+          "description": "Package license"
+        },
+        "vulnerabilities": {
+          "label": "Vulnerabilities",
+          "description": "Known security vulnerabilities"
+        }
+      },
+      "values": {
+        "any": "Any",
+        "none": "None",
+        "unknown": "Unknown",
+        "deprecated": "Deprecated",
+        "not_deprecated": "No",
+        "types_included": "Included",
+        "types_none": "None",
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
       }
     }
   }
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
@@ -290,7 +290,7 @@
       "cjs": "Obsługuje CommonJS",
       "no_esm": "Brak obsługi ES Modules",
       "types_label": "Typy",
-      "types_included": "Typy w pakiecie",
+      "types_included": "Typy wbudowane",
       "types_available": "Typy dostępne przez {package}",
       "no_types": "Brak typów TypeScript"
     },
@@ -850,6 +850,66 @@
         "health": "Zdrowie",
         "compatibility": "Kompatybilność",
         "security": "Bezpieczeństwo i zgodność"
+      },
+      "items": {
+        "packageSize": {
+          "label": "Rozmiar pakietu",
+          "description": "Rozmiar samego pakietu (rozpakowany)"
+        },
+        "installSize": {
+          "label": "Rozmiar instalacji",
+          "description": "Łączny rozmiar instalacji wraz ze wszystkimi zależnościami"
+        },
+        "dependencies": {
+          "label": "Bezpośrednie zależności",
+          "description": "Liczba bezpośrednich zależności"
+        },
+        "totalDependencies": {
+          "label": "# Wszystkich zależności",
+          "description": "Łączna liczba zależności, w tym przechodnich"
+        },
+        "downloads": {
+          "label": "Pobrania/tydz.",
+          "description": "Tygodniowa liczba pobrań"
+        },
+        "lastUpdated": {
+          "label": "Opublikowano",
+          "description": "Kiedy ta wersja została opublikowana"
+        },
+        "deprecated": {
+          "label": "Wycofany?",
+          "description": "Czy pakiet jest wycofany"
+        },
+        "engines": {
+          "label": "Silniki",
+          "description": "Wymagania wersji Node.js"
+        },
+        "types": {
+          "label": "Typy",
+          "description": "Definicje typów TypeScript"
+        },
+        "moduleFormat": {
+          "label": "Format modułu",
+          "description": "Obsługa ESM/CJS"
+        },
+        "license": {
+          "label": "Licencja",
+          "description": "Licencja pakietu"
+        },
+        "vulnerabilities": {
+          "label": "Podatności",
+          "description": "Znane luki bezpieczeństwa"
+        }
+      },
+      "values": {
+        "any": "Dowolne",
+        "none": "Brak",
+        "unknown": "Nieznana",
+        "deprecated": "Wycofany",
+        "not_deprecated": "Nie",
+        "types_included": "Wbudowane",
+        "types_none": "Brak",
+        "vulnerabilities_summary": "{count} ({critical}K/{high}W)"
       }
     }
   }
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
@@ -860,6 +860,66 @@
         "health": "Health",
         "compatibility": "Compatibility",
         "security": "Security & Compliance"
+      },
+      "items": {
+        "packageSize": {
+          "label": "Package Size",
+          "description": "Size of the package itself (unpacked)"
+        },
+        "installSize": {
+          "label": "Install Size",
+          "description": "Total install size including all dependencies"
+        },
+        "dependencies": {
+          "label": "# Direct Deps",
+          "description": "Number of direct dependencies"
+        },
+        "totalDependencies": {
+          "label": "# Total Deps",
+          "description": "Total number of dependencies including transitive"
+        },
+        "downloads": {
+          "label": "Downloads/wk",
+          "description": "Weekly download count"
+        },
+        "lastUpdated": {
+          "label": "Published",
+          "description": "When this version was published"
+        },
+        "deprecated": {
+          "label": "Deprecated?",
+          "description": "Whether the package is deprecated"
+        },
+        "engines": {
+          "label": "Engines",
+          "description": "Node.js version requirements"
+        },
+        "types": {
+          "label": "Types",
+          "description": "TypeScript type definitions"
+        },
+        "moduleFormat": {
+          "label": "Module Format",
+          "description": "ESM/CJS support"
+        },
+        "license": {
+          "label": "License",
+          "description": "Package license"
+        },
+        "vulnerabilities": {
+          "label": "Vulnerabilities",
+          "description": "Known security vulnerabilities"
+        }
+      },
+      "values": {
+        "any": "Any",
+        "none": "None",
+        "unknown": "Unknown",
+        "deprecated": "Deprecated",
+        "not_deprecated": "No",
+        "types_included": "Included",
+        "types_none": "None",
+        "vulnerabilities_summary": "{count} ({critical}C/{high}H)"
       }
     }
   }
diff --git a/lunaria/files/pl-PL.json b/lunaria/files/pl-PL.json
diff --git a/shared/types/comparison.ts b/shared/types/comparison.ts
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
