fix(i18n): fix hardcoded strings

Author: wojtekmaj

app/components/PackageDependencies.vue

@@ -103,7 +103,7 @@ const sortedOptionalDependencies = computed(() => {
               v-if="outdatedDeps[dep]"
               class="shrink-0"
               :class="getVersionClass(outdatedDeps[dep])"
-              :title="getOutdatedTooltip(outdatedDeps[dep])"
+              :title="getOutdatedTooltip(outdatedDeps[dep], $t)"
               aria-hidden="true"
             >
               <span class="i-carbon:warning-alt w-3 h-3 block" />
@@ -138,12 +138,12 @@ const sortedOptionalDependencies = computed(() => {
               :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
               class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedDeps[dep])"
-              :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
+              :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
             >
               {{ version }}
             </NuxtLink>
             <span v-if="outdatedDeps[dep]" class="sr-only">
-              ({{ getOutdatedTooltip(outdatedDeps[dep]) }})
+              ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
             <span v-if="getVulnerableDepInfo(dep)" class="sr-only">
               ({{ getVulnerableDepInfo(dep)!.counts.total }} vulnerabilities)

app/components/PackageInstallScripts.vue

@@ -88,7 +88,7 @@ const isExpanded = shallowRef(false)
               "
               class="shrink-0"
               :class="getVersionClass(outdatedNpxDeps[dep])"
-              :title="getOutdatedTooltip(outdatedNpxDeps[dep])"
+              :title="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
               aria-hidden="true"
             >
               <span class="i-carbon:warning-alt w-3 h-3 block" />
@@ -102,7 +102,7 @@ const isExpanded = shallowRef(false)
                     ? $t('package.install_scripts.currently', {
                         version: outdatedNpxDeps[dep].latest,
                       })
-                    : getOutdatedTooltip(outdatedNpxDeps[dep])
+                    : getOutdatedTooltip(outdatedNpxDeps[dep], $t)
                   : version
               "
             >

app/components/PackageMetricsBadges.vue

@@ -52,7 +52,7 @@ const typesHref = computed(() => {
 
 <template>
   <ul v-if="analysis" class="flex items-center gap-1.5 list-none m-0 p-0">
-    <!-- TypeScript types -->
+    <!-- TypeScript types badge -->
     <li>
       <component
         :is="typesHref ? NuxtLink : 'span'"
@@ -73,7 +73,7 @@ const typesHref = computed(() => {
           :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
           aria-hidden="true"
         />
-        Types
+        {{ $t('package.metrics.types_label') }}
       </component>
     </li>
 

app/components/VersionSelector.vue

@@ -625,7 +625,13 @@ watch(
             class="text-xs text-fg-subtle hover:text-fg transition-[color] focus-visible:outline-none focus-visible:text-fg"
             @click="isOpen = false"
           >
-            View all {{ Object.keys(versions).length }} versions
+            {{
+              $t(
+                'package.versions.view_all',
+                { count: Object.keys(versions).length },
+                Object.keys(versions).length,
+              )
+            }}
           </NuxtLink>
         </div>
       </div>

app/composables/useNpmRegistry.ts

@@ -805,16 +805,25 @@ export function useOutdatedDependencies(
  * Get tooltip text for an outdated dependency
  * @public
  */
-export function getOutdatedTooltip(info: OutdatedDependencyInfo): string {
+export function getOutdatedTooltip(
+  info: OutdatedDependencyInfo,
+  t: (key: string, params?: Record<string, unknown>, plural?: number) => string,
+): string {
   if (info.majorsBehind > 0) {
-    const s = info.majorsBehind === 1 ? '' : 's'
-    return `${info.majorsBehind} major version${s} behind (latest: ${info.latest})`
+    return t(
+      'package.dependencies.outdated_major',
+      { count: info.majorsBehind, latest: info.latest },
+      info.majorsBehind,
+    )
   }
   if (info.minorsBehind > 0) {
-    const s = info.minorsBehind === 1 ? '' : 's'
-    return `${info.minorsBehind} minor version${s} behind (latest: ${info.latest})`
+    return t(
+      'package.dependencies.outdated_minor',
+      { count: info.minorsBehind, latest: info.latest },
+      info.minorsBehind,
+    )
   }
-  return `Patch update available (latest: ${info.latest})`
+  return t('package.dependencies.outdated_patch', { latest: info.latest })
 }
 
 /**

i18n/locales/en.json

@@ -191,14 +191,18 @@
       "other_versions": "Other versions",
       "more_tagged": "{count} more tagged",
       "all_covered": "All versions are covered by tags above",
-      "deprecated_title": "{version} (deprecated)"
+      "deprecated_title": "{version} (deprecated)",
+      "view_all": "View all {count} version | View all {count} versions"
     },
     "dependencies": {
       "title": "Dependencies ({count})",
       "list_label": "Package dependencies",
       "show_all": "show all {count} deps",
       "optional": "optional",
-      "view_vulnerabilities": "View vulnerabilities"
+      "view_vulnerabilities": "View vulnerabilities",
+      "outdated_major": "{count} major version behind (latest: {latest}) | {count} major versions behind (latest: {latest})",
+      "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
+      "outdated_patch": "Patch update available (latest: {latest})"
     },
     "peer_dependencies": {
       "title": "Peer Dependencies ({count})",
@@ -257,6 +261,7 @@
       "esm": "ES Modules supported",
       "cjs": "CommonJS supported",
       "no_esm": "No ES Modules support",
+      "types_label": "Types",
       "types_included": "Types included",
       "types_available": "Types available via {package}",
       "no_types": "No TypeScript types"

i18n/locales/pl-PL.json

@@ -191,14 +191,18 @@
       "other_versions": "Inne wersje",
       "more_tagged": "jeszcze {count}",
       "all_covered": "Wszystkie wersje są objęte powyższymi tagami",
-      "deprecated_title": "{version} (przestarzała)"
+      "deprecated_title": "{version} (przestarzała)",
+      "view_all": "Zobacz wszystkie {count} wersje | Zobacz {count} wersję | Zobacz {count} wersje | Zobacz {count} wersji | Zobacz {count} wersji"
     },
     "dependencies": {
       "title": "Zależności ({count})",
       "list_label": "Zależności pakietu",
       "show_all": "pokaż wszystkie ({count})",
       "optional": "opcjonalne",
-      "view_vulnerabilities": "Zobacz luki"
+      "view_vulnerabilities": "Zobacz luki",
+      "outdated_major": "{count} wersji głównych w tyle (najnowsza: {latest}) | {count} wersja główna w tyle (najnowsza: {latest}) | {count} wersje główne w tyle (najnowsza: {latest}) | {count} wersji głównych w tyle (najnowsza: {latest}) | {count} wersji głównych w tyle (najnowsza: {latest})",
+      "outdated_minor": "{count} wersji minor w tyle (najnowsza: {latest}) | {count} wersja minor w tyle (najnowsza: {latest}) | {count} wersje minor w tyle (najnowsza: {latest}) | {count} wersji minor w tyle (najnowsza: {latest}) | {count} wersji minor w tyle (najnowsza: {latest})",
+      "outdated_patch": "Dostępna poprawka (najnowsza: {latest})"
     },
     "peer_dependencies": {
       "title": "Zależności peer ({count})",
@@ -257,6 +261,7 @@
       "esm": "Obsługuje ES Modules",
       "cjs": "Obsługuje CommonJS",
       "no_esm": "Brak obsługi ES Modules",
+      "types_label": "Typy",
       "types_included": "Typy w pakiecie",
       "types_available": "Typy dostępne przez {package}",
       "no_types": "Brak typów TypeScript"