From 04b051a206bc3ff6580c51746a68dfd1a0ec3560 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 10 Mar 2026 18:52:18 +0100
Subject: [PATCH 1/5] feat: implemente drawer for header on mobile and tablet
 screens

---
 app/app.vue                    |  2 +-
 app/assets/css/main.css        | 14 +++++++
 app/components/EntitesItem.vue |  2 +-
 app/components/HeaderItem.vue  | 76 +++++++++++++++++++++++++++++++---
 app/components/HeroItem.vue    |  2 +-
 app/components/SearchItem.vue  |  2 +-
 content/header/navigation.json |  2 +-
 7 files changed, 89 insertions(+), 11 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index e9ffbbd..8163b47 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,6 +1,6 @@
 <template>
   <UApp :locale="fr">
-    <div class="flex flex-col min-h-screen">
+    <div class="flex flex-col min-h-screen img-background bg-default" data-vaul-drawer-wrapper>
       <HeaderItem />
       <NuxtLayout>
         <div class="pt-28 px-4 flex-1">
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 2a46800..1e1afbb 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -5,6 +5,20 @@ body {
   font-family: var(--font-main);
   background-color: var(--depth);
   scroll-behavior: smooth;
+  background-image: url('https://res.cloudinary.com/dbihnwsar/image/upload/f_auto,q_auto/v1772911031/EgNIdozXsAEzP9m-protected-intensity-LOW-V2_q1xony.jpg');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-color: #f5f0eb;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.92);
+  z-index: 0;
+  pointer-events: none;
 }
 
 .font-heading {
diff --git a/app/components/EntitesItem.vue b/app/components/EntitesItem.vue
index 8d78489..ff643e2 100644
--- a/app/components/EntitesItem.vue
+++ b/app/components/EntitesItem.vue
@@ -3,7 +3,7 @@
     v-for="entite in props.entites"
     :key="entite.id"
     :to="formateLink(entite.id)"
-    class="border rounded-lg p-4 hover:shadow-lg hover:bg-white transition flex gap-2"
+    class="border rounded-lg p-4 backdrop-blur-xs hover:shadow-lg hover:bg-white transition flex gap-2"
   >
     <div v-if="entite.image_url" class="w-20 h-20 rounded-full overflow-hidden shrink-0">
       <NuxtImg
diff --git a/app/components/HeaderItem.vue b/app/components/HeaderItem.vue
index 37ad1fd..18a0b39 100644
--- a/app/components/HeaderItem.vue
+++ b/app/components/HeaderItem.vue
@@ -1,24 +1,23 @@
 <template>
   <header
     v-if="data"
-    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/30 rounded-full mt-4 backdrop-blur-sm z-50 shadow-lg"
+    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/70 md:bg-white/50 rounded-full mt-4 backdrop-blur-xs z-50 shadow-lg"
   >
     <nav class="flex items-center justify-between p-4">
       <NuxtLink
         :to="data.title.link"
         :aria-label="data.title.ariaLabel"
-        class="font-heading text-2xl flex items-center gap-2"
+        class="font-heading text-xl lg:text-2xl flex items-center gap-2"
       >
         <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
         {{ data.title.text }}
       </NuxtLink>
-      <div class="flex items-center gap-6">
+      <div class="hidden md:flex items-center text-sm lg:text-base gap-6 lg:gap-9">
         <NuxtLink
           v-for="page in data.pages"
           :key="page.text"
           :to="page.link"
           :aria-label="page.text"
-          class=""
         >
           {{ page.text }}
         </NuxtLink>
@@ -26,15 +25,80 @@
       <NuxtLink
         :to="data.contact.link"
         :aria-label="data.contact.ariaLabel"
-        class="flex items-center gap-1 rounded-full px-8 py-2 bg-black text-white"
+        class="hidden md:flex items-center text-xs rounded-full px-4 py-1 bg-black text-white lg:text-sm lg:px-6 hover:bg-gray-600 transition-colors"
       >
-        <!-- <UIcon name="line-md:chat-round-dots-filled" /> -->
         {{ data.contact.text }}
       </NuxtLink>
+
+      <UDrawer
+        v-model:open="isOpen"
+        direction="right"
+        :handle="false"
+        should-scale-background
+        set-background-color-on-scale
+      >
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="xl"
+          trailing-icon="line-md:align-justify"
+          class="mr-2 md:hidden h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
+        />
+
+        <template #content>
+          <div class="min-w-75 min-h-96 size-full m-4">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="xl"
+              trailing-icon="line-md:close"
+              class="pt-4 h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
+              @click="closeDrawer"
+            />
+            <div class="flex flex-col items-center text-l gap-12 pt-12">
+              <NuxtLink
+                :to="data.title.link"
+                :aria-label="data.title.ariaLabel"
+                class="font-heading text-2xl flex items-center gap-2"
+                @click="closeDrawer"
+              >
+                <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
+                {{ data.title.text }}
+              </NuxtLink>
+              <NuxtLink
+                v-for="page in data.pages"
+                :key="page.text"
+                :to="page.link"
+                :aria-label="page.text"
+                class="w-full text-center text-l"
+                @click="closeDrawer"
+              >
+                {{ page.text }}
+              </NuxtLink>
+              <NuxtLink
+                :to="data.contact.link"
+                :aria-label="data.contact.ariaLabel"
+                class="flex items-center w-full rounded-full bg-black hover:bg-gray-600 transition-colors"
+                @click="closeDrawer"
+              >
+                <p class="text-white text-l mx-6 my-2 w-full text-center">
+                  {{ data.contact.text }}
+                </p>
+              </NuxtLink>
+            </div>
+          </div>
+        </template>
+      </UDrawer>
     </nav>
   </header>
 </template>
 
 <script setup lang="ts">
   const { data } = await useAsyncData('header', () => queryCollection('header').first())
+
+  const isOpen = ref(false)
+
+  const closeDrawer = () => {
+    isOpen.value = false
+  }
 </script>
diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index 4d15e8b..e1c99f6 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
+    class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 backdrop-blur-xs rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
   >
     <div class="w-[30%] h-full flex flex-col gap-4 text-center justify-center mx-12">
       <h1 class="text-4xl font-heading">{{ data?.hero?.heading }}</h1>
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 9acabad..edef450 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -9,7 +9,7 @@
           placeholder="Rechercher..."
           class="border px-4 py-2 rounded w-full"
         />
-        <div class="flex gap-2">
+        <div class="flex flex-wrap gap-2">
           <UButton
             :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
             class="text-white px-4 py-2 rounded"
diff --git a/content/header/navigation.json b/content/header/navigation.json
index bff49f7..c316314 100644
--- a/content/header/navigation.json
+++ b/content/header/navigation.json
@@ -2,7 +2,7 @@
   "title": {
     "img": "/images/test.png",
     "ariaLabel": "Logo de Weena et la légende de Noor",
-    "text": "Wiki Weëna et la Légende de Noor",
+    "text": "Weëna et la Légende de Noor",
     "link": "/"
   },
   "contact": {

From a1b7991f2b4cfd178d2f27da70e434e46d6842ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Tue, 10 Mar 2026 19:02:01 +0100
Subject: [PATCH 2/5] fix: delete scale bg

---
 app/app.vue                   | 2 +-
 app/components/HeaderItem.vue | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 8163b47..bfccc5d 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,6 +1,6 @@
 <template>
   <UApp :locale="fr">
-    <div class="flex flex-col min-h-screen img-background bg-default" data-vaul-drawer-wrapper>
+    <div class="flex flex-col min-h-screen img-background">
       <HeaderItem />
       <NuxtLayout>
         <div class="pt-28 px-4 flex-1">
diff --git a/app/components/HeaderItem.vue b/app/components/HeaderItem.vue
index 18a0b39..9a7d8dd 100644
--- a/app/components/HeaderItem.vue
+++ b/app/components/HeaderItem.vue
@@ -30,13 +30,7 @@
         {{ data.contact.text }}
       </NuxtLink>
 
-      <UDrawer
-        v-model:open="isOpen"
-        direction="right"
-        :handle="false"
-        should-scale-background
-        set-background-color-on-scale
-      >
+      <UDrawer v-model:open="isOpen" direction="right" :handle="false">
         <UButton
           color="neutral"
           variant="ghost"

From 6c06a76b86ab882d8ce5c945eeb63c9342626a40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 11 Mar 2026 09:10:43 +0100
Subject: [PATCH 3/5] fix: fix aria-hidden blocked

---
 app/app.vue                   |   8 +--
 app/components/HeaderItem.vue | 114 +++++++++++++++++++---------------
 2 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index bfccc5d..f9125a8 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -2,11 +2,9 @@
   <UApp :locale="fr">
     <div class="flex flex-col min-h-screen img-background">
       <HeaderItem />
-      <NuxtLayout>
-        <div class="pt-28 px-4 flex-1">
-          <NuxtPage />
-        </div>
-      </NuxtLayout>
+      <main class="pt-28 px-4 flex-1">
+        <NuxtPage />
+      </main>
       <FooterItem />
     </div>
   </UApp>
diff --git a/app/components/HeaderItem.vue b/app/components/HeaderItem.vue
index 9a7d8dd..df98185 100644
--- a/app/components/HeaderItem.vue
+++ b/app/components/HeaderItem.vue
@@ -12,6 +12,7 @@
         <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
         {{ data.title.text }}
       </NuxtLink>
+
       <div class="hidden md:flex items-center text-sm lg:text-base gap-6 lg:gap-9">
         <NuxtLink
           v-for="page in data.pages"
@@ -22,6 +23,7 @@
           {{ page.text }}
         </NuxtLink>
       </div>
+
       <NuxtLink
         :to="data.contact.link"
         :aria-label="data.contact.ariaLabel"
@@ -29,70 +31,82 @@
       >
         {{ data.contact.text }}
       </NuxtLink>
+      <button
+        class="mr-2 md:hidden h-10 w-10 flex items-center justify-center rounded-md hover:bg-black/10 transition-colors"
+        @click="openDrawer"
+      >
+        <UIcon name="line-md:align-justify" class="text-2xl" />
+      </button>
+    </nav>
+  </header>
 
-      <UDrawer v-model:open="isOpen" direction="right" :handle="false">
+  <UDrawer v-if="data" v-model:open="isOpen" direction="right" :handle="false" :auto-focus="isOpen">
+    <template #content>
+      <VisuallyHidden>
+        <DialogTitle>Menu de navigation</DialogTitle>
+        <DialogDescription>Menu de navigation mobile</DialogDescription>
+      </VisuallyHidden>
+      <div class="min-w-75 min-h-96 size-full m-4">
         <UButton
           color="neutral"
           variant="ghost"
           size="xl"
-          trailing-icon="line-md:align-justify"
-          class="mr-2 md:hidden h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
+          trailing-icon="line-md:close"
+          class="pt-4 h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
+          @click="closeDrawer()"
         />
-
-        <template #content>
-          <div class="min-w-75 min-h-96 size-full m-4">
-            <UButton
-              color="neutral"
-              variant="ghost"
-              size="xl"
-              trailing-icon="line-md:close"
-              class="pt-4 h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
-              @click="closeDrawer"
-            />
-            <div class="flex flex-col items-center text-l gap-12 pt-12">
-              <NuxtLink
-                :to="data.title.link"
-                :aria-label="data.title.ariaLabel"
-                class="font-heading text-2xl flex items-center gap-2"
-                @click="closeDrawer"
-              >
-                <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
-                {{ data.title.text }}
-              </NuxtLink>
-              <NuxtLink
-                v-for="page in data.pages"
-                :key="page.text"
-                :to="page.link"
-                :aria-label="page.text"
-                class="w-full text-center text-l"
-                @click="closeDrawer"
-              >
-                {{ page.text }}
-              </NuxtLink>
-              <NuxtLink
-                :to="data.contact.link"
-                :aria-label="data.contact.ariaLabel"
-                class="flex items-center w-full rounded-full bg-black hover:bg-gray-600 transition-colors"
-                @click="closeDrawer"
-              >
-                <p class="text-white text-l mx-6 my-2 w-full text-center">
-                  {{ data.contact.text }}
-                </p>
-              </NuxtLink>
-            </div>
-          </div>
-        </template>
-      </UDrawer>
-    </nav>
-  </header>
+        <div class="flex flex-col items-center text-l gap-12 pt-12">
+          <NuxtLink
+            :to="data.title.link"
+            :aria-label="data.title.ariaLabel"
+            class="font-heading text-2xl flex items-center gap-2"
+            @click="closeDrawer()"
+          >
+            <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
+            {{ data.title.text }}
+          </NuxtLink>
+          <NuxtLink
+            v-for="page in data.pages"
+            :key="page.text"
+            :to="page.link"
+            :aria-label="page.text"
+            class="w-full text-center text-l"
+            @click="closeDrawer()"
+          >
+            {{ page.text }}
+          </NuxtLink>
+          <NuxtLink
+            :to="data.contact.link"
+            :aria-label="data.contact.ariaLabel"
+            class="flex items-center w-full rounded-full bg-black hover:bg-gray-600 transition-colors"
+            @click="closeDrawer()"
+          >
+            <p class="text-white text-l mx-6 my-2 w-full text-center">
+              {{ data.contact.text }}
+            </p>
+          </NuxtLink>
+        </div>
+      </div>
+    </template>
+  </UDrawer>
 </template>
 
 <script setup lang="ts">
+  import { DialogTitle, DialogDescription, VisuallyHidden } from 'reka-ui'
   const { data } = await useAsyncData('header', () => queryCollection('header').first())
 
   const isOpen = ref(false)
 
+  const openDrawer = (e: MouseEvent) => {
+    ;(e.currentTarget as HTMLElement).blur()
+    isOpen.value = true
+  }
+
   const closeDrawer = () => {
     isOpen.value = false
   }
+
+  defineShortcuts({
+    o: () => (isOpen.value = !isOpen.value),
+  })
 </script>

From 0c41a78a09e65ef561614b5c7cb7e4bc0074f611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 11 Mar 2026 10:38:40 +0100
Subject: [PATCH 4/5] feat: whitespace pre-line on id page

---
 app/components/HeaderItem.vue | 115 ++++++++++++++++++++--------------
 app/pages/entites/[id].vue    |   2 +-
 2 files changed, 69 insertions(+), 48 deletions(-)

diff --git a/app/components/HeaderItem.vue b/app/components/HeaderItem.vue
index df98185..fef13f3 100644
--- a/app/components/HeaderItem.vue
+++ b/app/components/HeaderItem.vue
@@ -40,73 +40,94 @@
     </nav>
   </header>
 
-  <UDrawer v-if="data" v-model:open="isOpen" direction="right" :handle="false" :auto-focus="isOpen">
-    <template #content>
-      <VisuallyHidden>
-        <DialogTitle>Menu de navigation</DialogTitle>
-        <DialogDescription>Menu de navigation mobile</DialogDescription>
-      </VisuallyHidden>
-      <div class="min-w-75 min-h-96 size-full m-4">
-        <UButton
-          color="neutral"
-          variant="ghost"
-          size="xl"
-          trailing-icon="line-md:close"
-          class="pt-4 h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
-          @click="closeDrawer()"
-        />
-        <div class="flex flex-col items-center text-l gap-12 pt-12">
-          <NuxtLink
-            :to="data.title.link"
-            :aria-label="data.title.ariaLabel"
-            class="font-heading text-2xl flex items-center gap-2"
-            @click="closeDrawer()"
-          >
-            <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
-            {{ data.title.text }}
-          </NuxtLink>
+  <Teleport v-if="data" to="body">
+    <Transition name="fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 bg-black/30 z-50 backdrop-blur-sm"
+        @click="closeDrawer"
+      />
+    </Transition>
+
+    <Transition name="slide">
+      <div
+        v-if="isOpen"
+        class="fixed top-0 right-0 h-full w-75 bg-white z-50 shadow-xl p-6 flex flex-col gap-8"
+      >
+        <button
+          class="self-end h-10 w-10 flex items-center justify-center rounded-md hover:bg-black/10 transition-colors"
+          @click="closeDrawer"
+        >
+          <UIcon name="line-md:close" class="text-2xl" />
+        </button>
+
+        <NuxtLink
+          :to="data.title.link"
+          class="font-heading text-2xl flex items-center gap-2"
+          @click="closeDrawer"
+        >
+          <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
+          {{ data.title.text }}
+        </NuxtLink>
+
+        <nav class="flex flex-col gap-6 text-lg">
           <NuxtLink
             v-for="page in data.pages"
             :key="page.text"
             :to="page.link"
-            :aria-label="page.text"
-            class="w-full text-center text-l"
-            @click="closeDrawer()"
+            class="w-full text-center"
+            @click="closeDrawer"
           >
             {{ page.text }}
           </NuxtLink>
-          <NuxtLink
-            :to="data.contact.link"
-            :aria-label="data.contact.ariaLabel"
-            class="flex items-center w-full rounded-full bg-black hover:bg-gray-600 transition-colors"
-            @click="closeDrawer()"
-          >
-            <p class="text-white text-l mx-6 my-2 w-full text-center">
-              {{ data.contact.text }}
-            </p>
-          </NuxtLink>
-        </div>
+        </nav>
+
+        <NuxtLink
+          :to="data.contact.link"
+          class="mt-auto rounded-full bg-black text-white text-center py-2 px-4 hover:bg-gray-600 transition-colors"
+          @click="closeDrawer"
+        >
+          {{ data.contact.text }}
+        </NuxtLink>
       </div>
-    </template>
-  </UDrawer>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
-  import { DialogTitle, DialogDescription, VisuallyHidden } from 'reka-ui'
   const { data } = await useAsyncData('header', () => queryCollection('header').first())
 
   const isOpen = ref(false)
 
-  const openDrawer = (e: MouseEvent) => {
-    ;(e.currentTarget as HTMLElement).blur()
-    isOpen.value = true
-  }
-
   const closeDrawer = () => {
     isOpen.value = false
   }
 
+  const openDrawer = () => {
+    isOpen.value = true
+  }
+
   defineShortcuts({
     o: () => (isOpen.value = !isOpen.value),
   })
 </script>
+
+<style lang="css">
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: transform 0.3s ease;
+  }
+  .slide-enter-from,
+  .slide-leave-to {
+    transform: translateX(100%);
+  }
+</style>
diff --git a/app/pages/entites/[id].vue b/app/pages/entites/[id].vue
index b42f6fb..f12f96a 100644
--- a/app/pages/entites/[id].vue
+++ b/app/pages/entites/[id].vue
@@ -14,7 +14,7 @@
         <UIcon name="gg:gender-male" />
       </div>
       <p class="capitalize">{{ entite.type }}</p>
-      <p>Description : {{ entite.description }}</p>
+      <p class="whitespace-pre-line">{{ entite.description }}</p>
       <p v-if="entite.vivant">Espèce vivante</p>
       <p v-if="entite.dangereux">Espèce dangeureuse</p>
       <p v-if="entite.hostile">Espèce hostile</p>

From b3c482f834ab3f537662e84eaf09652c8d8cb66b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Wed, 11 Mar 2026 11:06:34 +0100
Subject: [PATCH 5/5] fix: change search for weekipedia

---
 app/components/HeroItem.vue   | 2 +-
 app/components/SearchItem.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index e1c99f6..5cc84ed 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -62,7 +62,7 @@
     if (item === 'genealogie') {
       return '/genealogie'
     }
-    return '#search'
+    return '#weekipedia'
   }
 
   //TODO remove this when all images will be on cloudinary
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index edef450..a76f29f 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="weekipedia" class="pt-30 mb-10 max-w-7xl mx-auto">
-      <h1 class="font-heading text-5xl mb-6">Encyclopédie</h1>
+      <h1 class="font-heading text-5xl mb-6">Wëekipedia</h1>
       <div class="mb-6 space-y-4">
         <input
           v-model="searchValue"