feat: refactor components to remove i18n and update static text

app/components/home/Activity.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import type { UseTimeAgoMessages } from '@vueuse/core'
 import type { Activity } from '~~/types'
-import { activityMessages, IDEs } from '~~/types'
+import { IDEs } from '~~/types'
-
-const { locale, locales, t } = useI18n({ useScope: 'local' })
 
 const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'),
   { lazy: true }
@@ -25,8 +22,6 @@ const codingActivity = computed(() => {
     : codingActivities.value[0]
 })
 
-const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value)?.code ?? 'en')
-
 const isActive = computed(() => {
   const act = codingActivity.value
   if (!act) return false
@@ -59,13 +54,11 @@ const formattedActivity = computed<FormattedActivity>(() => {
     ? (details.charAt(0).toUpperCase() + details.slice(1).replace('Workspace:', '').trim())
     : ''
 
-  const stateWord = (state && state.split(' ').length >= 2 ? state.split(' ')[1] : t('secret')) as string
+  const stateWord = (state && state.split(' ').length >= 2 ? state.split(' ')[1] : 'Secret project') as string
-  const ago = useTimeAgo(timestamps.start, {
+  const ago = useTimeAgo(timestamps.start).value
-    messages: activityMessages[locale.value as keyof typeof activityMessages] as UseTimeAgoMessages
-  }).value
 
   const formatDate = (date: number, format: string) =>
-    useDateFormat(date, format, { locales: currentLocale.value }).value
+    useDateFormat(date, format).value
 
   return {
     name,
@@ -93,7 +86,7 @@ const editorIcon = computed(() => {
       v-if="formattedActivity"
       class="flex items-start gap-2 mt-4"
     >
-      <UTooltip :text="isActive ? t('tooltip.online') : t('tooltip.idling')">
+      <UTooltip :text="isActive ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
         <div class="relative flex h-3 w-3 mt-2">
           <div
             v-if="isActive"
@@ -106,42 +99,33 @@ const editorIcon = computed(() => {
         </div>
       </UTooltip>
 
-      <i18n-t
+      <div
         v-if="isActive"
-        keypath="working"
-        tag="div"
-      >
-        <template #state>
-          <strong>{{ formattedActivity.state.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ') }}</strong>
-        </template>
-        <template #project>
-          <i>{{ formattedActivity.project.replace('Editing', '') }}</i>
-        </template>
-        <template #editor>
-          <span class="space-x-1">
-            <UIcon
-              :name="editorIcon"
-              size="16"
-            />
-            <strong>{{ formattedActivity.name }}</strong>
-          </span>
-        </template>
-        <template #start>
-          <strong>{{ formattedActivity.start.ago }}</strong>
-        </template>
-        <template #format>
-          <strong>{{ formattedActivity.start.formatted.date }}</strong> {{ t('separator') }}
-          <strong>{{ formattedActivity.start.formatted.time }}</strong>
-        </template>
-      </i18n-t>
-
-      <i18n-t
-        v-else
-        keypath="idling"
-        tag="div"
         class="space-x-1"
       >
-        <template #editor>
+        <span>
+          I'm actually working on
+          <strong>{{ formattedActivity.state.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ') }}</strong>,
+          editing <i>{{ formattedActivity.project.replace('Editing', '') }}</i>, using
+          <span class="space-x-1">
+            <UIcon
+              :name="editorIcon"
+              size="16"
+            />
+            <strong>{{ formattedActivity.name }}</strong>
+          </span>.
+          I've started <strong>{{ formattedActivity.start.ago }}</strong>, on
+          <strong>{{ formattedActivity.start.formatted.date }}</strong>
+          at <strong>{{ formattedActivity.start.formatted.time }}</strong>.
+        </span>
+      </div>
+
+      <div
+        v-else
+        class="space-x-1"
+      >
+        <span>
+          I'm idling on my computer with
           <span class="space-x-1">
             <UIcon
               :name="editorIcon"
@@ -149,72 +133,23 @@ const editorIcon = computed(() => {
             />
             <strong>{{ formattedActivity.name }}</strong>
           </span>
-        </template>
+          running in background.
-      </i18n-t>
+        </span>
+      </div>
     </div>
 
     <div
       v-else
       class="my-5 flex md:items-start gap-2"
     >
-      <UTooltip :text="t('tooltip.offline')">
+      <UTooltip text="I'm offline 🫥">
         <div class="relative flex h-3 w-3 mt-2">
           <div class="relative cursor-not-allowed inline-flex rounded-full h-3 w-3 bg-red-500" />
         </div>
       </UTooltip>
-      <i18n-t
+      <p class="not-prose">
-        keypath="offline"
+        I'm currently offline. Come back later to see what I'm working on. <i>I am probably doing some maths or sleeping.</i>
-        tag="p"
+      </p>
-        class="not-prose"
-      >
-        <template #maths>
-          <i>{{ t('maths') }}</i>
-        </template>
-      </i18n-t>
     </div>
   </ClientOnly>
 </template>
-
-<i18n lang="json">
-{
-  "en": {
-    "offline": "I'm currently offline. Come back later to see what I'm working on. {maths}",
-    "working": "I'm actually working on {state}, editing {project}, using {editor}. I've started {start}, the {format}.",
-    "idling": "I'm idling on my computer with {editor} running in background.",
-    "maths": "I am probably doing some maths or sleeping.",
-    "tooltip": {
-      "online": "I'm online 👋",
-      "offline": "I'm offline 🫥",
-      "idling": "I'm sleeping 😴"
-    },
-    "separator": "at",
-    "secret": "Secret Project"
-  },
-  "fr": {
-    "offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille. {maths}",
-    "working": "Je travaille actuellement sur {state}, éditant {project}, en utilisant {editor}. J'ai commencé {start}, le {format}.",
-    "idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
-    "maths": "Je suis probablement en train de faire des maths ou en train de dormir.",
-    "tooltip": {
-      "online": "Je suis connecté 👋",
-      "offline": "Je suis déconnecté 🫥",
-      "idling": "Je dors 😴"
-    },
-    "separator": "à",
-    "secret": "Projet Secret"
-  },
-  "es": {
-    "offline": "Ahora mismo estoy desconectado. Vuelve más tarde para ver en lo que estoy trabajando. {maths}",
-    "working": "Estoy trabajando en {state}, editando {project}, y utilizando {editor}. He empezado {start}, el {format}.",
-    "idling": "Estoy en reposo en mi ordenador con {editor} en segundo plano.",
-    "maths": "Estoy probablemente haciendo matemáticas o durmiendo.",
-    "tooltip": {
-      "online": "Estoy conectado 👋",
-      "offline": "Estoy desconectado 🫥",
-      "idling": "Estoy durmiendo 😴"
-    },
-    "separator": "a",
-    "secret": "Proyecto Secreto"
-  }
-}
-</i18n>

app/components/home/CatchPhrase.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
 const { width } = useWindowSize()
-const { t } = useI18n({
-  useScope: 'local'
-})
 </script>
 
 <template>
@@ -15,21 +12,7 @@ const { t } = useI18n({
         class="transform -rotate-12 duration-300 animate-wave"
         name="i-ph-hand-pointing-duotone"
       />
-      <p>{{ t('quote') }}</p>
+      <p>Hover the bold texts to find out more about me.</p>
     </div>
   </ClientOnly>
 </template>
-
-<i18n lang="json">
-{
-  "en": {
-    "quote": "Hover the bold texts to find out more about me."
-  },
-  "fr": {
-    "quote": "Survolez les textes en gras pour en savoir plus sur moi."
-  },
-  "es": {
-    "quote": "Pase el cursor sobre los textos en negrita para obtener más información sobre mí."
-  }
-}
-</i18n>

app/components/home/Quote.vue

@@ -1,9 +1,3 @@
-<script lang="ts" setup>
-const { t } = useI18n({
-  useScope: 'local'
-})
-</script>
-
 <template>
   <div class="mt-4">
     <div class="float-left flex items-center mr-2 mt-1">
@@ -19,21 +13,7 @@ const { t } = useI18n({
       </ClientOnly>
     </div>
     <p class="not-prose">
-      {{ t('quote') }}
+      Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!
     </p>
   </div>
 </template>
-
-<i18n lang="json">
-{
-  "en": {
-    "quote": "Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!"
-  },
-  "fr": {
-    "quote": "Bonjour tout le monde ! Merci de visiter mon portfolio. N'hésitez pas à laisser ce que vous avez à dire, comme des suggestions, des appréciations, des questions ou autre chose !"
-  },
-  "es": {
-    "quote": "Hola a todos ! Muchas gracias por visitar mi portfolio. No dudes en dejar cualquier comentario, como sugerencias, apreciaciones. preguntas, o cualquier cosa !"
-  }
-}
-</i18n>

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 time = useTimeAgo(new Date(stats.value?.coding.range.start ?? 0)).value.split(' ')[0]
-const date = useDateFormat(new Date(stats.value!.coding.data.range.start), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
+const date = useDateFormat(new Date(stats.value?.coding.range.start ?? 0), 'DD MMMM YYYY')
-const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
+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
+    <div
-      v-if="stats && stats.coding && stats.editors && stats.os && stats.languages && time && date && hours"
+      v-if="time && date && hours && stats"
-      keypath="stats"
+      class="space-y-1"
-      tag="p"
     >
-      <template #time>
+      <p>
-        {{ time }}
+        I collect some data for {{ time }} years, started the
-      </template>
-      <template #date>
         <HoverText
-          :hover="t('tooltip.date')"
+          hover="That was so long ago 🫣"
           :text="date"
-        />
+        />.
-      </template>
+        I've coded for a total of
-      <template #hours>
         <HoverText
-          :hover="t('tooltip.hours')"
+          hover="That's a lot 😮"
           :text="hours"
         />
-      </template>
+        hours.
-      <template #editors>
+      </p>
-        {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
+      <p>
-      </template>
+        My best editors are {{ editors || 'N/A' }}. My best OS is {{ os || 'N/A' }}. My top languages are
-      <template
+        {{ languages || 'N/A' }}.
-        v-if="stats.os.data[0]"
+      </p>
-        #os
+    </div>
-      >
-        {{ 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>
   </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>

app/pages/chat.vue

@@ -1,148 +0,0 @@
-<script lang="ts" setup>
-import { getTextFromMessage } from '@nuxt/ui/utils/ai'
-import { DefaultChatTransport } from 'ai'
-import { Chat } from '@ai-sdk/vue'
-
-const toast = useToast()
-const input = ref('')
-
-const { t, locale } = useI18n({ useScope: 'local' })
-
-const chat = new Chat({
-  transport: new DefaultChatTransport({
-    api: '/api/chat',
-    body: () => ({
-      messages: chat.messages,
-      lang: locale.value
-    })
-  }),
-  onError(error) {
-    toast.add({
-      title: 'Error',
-      description: error.message,
-      color: 'red'
-    })
-  }
-})
-
-function handleSubmit(e: Event) {
-  e.preventDefault()
-  if (input.value.trim()) {
-    chat.sendMessage({ text: input.value })
-    input.value = ''
-  }
-}
-
-const clipboard = useClipboard()
-const actions = ref([
-  {
-    label: 'Copy to clipboard',
-    icon: 'i-lucide-copy',
-    onClick: (message: never) => clipboard.copy(getTextFromMessage(message))
-  }
-])
-</script>
-
-<template>
-  <main>
-    <UDashboardPanel
-      :ui="{ body: 'p-0 sm:p-0' }"
-      class="max-h-[calc(100vh-28rem)]! min-h-[calc(100vh-28rem)]! border-none"
-      :resizable="false"
-    >
-      <template #body>
-        <UContainer>
-          <UChatMessages
-            :actions
-            :messages="chat.messages"
-            :status="chat.status"
-            :user="{
-              variant: 'solid'
-            }"
-            :assistant="{
-              variant: 'naked'
-            }"
-            :auto-scroll="{
-              color: 'neutral',
-              variant: 'outline'
-            }"
-          >
-            <template #indicator>
-              <UButton
-                class="px-0"
-                color="neutral"
-                variant="link"
-                loading
-                loading-icon="i-lucide-loader"
-                label="Thinking..."
-              />
-            </template>
-            <template #content="{ message }">
-              <MDC
-                :value="getTextFromMessage(message)"
-                :cache-key="message.id"
-                class="*:first:mt-0 *:last:mb-0"
-              />
-            </template>
-          </UChatMessages>
-        </UContainer>
-      </template>
-
-      <template #footer>
-        <UContainer>
-          <ClientOnly>
-            <UCard
-              variant="outline"
-              class="rounded-xl"
-              :ui="{ body: 'p-2 sm:p-2' }"
-            >
-              <UChatPrompt
-                v-model="input"
-                :placeholder="t('placeholder')"
-                :error="chat.error"
-                @submit="handleSubmit"
-              >
-                <UChatPromptSubmit
-                  :status="chat.status"
-                  color="neutral"
-                  submitted-color="neutral"
-                  submitted-variant="subtle"
-                  submitted-icon="i-lucide-square"
-                  streaming-color="neutral"
-                  streaming-variant="subtle"
-                  streaming-icon="i-lucide-square"
-                  error-color="red"
-                  error-variant="soft"
-                  error-icon="i-lucide-rotate-ccw"
-                  @stop="chat.stop()"
-                  @reload="chat.regenerate()"
-                />
-              </UChatPrompt>
-            </UCard>
-          </ClientOnly>
-        </UContainer>
-      </template>
-    </UDashboardPanel>
-  </main>
-</template>
-
-<style scoped>
-
-</style>
-
-<i18n lang="json">
-{
-  "en": {
-    "placeholder": "Type your message...",
-    "thinking": "Thinking..."
-  },
-  "fr": {
-    "placeholder": "Tapez votre message...",
-    "thinking": "Réflexion..."
-  },
-  "es": {
-    "placeholder": "Escribe tu mensaje...",
-    "thinking": "Pensando..."
-  }
-}
-</i18n>

app/pages/index.vue

@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-const { locale } = useI18n()
-
 useSeoMeta({
   title: 'Arthur Danjou - AI enjoyer and Maths student',
   description: 'Developer enjoying Artificial Intelligence and Machine Learning. Mathematics Student at Paris Dauphine-PSL University specialised in Statistics'
 })
 
-const { data: page } = await useAsyncData(`/home/${locale.value}`, () => {
+const { data: page } = await useAsyncData('index', () => {
-  return queryCollection('main').path(`/home/${locale.value}`).first()
+  return queryCollection('index').first()
-}, {
-  watch: [locale]
 })
 </script>