Translate all portfolio

2026-01-23 11:51:53 +01:00 · 2024-07-08 01:08:55 +02:00
parent 471b2b830f
commit ebfac1794c
37 changed files with 2010 additions and 1540 deletions
--- a/app/components/content/Activity.vue
+++ b/app/components/content/Activity.vue
@@ -1,20 +1,28 @@
 <script lang="ts" setup>
-import { type Activity, type CodingActivity, IDEs } from '~~/types'
+import { type Activity, IDEs } from '~~/types'

 const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
 useIntervalFn(async () => await refresh(), 5000)
 const codingActivity = computed(() => activity.value!.data.activities.filter(activity => IDEs.some(ide => ide.name === activity.name))[0])

-const getActivity = computed<CodingActivity | undefined>(() => {
+const { locale, locales } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+
+const getActivity = computed(() => {
  const activity = codingActivity.value
  if (!activity) return

  const active = activity.name === 'Visual Studio Code' ? !activity.details.includes('Idling') : activity.state.toLowerCase().includes('editing')
-  const project = activity.state ? activity.state.replace('Workspace:', '') : ''
-  const state = activity.details.charAt(0).toLowerCase() + activity.details.slice(1)
+  const project = activity.details ? activity.details.replace('Workspace:', '') : ''
+  const state = activity.state.split(' ')[1]
  const start = {
    ago: useTimeAgo(activity.timestamps.start).value,
-    formated: `${useDateFormat(activity.timestamps.start, 'DD MMM YYYY').value} at ${useDateFormat(activity.timestamps.start, 'HH:mm:ss').value}`
+    formated: `${useDateFormat(
+      activity.timestamps.start,
+      'DD MMM YYYY',
+      { locales: currentLocale.value!.code ?? 'en' }
+    ).value} ${t('separator')}
+    ${useDateFormat(activity.timestamps.start, 'HH:mm:ss', { locales: currentLocale.value!.code ?? 'en' }).value}`
  }

  return {
@@ -25,6 +33,10 @@ const getActivity = computed<CodingActivity | undefined>(() => {
    start
  }
 })
+
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>

 <template>
@@ -33,7 +45,7 @@ const getActivity = computed<CodingActivity | undefined>(() => {
      v-if="getActivity"
      class="flex items-start gap-2"
    >
-      <UTooltip :text="getActivity.active ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
+      <UTooltip :text="getActivity.active ? t('tooltip.online') : t('tooltip.idling')">
        <div class="relative flex h-3 w-3 mt-2">
          <div
            v-if="getActivity.active"
@@ -45,45 +57,84 @@ const getActivity = computed<CodingActivity | undefined>(() => {
          />
        </div>
      </UTooltip>
-      <span
+      <i18n-t
        v-if="getActivity.active"
+        keypath="working"
+        tag="div"
        class="space-x-1"
      >
-        <span>I'm actually working on <strong>{{ getActivity.project }}</strong>, {{ getActivity.state }}, using</span>
-        <UIcon
-          :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
-          size="16"
-        />
-        <span>
-          <strong>{{ getActivity.name }}</strong>.
-          I've started <strong>{{ getActivity.start.ago }}</strong>, the
-          <strong>{{ getActivity.start.formated }}</strong>.
-        </span>
-      </span>
-      <div
+        <template #project>
+          <strong>{{ getActivity.project }}</strong>
+        </template>
+        <template #state>
+          {{ getActivity.state }}
+        </template>
+        <template #editor>
+          <UIcon
+            :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+            size="16"
+          />
+          <strong>{{ getActivity.name }}</strong>
+        </template>
+        <template #start>
+          <strong>{{ getActivity.start.ago }}</strong>
+        </template>
+        <template #format>
+          <strong>{{ getActivity.start.formated }}</strong>
+        </template>
+      </i18n-t>
+      <i18n-t
        v-else
+        keypath="idling"
+        tag="div"
        class="space-x-1"
      >
-        <span>I'm Idling on my computer with</span>
-        <UIcon
-          :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
-          size="16"
-        />
-        <span>
-          <strong>{{ getActivity.name }}</strong> running in background.
-        </span>
-      </div>
+        <template #editor>
+          <UIcon
+            :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
+            size="16"
+          />
+          <strong>{{ getActivity.name }}</strong>
+        </template>
+      </i18n-t>
    </div>
    <div
      v-else
      class="my-5 flex md:items-start gap-2"
    >
-      <UTooltip text="I'm offline 🫥">
+      <UTooltip :text="t('tooltip.offline')">
        <span class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
      </UTooltip>
      <p class="not-prose">
-        I'm currently offline. Come back later to see what I'm working on.
+        {{ t('offline') }}
      </p>
    </div>
  </ClientOnly>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "offline": "I'm currently offline. Come back later to see what I'm working on.",
+    "working": "I'm actually working on {project}, editing {state}, using {editor}. I've started {start}, the {format}.",
+    "idling": "I'm idling on my computer with {editor} running in background.",
+    "tooltip": {
+      "online": "I'm online 👋",
+      "offline": "I'm offline 🫥",
+      "idling": "I'm sleeping 😴"
+    },
+    "separator": "at"
+  },
+  "fr": {
+    "offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille.",
+    "working": "Je travaille actuellement sur {project}, éditant {state}, en utilisant {editor}. J'ai commencé il y a {start}, le {format}.",
+    "idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
+    "tooltip": {
+      "online": "Je suis connecté 👋",
+      "offline": "Je suis déconnecté 🫥",
+      "idling": "Je dors 😴"
+    },
+    "separator": "à"
+  }
+}
+</i18n>
--- a/app/components/content/CatchPhrase.vue
+++ b/app/components/content/CatchPhrase.vue
@@ -8,11 +8,25 @@
        class="transform -rotate-12 duration-300 group-hover:animate-wave"
        name="i-ph-hand-pointing-duotone"
      />
-      <p>Hover the bold texts to find out more about me.</p>
+      <p>{{ t('quote') }}</p>
    </div>
  </ClientOnly>
 </template>

 <script lang="ts" setup>
 const { width } = useWindowSize()
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>
+
+<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."
+  }
+}
+</i18n>
--- a/app/components/content/HoverText.vue
+++ b/app/components/content/HoverText.vue
@@ -17,10 +17,12 @@ defineProps({
 </script>

 <template>
-  <UTooltip
-    :popper="{ placement: position }"
-    :text="hover"
-  >
-    <strong class="leading-3 cursor-help">{{ text }}</strong>
-  </UTooltip>
+  <ClientOnly>
+    <UTooltip
+      :popper="{ placement: position }"
+      :text="hover"
+    >
+      <strong class="leading-3 cursor-help">{{ text }}</strong>
+    </UTooltip>
+  </ClientOnly>
 </template>
--- a/app/components/content/ProseIcon.vue
+++ b/app/components/content/ProseIcon.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>

 <template>
-  <span class="inline">
+  <span class="inline-flex items-center">
    <UIcon
      class="mb-1 mr-1"
      :name="icon"
--- a/app/components/content/Quote.vue
+++ b/app/components/content/Quote.vue
@@ -5,15 +5,31 @@
        <div class="flex items-center w-12 h-12">
          <NuxtImg
            alt="Arthur Danjou picture"
-            class="w-full h-full"
+            class="w-full h-full hover:rotate-[360deg] duration-500 transform-gpu"
            src="/favicon.png"
          />
        </div>
      </UTooltip>
    </div>
    <p class="not-prose">
-      Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions,
-      appreciations, questions or anything!
+      {{ t('quote') }}
    </p>
  </div>
 </template>
+
+<script lang="ts" setup>
+const { t } = useI18n({
+  useScope: 'local'
+})
+</script>
+
+<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 !"
+  }
+}
+</i18n>
--- a/app/components/content/Stats.vue
+++ b/app/components/content/Stats.vue
@@ -2,30 +2,65 @@
 import type { Stats } from '~~/types'

 const { data: stats } = await useFetch<Stats>('/api/stats')
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>

 <template>
  <ClientOnly>
-    <p v-if="stats">
-      I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-      <HoverText
-        :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
-        hover="That was so long ago 🫣"
-      />
-      .
-      I've coded for a total of
-      <HoverText
-        :text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
-        hover="That's a lot 😮"
-      />
-      hours.
-      My best editors are
-      {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
-      <template v-if="stats.os.data[0]">
-        My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
+    <i18n-t
+      v-if="stats"
+      keypath="stats"
+      tag="p"
+    >
+      <template #time>
+        {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}
      </template>
-      My top languages are
-      {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
-    </p>
+      <template #date>
+        <HoverText
+          :hover="t('tooltip.date')"
+          :text="useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value"
+        />
+      </template>
+      <template #hours>
+        <HoverText
+          :hover="t('tooltip.hours')"
+          :text="usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0).value"
+        />
+      </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>
  </ClientOnly>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "stats": "I collect some data for {time}, 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}, 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 😮"
+    }
+  }
+}
+</i18n>