From 5c22b32563a4795fe9913f30bbd2b1453b77ccc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Sat, 7 Mar 2026 11:55:23 +0100
Subject: [PATCH 1/3] fix: espece parameter + providerToUse

---
 app/components/HeroItem.vue       | 4 ++++
 app/pages/genealogie.vue          | 8 ++++----
 content/pages/home.json           | 2 +-
 server/api/genealogie/families.ts | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index 4756351..4d15e8b 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -17,6 +17,7 @@
       >
         <div class="absolute inset-0">
           <NuxtImg
+            :provider="providerToUse(feature?.img)"
             :src="feature?.img"
             :alt="`Image de ${feature?.title}`"
             class="w-full h-full object-cover"
@@ -63,4 +64,7 @@
     }
     return '#search'
   }
+
+  //TODO remove this when all images will be on cloudinary
+  const providerToUse = (img: string) => (img.includes('/images/') ? undefined : 'cloudinary')
 </script>
diff --git a/app/pages/genealogie.vue b/app/pages/genealogie.vue
index 853e6fa..1026bfe 100644
--- a/app/pages/genealogie.vue
+++ b/app/pages/genealogie.vue
@@ -24,10 +24,10 @@
                   :key="personne.id"
                   :to="`/entites/${personne.id}`"
                   class="person-card"
-                  :class="{ feminine: personne.espece === 'feminine' }"
+                  :class="{ feminine: personne.type === 'personnage' }"
                 >
                   <div class="name">{{ personne.nom }}</div>
-                  <div class="role">{{ personne.espece || personne.type }}</div>
+                  <div class="role">{{ personne.type }}</div>
                 </NuxtLink>
                 <div v-if="generation.length === 2" class="marriage-line" />
               </div>
@@ -59,10 +59,10 @@
                     :key="personne.id"
                     :to="`/entites/${personne.id}`"
                     class="person-card"
-                    :class="{ feminine: personne.espece === 'feminine' }"
+                    :class="{ feminine: personne.type === 'personnage' }"
                   >
                     <div class="name">{{ personne.nom }}</div>
-                    <div class="role">{{ personne.espece || personne.type }}</div>
+                    <div class="role">{{ personne.type }}</div>
                   </NuxtLink>
                   <div v-if="groupe.length === 2" class="marriage-line" />
                 </div>
diff --git a/content/pages/home.json b/content/pages/home.json
index fc882a7..90e7f05 100644
--- a/content/pages/home.json
+++ b/content/pages/home.json
@@ -10,7 +10,7 @@
     {
       "title": "Personnages",
       "search": "personnage",
-      "img": "/images/personnages.png",
+      "img": "/v1772879771/EgNIbOVXoAECgGu-protected-intensity-LOW-V2_cfmt9i.jpg",
       "text": "..."
     },
     {
diff --git a/server/api/genealogie/families.ts b/server/api/genealogie/families.ts
index d53b2c3..6d33e9e 100644
--- a/server/api/genealogie/families.ts
+++ b/server/api/genealogie/families.ts
@@ -5,7 +5,7 @@ export default defineEventHandler(async (event) => {
 
   const { data: personnages, error } = await supabase
     .from('entites')
-    .select('id, nom, espece, type')
+    .select('id, nom, type')
     .eq('type', 'personnage')
 
   if (error) {

From 044322ab28f196f11e43fdc6e0fc71d6eb960fd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Sat, 7 Mar 2026 15:20:27 +0100
Subject: [PATCH 2/3] fix: footerItem + add gender

---
 app/app.vue                       |  16 ++-
 app/components/EntitesItem.vue    |  55 +++++++++
 app/components/FooterItem.vue     |  24 ++++
 app/components/SearchItem.vue     | 185 ++++++++++++++----------------
 app/pages/entites/[id].vue        |  14 ++-
 app/pages/genealogie.vue          |   4 +-
 app/stores/entites.store.ts       |   1 +
 app/types/database.types.ts       |   1 +
 content.config.ts                 |  12 ++
 content/footer/navigation.json    |  20 ++++
 content/header/navigation.json    |   4 +
 server/api/genealogie/families.ts |   2 +-
 12 files changed, 225 insertions(+), 113 deletions(-)
 create mode 100644 app/components/EntitesItem.vue
 create mode 100644 app/components/FooterItem.vue
 create mode 100644 content/footer/navigation.json

diff --git a/app/app.vue b/app/app.vue
index 4071cb3..e9ffbbd 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,15 +1,19 @@
 <template>
   <UApp :locale="fr">
-    <HeaderItem />
-    <NuxtLayout>
-      <div class="pt-28 px-4">
-        <NuxtPage />
-      </div>
-    </NuxtLayout>
+    <div class="flex flex-col min-h-screen">
+      <HeaderItem />
+      <NuxtLayout>
+        <div class="pt-28 px-4 flex-1">
+          <NuxtPage />
+        </div>
+      </NuxtLayout>
+      <FooterItem />
+    </div>
   </UApp>
 </template>
 
 <script setup="ts">
   import HeaderItem from '~/components/HeaderItem.vue'
+  import FooterItem from '~/components/FooterItem.vue'
   import { fr } from '@nuxt/ui/locale'
 </script>
diff --git a/app/components/EntitesItem.vue b/app/components/EntitesItem.vue
new file mode 100644
index 0000000..8d78489
--- /dev/null
+++ b/app/components/EntitesItem.vue
@@ -0,0 +1,55 @@
+<template>
+  <NuxtLink
+    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"
+  >
+    <div v-if="entite.image_url" class="w-20 h-20 rounded-full overflow-hidden shrink-0">
+      <NuxtImg
+        format="webp"
+        provider="cloudinary"
+        :src="entite.image_url"
+        :alt="`Image de${entite.nom}`"
+        class="object-cover w-full h-full"
+      />
+    </div>
+    <div class="flex w-full flex-col justify-between">
+      <div class="flex justify-between items-start mb-2">
+        <h3 class="font-bold text-lg">{{ entite.nom }}</h3>
+        <span class="text-xs bg-indigo-400 text-white px-2 py-1 rounded">
+          {{ entite.type }}
+        </span>
+      </div>
+
+      <div v-if="entite.description">
+        <p class="text-gray-600 text-sm mb-3">
+          {{ entite.description?.substring(0, 60) }}...
+          <a href="#" class="font-bold text-indigo-900 hover:text-indigo-400">Lire la suite</a>
+        </p>
+      </div>
+
+      <div class="flex flex-wrap gap-1">
+        <span
+          v-for="tag in entite.tags"
+          :key="tag"
+          class="text-xs bg-cyan-100 text-cyan-800 px-2 py-1 rounded"
+        >
+          {{ tag }}
+        </span>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+  import type { Entite } from '../types/database.types'
+
+  const props = defineProps<{
+    entites: Entite[]
+  }>()
+
+  const formateLink = (id: string) => {
+    return `/entites/${id}`
+  }
+</script>
diff --git a/app/components/FooterItem.vue b/app/components/FooterItem.vue
new file mode 100644
index 0000000..385d260
--- /dev/null
+++ b/app/components/FooterItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <footer v-if="data" class="w-full mx-auto bg-white/30 shadow-lg">
+    <nav class="flex items-center justify-between p-4">
+      <p class="text-sm text-gray-700">
+        {{ new Date().getFullYear() }} - Weena et la légende de Noor. Tous droits réservés.
+      </p>
+      <div class="flex gap-4">
+        <a
+          v-for="(link, index) in data.links"
+          :key="index"
+          :href="link.url"
+          rel="noopener noreferrer"
+          class="text-sm text-gray-700 hover:text-gray-900 transition-colors duration-200"
+        >
+          {{ link.text }}
+        </a>
+      </div>
+    </nav>
+  </footer>
+</template>
+
+<script setup lang="ts">
+  const { data } = await useAsyncData('footer', () => queryCollection('footer').first())
+</script>
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index cbb92d1..1250c09 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,119 +1,96 @@
 <template>
-  <div id="search" class="pt-30 pb-10 max-w-7xl mx-auto">
-    <h1 class="font-heading text-5xl mb-6">Encyclopédie</h1>
-
-    <div class="mb-6 space-y-4">
-      <input
-        v-model="searchValue"
-        type="text"
-        placeholder="Rechercher..."
-        class="border px-4 py-2 rounded w-full"
-      />
-
-      <div class="flex gap-2">
-        <UButton
-          :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
-          class="text-white px-4 py-2 rounded"
-          @click="addTypeFilter('tous')"
-        >
-          Tous
-        </UButton>
-        <UButton
-          :color="typeFilter === 'personnage' ? 'primary' : 'secondary'"
-          class="text-white px-4 py-2 rounded"
-          @click="addTypeFilter('personnage')"
-        >
-          Personnages
-        </UButton>
-        <UButton
-          :color="typeFilter === 'lieu' ? 'primary' : 'secondary'"
-          class="text-white px-4 py-2 rounded"
-          @click="addTypeFilter('lieu')"
-        >
-          Lieux
-        </UButton>
-        <UButton
-          :color="typeFilter === 'creature' ? 'primary' : 'secondary'"
-          class="text-white px-4 py-2 rounded"
-          @click="addTypeFilter('creature')"
-        >
-          Créatures
-        </UButton>
-        <UButton
-          :color="typeFilter === 'peuple' ? 'primary' : 'secondary'"
-          class="text-white px-4 py-2 rounded"
-          @click="addTypeFilter('peuple')"
-        >
-          Peuples
-        </UButton>
+  <div>
+    <div id="search" class="pt-10 mb-10 max-w-7xl mx-auto">
+      <h1 class="font-heading text-5xl mb-6">Encyclopédie</h1>
+      <div class="mb-6 space-y-4">
+        <input
+          v-model="searchValue"
+          type="text"
+          placeholder="Rechercher..."
+          class="border px-4 py-2 rounded w-full"
+        />
+        <div class="flex gap-2">
+          <UButton
+            :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
+            class="text-white px-4 py-2 rounded"
+            @click="addTypeFilter('tous')"
+          >
+            Tous
+          </UButton>
+          <UButton
+            :color="typeFilter === 'personnage' ? 'primary' : 'secondary'"
+            class="text-white px-4 py-2 rounded"
+            @click="addTypeFilter('personnage')"
+          >
+            Personnages
+          </UButton>
+          <UButton
+            :color="typeFilter === 'lieu' ? 'primary' : 'secondary'"
+            class="text-white px-4 py-2 rounded"
+            @click="addTypeFilter('lieu')"
+          >
+            Lieux
+          </UButton>
+          <UButton
+            :color="typeFilter === 'creature' ? 'primary' : 'secondary'"
+            class="text-white px-4 py-2 rounded"
+            @click="addTypeFilter('creature')"
+          >
+            Créatures
+          </UButton>
+          <UButton
+            :color="typeFilter === 'peuple' ? 'primary' : 'secondary'"
+            class="text-white px-4 py-2 rounded"
+            @click="addTypeFilter('peuple')"
+          >
+            Peuples
+          </UButton>
+        </div>
       </div>
-    </div>
 
-    <div v-if="isError" class="border border-red-300 bg-red-50 rounded-lg p-4 mb-6">
-      <div class="flex items-start gap-3">
-        <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 shrink-0" />
-        <div class="flex-1">
-          <h3 class="font-bold text-red-800">Erreur de chargement</h3>
-          <p class="text-red-700 text-sm mt-1">{{ errorMessage }}</p>
+      <div v-if="isError" class="border border-red-300 bg-red-50 rounded-lg p-4 mb-6">
+        <div class="flex items-start gap-3">
+          <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6 text-red-600 shrink-0" />
+          <div class="flex-1">
+            <h3 class="font-bold text-red-800">Erreur de chargement</h3>
+            <p class="text-red-700 text-sm mt-1">{{ errorMessage }}</p>
+          </div>
+          <button
+            class="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
+            @click="entitesStore.resetAndLoad()"
+          >
+            Réessayer
+          </button>
         </div>
-        <button
-          class="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
-          @click="entitesStore.resetAndLoad()"
-        >
-          Réessayer
-        </button>
       </div>
-    </div>
 
-    <div v-if="hasNoResults" class="flex flex-col items-center justify-center py-20">
-      <UIcon name="i-heroicons-magnifying-glass" class="w-16 h-16 text-gray-400 mb-4" />
-      <h3 class="text-xl font-semibold text-gray-700 mb-2">Aucun résultat</h3>
-      <p class="text-gray-500">Aucune entité ne correspond à vos critères de recherche.</p>
-    </div>
+      <div v-if="hasNoResults" class="flex flex-col items-center justify-center py-20">
+        <UIcon name="i-heroicons-magnifying-glass" class="w-16 h-16 text-gray-400 mb-4" />
+        <h3 class="text-xl font-semibold text-gray-700 mb-2">Aucun résultat</h3>
+        <p class="text-gray-500">Aucune entité ne correspond à vos critères de recherche.</p>
+      </div>
 
-    <div
-      v-if="entitesFilter.length > 0"
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
-    >
-      <NuxtLink
-        v-for="entite in entitesFilter"
-        :key="entite.id"
-        :to="formateLink(entite.id)"
-        class="border rounded-lg p-4 hover:shadow-lg hover:bg-white transition"
+      <div
+        v-if="entitesFilter.length > 0"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
       >
-        <div class="flex justify-between items-start mb-2">
-          <h3 class="font-bold text-lg">{{ entite.nom }}</h3>
-          <span class="text-xs bg-indigo-400 text-white px-2 py-1 rounded">
-            {{ entite.type }}
-          </span>
-        </div>
-
-        <p class="text-gray-600 text-sm mb-3">{{ entite.description }}</p>
-
-        <div class="flex flex-wrap gap-1">
-          <span
-            v-for="tag in entite.tags"
-            :key="tag"
-            class="text-xs bg-cyan-100 text-cyan-800 px-2 py-1 rounded"
-          >
-            {{ tag }}
-          </span>
-        </div>
-      </NuxtLink>
+        <EntitesItem :entites="entitesFilter" />
+      </div>
     </div>
-
-    <div ref="loadMoreTrigger" class="h-10 flex items-center justify-center">
+    <div ref="loadMoreTrigger" class="flex items-center justify-center">
       <UIcon
         v-if="isLoading"
         name="i-heroicons-arrow-path"
-        class="w-8 h-10 animate-spin text-primary"
+        class="w-8 mb-10 animate-spin text-primary"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
   import { useEntitesStore } from '../stores/entites.store'
+  import EntitesItem from './EntitesItem.vue'
   import type { typeFilter } from '../types/database.types'
   import { storeToRefs } from 'pinia'
 
@@ -133,7 +110,6 @@
   let observer: IntersectionObserver | null = null
 
   onMounted(async () => {
-    entitesStore.resetFilters()
     await entitesStore.getEntites()
 
     observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
@@ -146,6 +122,11 @@
     if (loadMoreTrigger.value) {
       observer.observe(loadMoreTrigger.value)
     }
+
+    await nextTick()
+    if (isVisible.value && entitesStore.hasMore) {
+      await entitesStore.loadMore()
+    }
   })
 
   onUnmounted(() => {
@@ -153,17 +134,19 @@
   })
 
   watch(isVisible, async (visible) => {
-    if (visible && !isLoading.value) {
+    if (visible && !isLoading.value && entitesStore.hasMore) {
       await entitesStore.loadMore()
     }
   })
 
   watch(typeFilter, async () => {
     await entitesStore.resetAndLoad()
+    await nextTick()
+    if (isVisible.value && entitesStore.hasMore) {
+      await entitesStore.loadMore()
+    }
   })
 
-  const formateLink = (id: string) => `/entites/${id}`
-
   const hasNoResults = computed(() => {
     return !isLoading.value && !isError.value && entitesFilter.value.length === 0
   })
diff --git a/app/pages/entites/[id].vue b/app/pages/entites/[id].vue
index b512048..b42f6fb 100644
--- a/app/pages/entites/[id].vue
+++ b/app/pages/entites/[id].vue
@@ -3,10 +3,18 @@
   <div class="mx-auto w-[75%] max-w-7xl">
     <p v-if="pending">Chargement...</p>
     <div v-else-if="entite" class="flex flex-col gap-1.5">
-      <p>Nom : {{ entite.nom }}</p>
-      <p>Type : {{ entite.type }}</p>
+      <h1 class="text-4xl font-heading mb-4">{{ entite.nom }}</h1>
+      <div v-if="entite.gender === 'Féminin'" class="text-2xl font-bold flex items-center gap-1.5">
+        <UIcon name="gg:gender-female" />
+      </div>
+      <div
+        v-else-if="entite.gender === 'Masculin'"
+        class="text-2xl font-bold flex items-center gap-1.5"
+      >
+        <UIcon name="gg:gender-male" />
+      </div>
+      <p class="capitalize">{{ entite.type }}</p>
       <p>Description : {{ entite.description }}</p>
-      <p v-if="entite.espece">Espèce : {{ entite.espece }}</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>
diff --git a/app/pages/genealogie.vue b/app/pages/genealogie.vue
index 1026bfe..755ac67 100644
--- a/app/pages/genealogie.vue
+++ b/app/pages/genealogie.vue
@@ -24,7 +24,7 @@
                   :key="personne.id"
                   :to="`/entites/${personne.id}`"
                   class="person-card"
-                  :class="{ feminine: personne.type === 'personnage' }"
+                  :class="{ feminine: personne.gender === 'Féminin' }"
                 >
                   <div class="name">{{ personne.nom }}</div>
                   <div class="role">{{ personne.type }}</div>
@@ -59,7 +59,7 @@
                     :key="personne.id"
                     :to="`/entites/${personne.id}`"
                     class="person-card"
-                    :class="{ feminine: personne.type === 'personnage' }"
+                    :class="{ feminine: personne.gender === 'Féminin' }"
                   >
                     <div class="name">{{ personne.nom }}</div>
                     <div class="role">{{ personne.type }}</div>
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index ffe240d..41fd606 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -131,5 +131,6 @@ export const useEntitesStore = defineStore('entites', () => {
     searchEntites,
     getEntitesOnTree,
     resetFilters,
+    hasMore,
   }
 })
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
index 35413f6..c619077 100644
--- a/app/types/database.types.ts
+++ b/app/types/database.types.ts
@@ -17,6 +17,7 @@ export type Entite = {
   tomes?: string[]
   relations?: string[]
   lieu_id?: string
+  gender?: string
 }
 
 export interface EntiteTree {
diff --git a/content.config.ts b/content.config.ts
index 710568b..0f280db 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -26,6 +26,18 @@ export default defineContentConfig({
         }),
       }),
     }),
+    footer: defineCollection({
+      type: 'data',
+      source: 'footer/navigation.json',
+      schema: z.object({
+        links: z.array(
+          z.object({
+            name: z.string(),
+            url: z.string(),
+          })
+        ),
+      }),
+    }),
     pages: defineCollection({
       type: 'data',
       source: 'pages/home.json',
diff --git a/content/footer/navigation.json b/content/footer/navigation.json
new file mode 100644
index 0000000..8818493
--- /dev/null
+++ b/content/footer/navigation.json
@@ -0,0 +1,20 @@
+{
+  "links": [    
+    {
+      "url": "/",
+      "text": "Tout l'univers"
+    },
+    {
+      "url": "/genealogie",
+      "text": "Généalogie"
+    },
+    {
+      "url": "/tomes",
+      "text": "Tomes"
+    },
+    {
+      "url": "/auteurs",
+      "text": "Auteurs"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/content/header/navigation.json b/content/header/navigation.json
index 24fed27..0eb8832 100644
--- a/content/header/navigation.json
+++ b/content/header/navigation.json
@@ -10,6 +10,10 @@
       "link": "/",
       "text": "Tout l'univers"
     },
+    {
+      "link": "/genealogie",
+      "text": "Généalogie"
+    },
     {
       "link": "/tomes",
       "text": "Tomes"
diff --git a/server/api/genealogie/families.ts b/server/api/genealogie/families.ts
index 6d33e9e..064a797 100644
--- a/server/api/genealogie/families.ts
+++ b/server/api/genealogie/families.ts
@@ -5,7 +5,7 @@ export default defineEventHandler(async (event) => {
 
   const { data: personnages, error } = await supabase
     .from('entites')
-    .select('id, nom, type')
+    .select('id, nom, gender, type')
     .eq('type', 'personnage')
 
   if (error) {

From 7f4d53a8c0f28c56d79ef43f895b7a0feff2e1f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20H=C3=A9tru?= <mathilde.hetru@gmail.com>
Date: Sat, 7 Mar 2026 15:27:49 +0100
Subject: [PATCH 3/3] fix: wip

---
 app/components/SearchItem.vue  | 2 +-
 content/header/navigation.json | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 1250c09..9acabad 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="search" class="pt-10 mb-10 max-w-7xl mx-auto">
+    <div id="weekipedia" class="pt-30 mb-10 max-w-7xl mx-auto">
       <h1 class="font-heading text-5xl mb-6">Encyclopédie</h1>
       <div class="mb-6 space-y-4">
         <input
diff --git a/content/header/navigation.json b/content/header/navigation.json
index 0eb8832..3daac4a 100644
--- a/content/header/navigation.json
+++ b/content/header/navigation.json
@@ -7,8 +7,8 @@
   },  
   "pages": [    
     {
-      "link": "/",
-      "text": "Tout l'univers"
+      "link": "/#weekipedia",
+      "text": "Weëkipedia"
     },
     {
       "link": "/genealogie",