fix(i18n): extract untranslated hardcoded strings

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"
   },

i18n/locales/de-DE.json

@@ -142,10 +142,14 @@
     "theme_system": "System",
     "language": "Sprache",
     "help_translate": "Hilf bei der Übersetzung von npmx",
-    "accent_colors": "Akzentfarben",
+    "accent_colors": {
+      "label": "Akzentfarben"
+    },
     "clear_accent": "Akzentfarbe zurücksetzen",
     "translation_progress": "Übersetzungsfortschritt",
-    "background_themes": "Hintergrundschattierung",
+    "background_themes": {
+      "label": "Hintergrundschattierung"
+    },
     "keyboard_shortcuts_enabled": "Tastenkombinationen aktivieren",
     "keyboard_shortcuts_enabled_description": "Tastenkombinationen können deaktiviert werden, wenn sie mit anderen Browser- oder Systemkürzeln in Konflikt stehen"
   },

i18n/locales/en.json

@@ -148,10 +148,25 @@
     "language": "Language",
     "help_translate": "Help translate npmx",
     "translation_status": "Check global translation status",
-    "accent_colors": "Accent colors",
+    "accent_colors": {
+      "label": "Accent colors",
+      "sky": "Sky",
+      "coral": "Coral",
+      "amber": "Amber",
+      "emerald": "Emerald",
+      "violet": "Violet",
+      "magenta": "Magenta"
+    },
     "clear_accent": "Clear accent color",
     "translation_progress": "Translation progress",
-    "background_themes": "Background shade",
+    "background_themes": {
+      "label": "Background shade",
+      "neutral": "Neutral",
+      "stone": "Stone",
+      "zinc": "Zinc",
+      "slate": "Slate",
+      "black": "Black"
+    },
     "keyboard_shortcuts_enabled": "Enable keyboard shortcuts",
     "keyboard_shortcuts_enabled_description": "Keyboard shortcuts can be disabled if they conflict with other browser or system shortcuts"
   },
@@ -309,8 +324,15 @@
       "unlike": "Unlike this package"
     },
     "docs": {
+      "contents": "Contents",
+      "default_not_available": "Docs are not available for this version.",
       "not_available": "Docs not available",
-      "not_available_detail": "We could not generate docs for this version."
+      "not_available_detail": "We could not generate docs for this version.",
+      "page_title": "API Docs - npmx",
+      "page_title_name": "{name} docs - npmx",
+      "page_title_version": "{name} docs - npmx",
+      "og_title": "{name} - Docs",
+      "view_package": "View package"
     },
     "get_started": {
       "title": "Get started",

i18n/locales/es.json

@@ -144,10 +144,14 @@
     "theme_system": "Sistema",
     "language": "Idioma",
     "help_translate": "Ayuda a traducir npmx",
-    "accent_colors": "Colores de acento",
+    "accent_colors": {
+      "label": "Colores de acento"
+    },
     "clear_accent": "Limpiar color de acento",
     "translation_progress": "Progreso de traducción",
-    "background_themes": "Tema de fondo",
+    "background_themes": {
+      "label": "Tema de fondo"
+    },
     "keyboard_shortcuts_enabled": "Activar atajos de teclado",
     "keyboard_shortcuts_enabled_description": "Los atajos de teclado pueden desactivarse si entran en conflicto con otros atajos del navegador o del sistema"
   },

i18n/locales/fr-FR.json

@@ -142,10 +142,25 @@
     "theme_system": "Système",
     "language": "Langue de l'interface",
     "help_translate": "Aidez-nous à traduire npmx",
-    "accent_colors": "Couleurs d'accentuation",
+    "accent_colors": {
+      "label": "Couleurs d'accentuation",
+      "sky": "Ciel",
+      "coral": "Corail",
+      "amber": "Ambre",
+      "emerald": "Émeraude",
+      "violet": "Violet",
+      "magenta": "Magenta"
+    },
     "clear_accent": "Supprimer la couleur d'accentuation",
     "translation_progress": "Progression de la traduction",
-    "background_themes": "Teinte de fond",
+    "background_themes": {
+      "label": "Teinte de fond",
+      "neutral": "Neutre",
+      "stone": "Pierre",
+      "zinc": "Zinc",
+      "slate": "Ardoise",
+      "black": "Noir"
+    },
     "keyboard_shortcuts_enabled": "Activer les raccourcis clavier",
     "keyboard_shortcuts_enabled_description": "Les raccourcis clavier peuvent être désactivés s'ils entrent en conflit avec d'autres raccourcis du navigateur ou du système"
   },
@@ -289,8 +304,15 @@
       "unlike": "Retirer le like"
     },
     "docs": {
+      "contents": "Sommaire",
+      "default_not_available": "La documentation n'est pas disponible pour cette version.",
       "not_available": "Documentation non disponible",
-      "not_available_detail": "Nous n'avons pas pu générer la documentation pour cette version."
+      "not_available_detail": "Nous n'avons pas pu générer la documentation pour cette version.",
+      "page_title": "Documentation API - npmx",
+      "page_title_name": "Documentation {name} - npmx",
+      "page_title_version": "Documentation {name} - npmx",
+      "og_title": "{name} - Documentation",
+      "view_package": "Voir le paquet"
     },
     "get_started": {
       "title": "Commencer",

i18n/locales/hi-IN.json

@@ -75,7 +75,9 @@
     "theme_system": "सिस्टम",
     "language": "भाषा",
     "help_translate": "npmx का अनुवाद करने में मदद करें",
-    "accent_colors": "एक्सेंट रंग",
+    "accent_colors": {
+      "label": "एक्सेंट रंग"
+    },
     "clear_accent": "एक्सेंट रंग साफ़ करें",
     "translation_progress": "अनुवाद प्रगति"
   },

i18n/locales/hu-HU.json

@@ -111,10 +111,14 @@
     "theme_system": "Rendszer",
     "language": "Nyelv",
     "help_translate": "Segíts lefordítani az npmx-et",
-    "accent_colors": "Akcentus színek",
+    "accent_colors": {
+      "label": "Akcentus színek"
+    },
     "clear_accent": "Akcentus szín törlése",
     "translation_progress": "Fordítás állapota",
-    "background_themes": "Háttér árnyalata",
+    "background_themes": {
+      "label": "Háttér árnyalata"
+    },
     "keyboard_shortcuts_enabled": "Billentyűzet parancsikonok engedélyezése",
     "keyboard_shortcuts_enabled_description": "A billentyűzet parancsikonok letilthatók, ha ütköznek más böngésző vagy rendszer parancsikonokkal"
   },