Ajout de composants d'alerte pour les traductions et suppression des alertes en ligne dans les pages de projets et d'écritures

app/components/post/Alert.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const { t, locale } = useI18n({
+  useScope: 'local',
+})
+</script>
+
+<template>
+  <UAlert
+    v-if="locale !== 'en'"
+    :description="t('alert.description')"
+    :title="t('alert.title')"
+    color="red"
+    icon="i-ph-warning-duotone"
+    variant="outline"
+  />
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "alert": {
+      "title": "Translations alert!",
+      "description": "For time reasons, all article translations will only be available in English. Thank you for your understanding."
+    }
+  },
+  "fr": {
+    "alert": {
+      "title": "Attention aux traductions !",
+      "description": "Pour des raisons de temps, toutes les traductions d'articles ne seront disponibles qu'en anglais. Merci de votre compréhension."
+    }
+  },
+  "es": {
+    "alert": {
+      "title": "¡Atención a las traducciones!",
+      "description": "Por razones de tiempo, todas las traducciones de los artículos estarán disponibles solo en inglés. Gracias por su comprensión."
+    }
+  }
+}
+</i18n>

app/components/post/Footer.vue

@@ -5,46 +5,46 @@ const { t } = useI18n({
 </script>
 
 <template>
-    <div class="p-8 border border-gray-200 dark:border-neutral-700 rounded-md">
-        <NuxtImg
-            src="/arthur.webp"
-            alt="Arthur Danjou"
-            class="w-24 h-24 rounded-full float-left mr-4 mb-4"
-          />
-        <i18n-t
-            keypath="thanks"
-            tag="p"
-            class="text-neutral-600 dark:text-neutral-400 text-justify"
-        >
-            <template #linkedin>
-              <HomeLink
-                href="https://www.linkedin.com/in/arthurdanjou/"
-                icon="i-ph-linkedin-logo-duotone"
-                label="LinkedIn"
-                target="_blank"
-                class="inline-flex items-start gap-1 transform translate-y-1"
-              />
-            </template>
-            <template #github>
-              <HomeLink
-                href="https://github.com/arthurdanjou"
-                icon="i-ph-github-logo-duotone"
-                label="GitHub"
-                target="_blank"
-                class="inline-flex items-start gap-1 transform translate-y-1"
-              />
-            </template>
-            <template #comment>
-              <strong class="text-neutral-800 dark:text-neutral-200">{{ t('comment') }}</strong>
-            </template>
-            <template #name>
-              <strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
-            </template>
-            <template #jump>
-              <br> <br>
-            </template>
-        </i18n-t>
-    </div>
+  <div class="p-8 border border-gray-200 dark:border-neutral-700 rounded-md">
+    <NuxtImg
+      src="/arthur.webp"
+      alt="Arthur Danjou"
+      class="w-24 h-24 rounded-full float-left mr-4 mb-4"
+    />
+    <i18n-t
+      keypath="thanks"
+      tag="p"
+      class="text-neutral-600 dark:text-neutral-400 text-justify"
+    >
+      <template #linkedin>
+        <HomeLink
+          href="https://www.linkedin.com/in/arthurdanjou/"
+          icon="i-ph-linkedin-logo-duotone"
+          label="LinkedIn"
+          target="_blank"
+          class="inline-flex items-start gap-1 transform translate-y-1"
+        />
+      </template>
+      <template #github>
+        <HomeLink
+          href="https://github.com/arthurdanjou"
+          icon="i-ph-github-logo-duotone"
+          label="GitHub"
+          target="_blank"
+          class="inline-flex items-start gap-1 transform translate-y-1"
+        />
+      </template>
+      <template #comment>
+        <strong class="text-neutral-800 dark:text-neutral-200">{{ t('comment') }}</strong>
+      </template>
+      <template #name>
+        <strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
+      </template>
+      <template #jump>
+        <br> <br>
+      </template>
+    </i18n-t>
+  </div>
 </template>
 
 <i18n lang="json">
@@ -65,4 +65,4 @@ const { t } = useI18n({
         "name": "Arthur"
     }
 }
-</i18n>
+</i18n>

app/pages/projects/[slug].vue

@@ -3,7 +3,7 @@ const route = useRoute()
 const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
   queryCollection('projects').path(`/projects/${route.params.slug}`).first())
 
-const { t, locale } = useI18n({
+const { t } = useI18n({
   useScope: 'local',
 })
 
@@ -90,15 +90,7 @@ const { copy, copied } = useClipboard({
       class="my-4"
       icon="i-ph-pencil-line-duotone"
     />
-    <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"
-    />
+    <PostAlert />
     <ContentRenderer
       :value="project"
       class="!max-w-none prose dark:prose-invert"
@@ -160,10 +152,6 @@ html {
 <i18n lang="json">
 {
   "en": {
-    "alert": {
-      "title": "Translations alert!",
-      "description": "Due to time constraints, all article translations will be available only in English. Thank you for your understanding."
-    },
     "back": "Go back",
     "link": {
       "copied": "Link copied",
@@ -173,10 +161,6 @@ html {
 
   },
   "fr": {
-    "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."
-    },
     "back": "Retourner en arrière",
     "link": {
       "copied": "Lien copié",
@@ -185,10 +169,6 @@ html {
     "top": "Remonter en haut"
   },
   "es": {
-    "alert": {
-      "title": "Cuidado con las traducciones!",
-      "description": " Por problemas de tiempo, los artículos solo están disponibles en inglés. Gracias por vuestra comprensión.ug ñeóicula."
-    },
     "back": "Volver atrás",
         "link": {
       "copied": "Link copiado",

app/pages/projects/index.vue

@@ -23,6 +23,7 @@ const { data: projects } = await useAsyncData('all-projects', () => {
       :description="t('description')"
       :title="t('title')"
     />
+    <PostAlert />
     <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
       <NuxtLink
         v-for="(project, id) in projects"

app/pages/writings/[slug].vue

@@ -8,7 +8,7 @@ const {
   refresh,
 } = await useAsyncData(`writings/${route.params.slug}/db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
 
-const { t, locale } = useI18n({
+const { t } = useI18n({
   useScope: 'local',
 })
 
@@ -79,15 +79,7 @@ function scrollToSection(id: string) {
         {{ 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"
-    />
+    <PostAlert />
     <div class="border-l-2 pl-2 rounded-none border-gray-300 dark:border-neutral-700 flex gap-1 items-center">
       <UIcon name="i-ph-heart-duotone" size="16" />
       <p>{{ getDetails().likes }} </p>·
@@ -243,10 +235,6 @@ html {
       "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."
-    },
     "link": {
       "copied": "Link copied",
       "copy": "Copy link"
@@ -264,10 +252,6 @@ html {
       "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."
-    },
     "link": {
       "copied": "Lien copié",
       "copy": "Copier le lien"
@@ -285,10 +269,6 @@ html {
       "one": "view",
       "many": "views"
     },
-    "alert": {
-      "title": "Cuidado con las traducciones!",
-      "description": "Por problemas de tiempo, los artículos solo están disponibles en inglés. Gracias por vuestra comprensión.ug ñeóicula."
-    },
     "link": {
       "copied": "Link copiado",
       "copy": "Copiar link"

app/pages/writings/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TAGS } from '~~/types'
 
-const { t, locale } = useI18n({
+const { t } = useI18n({
   useScope: 'local',
 })
 useSeoMeta({
@@ -15,7 +15,6 @@ const { data: writings } = await useAsyncData('all-writings', () => {
     .all()
 })
 
-// Group writings by year
 const groupedWritings = computed(() => {
   const grouped: Record<string, any[]> = {}
   writings.value!.forEach((writing: any) => {
@@ -35,17 +34,10 @@ const groupedWritings = computed(() => {
       :description="t('description')"
       :title="t('title')"
     />
-    <UAlert
-      v-if="locale !== 'en'"
-      :description="t('alert.description')"
-      :title="t('alert.title')"
-      color="red"
-      icon="i-ph-warning-duotone"
-      variant="outline"
-    />
+    <PostAlert />
     <div class="space-y-8">
       <div v-for="year in groupedWritings" :key="year[0]" class="lg:space-y-6 relative">
-        <h2 class="text-4xl lg:absolute top-2 -left-16 font-bold opacity-10 select-none pointer-events-none lg:[writing-mode:vertical-rl] lg:[text-orientation:upright]">
+        <h2 class="text-4xl lg:absolute top-2 -left-16 font-bold opacity-10 select-none pointer-events-none lg:[writing-mode:vertical-rl] lg:[text-orientation:upright] pl-1 lg:pl-0">
           {{ year[0] }}
         </h2>
         <ul class="relative grid grid-cols-1 gap-2">
@@ -100,10 +92,6 @@ const groupedWritings = computed(() => {
   "en": {
     "title": "Writings on math, artificial intelligence, development, and my passions.",
     "description": "All my reflections on programming, mathematics, artificial intelligence design, etc., are organized chronologically.",
-    "alert": {
-      "title": "Attention to translations!",
-      "description": "For time reasons, all article translations will only be available in English. Thank you for your understanding."
-    }
   },
   "fr": {
     "title": "Écrits sur les maths, l'intelligence artificielle, le développement et mes passions.",
@@ -115,17 +103,7 @@ const groupedWritings = computed(() => {
   },
   "es": {
     "title": "Escritos sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones.",
-    "description": "Todas mis reflexiones sobre programación, matemáticas, diseño de inteligencia artificial, etc., están organizadas cronológicamente.",
-    "alert": {
-      "title": "¡Atención a las traducciones!",
-      "description": "Por razones de tiempo, todas las traducciones de los artículos estarán disponibles solo en inglés. Gracias por su comprensión."
-    }
+    "description": "Todas mis reflexiones sobre programación, matemáticas, diseño de inteligencia artificial, etc., están organizadas cronológicamente."
   }
 }
 </i18n>
-
-<style scoped>
-.tablist > button {
-  cursor: pointer !important;
-}
-</style>