yvv/librodrome
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initiation librodrome

Browse Source
This commit is contained in:
Yvv
2026-02-20 12:55:10 +01:00
commit 35e2897a73
208 changed files with 18951 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
app/components/book/BookPdfReader.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<Teleport to="body">
<Transition name="pdf-overlay">
<div
v-if="isOpen"
class="pdf-reader"
@keydown.escape="close"
tabindex="0"
ref="overlayRef"
>
<!-- Top bar -->
<div class="pdf-bar">
<div class="pdf-bar-title">
<div class="i-lucide-book-open h-4 w-4 text-accent" />
<span>{{ bpContent?.pdf.barTitle }}</span>
</div>
<button class="pdf-close" @click="close" aria-label="Fermer">
<div class="i-lucide-x h-5 w-5" />
</button>
</div>
<!-- PDF embed -->
<div class="pdf-viewport">
<iframe
:src="pdfUrl"
class="pdf-frame"
:title="bpContent?.pdf.iframeTitle"
/>
</div>
</div>
</Transition>
</Teleport>
</template>
<script setup lang="ts">
const props = defineProps<{ modelValue: boolean }>()
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
const { data: bpContent } = await usePageContent('book-player')
const overlayRef = ref<HTMLElement>()
const isOpen = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
})
const pdfUrl = '/pdf/une-economie-du-don.pdf'
function close() {
isOpen.value = false
}
watch(isOpen, (open) => {
if (open) {
nextTick(() => overlayRef.value?.focus())
}
if (import.meta.client) {
document.body.style.overflow = open ? 'hidden' : ''
}
})
onUnmounted(() => {
if (import.meta.client) document.body.style.overflow = ''
})
</script>
<style scoped>
.pdf-reader {
position: fixed;
inset: 0;
z-index: 60;
background: hsl(20 8% 4%);
display: flex;
flex-direction: column;
outline: none;
}
.pdf-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
background: hsl(20 8% 6% / 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid hsl(20 8% 14%);
flex-shrink: 0;
}
.pdf-bar-title {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-display, 'Syne', sans-serif);
font-size: 0.9rem;
font-weight: 600;
color: white;
}
.pdf-close {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: hsl(20 8% 10%);
color: hsl(20 8% 55%);
border: 1px solid hsl(20 8% 18%);
cursor: pointer;
transition: all 0.3s;
}
.pdf-close:hover {
background: hsl(12 76% 48% / 0.2);
color: white;
border-color: hsl(12 76% 48% / 0.3);
}
.pdf-viewport {
flex: 1;
position: relative;
overflow: hidden;
}
.pdf-frame {
width: 100%;
height: 100%;
border: none;
background: white;
}
/* Overlay transitions */
.pdf-overlay-enter-active {
animation: pdf-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pdf-overlay-leave-active {
animation: pdf-enter 0.3s cubic-bezier(0.7, 0, 0.84, 0) reverse both;
}
@keyframes pdf-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
</style>

1002
app/components/book/BookPlayer.vue Normal file
View File

File diff suppressed because it is too large Load Diff

11
app/components/book/ChapterContent.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<article class="prose">
<ContentRenderer :value="content" />
</article>
</template>
<script setup lang="ts">
defineProps<{
content: any
}>()
</script>

62
app/components/book/ChapterHeader.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<header class="mb-8">
<div class="mb-2 flex items-center gap-2">
<span class="font-mono text-sm text-primary/70">
Chapitre {{ order }}
</span>
<span v-if="readingTime" class="text-xs text-white/30">
· {{ readingTime }}
</span>
</div>
<h1 class="chapter-title font-display font-bold leading-tight tracking-tight text-white">
{{ title }}
</h1>
<p v-if="description" class="mt-3 text-lg text-white/60">
{{ description }}
</p>
<!-- Associated songs badges -->
<div v-if="songs.length > 0" class="mt-4 flex flex-wrap gap-2">
<button
v-for="song in songs"
:key="song.id"
class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
@click="playSong(song)"
>
<div class="i-lucide-music h-3 w-3" />
{{ song.title }}
</button>
</div>
</header>
</template>
<script setup lang="ts">
import type { Song } from '~/types/song'
const props = defineProps<{
title: string
description?: string
order: number
readingTime?: string
chapterSlug: string
}>()
const bookData = useBookData()
const { loadAndPlay } = useAudioPlayer()
await bookData.init()
const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
function playSong(song: Song) {
loadAndPlay(song)
}
</script>
<style scoped>
.chapter-title {
font-size: clamp(2rem, 5vw, 2.75rem);
padding-bottom: 0.75rem;
border-bottom: 2px solid hsl(12 76% 48% / 0.4);
}
</style>

27
app/components/book/ChapterNav.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<nav class="chapter-nav" aria-label="Navigation des chapitres">
<h2 class="mb-4 font-display text-sm font-semibold uppercase tracking-wider text-white/40">
Chapitres
</h2>
<ul class="flex flex-col gap-1">
<li v-for="chapter in chapters" :key="chapter.path">
<NuxtLink
:to="`/lire/${chapter.stem}`"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-white/5"
active-class="bg-primary/10 text-primary font-medium"
>
<span class="font-mono text-xs text-white/30 w-5 text-right">
{{ chapter.order }}
</span>
<span class="truncate">{{ chapter.title }}</span>
</NuxtLink>
</li>
</ul>
</nav>
</template>
<script setup lang="ts">
const { data: chapters } = await useAsyncData('book-chapters', () =>
queryCollection('book').order('order', 'ASC').all(),
)
</script>