72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<template>
|
|
<div class="section-padding">
|
|
<div class="container-content">
|
|
<header class="mb-12 text-center">
|
|
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
|
|
<h1 class="page-title font-display font-bold tracking-tight text-white">
|
|
{{ content?.title }}
|
|
</h1>
|
|
<p class="mt-4 mx-auto max-w-2xl text-white/60">
|
|
{{ 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"
|
|
>
|
|
<NuxtLink
|
|
:to="`/lire/${chapter.stem}`"
|
|
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">
|
|
<h2 class="font-display text-lg font-semibold text-white group-hover:text-primary transition-colors">
|
|
{{ chapter.title }}
|
|
</h2>
|
|
<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!" />
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const { data: content } = await usePageContent('lire')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Table des matières',
|
|
})
|
|
|
|
const { data: chapters } = await useAsyncData('book-toc', () =>
|
|
queryCollection('book').order('order', 'ASC').all(),
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
font-size: clamp(2rem, 5vw, 2.75rem);
|
|
}
|
|
</style>
|