feat: simplifier le footer et l'en-tête, supprimer le sélecteur de langue et mettre à jour le commutateur de thème

app/components/AppFooter.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import { socials } from '~~/types'
-
-const { t } = useI18n({
-  useScope: 'local'
-})
 </script>
 
 <template>
@@ -17,7 +13,7 @@ const { t } = useI18n({
     </div>
     <div class="space-y-4">
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h1>{{ t('find') }}</h1>
+        <h1>Find me on:</h1>
         <div class="flex gap-2 flex-wrap">
           <HomeLink
             v-for="social in [...socials].sort((a, b) => a.label.localeCompare(b.label))"
@@ -30,7 +26,7 @@ const { t } = useI18n({
         </div>
       </div>
       <div class="flex flex-col md:flex-row gap-2 md:items-center">
-        <h1>{{ t('email') }}</h1>
+        <h1>Or send me an email:</h1>
         <div class="flex">
           <HomeLink
             blanked
@@ -41,31 +37,7 @@ const { t } = useI18n({
       </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."
-  },
-  "es": {
-    "find": "Encuéntrame en :",
-    "email": "O envíame un mail",
-    "copyright": "2024 Arthur Danjour. Todos los derechos reservados."
-  }
-}
-</i18n>

app/components/AppHeader.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { navs, socials } from '~~/types'
 
-const { locale, t } = useI18n()
-
 const openContactDrawer = ref(false)
 const router = useRouter()
 defineShortcuts({
@@ -22,17 +20,17 @@ const socialsList = [
 
 <template>
   <header class="flex md:items-center justify-between my-8 gap-2">
-    <NuxtLinkLocale
+    <NuxtLink
       class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white"
       to="/"
     >
       Arthur Danjou
-    </NuxtLinkLocale>
+    </NuxtLink>
     <nav class="flex gap-2 items-center justify-end flex-wrap">
       <UTooltip
         v-for="nav in navs"
-        :key="nav.label.en"
+        :key="nav.label"
-        :text="nav.label[locale]"
+        :text="nav.label"
         :delay-duration="4"
       >
         <UButton
@@ -47,7 +45,7 @@ const socialsList = [
       </UTooltip>
       <UTooltip
         :delay-duration="4"
-        :text="t('status')"
+        text="Status Page"
       >
         <UButton
           icon="i-ph-warning-duotone"
@@ -73,7 +71,7 @@ const socialsList = [
       >
         <UTooltip
           :kbds="['C']"
-          :text="t('contact.button')"
+          text="Contact Me"
           :delay-duration="4"
           class="cursor-pointer"
         >
@@ -86,11 +84,6 @@ const socialsList = [
           />
         </UTooltip>
       </UDropdownMenu>
-      <USeparator
-        orientation="vertical"
-        class="h-6"
-      />
-      <LangSwitcher />
     </nav>
   </header>
 </template>
@@ -122,29 +115,3 @@ const socialsList = [
   }
 }
 </style>
-
-<i18n lang="json">
-{
-  "en": {
-    "status": "status page",
-    "contact": {
-      "button": "contact me",
-      "title": "Contact me"
-    }
-  },
-  "fr": {
-    "status": "page de statut",
-    "contact": {
-      "button": "me contacter",
-      "title": "Me contacter"
-    }
-  },
-  "es": {
-    "status": "página de estado",
-    "contact": {
-      "button": "contactame",
-      "title": "Contactame"
-    }
-  }
-}
-</i18n>

app/components/LangSwitcher.vue

@@ -1,66 +0,0 @@
-<script lang="ts" setup>
-const openSelectMenu = ref(false)
-
-const { locale, setLocale, locales, t } = useI18n()
-const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
-const lang = ref(locale.value)
-watch(lang, () => changeLocale(lang.value))
-
-async function changeLocale(newLocale: string) {
-  document.body.style.animation = 'switch-on .2s'
-  await new Promise(resolve => setTimeout(resolve, 200))
-
-  await setLocale(newLocale as 'en' | 'fr' | 'es')
-  document.body.style.animation = 'switch-off .5s'
-
-  await new Promise(resolve => setTimeout(resolve, 200))
-  document.body.style.animation = ''
-}
-
-defineShortcuts({
-  l: () => lang.value = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'
-})
-</script>
-
-<template>
-  <ClientOnly>
-    <ThemeSwitcher />
-    <UTooltip
-      :kbds="['L']"
-      :text="t('language')"
-      class="cursor-pointer"
-      :delay-duration="4"
-      :content="{
-        align: 'center',
-        side: 'right',
-        sideOffset: 8
-      }"
-    >
-      <USelect
-        v-model="lang"
-        v-model:open="openSelectMenu"
-        :items="locales"
-        size="sm"
-        :leading-icon="(currentLocale!.icon as string)"
-        label-key="label"
-        value-key="code"
-        variant="soft"
-        @update:model-value="changeLocale"
-      />
-    </UTooltip>
-  </ClientOnly>
-</template>
-
-<i18n lang="json">
-{
-  "en": {
-    "language": "change language"
-  },
-  "fr": {
-    "language": "changer de langue"
-  },
-  "es": {
-    "language": "cambiar idioma"
-  }
-}
-</i18n>

app/components/ThemeSwitcher.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const { t } = useI18n()
 const colorMode = useColorMode()
 const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))
 
@@ -58,7 +57,7 @@ defineShortcuts({
 <template>
   <UTooltip
     :kbds="['T']"
-    :text="t('theme')"
+    text="switch theme"
     class="cursor-pointer"
     :delay-duration="4"
   >
@@ -73,20 +72,6 @@ defineShortcuts({
   </UTooltip>
 </template>
 
-<i18n lang="json">
-{
-  "en": {
-    "theme": "switch theme"
-  },
-  "fr": {
-    "theme": "changer de thème"
-  },
-  "es": {
-    "theme": "cambiar tema"
-  }
-}
-</i18n>
-
 <style>
 ::view-transition-old(root),
 ::view-transition-new(root) {