fix(i18n,ui): add search page title and description (#872)

Author: userquin

app/pages/search.vue

@@ -581,12 +581,21 @@ function handleResultsKeydown(e: KeyboardEvent) {
 onKeyDown(['ArrowDown', 'ArrowUp', 'Enter'], handleResultsKeydown)
 
 useSeoMeta({
-  title: () => (query.value ? `Search: ${query.value} - npmx` : 'Search Packages - npmx'),
+  title: () =>
+    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
+  description: () =>
+    query.value
+      ? $t('search.meta_description', { search: query.value })
+      : $t('search.meta_description_packages'),
 })
 
 defineOgImageComponent('Default', {
-  title: 'npmx',
-  description: () => (query.value ? `Search results for "${query.value}"` : 'Search npm packages'),
+  title: () =>
+    `${query.value ? $t('search.title_search', { search: query.value }) : $t('search.title_packages')} - npmx`,
+  description: () =>
+    query.value
+      ? $t('search.meta_description', { search: query.value })
+      : $t('search.meta_description_packages'),
   primaryColor: '#60a5fa',
 })
 </script>

i18n/locales/en.json

@@ -28,6 +28,10 @@
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
     "title": "search",
+    "title_search": "search: {search}",
+    "title_packages": "search packages",
+    "meta_description": "Search results for '{search}'",
+    "meta_description_packages": "Search npm packages",
     "not_taken": "{name} is not taken",
     "claim_prompt": "Claim this package name on npm",
     "claim_button": "Claim \"{name}\"",

i18n/locales/es.json

@@ -28,6 +28,10 @@
     "updating": "(actualizando...)",
     "no_results": "No se encontraron paquetes para \"{query}\"",
     "title": "búsqueda",
+    "title_search": "búsqueda: {search}",
+    "title_packages": "búsqueda de paquetes",
+    "meta_description": "Resultado de la búsqueda para '{search}'",
+    "meta_description_packages": "Búsqueda de paquetes npm",
     "not_taken": "{name} no está ocupado",
     "claim_prompt": "Reclamar este nombre de paquete en npm",
     "claim_button": "Reclamar \"{name}\"",

lunaria/files/en-GB.json

@@ -28,6 +28,10 @@
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
     "title": "search",
+    "title_search": "search: {search}",
+    "title_packages": "search packages",
+    "meta_description": "Search results for '{search}'",
+    "meta_description_packages": "Search npm packages",
     "not_taken": "{name} is not taken",
     "claim_prompt": "Claim this package name on npm",
     "claim_button": "Claim \"{name}\"",

lunaria/files/en-US.json

@@ -28,6 +28,10 @@
     "updating": "(updating...)",
     "no_results": "No packages found for \"{query}\"",
     "title": "search",
+    "title_search": "search: {search}",
+    "title_packages": "search packages",
+    "meta_description": "Search results for '{search}'",
+    "meta_description_packages": "Search npm packages",
     "not_taken": "{name} is not taken",
     "claim_prompt": "Claim this package name on npm",
     "claim_button": "Claim \"{name}\"",

lunaria/files/es-419.json

@@ -28,6 +28,10 @@
     "updating": "(actualizando...)",
     "no_results": "No se encontraron paquetes para \"{query}\"",
     "title": "búsqueda",
+    "title_search": "búsqueda: {search}",
+    "title_packages": "búsqueda de paquetes",
+    "meta_description": "Resultado de la búsqueda para '{search}'",
+    "meta_description_packages": "Búsqueda de paquetes npm",
     "not_taken": "{name} no está ocupado",
     "claim_prompt": "Reclamar este nombre de paquete en npm",
     "claim_button": "Reclamar \"{name}\"",

lunaria/files/es-ES.json

@@ -28,6 +28,10 @@
     "updating": "(actualizando...)",
     "no_results": "No se encontraron paquetes para \"{query}\"",
     "title": "búsqueda",
+    "title_search": "búsqueda: {search}",
+    "title_packages": "búsqueda de paquetes",
+    "meta_description": "Resultado de la búsqueda para '{search}'",
+    "meta_description_packages": "Búsqueda de paquetes npm",
     "not_taken": "{name} no está ocupado",
     "claim_prompt": "Reclamar este nombre de paquete en npm",
     "claim_button": "Reclamar \"{name}\"",