Ajout de la gestion de l'état de fermeture pour les alertes de traduction et encapsulation des dates dans des composants ClientOnly

app/components/post/Alert.vue

@@ -2,16 +2,22 @@
 const { t, locale } = useI18n({
   useScope: 'local',
 })
+
+const closed = ref(false)
 </script>
 
 <template>
   <UAlert
-    v-if="locale !== 'en'"
+    v-if="locale !== 'en' && !closed"
     :description="t('alert.description')"
     :title="t('alert.title')"
     color="red"
     icon="i-ph-warning-duotone"
-    variant="outline"
+    variant="soft"
+    :close="{
+      color: 'red',
+    }"
+    @update:open="closed = true"
   />
 </template>
 

app/pages/projects/index.vue

@@ -66,7 +66,9 @@ const { data: projects } = await useAsyncData('all-projects', () => {
             <div
               class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
             >
-              <p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
+              <ClientOnly>
+                <p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
+              </ClientOnly>
               <span class="w-2" />
               <div class="flex gap-2 flex-wrap">
                 <ClientOnly>

app/pages/writings/index.vue

@@ -61,7 +61,9 @@ const groupedWritings = computed(() => {
                 <div
                   class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
                 >
-                  <p>{{ useDateFormat(writing.publishedAt, 'DD MMM').value }} </p>
+                  <ClientOnly>
+                    <p>{{ useDateFormat(writing.publishedAt, 'DD MMM').value }} </p>
+                  </ClientOnly>
                   <span>·</span>
                   <p>{{ writing.readingTime }}min</p>
                   <span class="w-2" />