Translate all portfolio

app/components/AppFooter.vue

@@ -20,6 +20,10 @@ const socials = [
     link: 'https://discordapp.com/users/179635349100691456'
   }
 ]
+
+const { t } = useI18n({
+  useScope: 'local'
+})
 </script>
 
 <template>
@@ -33,7 +37,7 @@ const socials = [
     </div>
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h1>Find me on:</h1>
+        <h1>{{ t('find') }}</h1>
         <div class="flex gap-2 flex-wrap">
           <HomeLink
             v-for="social in socials.sort((a, b) => a.label.localeCompare(b.label))"
@@ -46,7 +50,7 @@ const socials = [
         </div>
       </div>
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h1>Or send me an email:</h1>
+        <h1>{{ t('email') }}</h1>
         <div class="flex">
           <HomeLink
             blanked
@@ -57,7 +61,26 @@ const socials = [
       </div>
     </div>
     <div class="mt-8 w-full flex justify-center text-xs">
-      © {{ new Date().getFullYear() }} Arthur Danjou. All rights reserved.
+      {{
+        t('copyright', {
+          date: new Date().getFullYear()
+        })
+      }}
     </div>
   </footer>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "find": "Find me on:",
+    "email": "Or send me an email:",
+    "copyright": "© {date} Arthur Danjou. All rights reserved."
+  },
+  "fr": {
+    "find": "Retrouvez-moi sur :",
+    "email": "Ou envoyez-moi un email :",
+    "copyright": "© {date} Arthur Danjou. Tous droits réservés."
+  }
+}
+</i18n>

app/components/AppHeader.vue

@@ -8,67 +8,109 @@ watch(isDark, () => {
 const config = useRuntimeConfig()
 const navs = [
   {
-    label: 'home',
+    label: {
+      en: 'home',
+      fr: 'accueil'
+    },
     to: '/',
     icon: 'i-ph-house-line-duotone',
-    shortcut: 'h'
+    shortcut: {
+      en: 'h',
+      fr: 'a'
+    }
   },
   {
-    label: 'uses',
+    label: {
+      en: 'uses',
+      fr: 'usages'
+    },
     to: '/uses',
     icon: 'i-ph-backpack-duotone',
-    shortcut: 'u'
+    shortcut: {
+      en: 'u',
+      fr: 'u'
+    }
   },
   {
-    label: 'writings',
+    label: {
+      en: 'writings',
+      fr: 'écrits'
+    },
     to: '/writings',
     icon: 'i-ph-books-duotone',
-    shortcut: 'w'
+    shortcut: {
+      en: 'w',
+      fr: 'e'
+    }
   },
   {
-    label: 'resume',
+    label: {
+      en: 'resume',
+      fr: 'cv'
+    },
     to: config.public.cloud.resume,
     target: '_blank',
     icon: 'i-ph-address-book-duotone',
-    shortcut: 'r'
+    shortcut: {
+      en: 'r',
+      fr: 'c'
+    }
   }
 ]
 
 async function toggleTheme() {
-  document.body.style.animation = 'theme-switch-on .5s'
+  document.body.style.animation = 'switch-on .5s'
   await new Promise(resolve => setTimeout(resolve, 500))
 
   isDark.value = !isDark.value
-  document.body.style.animation = 'theme-switch-off .5s'
+  document.body.style.animation = 'switch-off .5s'
 
   await new Promise(resolve => setTimeout(resolve, 500))
   document.body.style.animation = ''
 }
 
+async function changeLocale() {
+  document.body.style.animation = 'switch-on .2s'
+  await new Promise(resolve => setTimeout(resolve, 200))
+
+  await setLocale(locale.value === 'en' ? 'fr' : 'en')
+  document.body.style.animation = 'switch-off .2s'
+
+  await new Promise(resolve => setTimeout(resolve, 200))
+  document.body.style.animation = ''
+}
+
 const router = useRouter()
+const { locale, setLocale, locales, t } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
 defineShortcuts({
   h: () => router.push('/'),
+  a: () => router.push('/'),
   u: () => router.push('/uses'),
   w: () => router.push('/writings'),
+  e: () => router.push('/writings'),
   r: () => window.open(config.public.cloud.resume, '_blank'),
-  t: () => toggleTheme()
+  c: () => window.open(config.public.cloud.resume, '_blank'),
+  t: () => toggleTheme(),
+  l: () => changeLocale(),
+  backspace: () => router.back()
 })
 </script>
 
 <template>
   <header class="flex items-center justify-between my-8">
-    <NuxtLink
+    <NuxtLinkLocale
       class="handwriting text-lg sm:text-3xl flex gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
       to="/"
     >
       Arthur Danjou
-    </NuxtLink>
+    </NuxtLinkLocale>
     <nav class="flex gap-2 items-center">
       <UTooltip
         v-for="nav in navs"
-        :key="nav.label"
-        :text="nav.label"
-        :shortcuts="[nav.shortcut]"
+        :key="nav.label.en"
+        :shortcuts="[nav.shortcut[locale]]"
+        :text="nav.label[locale]"
       >
         <UButton
           :icon="nav.icon"
@@ -77,14 +119,13 @@ defineShortcuts({
           :aria-label="nav.label"
           color="white"
           size="sm"
-          label=""
           variant="solid"
         />
       </UTooltip>
       <ClientOnly>
         <UTooltip
           :shortcuts="['t']"
-          text="switch theme"
+          :text="t('theme')"
         >
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
@@ -95,6 +136,19 @@ defineShortcuts({
             @click="toggleTheme()"
           />
         </UTooltip>
+        <UTooltip
+          :shortcuts="['l']"
+          :text="t('language')"
+        >
+          <UButton
+            :icon="currentLocale!.icon"
+            aria-label="switch language"
+            color="white"
+            size="sm"
+            variant="solid"
+            @click.prevent="changeLocale()"
+          />
+        </UTooltip>
       </ClientOnly>
     </nav>
   </header>
@@ -105,7 +159,7 @@ defineShortcuts({
   font-family: 'Dancing Script', cursive;
 }
 
-@keyframes theme-switch-on {
+@keyframes switch-on {
   0% {
     filter: blur(0);
     transform: scale(1);
@@ -116,7 +170,7 @@ defineShortcuts({
   }
 }
 
-@keyframes theme-switch-off {
+@keyframes switch-off {
   0% {
     transform: scale(0.98);
     filter: blur(3px);
@@ -127,3 +181,16 @@ defineShortcuts({
   }
 }
 </style>
+
+<i18n lang="json">
+{
+  "en": {
+    "theme": "switch theme",
+    "language": "change language"
+  },
+  "fr": {
+    "theme": "changer de thème",
+    "language": "changer de langue"
+  }
+}
+</i18n>

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>

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>

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>

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"

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>

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>

app/components/uses/Item.vue

@@ -8,6 +8,8 @@ defineProps({
     required: true
   }
 })
+
+const { locale } = useI18n()
 </script>
 
 <template>
@@ -16,7 +18,7 @@ defineProps({
       {{ item.name }}
     </p>
     <p class="text-sm">
-      {{ item.description }}
+      {{ locale === 'en' ? item.description.en : item.description.fr }}
     </p>
   </li>
 </template>

app/pages/index.vue

@@ -1,10 +1,12 @@
 <template>
   <main class="!max-w-none prose dark:prose-invert">
-    <ContentDoc path="/" />
+    <ContentDoc :path="`/home/${locale}`" />
   </main>
 </template>
 
 <script lang="ts" setup>
+const { locale } = useI18n()
+
 useSeoMeta({
   title: 'Arthur Danjou • Mathematics Lover and IA Enthusiast',
   titleTemplate: '%s',

app/pages/uses.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-const description = 'Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.'
-useSeoMeta({
-  title: 'Things I use',
-  description
+const { t } = useI18n({
+  useScope: 'local'
 })
 
-const { data: items } = await useAsyncData('uses', () =>
-  queryContent('/uses').find()
+useSeoMeta({
+  title: 'Things I use',
+  description: t('description')
+})
+
+const { data: items } = await useAsyncData('uses', () => queryContent('/uses').find()
 )
+
 const hardware = items.value!.filter(item => item.category === 'hardware')
 const software = items.value!.filter(item => item.category === 'software')
 const ide = items.value!.filter(item => item.category === 'ide')
@@ -17,18 +20,18 @@ const stack = items.value!.filter(item => item.category === 'stack')
 <template>
   <main>
     <AppTitle
-      :description="description"
-      title="Uses"
+      :description="t('description')"
+      :title="t('title')"
     />
     <div class="mt-12 space-y-24">
-      <UsesList title="Hardware">
+      <UsesList :title="t('hardware')">
         <UsesItem
           v-for="(item, id) in hardware"
           :key="id"
           :item="item"
         />
       </UsesList>
-      <UsesList title="Software">
+      <UsesList :title="t('software')">
         <UsesItem
           v-for="(item, id) in software"
           :key="id"
@@ -37,7 +40,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
       </UsesList>
       <ul class="space-y-8">
         <UDivider
-          label="IDE & Font"
+          :label="t('ide')"
           size="xs"
         />
         <li class="relative">
@@ -47,7 +50,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
             class="mx-auto md:w-4/5"
           />
           <p class="mt-2 text-sm italic flex gap-2 justify-center items-center">
-            My IntelliJ Idea Ultimate IDE
+            {{ t('intellij') }}
           </p>
         </li>
         <UsesItem
@@ -56,7 +59,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
           :item="item"
         />
       </ul>
-      <UsesList title="Stack">
+      <UsesList :title="t('stack')">
         <UsesItem
           v-for="(item, id) in stack"
           :key="id"
@@ -66,3 +69,26 @@ const stack = items.value!.filter(item => item.category === 'stack')
     </div>
   </main>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "Uses",
+    "description": "Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.",
+    "hardware": "Hardware",
+    "software": "Software",
+    "ide": "IDE & Font",
+    "stack": "Stack",
+    "intellij": "My IntelliJ Idea Ultimate IDE"
+  },
+  "fr": {
+    "title": "Mes usages",
+    "description": "Logiciels que j'utilise, gadgets que j'adore et autres choses que je recommande. Voici une grande liste de toutes mes choses préférées.",
+    "hardware": "Matériel",
+    "software": "Logiciel",
+    "ide": "IDE & Police",
+    "stack": "Stack",
+    "intellij": "Mon IDE IntelliJ Idea Ultimate"
+  }
+}
+</i18n>

app/pages/writings/[slug].vue

@@ -6,6 +6,13 @@ const {
   refresh
 } = await useAsyncData(`writing:${route.params.slug}:db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
 
+const { locale, locales } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+
+const { t } = useI18n({
+  useScope: 'local'
+})
+
 function top() {
   window.scrollTo({
     top: 0,
@@ -15,7 +22,7 @@ function top() {
 }
 
 const { copy, copied } = useClipboard({
-  source: `https://arthurdanjou.fr/writing/${route.params.slug}`,
+  source: `https://arthurdanjou.fr/writings/${route.params.slug}`,
   copiedDuring: 4000
 })
 
@@ -29,8 +36,8 @@ function getDetails() {
   const likes = postDB.value?.likes ?? 0
   const views = postDB.value?.views ?? 0
 
-  const like = likes > 1 ? 'likes' : 'like'
-  const view = views > 1 ? 'views' : 'view'
+  const like = likes > 1 ? t('likes.many') : t('likes.one')
+  const view = views > 1 ? t('views.many') : t('views.one')
 
   return `${likes} ${like} · ${views} ${view}`
 }
@@ -50,7 +57,7 @@ async function handleLike() {
 <template>
   <main v-if="post && postDB">
     <div class="flex">
-      <NuxtLink
+      <NuxtLinkLocale
         class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
         to="/writings"
       >
@@ -59,9 +66,18 @@ async function handleLike() {
           name="i-ph-arrow-left-duotone"
           size="20"
         />
-        Go back
-      </NuxtLink>
+        {{ t('back') }}
+      </NuxtLinkLocale>
     </div>
+    <UAlert
+      v-if="locale !== 'en'"
+      :description="t('alert.description')"
+      :title="t('alert.title')"
+      class="mb-8"
+      color="red"
+      icon="i-ph-warning-duotone"
+      variant="outline"
+    />
     <p class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
       {{ getDetails() }}
     </p>
@@ -73,7 +89,8 @@ async function handleLike() {
           {{ post.title }}
         </h1>
         <p class="text-sm text-neutral-500">
-          {{ useDateFormat(post.publishedAt, 'DD MMMM YYYY').value }} · {{ post.readingTime }}min long
+          {{ useDateFormat(post.publishedAt, 'DD MMMM YYYY', { locales: currentLocale!.code ?? 'en' }).value }} ·
+          {{ post.readingTime }}min long
         </p>
       </div>
       <p class="mt-4 text-base">
@@ -105,10 +122,14 @@ async function handleLike() {
         icon="i-ph-hands-clapping-duotone"
       />
       <div class="space-y-8">
-        <p>
-          Thanks for reading this post! If you liked it, please consider sharing it with your friends.
-          <strong>Don't forget to leave a like!</strong>
-        </p>
+        <i18n-t
+          keypath="thanks"
+          tag="p"
+        >
+          <template #like>
+            <strong>{{ t('like') }}</strong>
+          </template>
+        </i18n-t>
         <div class="flex gap-4 items-center flex-wrap">
           <UButton
             :label="postDB?.likes > 1 ? `${postDB?.likes} likes` : `${postDB?.likes} like`"
@@ -121,7 +142,7 @@ async function handleLike() {
           <UButton
             color="white"
             icon="i-ph-arrow-fat-lines-up-duotone"
-            label="Go to top"
+            :label="t('top')"
             size="lg"
             variant="solid"
             @click.prevent="top()"
@@ -130,7 +151,7 @@ async function handleLike() {
             v-if="copied"
             color="green"
             icon="i-ph-check-square-duotone"
-            label="Link copied"
+            :label="t('link.copied')"
             size="lg"
             variant="outline"
             @click.prevent="copy()"
@@ -139,7 +160,7 @@ async function handleLike() {
             v-else
             color="white"
             icon="i-ph-square-duotone"
-            label="Copy link"
+            :label="t('link.copy')"
             size="lg"
             variant="solid"
             @click.prevent="copy()"
@@ -157,3 +178,52 @@ async function handleLike() {
   @apply no-underline;
 }
 </style>
+
+<i18n lang="json">
+{
+  "en": {
+    "likes": {
+      "one": "like",
+      "many": "likes"
+    },
+    "views": {
+      "one": "view",
+      "many": "views"
+    },
+    "alert": {
+      "title": "Translations alert!",
+      "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
+    },
+    "thanks": "Thanks for reading this post! If you liked it, please consider sharing it with your friends. {like}",
+    "like": "Don't forget to leave a like!",
+    "link": {
+      "copied": "Link copied",
+      "copy": "Copy link"
+    },
+    "top": "Go to top",
+    "back": "Go back"
+  },
+  "fr": {
+    "likes": {
+      "one": "like",
+      "many": "likes"
+    },
+    "views": {
+      "one": "vue",
+      "many": "vues"
+    },
+    "alert": {
+      "title": "Attentions aux traductions!",
+      "description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
+    },
+    "thanks": "Merci d'avoir lu cet article! Si vous l'avez aimé, n'hésitez pas à le partager avec vos amis. {like}",
+    "like": "N'oubliez pas de laisser un like!",
+    "link": {
+      "copied": "Lien copié",
+      "copy": "Copier le lien"
+    },
+    "top": "Remonter en haut",
+    "back": "Retourner en arrière"
+  }
+}
+</i18n>

app/pages/writings/index.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-const description = 'All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts.'
+const { t, locale } = useI18n({
+  useScope: 'local'
+})
 useSeoMeta({
   title: 'My Shelf',
-  description
+  description: t('description')
 })
 
 const { data: writings } = await useAsyncData('all-writings', () =>
@@ -17,8 +19,8 @@ function getDetails(slug: string) {
   const writing = writingsDB.value!.find(writing => writing.slug === slug)
   if (!writing) return ''
 
-  const like = writing.likes! > 1 ? 'likes' : 'like'
-  const view = writing.views! > 1 ? 'views' : 'view'
+  const like = writing.likes! > 1 ? t('likes.many') : t('likes.one')
+  const view = writing.views! > 1 ? t('views.many') : t('views.one')
 
   return `${writing.likes} ${like} · ${writing.views} ${view}`
 }
@@ -27,8 +29,17 @@ function getDetails(slug: string) {
 <template>
   <main>
     <AppTitle
-      :description="description"
-      title="Writing on my life, development and my passions."
+      :description="t('description')"
+      :title="t('title')"
+    />
+    <UAlert
+      v-if="locale !== 'en'"
+      :description="t('alert.description')"
+      :title="t('alert.title')"
+      class="mt-12"
+      color="red"
+      icon="i-ph-warning-duotone"
+      variant="outline"
     />
     <ul class="mt-12 space-y-24">
       <li
@@ -64,3 +75,40 @@ function getDetails(slug: string) {
     </ul>
   </main>
 </template>
+
+<i18n lang="json">
+{
+  "en": {
+    "title": "Writing on my life, development and my passions.",
+    "description": "All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts.",
+    "likes": {
+      "one": "like",
+      "many": "likes"
+    },
+    "views": {
+      "one": "view",
+      "many": "views"
+    },
+    "alert": {
+      "title": "Translations alert!",
+      "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
+    }
+  },
+  "fr": {
+    "title": "Écrits sur ma vie, le développement et mes passions.",
+    "description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique. J'écris aussi sur mes projets, mes découvertes et mes pensées.",
+    "likes": {
+      "one": "like",
+      "many": "likes"
+    },
+    "views": {
+      "one": "vue",
+      "many": "vues"
+    },
+    "alert": {
+      "title": "Attentions aux traductions!",
+      "description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
+    }
+  }
+}
+</i18n>