fix(i18n): extract untranslated hardcoded strings (#2181)

Author: serhalp

app/components/Settings/AccentColorPicker.vue

@@ -29,7 +29,7 @@ onPrehydrate(el => {
   <fieldset
     class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
-    <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
+    <legend class="sr-only">{{ $t('settings.accent_colors.label') }}</legend>
     <label
       v-for="color in accentColors"
       :key="color.id"
@@ -43,7 +43,7 @@ onPrehydrate(el => {
         class="sr-only"
         :value="color.id"
         :checked="selectedAccentColor === color.id || (!selectedAccentColor && color.id === 'sky')"
-        :aria-label="color.id === 'neutral' ? $t('settings.clear_accent') : color.name"
+        :aria-label="color.label"
         @change="setAccentColor(color.id)"
       />
       <span v-if="color.id === 'neutral'" class="i-lucide:ban size-4 text-bg" aria-hidden="true" />

app/components/Settings/BgThemePicker.vue

@@ -27,7 +27,7 @@ onPrehydrate(el => {
   <fieldset
     class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
-    <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
+    <legend class="sr-only">{{ $t('settings.background_themes.label') }}</legend>
     <label
       v-for="theme in backgroundThemes"
       :key="theme.id"
@@ -43,7 +43,7 @@ onPrehydrate(el => {
           selectedBackgroundTheme === theme.id ||
           (!selectedBackgroundTheme && theme.id === 'neutral')
         "
-        :aria-label="theme.name"
+        :aria-label="theme.label"
         @change="setBackgroundTheme(theme.id)"
       />
     </label>

app/composables/useSettings.ts

@@ -135,14 +135,25 @@ export const useKeyboardShortcuts = createSharedComposable(function useKeyboardS
 export function useAccentColor() {
   const { settings } = useSettings()
   const colorMode = useColorMode()
+  const { t } = useI18n()
+
+  const accentColorLabels = computed<Record<AccentColorId, string>>(() => ({
+    sky: t('settings.accent_colors.sky'),
+    coral: t('settings.accent_colors.coral'),
+    amber: t('settings.accent_colors.amber'),
+    emerald: t('settings.accent_colors.emerald'),
+    violet: t('settings.accent_colors.violet'),
+    magenta: t('settings.accent_colors.magenta'),
+    neutral: t('settings.clear_accent'),
+  }))
 
   const accentColors = computed(() => {
     const isDark = colorMode.value === 'dark'
     const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
 
     return Object.entries(colors).map(([id, value]) => ({
       id: id as AccentColorId,
-      name: id,
+      label: accentColorLabels.value[id as AccentColorId],
       value,
     }))
   })
@@ -190,12 +201,24 @@ export function useSearchProvider() {
 }
 
 export function useBackgroundTheme() {
-  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
-    id: id as BackgroundThemeId,
-    name: id,
-    value,
+  const { t } = useI18n()
+
+  const bgThemeLabels = computed<Record<BackgroundThemeId, string>>(() => ({
+    neutral: t('settings.background_themes.neutral'),
+    stone: t('settings.background_themes.stone'),
+    zinc: t('settings.background_themes.zinc'),
+    slate: t('settings.background_themes.slate'),
+    black: t('settings.background_themes.black'),
   }))
 
+  const backgroundThemes = computed(() =>
+    Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
+      id: id as BackgroundThemeId,
+      label: bgThemeLabels.value[id as BackgroundThemeId],
+      value,
+    })),
+  )
+
   const { settings } = useSettings()
 
   function setBackgroundTheme(id: BackgroundThemeId | null) {

app/pages/package-docs/[...path].vue

@@ -10,6 +10,7 @@ definePageMeta({
 
 const route = useRoute('docs')
 const router = useRouter()
+const { t } = useI18n()
 
 const parsedRoute = computed(() => {
   const segments = route.params.path?.filter(Boolean)
@@ -87,7 +88,7 @@ const { data: docsData, status: docsStatus } = useLazyFetch<DocsResponse>(
       html: '',
       toc: null,
       status: 'missing' as const,
-      message: 'Docs are not available for this version.',
+      message: t('package.docs.default_not_available'),
     }),
   },
 )
@@ -104,9 +105,11 @@ const versionUrlPattern = computed(
 )
 
 const pageTitle = computed(() => {
-  if (!packageName.value) return 'API Docs - npmx'
-  if (!resolvedVersion.value) return `${packageName.value} docs - npmx`
-  return `${packageName.value}@${resolvedVersion.value} docs - npmx`
+  if (!packageName.value) return t('package.docs.page_title')
+  if (!resolvedVersion.value) return t('package.docs.page_title_name', { name: packageName.value })
+  return t('package.docs.page_title_version', {
+    name: `${packageName.value}@${resolvedVersion.value}`,
+  })
 })
 
 useSeoMeta({
@@ -119,7 +122,7 @@ useSeoMeta({
 })
 
 defineOgImageComponent('Default', {
-  title: () => `${pkg.value?.name ?? 'Package'} - Docs`,
+  title: () => t('package.docs.og_title', { name: pkg.value?.name ?? 'Package' }),
   description: () => pkg.value?.license ?? '',
   primaryColor: '#60a5fa',
 })
@@ -156,7 +159,7 @@ const stickyStyle = computed(() => {
       >
         <div class="docs-sidebar sticky overflow-y-auto p-4">
           <h2 class="text-xs font-semibold text-fg-subtle uppercase tracking-wider mb-4">
-            Contents
+            {{ $t('package.docs.contents') }}
           </h2>
           <!-- eslint-disable vue/no-v-html -->
           <div class="toc-content" v-html="docsData.toc" />
@@ -184,7 +187,7 @@ const stickyStyle = computed(() => {
                 :to="packageRoute(packageName)"
                 class="link-subtle font-mono text-sm"
               >
-                View package
+                {{ $t('package.docs.view_package') }}
               </NuxtLink>
             </div>
           </div>

app/pages/settings.vue

@@ -87,15 +87,15 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
             <!-- Accent colors -->
             <div class="space-y-3">
               <span class="block text-sm text-fg font-medium">
-                {{ $t('settings.accent_colors') }}
+                {{ $t('settings.accent_colors.label') }}
               </span>
               <SettingsAccentColorPicker />
             </div>
 
             <!-- Background themes -->
             <div class="space-y-3">
               <span class="block text-sm text-fg font-medium">
-                {{ $t('settings.background_themes') }}
+                {{ $t('settings.background_themes.label') }}
               </span>
               <SettingsBgThemePicker />
             </div>

i18n/locales/ar.json

@@ -105,10 +105,14 @@
     "theme_system": "سمة النظام",
     "language": "اللغة",
     "help_translate": "ساهم في ترجمة npmx",
-    "accent_colors": "ألوان الموقع",
+    "accent_colors": {
+      "label": "ألوان الموقع"
+    },
     "clear_accent": "مسح لون التمييز",
     "translation_progress": "تقدم الترجمة",
-    "background_themes": "درجة خلفية الصفحة"
+    "background_themes": {
+      "label": "درجة خلفية الصفحة"
+    }
   },
   "i18n": {
     "missing_keys": "{count} ترجمات مفقودة | ترجمة واحدة مفقودة | ترجمتان مفقودتان | {count} ترجمات مفقودة | {count} ترجمة مفقودة | {count} ترجمة مفقودة",

i18n/locales/az-AZ.json

@@ -142,10 +142,14 @@
     "theme_system": "Sistem",
     "language": "Dil",
     "help_translate": "npmx-i tərcümə etməyə kömək edin",
-    "accent_colors": "Vurğu rəngləri",
+    "accent_colors": {
+      "label": "Vurğu rəngləri"
+    },
     "clear_accent": "Vurğu rəngini təmizlə",
     "translation_progress": "Tərcümə irəliləyişi",
-    "background_themes": "Fon tonu",
+    "background_themes": {
+      "label": "Fon tonu"
+    },
     "keyboard_shortcuts_enabled": "Klaviatura qısayollarını aktivləşdir",
     "keyboard_shortcuts_enabled_description": "Klaviatura qısayolları digər brauzer və ya sistem qısayolları ilə toqquşarsa deaktiv edilə bilər"
   },

i18n/locales/bg-BG.json

@@ -111,10 +111,14 @@
     "theme_system": "Системна",
     "language": "Език",
     "help_translate": "Помогнете да преведем npmx",
-    "accent_colors": "Акцентни цветове",
+    "accent_colors": {
+      "label": "Акцентни цветове"
+    },
     "clear_accent": "Изчистване на акцентен цвят",
     "translation_progress": "Напредък на превода",
-    "background_themes": "Фонов нюанс",
+    "background_themes": {
+      "label": "Фонов нюанс"
+    },
     "keyboard_shortcuts_enabled": "Активиране на клавишни комбинации",
     "keyboard_shortcuts_enabled_description": "Клавишните комбинации могат да бъдат деактивирани, ако влизат в конфликт с други браузърни или системни преки пътища"
   },

i18n/locales/bn-IN.json

@@ -74,7 +74,9 @@
     "theme_system": "সিস্টেম",
     "language": "ভাষা",
     "help_translate": "npmx অনুবাদে সাহায্য করুন",
-    "accent_colors": "এক্সেন্ট রং",
+    "accent_colors": {
+      "label": "এক্সেন্ট রং"
+    },
     "clear_accent": "এক্সেন্ট রং সাফ করুন",
     "translation_progress": "অনুবাদের অগ্রগতি"
   },

i18n/locales/cs-CZ.json

@@ -142,10 +142,14 @@
     "theme_system": "Systémové",
     "language": "Jazyk",
     "help_translate": "Pomozte přeložit npmx",
-    "accent_colors": "Barvy akcentu",
+    "accent_colors": {
+      "label": "Barvy akcentu"
+    },
     "clear_accent": "Vymazat barvu akcentu",
     "translation_progress": "Pokrok překladu",
-    "background_themes": "Odstín pozadí",
+    "background_themes": {
+      "label": "Odstín pozadí"
+    },
     "keyboard_shortcuts_enabled": "Povolit klávesové zkratky",
     "keyboard_shortcuts_enabled_description": "Klávesové zkratky lze zakázat, pokud se střetávají s jinými zkratkami prohlížeče nebo systému"
   },