Files
librodrome/app/pages/economique/modele-eco/[slug].vue
T
Yvv 8408fd6466
ci/woodpecker/push/woodpecker Pipeline was successful
feat: SEO complet + analytics Umami + og:image § logo
SEO :
- composable useSeoPage() : og:*, Twitter Cards, canonical sur toutes les pages (15 pages)
- app.vue : JSON-LD Organization + Book, og:image global og-default.png
- og-default.png 1200×630 : logo § calligraphique + texte (Pillow)
- nuxt.config.ts : @nuxtjs/sitemap avec 26 URLs statiques

Analytics Umami :
- useTracking() : helpers typés audio/pdf/player/scroll/cta
- useScrollTracking() : scroll depth 25/50/75/100% + liens externes auto
- useAudioPlayer : trackAudioPlay/Progress/Complete
- BookPdfReader : trackPdfOpen/Close avec durée
- BookPlayer : trackPlayerOpen/Chapter/Mode
- docker-compose : variables NUXT_PUBLIC_UMAMI_* passées au container

Images :
- Couv-Economie-du-don.jpg ajoutée dans public/images/
- bookplayer.config.yml + home.yml : références mises à jour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-11 00:25:28 +02:00

90 lines
2.5 KiB
Vue

<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="`/economique/modele-eco/${prevChapter.stem?.split('/').pop()}`"
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="`/economique/modele-eco/${nextChapter.stem?.split('/').pop()}`"
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
// Scroll to top when navigating between chapters (component reused by Vue Router)
watch(() => slug, () => {
if (import.meta.client) window.scrollTo({ top: 0, behavior: 'instant' })
})
// 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é' })
}
useSeoPage({
title: chapter.value?.title ?? slug,
description: chapter.value?.description as string ?? `Chapitre « ${chapter.value?.title} » — Une économie du don, enfin concevable.`,
image: '/images/Couv-Economie-du-don.jpg',
type: 'article',
})
// 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?.split('/').pop() === 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>