feat: refactor components to remove i18n and update static text

app/components/home/Stats.vue

@@ -2,83 +2,40 @@
 import type { Stats } from '~~/types'
 import { usePrecision } from '@vueuse/math'
 
-const { locale, locales, t } = useI18n({
-  useScope: 'local'
-})
-const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
-
 const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
 
-const time = useTimeAgo(new Date(stats.value!.coding.data.range.start)).value.split(' ')[0]
-const date = useDateFormat(new Date(stats.value!.coding.data.range.start), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
-const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
+const time = useTimeAgo(new Date(stats.value?.coding.range.start ?? 0)).value.split(' ')[0]
+const date = useDateFormat(new Date(stats.value?.coding.range.start ?? 0), 'DD MMMM YYYY')
+const hours = usePrecision((stats.value?.coding.grand_total.total_seconds_including_other_language ?? 0) / 3600, 0)
+
+const editors = computed(() => stats.value?.editors.slice(0, 3).map(editor => `${editor.name} (${editor.percent}%)`).join(', '))
+const os = computed(() => stats.value?.os.slice(0, 2).map(os => `${os.name} (${os.percent}%)`).join(', '))
+const languages = computed(() => stats.value?.languages.slice(0, 3).map(language => `${language.name} (${language.percent}%)`).join(', '))
 </script>
 
 <template>
   <ClientOnly>
-    <i18n-t
-      v-if="stats && stats.coding && stats.editors && stats.os && stats.languages && time && date && hours"
-      keypath="stats"
-      tag="p"
+    <div
+      v-if="time && date && hours && stats"
+      class="space-y-1"
     >
-      <template #time>
-        {{ time }}
-      </template>
-      <template #date>
+      <p>
+        I collect some data for {{ time }} years, started the
         <HoverText
-          :hover="t('tooltip.date')"
+          hover="That was so long ago 🫣"
           :text="date"
-        />
-      </template>
-      <template #hours>
+        />.
+        I've coded for a total of
         <HoverText
-          :hover="t('tooltip.hours')"
+          hover="That's a lot 😮"
           :text="hours"
         />
-      </template>
-      <template #editors>
-        {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
-      </template>
-      <template
-        v-if="stats.os.data[0]"
-        #os
-      >
-        {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%)
-      </template>
-      <template #languages>
-        {{
-          stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
-        }}
-      </template>
-    </i18n-t>
+        hours.
+      </p>
+      <p>
+        My best editors are {{ editors || 'N/A' }}. My best OS is {{ os || 'N/A' }}. My top languages are
+        {{ languages || 'N/A' }}.
+      </p>
+    </div>
   </ClientOnly>
 </template>
-
-<i18n lang="json">
-{
-  "en": {
-    "stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours. My best editors are {editors}. My best OS is {os}. My top languages are {languages}.",
-    "separator": " and ",
-    "tooltip": {
-      "date": "That was so long ago 🫣",
-      "hours": "That's a lot 😮"
-    }
-  },
-  "fr": {
-    "stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. Mes langages préférés sont {languages}.",
-    "separator": " et ",
-    "tooltip": {
-      "date": "C'était il y a si longtemps 🫣",
-      "hours": "C'est beaucoup 😮"
-    }
-  },
-  "es": {
-    "stats": "Recopilo datos desde hace {time} años, empecé el {date}. He programado durante un total de {hours} horas. Mis mejores editores son {editors}. Mi mejor OS es {os}. Y mis lenguajes favoritos son {languages}.",
-    "separator": " y ",
-    "tooltip": {
-      "date": "hace tato tiempo…🫣",
-      "hours": "es mucho 😮"
-    }
-  }
-}
-</i18n>