chore: add wrangler dependency to package.json

app/components/chat/CommandPalette.vue

@@ -15,7 +15,7 @@ const searchTerm = ref('')
 const openMessageModal = ref(false)
 const openClearModal = ref(false)
 
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 const { messages, submitMessage } = useChat()
 const { clearMessages, messages: storeMessages } = useChatStore()
 
@@ -72,7 +72,7 @@ const toolTipContent = {
   align: 'center',
   side: 'top',
   sideOffset: 0,
-}
+} as any
 
 const router = useRouter()
 function goHome() {
@@ -134,7 +134,7 @@ function isRoute(name: string): boolean {
                   <div class="absolute inset-0 -m-1" />
                   <div class="flex items-center gap-2.5">
                     <UIcon :name="item.icon!" size="20" />
-                    <span>{{ t(item.label) }}</span>
+                    <span>{{ t(item.label || '') }}</span>
                   </div>
                   <div class="text-dimmed text-xs font-medium text-start">
                     {{ t(item.prompt) }}

app/components/chat/Loading.vue

@@ -5,7 +5,7 @@ import { ChatState } from '~~/types'
 const props = defineProps<{ messageId: number, fetchStates: ChatFetchState[] }>()
 const currentState = ref<ChatFetchState | undefined>(props.fetchStates[0] ?? undefined)
 const { setLoadingState } = useChatStore()
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 onMounted(() => {
   let index = 0

app/components/chat/Main.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/chat/MessageContainer.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 
 const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
 
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: locale.value ?? 'en' }).value)
 </script>
 

app/components/chat/MessageFromArthur.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
   message: ChatMessage
 }>()
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: locale.value ?? 'en' }).value)
 
 const componentMap: Record<ChatType, Component | undefined> = {
@@ -66,9 +66,19 @@ const dynamicComponent = computed(() => componentMap[props.message.type])
       </UCard>
       <UCard
         v-else
+        v-motion
         variant="soft"
         class="mt-1 w-full max-w-none bg-transparent"
         :ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
+        :initial="{
+          opacity: 0,
+          y: 20,
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: { ease: 'easeInOut', duration: 300, delay: 500 },
+        }"
       >
         <component
           :is="dynamicComponent"

app/components/post/Alert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/post/Footer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/tool/Activity.vue

@@ -3,7 +3,7 @@ import type { UseTimeAgoMessages } from '@vueuse/core'
 import type { Activity } from '~~/types'
 import { activityMessages, IDEs } from '~~/types'
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch<Activity>('/api/activity'))
 
 useIntervalFn(async () => await refresh(), 5000)

app/components/tool/Contact.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { socials } from '~~/types'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/tool/Credits.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 const year = ref(useNow().value.getFullYear())
 </script>

app/components/tool/Duplicated.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/tool/Experiences.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const { data: experiences } = await useAsyncData('experiences', async () => await queryCollection('experiences').all())
 
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 const formatDate = (date: string) => useDateFormat(new Date(date), 'MMM YYYY', { locales: locale.value ?? 'en' }).value
 function getLanguageForText(text: { en: string, es: string, fr: string }) {
   return locale.value === 'en' ? text.en : locale.value === 'es' ? text.es : text.fr

app/components/tool/Hobbies.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/tool/Language.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { en, es, fr } from '@nuxt/ui/locale'
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 const { changeLocale } = useLanguage()
 </script>
 

app/components/tool/Projects.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 
 const { data: projects } = await useAsyncData('projects-index', async () => await queryCollection('projects').where('favorite', '=', true).select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').all())
 const date = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })

app/components/tool/Resume.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 interface ResumeFile {
   name: string

app/components/tool/Skills.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const { data: skills } = await useAsyncData('skills', async () => await queryCollection('skills').first())
 
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/tool/Stats.vue

@@ -3,7 +3,7 @@ import type { Stats } from '~~/types'
 
 const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 
 const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
 const date = useDateFormat(new Date(stats.value!.coding.data.range.start ?? new Date()), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })

app/components/tool/Theme.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 const { dark, toggleDark } = useTheme()
 </script>
 

app/components/tool/Uses.vue

@@ -6,7 +6,7 @@ const props = defineProps({
   },
 })
 
-const { locale } = useI18n()
+const { locale } = useI18n({ useScope: 'global' })
 
 const { data: items } = await useAsyncData(`uses-${props.category}`, async () => await queryCollection('uses').where('category', '=', props.category).all())
 const { data: categoryData } = await useAsyncData(`category-${props.category}`, async () => await queryCollection('usesCategories').where('slug', '=', props.category).first())

app/components/tool/Weather.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Weather } from '~~/types'
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 const { data: weather } = await useAsyncData<Weather>('weather', () =>
   $fetch('/api/weather'))
 </script>

app/components/tool/Writings.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 
 const { data: writings } = await useAsyncData('writings-index', async () => await queryCollection('writings').order('publishedAt', 'DESC').select('title', 'description', 'id', 'publishedAt', 'tags', 'slug').limit(2).all())
 const formatDate = (date: string) => useDateFormat(new Date(date), 'DD MMMM YYYY', { locales: locale.value ?? 'en' })

app/composables/language.ts

@@ -1,5 +1,5 @@
 export function useLanguage() {
-  const { setLocale } = useI18n()
+  const { setLocale } = useI18n({ useScope: 'global' })
 
   async function changeLocale(newLocale: string) {
     await setLocale(newLocale as 'en' | 'fr' | 'es')

app/error.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/pages/index.vue

@@ -10,7 +10,7 @@ const { messages } = useChatStore()
 const parents = useTemplateRef('parents')
 const { height } = useElementBounding(parents)
 
-const { locale } = useI18n()
+const { locale } = useI18n({ useScope: 'global' })
 const lastLang = ref(locale.value)
 watch(
   height,

app/pages/projects/[slug].vue

@@ -18,7 +18,7 @@ useSeoMeta({
   author: 'Arthur Danjou',
 })
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 useSeoMeta(project.value.seo || {})
 </script>

app/pages/projects/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 useSeoMeta({
   title: 'My Projects',
   description: t('projects.description'),

app/pages/writings/[slug].vue

@@ -12,7 +12,7 @@ if (!writing.value) {
   })
 }
 
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 useSeoMeta(writing.value.seo || {})
 </script>

app/pages/writings/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 useSeoMeta({
   title: 'My Shelf - Arthur DANJOU',
   description: t('writings.description'),