feat : Faire une doc de type wiki

frontend/components/documentation/DocumentationArticle.vue

@@ -0,0 +1,26 @@
+<template>
+    <article :id="`doc-${article.id}`" class="scroll-mt-6">
+        <h3 class="text-lg font-bold text-primary-500 mb-3">{{ article.title }}</h3>
+        <div class="space-y-3">
+            <template v-for="(block, idx) in article.blocks" :key="idx">
+                <p v-if="block.type === 'paragraph'" class="text-sm text-neutral-700 leading-relaxed">
+                    {{ block.content }}
+                </p>
+                <ul v-else-if="block.type === 'list'" class="list-disc list-inside space-y-1 text-sm text-neutral-700 pl-2">
+                    <li v-for="(item, i) in block.content.split('\n')" :key="i">{{ item }}</li>
+                </ul>
+                <div v-else-if="block.type === 'note'" class="bg-tertiary-500 border-l-4 border-primary-500 p-3 rounded-r-md">
+                    <p class="text-sm text-neutral-700 leading-relaxed">{{ block.content }}</p>
+                </div>
+            </template>
+        </div>
+    </article>
+</template>
+
+<script setup lang="ts">
+import type { DocArticle } from '~/types/documentation'
+
+defineProps<{
+    article: DocArticle
+}>()
+</script>

frontend/components/documentation/DocumentationPage.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="h-full flex gap-8">
+        <!-- Table des matières -->
+        <nav class="w-64 flex-shrink-0 overflow-y-auto pr-4 border-r border-neutral-200">
+            <h1 class="text-xl font-bold text-primary-500 mb-6">Documentation</h1>
+            <div v-for="section in visibleSections" :key="section.id" class="mb-4">
+                <div class="flex items-center gap-2 mb-1">
+                    <Icon :name="section.icon" size="18" class="text-neutral-500"/>
+                    <span class="text-sm font-semibold text-neutral-700">{{ section.title }}</span>
+                </div>
+                <ul class="pl-7 space-y-0.5">
+                    <li v-for="article in section.articles" :key="article.id">
+                        <button
+                            class="text-xs text-neutral-500 hover:text-primary-500 text-left w-full py-0.5 transition-colors"
+                            :class="activeArticleId === article.id ? 'text-primary-500 font-bold' : ''"
+                            @click="scrollToArticle(article.id)"
+                        >
+                            {{ article.title }}
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+
+        <!-- Contenu -->
+        <div ref="contentRef" class="flex-1 overflow-y-auto pr-4">
+            <DocumentationSection
+                v-for="section in visibleSections"
+                :key="section.id"
+                :section="section"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const { visibleSections, activeArticleId, scrollToArticle } = useDocumentation()
+const contentRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+    if (!contentRef.value) return
+
+    const observer = new IntersectionObserver(
+        (entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    const id = entry.target.id.replace('doc-', '')
+                    activeArticleId.value = id
+                    break
+                }
+            }
+        },
+        {
+            root: contentRef.value,
+            rootMargin: '-10% 0px -80% 0px',
+            threshold: 0,
+        },
+    )
+
+    nextTick(() => {
+        const articles = contentRef.value?.querySelectorAll('[id^="doc-"]')
+        articles?.forEach(el => observer.observe(el))
+    })
+
+    onUnmounted(() => observer.disconnect())
+})
+</script>

frontend/components/documentation/DocumentationSection.vue

@@ -0,0 +1,23 @@
+<template>
+    <section class="mb-10">
+        <div class="flex items-center gap-3 border-b-2 border-primary-500 pb-3 mb-6">
+            <Icon :name="section.icon" size="28" class="text-primary-500"/>
+            <h2 class="text-xl font-bold text-primary-500">{{ section.title }}</h2>
+        </div>
+        <div class="space-y-8 pl-2">
+            <DocumentationArticle
+                v-for="article in section.articles"
+                :key="article.id"
+                :article="article"
+            />
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { DocSection } from '~/types/documentation'
+
+defineProps<{
+    section: DocSection
+}>()
+</script>