initiation librodrome

app/pages/lire/[slug].vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="chapter">
+    <BookChapterHeader
+      :title="chapter.title"
+      :description="chapter.description"
+      :order="chapter.order"
+      :reading-time="chapter.readingTime"
+      :chapter-slug="slug"
+    />
+
+    <BookChapterContent :content="chapter" />
+
+    <!-- Prev / Next navigation -->
+    <nav class="mt-16 flex items-center justify-between border-t border-white/8 pt-8">
+      <NuxtLink
+        v-if="prevChapter"
+        :to="`/lire/${prevChapter.stem}`"
+        class="btn-ghost gap-2"
+      >
+        <div class="i-lucide-arrow-left h-4 w-4" />
+        <span class="text-sm">{{ prevChapter.title }}</span>
+      </NuxtLink>
+      <div v-else />
+
+      <NuxtLink
+        v-if="nextChapter"
+        :to="`/lire/${nextChapter.stem}`"
+        class="btn-ghost gap-2"
+      >
+        <span class="text-sm">{{ nextChapter.title }}</span>
+        <div class="i-lucide-arrow-right h-4 w-4" />
+      </NuxtLink>
+      <div v-else />
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'reading',
+})
+
+const route = useRoute()
+const slug = route.params.slug as string
+
+// Initialize guided mode
+useGuidedMode()
+
+const { data: chapter } = await useAsyncData(`chapter-${slug}`, () =>
+  queryCollection('book').path(`/book/${slug}`).first(),
+)
+
+if (!chapter.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Chapitre non trouvé' })
+}
+
+useHead({
+  title: chapter.value?.title,
+})
+
+// Get adjacent chapters for navigation
+const { data: allChapters } = await useAsyncData('book-nav', () =>
+  queryCollection('book').order('order', 'ASC').all(),
+)
+
+const currentIndex = computed(() =>
+  allChapters.value?.findIndex(c => c.stem === slug) ?? -1,
+)
+
+const prevChapter = computed(() => {
+  const idx = currentIndex.value
+  if (idx <= 0 || !allChapters.value) return null
+  return allChapters.value[idx - 1]
+})
+
+const nextChapter = computed(() => {
+  const idx = currentIndex.value
+  if (!allChapters.value || idx >= allChapters.value.length - 1) return null
+  return allChapters.value[idx + 1]
+})
+</script>