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>

app/composables/useAudioPlayer.ts

@@ -2,9 +2,12 @@ import type { Song } from '~/types/song'
 
 let audio: HTMLAudioElement | null = null
 let animationFrameId: number | null = null
+// Track which milestones have been fired for the current song
+const firedMilestones = new Set<number>()
 
 export function useAudioPlayer() {
   const store = usePlayerStore()
+  const { trackAudioPlay, trackAudioComplete, trackAudioProgress } = useTracking()
 
   function getAudio(): HTMLAudioElement {
     if (!audio) {
@@ -17,6 +20,10 @@ export function useAudioPlayer() {
       })
 
       audio.addEventListener('ended', () => {
+        if (store.currentSong) {
+          trackAudioComplete(store.currentSong.id, store.currentSong.title)
+        }
+        firedMilestones.clear()
         const next = store.nextSong()
         if (next) {
           loadAndPlay(next)
@@ -36,6 +43,16 @@ export function useAudioPlayer() {
     const update = () => {
       if (audio && !audio.paused) {
         store.setCurrentTime(audio.currentTime)
+        // Track progress milestones (25 / 50 / 75 %)
+        if (audio.duration > 0 && store.currentSong) {
+          const pct = (audio.currentTime / audio.duration) * 100
+          for (const milestone of [25, 50, 75] as const) {
+            if (pct >= milestone && !firedMilestones.has(milestone)) {
+              firedMilestones.add(milestone)
+              trackAudioProgress(store.currentSong.id, milestone)
+            }
+          }
+        }
       }
       animationFrameId = requestAnimationFrame(update)
     }
@@ -52,6 +69,7 @@ export function useAudioPlayer() {
   async function loadAndPlay(song: Song) {
     const el = getAudio()
     store.setSong(song)
+    firedMilestones.clear()
 
     // Try OGG first, fall back to MP3
     const oggPath = song.file.replace(/\.mp3$/, '.ogg')
@@ -64,6 +82,7 @@ export function useAudioPlayer() {
       await el.play()
       store.play()
       startTimeUpdate()
+      trackAudioPlay(song.id, song.title)
     }
     catch {
       // If OGG failed, try MP3
@@ -73,6 +92,7 @@ export function useAudioPlayer() {
           await el.play()
           store.play()
           startTimeUpdate()
+          trackAudioPlay(song.id, song.title)
         }
         catch (err) {
           console.error('Playback failed:', err)

app/composables/useScrollTracking.ts

@@ -0,0 +1,55 @@
+/**
+ * Tracks scroll depth milestones (25 / 50 / 75 / 100 %) on each page.
+ * Also intercepts external link clicks and tracks them.
+ *
+ * Usage: call once in default.vue layout.
+ */
+export function useScrollTracking() {
+  const route = useRoute()
+  const { trackScrollDepth, trackExternalLink } = useTracking()
+
+  // ── Scroll depth ────────────────────────────────────────────────────────
+  const fired = new Set<number>()
+
+  function onScroll() {
+    const el = document.documentElement
+    const scrolled = el.scrollTop + el.clientHeight
+    const total = el.scrollHeight
+    if (total <= el.clientHeight) return
+    const pct = (scrolled / total) * 100
+
+    for (const milestone of [25, 50, 75, 100] as const) {
+      if (pct >= milestone && !fired.has(milestone)) {
+        fired.add(milestone)
+        trackScrollDepth(route.path, milestone)
+      }
+    }
+  }
+
+  // Reset fired milestones on route change
+  watch(() => route.path, () => fired.clear())
+
+  // ── External link tracking ───────────────────────────────────────────────
+  function onLinkClick(e: MouseEvent) {
+    const target = (e.target as HTMLElement).closest('a')
+    if (!target) return
+    const href = target.getAttribute('href') || ''
+    if (!href.startsWith('http') && !href.startsWith('//')) return
+    try {
+      const url = new URL(href)
+      if (url.hostname === 'librodrome.org') return
+      trackExternalLink(href, target.textContent?.trim() || '')
+    }
+    catch { /* invalid URL, ignore */ }
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', onScroll, { passive: true })
+    document.addEventListener('click', onLinkClick)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+    document.removeEventListener('click', onLinkClick)
+  })
+}

app/composables/useSeoPage.ts

@@ -0,0 +1,52 @@
+/**
+ * Applique toutes les balises SEO (og:*, Twitter Cards, canonical, description)
+ * à partir du contenu YAML d'une page.
+ *
+ * Usage dans les pages :
+ *   useSeoPage({ title: content.value?.meta?.title, description: content.value?.description })
+ *
+ * L'og:image par défaut est /og-default.png (logo §).
+ * Chaque section peut surcharger avec son propre image via le champ seo.image du YAML.
+ */
+export function useSeoPage(opts: {
+  title?: string | null
+  description?: string | null
+  image?: string | null
+  type?: 'website' | 'article' | 'book'
+}) {
+  const config = useRuntimeConfig()
+  const route = useRoute()
+  const siteUrl = (config.public.siteUrl as string) || 'https://librodrome.org'
+
+  const title = opts.title || 'Le Librodrome'
+  const description = opts.description
+    || 'Autonomie numérique, économique et citoyenne. Un livre et des chansons sur l\'économie du don.'
+  const rawImage = opts.image || '/og-default.png'
+  const image = rawImage.startsWith('http') ? rawImage : `${siteUrl}${rawImage}`
+  const canonical = `${siteUrl}${route.path}`
+  const type = opts.type || 'website'
+
+  useSeoMeta({
+    // Open Graph
+    ogTitle: title,
+    ogDescription: description,
+    ogImage: image,
+    ogImageWidth: 1200,
+    ogImageHeight: 630,
+    ogUrl: canonical,
+    ogType: type,
+    ogSiteName: 'Le Librodrome',
+    ogLocale: 'fr_FR',
+    // Twitter Cards
+    twitterCard: 'summary_large_image',
+    twitterTitle: title,
+    twitterDescription: description,
+    twitterImage: image,
+    // Standard
+    description,
+  })
+
+  useHead({
+    link: [{ rel: 'canonical', href: canonical }],
+  })
+}

app/composables/useTracking.ts

@@ -1,13 +1,19 @@
 /**
  * Umami analytics wrapper — safe server-side, no-op when not configured.
- * Usage: const { track } = useTracking()
- *        track('player:open')
- *        track('axis:navigate', { axis: 'numerique' })
+ *
+ * Events convention:
+ *   audio:play | audio:pause | audio:complete | audio:progress
+ *   pdf:open   | pdf:close
+ *   player:open | player:chapter | player:mode
+ *   scroll:depth
+ *   link:external
+ *   cta:click
  */
 export function useTracking() {
   const runtimeConfig = useRuntimeConfig()
   const enabled = !!runtimeConfig.public.umamiWebsiteId
 
+  // ── Core ────────────────────────────────────────────────────────────────
   function track(event: string, data?: Record<string, unknown>) {
     if (!import.meta.client || !enabled) return
     const umami = (window as Record<string, unknown>).umami as
@@ -16,5 +22,75 @@ export function useTracking() {
     umami?.track(event, data)
   }
 
-  return { track, enabled }
+  // ── Audio ────────────────────────────────────────────────────────────────
+  function trackAudioPlay(songId: string, songTitle: string, context?: string) {
+    track('audio:play', { song_id: songId, song_title: songTitle, context })
+  }
+
+  function trackAudioPause(songId: string, progressPct: number) {
+    track('audio:pause', { song_id: songId, progress_pct: progressPct })
+  }
+
+  function trackAudioComplete(songId: string, songTitle: string) {
+    track('audio:complete', { song_id: songId, song_title: songTitle })
+  }
+
+  /** Fired at 25 / 50 / 75 % milestones */
+  function trackAudioProgress(songId: string, milestone: 25 | 50 | 75) {
+    track('audio:progress', { song_id: songId, milestone })
+  }
+
+  // ── PDF ──────────────────────────────────────────────────────────────────
+  function trackPdfOpen(trigger?: string) {
+    track('pdf:open', { trigger })
+  }
+
+  function trackPdfClose(pagesVisited: number, durationMs: number) {
+    track('pdf:close', { pages_visited: pagesVisited, duration_ms: durationMs })
+  }
+
+  // ── BookPlayer ───────────────────────────────────────────────────────────
+  function trackPlayerOpen(trigger?: string) {
+    track('player:open', { trigger })
+  }
+
+  function trackPlayerChapter(chapterSlug: string) {
+    track('player:chapter', { chapter_slug: chapterSlug })
+  }
+
+  function trackPlayerMode(mode: 'guided' | 'scroll') {
+    track('player:mode', { mode })
+  }
+
+  // ── Navigation & UX ──────────────────────────────────────────────────────
+  function trackScrollDepth(page: string, depth: 25 | 50 | 75 | 100) {
+    track('scroll:depth', { page, depth })
+  }
+
+  function trackExternalLink(url: string, label?: string) {
+    const route = useRoute()
+    track('link:external', { url, label, from_page: route.path })
+  }
+
+  function trackCta(label: string, target?: string) {
+    const route = useRoute()
+    track('cta:click', { label, target, from_page: route.path })
+  }
+
+  return {
+    track,
+    enabled,
+    trackAudioPlay,
+    trackAudioPause,
+    trackAudioComplete,
+    trackAudioProgress,
+    trackPdfOpen,
+    trackPdfClose,
+    trackPlayerOpen,
+    trackPlayerChapter,
+    trackPlayerMode,
+    trackScrollDepth,
+    trackExternalLink,
+    trackCta,
+  }
 }