fix: branch for nuxt-studio

app/app.vue

@@ -1,7 +1,10 @@
 <template>
   <NuxtLayout>
+    <HeaderItem />
     <NuxtPage />
   </NuxtLayout>
 </template>
 
-<script setup="ts"></script>
+<script setup="ts">
+  import HeaderItem from '~/components/HeaderItem.vue'
+</script>

app/components/HeaderItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <header v-if="data">
+    <nav>
+      <NuxtLink :to="data.title.link" :aria-label="data.title.ariaLabel">
+        <NuxtImg :src="data.title.img" :alt="data.title.ariaLabel" />
+      </NuxtLink>
+      <div v-for="page in data.pages" :key="page.text">
+        <NuxtLink :to="page.link" :aria-label="page.text">
+          <p>{{ page.text }}</p>
+        </NuxtLink>
+      </div>
+      <NuxtLink :to="data.contact.link" :aria-label="data.contact.ariaLabel">
+        <p>{{ data.contact.text }}</p>
+      </NuxtLink>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+  const { data } = await useAsyncData('header', () => queryCollection('header').first())
+</script>

app/components/HeroItem.vue

@@ -5,11 +5,12 @@
     <div v-for="feature in data.features" :key="feature.title">
       <h3>{{ feature?.title }}</h3>
       <p>{{ feature?.text }}</p>
+      <NuxtImg :src="feature?.img" :alt="`Image de ${feature?.title}`" height="200" />
     </div>
   </div>
   <div v-else>No data available</div>
 </template>
 
 <script setup="ts">
-  const { data } = await useAsyncData('home', () => queryCollection('pages').first())
+  const { data } = await useAsyncData('home-hero', () => queryCollection('pages').first())
 </script>

app/components/SearchItem.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>La recherche</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

app/pages/auteurs.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>Les auteurs</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

app/pages/contact.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>Nous contacter</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

app/pages/index.vue

@@ -1,8 +1,11 @@
 <template>
-  <div>
-    <p>Weena et la légende de Noor</p>
+  <div v-if="data">
+    <p>{{ data.title }}</p>
     <HeroItem />
+    <SearchItem />
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  const { data } = await useAsyncData('home', () => queryCollection('pages').first())
+</script>

app/pages/qui-sommes-nous.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>Qui sommes-nous ?</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

app/pages/tomes.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p>Tomes</p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

content.config.ts

@@ -3,9 +3,31 @@ import { z } from 'zod'
 
 export default defineContentConfig({
   collections: {
+    header: defineCollection({
+      type: 'data',
+      source: 'header/navigation.json',
+      schema: z.object({
+        title: z.object({
+          img: z.string(),
+          ariaLabel: z.string(),
+          link: z.string(),
+        }),
+        pages: z.array(
+          z.object({
+            text: z.string(),
+            link: z.string(),
+          })
+        ),
+        contact: z.object({
+          text: z.string(),
+          ariaLabel: z.string(),
+          link: z.string(),
+        }),
+      }),
+    }),
     pages: defineCollection({
       type: 'data',
-      source: 'pages/**.json',
+      source: 'pages/home.json',
       schema: z.object({
         title: z.string(),
         hero: z.object({
@@ -15,6 +37,7 @@ export default defineContentConfig({
         features: z.array(
           z.object({
             title: z.string(),
+            img: z.string(),
             text: z.string(),
           })
         ),

content/header/navigation.json

@@ -0,0 +1,26 @@
+{
+  "title": {
+    "img": "/images/test.png",
+    "ariaLabel": "Logo de Weena et la légende de Noor",
+    "link": "/"
+  },  
+  "pages": [
+    {
+      "link": "/tomes",
+      "text": "Tomes"
+    },
+    {
+      "link": "/qui-sommes-nous",
+      "text": "Qui sommes-nous ?"
+    },
+    {
+      "link": "/auteurs",
+      "text": "Auteurs"
+    }
+  ],
+  "contact": {
+    "text": "Nous contacter",
+    "ariaLabel": "Lien vers page de contact",
+    "link": "/contact"
+  }
+}

content/pages/home.json

@@ -1,21 +1,34 @@
 {
-  "title": "Accueil",
+  "title": "Weena et la légende de Noor",
   "features": [
     {
-      "title": "Feature 1",
-      "text": "rajout de blablabla"
+      "title": "Personnages",
+      "img": "/images/personnages.png",
+      "text": "..."
+    },
+    {
+      "title": "Créatures",
+      "img": "/images/creatures.png",
+      "text": "..."
+    },
+    {
+      "title": "Peuples",
+      "img": "/images/peuples.png",
+      "text": "..."
     },
     {
-      "title": "Feature 2",
+      "title": "Lieux",
+      "img": "/images/lieux.png",
       "text": "..."
     },
     {
-      "title": "test",
-      "text": "no empty"
+      "title": "Teste",
+      "text": "...",
+      "img": "/images/test.png"
     }
   ],
   "hero": {
-    "heading": "My title",
-    "description": "My descriptionszdczeezf"
+    "heading": "Tout l’univers de Nym-Bruyn",
+    "description": "Retrouvez les personnages, leur généalogie, les créatures, les peuples, les lieux..."
   }
 }

nuxt.config.ts

@@ -2,14 +2,31 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
-  modules: ['@nuxt/eslint', '@nuxt/content', 'nuxt-studio'],
+  modules: ['@nuxt/eslint', '@nuxt/content', 'nuxt-studio', '@nuxt/image', 'nuxt-security'],
   content: {},
   studio: {
     repository: {
       provider: 'github',
       owner: 'mathhetru',
       repo: 'weeki',
-      branch: 'feat/nuxt-content',
+      branch: 'content',
+    },
+  },
+  security: {
+    headers: {
+      contentSecurityPolicy:
+        process.env.NODE_ENV === 'production'
+          ? {
+              'default-src': ["'self'"],
+              'script-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'", "'wasm-unsafe-eval'"],
+              'script-src-attr': ["'unsafe-inline'"],
+              'style-src': ["'self'", "'unsafe-inline'"],
+              'img-src': ["'self'", 'data:', 'https:'],
+              'font-src': ["'self'", 'data:'],
+              'connect-src': ["'self'", 'https:'],
+              'frame-src': ["'self'", 'https://app.netlify.com'],
+            }
+          : false,
     },
   },
 })