librodrome/app/pages/economique/modele-eco/index.vue

<template>
  <div class="oiseaux-scene relative overflow-hidden section-padding">
    <div class="container-content">
      <!-- Page de couverture du livre -->
      <HomeBookSection
        class="mb-10 hero-compact"
        :show-chapters="false"
        @open-player="showBookPlayer = true"
        @open-pdf="showPdfReader = true"
      />

      <header class="mb-10 text-center">
        <p class="relative mb-2 font-mono text-sm tracking-widest text-primary uppercase">
          {{ content?.kicker }}
          <!-- Phone: the title fills the width; the bird stands at the end of this line -->
          <UiOiseauPose nom="relieur" pose="perche" right="4px" bottom="0px" :w="72" mobile-seul />
        </p>
        <h1 class="page-title relative font-display font-bold tracking-tight" style="color: hsl(var(--color-text))">
          {{ content?.title }}
          <UiOiseauPose nom="relieur" pose="perche" left="calc(24% - 54px)" bottom="-4px" :w="108" :seuil="1200" />
        </h1>
        <p class="mt-3 mx-auto max-w-2xl text-sm" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>
      </header>

      <div class="mx-auto max-w-3xl">
        <ul class="flex flex-col gap-3">
          <li
            v-for="chapter in chapters"
            :key="chapter.path"
            class="relative"
          >
            <UiOiseauPose v-for="o in OISEAUX_CHAPITRE[chapter.stem?.split('/').pop() ?? ''] ?? []" :key="`${o.nom}-${o.pose}`" v-bind="o" />
            <NuxtLink
              :to="`/economique/modele-eco/${chapter.stem?.split('/').pop()}`"
              class="card-surface flex items-start gap-4 group"
            >
              <span class="font-mono text-2xl font-bold text-primary/30 leading-none mt-1 w-10 text-right flex-shrink-0">
                {{ String(chapter.order).padStart(2, '0') }}
              </span>
              <div class="min-w-0 flex-1">
                <div class="flex items-baseline gap-2 flex-wrap">
                  <h2 class="font-display text-lg font-semibold text-white group-hover:text-primary transition-colors">
                    {{ chapter.title }}
                  </h2>
                  <span v-if="chapter.page" class="text-xs font-mono text-white/30 flex-shrink-0">p.&nbsp;{{ chapter.page }}</span>
                </div>
                <p v-if="chapter.description" class="mt-1 text-sm text-white/50">
                  {{ chapter.description }}
                </p>
                <div class="mt-2 flex items-center gap-3">
                  <span v-if="chapter.readingTime" class="text-xs text-white/30">
                    <span class="i-lucide-clock inline-block h-3 w-3 mr-1 align-middle" />
                    {{ chapter.readingTime }}
                  </span>
                  <SongBadges :chapter-slug="chapter.stem?.split('/').pop() ?? ''" />
                </div>
              </div>
              <div class="i-lucide-chevron-right h-5 w-5 text-white/20 group-hover:text-primary/60 transition-colors flex-shrink-0 mt-2" />
            </NuxtLink>
          </li>
        </ul>
      </div>
    </div>

    <BookPlayer v-model="showBookPlayer" />
    <BookPdfReader v-model="showPdfReader" />
  </div>
</template>

<script setup lang="ts">
import type { OiseauPlace } from '~/utils/oiseauPose'

// Birds along the chapters, each by the one its trade tells (irregular intervals). The cards
// stand 12 px apart: no room above them for a perched bird (DA rule of 03/11)
const OISEAUX_CHAPITRE: Record<string, OiseauPlace[]> = {
  '01-introduction': [{ nom: 'conteuse', pose: 'marge-g', ecart: '50px', w: 122 }],
  '03-mesure': [{ nom: 'la-balance', pose: 'marge-d', ecart: '40px', w: 112, retourne: true }],
  '07-echanger': [{ nom: 'colporteur', pose: 'marge-g', ecart: '44px', w: 116 }],
  '08-institution': [{ nom: 'empileur', pose: 'marge-d', ecart: '90px', w: 104, retourne: true }],
  '11-annexes': [{ nom: 'illustratrice', pose: 'derriere', left: 'calc(100% - 110px)', bottom: '-40px', w: 220 }],
}

definePageMeta({
  layout: 'default',
})

const { data: content } = await usePageContent('economique/modele-eco')

useSeoPage({
  title: content.value?.meta?.title ?? 'Une économie du don — Table des matières',
  description: 'Onze chapitres pour explorer les fondements d\'une économie fondée sur le don, la mesure et la monnaie libre.',
  image: '/images/Couv-Economie-du-don.jpg',
  type: 'book',
})

const { data: chapters } = await useAsyncData('book-toc', () =>
  queryCollection('book').order('order', 'ASC').all(),
)

const showBookPlayer = ref(false)
const showPdfReader = ref(false)
</script>

<style scoped>
.page-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}

/* Compact the HomeBookSection hero */
:deep(.hero-compact .book-hero),
:deep(.hero-compact .section-hero) {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
:deep(.hero-compact img),
:deep(.hero-compact .book-cover) {
  max-height: 260px;
}
:deep(.hero-compact h1),
:deep(.hero-compact .hero-title) {
  font-size: clamp(1.4rem, 3vw, 2rem);
}
:deep(.hero-compact .hero-description) {
  font-size: 0.9rem;
}

</style>