feat(i18n): refactor i18n module configuration (#292)

components/status/edit/StatusEditIndicator.vue

@@ -12,13 +12,14 @@ const formatted = useFormattedDateTime(editedAt)
 
 <template>
   <template v-if="editedAt">
-    <CommonTooltip v-if="inline" :content="`Edited ${formatted}`">
+    <CommonTooltip v-if="inline" :content="$t('status.edited', [formatted])">
+      &#160;
       <time
         :title="editedAt"
         :datetime="editedAt"
         font-bold underline decoration-dashed
         text-secondary
-      >&nbsp;*</time>
+      >&#160;*&#160;</time>
     </CommonTooltip>
 
     <CommonDropdown v-else>

locales/es-ES.json

@@ -13,7 +13,7 @@
     "follows_you": "Te sigue",
     "joined": "Se unió",
     "muted_users": "Usuarios silenciados",
-    "mutuals": "Mutuales",
+    "mutuals": "Mutuo",
     "pinned": "Fijado",
     "posts_count": "{0} publicaciones|{0} publicación|{0} publicaciones",
     "profile_description": "encabezado del perfil de {0}",
@@ -113,6 +113,7 @@
     "uploading": "Subiendo..."
   },
   "status": {
+    "edited": "Modificado {0}",
     "reblogged": "{0} retooteó",
     "spoiler_show_less": "Mostrar menos",
     "spoiler_show_more": "Mostrar más"
@@ -136,6 +137,20 @@
     "month_past": "hace 0 meses|el mes pasado|hace {n} meses",
     "second_future": "dentro de 0 segundos|dentro de {n} segundo|dentro de {n} segundos",
     "second_past": "hace 0 segundos|hace {n} segundo|hace {n} segundos",
+    "short_day_future": "en {n}d",
+    "short_day_past": "{n}d",
+    "short_hour_future": "en {n}h",
+    "short_hour_past": "{n}h",
+    "short_minute_future": "en {n}min",
+    "short_minute_past": "{n}min",
+    "short_month_future": "en 0meses|en 1mes|en {n}meses",
+    "short_month_past": "0meses|1mes|{n}meses",
+    "short_second_future": "en {n}sg",
+    "short_second_past": "{n}sg",
+    "short_week_future": "en {n}sem",
+    "short_week_past": "{n}sem",
+    "short_year_future": "en 0años|en 1año|en {n}años",
+    "short_year_past": "0años|1año|{n}años",
     "tomorrow": "mañana",
     "week_future": "dentro de 0 semanas|la próxima semana|dentro de {n} semanas",
     "week_past": "hace 0 semanas|la semana pasada|hace {n} semanas",

modules/i18n-configuration.ts

@@ -0,0 +1,60 @@
+import type { NuxtI18nOptions } from '@nuxtjs/i18n'
+import type { DateTimeFormats } from '@intlify/core-base'
+import type { LocaleObject } from '#i18n'
+
+const locales: LocaleObject[] = [
+  {
+    code: 'en-US',
+    file: 'en-US.json',
+    name: 'English',
+  },
+  {
+    code: 'de-DE',
+    file: 'de-DE.json',
+    name: 'Deutsch',
+  },
+  {
+    code: 'zh-CN',
+    file: 'zh-CN.json',
+    name: '简体中文',
+  },
+  {
+    code: 'ja-JP',
+    file: 'ja-JP.json',
+    name: '日本語',
+  },
+  {
+    code: 'es-ES',
+    file: 'es-ES.json',
+    name: 'Español',
+  },
+].sort((a, b) => a.code.localeCompare(b.code))
+
+const datetimeFormats = Object.keys(locales).reduce((acc, key) => {
+  acc[key] = {
+    short: {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    },
+    long: {
+      dateStyle: 'long',
+      timeStyle: 'medium',
+    },
+  }
+  return acc
+}, <DateTimeFormats>{})
+
+const i18n: NuxtI18nOptions = {
+  locales,
+  strategy: 'no_prefix',
+  detectBrowserLanguage: false,
+  langDir: 'locales',
+  defaultLocale: 'en-US',
+  vueI18n: {
+    fallbackLocale: 'en-US',
+    datetimeFormats,
+  },
+  lazy: true,
+}
+
+export { i18n }

nuxt.config.ts

@@ -1,5 +1,7 @@
 import Inspect from 'vite-plugin-inspect'
 import { isCI, isDevelopment } from 'std-env'
+import { i18n } from './modules/i18n-configuration'
+
 export default defineNuxtConfig({
   ssr: false,
   modules: [
@@ -81,101 +83,7 @@ export default defineNuxtConfig({
       viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
     },
   },
-  i18n: {
+  i18n,
-    locales: [
-      {
-        code: 'en-US',
-        file: 'en-US.json',
-        name: 'English',
-      },
-      {
-        code: 'de-DE',
-        file: 'de-DE.json',
-        name: 'Deutsch',
-      },
-      {
-        code: 'zh-CN',
-        file: 'zh-CN.json',
-        name: '简体中文',
-      },
-      {
-        code: 'ja-JP',
-        file: 'ja-JP.json',
-        name: '日本語',
-      },
-      {
-        code: 'es-ES',
-        file: 'es-ES.json',
-        name: 'Español',
-      },
-    ].sort((a, b) => a.code.localeCompare(b.code)),
-    strategy: 'no_prefix',
-    detectBrowserLanguage: false,
-    langDir: 'locales',
-    defaultLocale: 'en-US',
-    vueI18n: {
-      fallbackLocale: 'en-US',
-      datetimeFormats: {
-        'en-US': {
-          long: {
-            dateStyle: 'long',
-            timeStyle: 'medium',
-            /*
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            weekday: 'short',
-            hour: 'numeric',
-            minute: 'numeric',
-*/
-          },
-        },
-        'es-ES': {
-          long: {
-            dateStyle: 'long',
-            timeStyle: 'medium',
-            /*
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            weekday: 'short',
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: false,
-*/
-          },
-        },
-        'ja-JP': {
-          long: {
-            dateStyle: 'long',
-            timeStyle: 'medium',
-            /*
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-            weekday: 'short',
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: true,
-*/
-          },
-        },
-        'zh-CN': {
-          long: {
-            dateStyle: 'long',
-            timeStyle: 'medium',
-          },
-        },
-        'de-DE': {
-          long: {
-            dateStyle: 'long',
-            timeStyle: 'medium',
-          },
-        },
-      },
-    },
-    lazy: true,
-  },
 })
 
 declare global {