Translate all portfolio

2026-01-26 13:54:16 +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/pages/index.vue
+++ b/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',
--- a/app/pages/uses.vue
+++ b/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>
--- a/app/pages/writings/[slug].vue
+++ b/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>
--- a/app/pages/writings/index.vue
+++ b/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>