Yvv
8408fd6466
ci/woodpecker/push/woodpecker Pipeline was successful
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>
74 lines
3.2 KiB
Vue
74 lines
3.2 KiB
Vue
<template>
|
|
<div class="relative overflow-hidden section-padding">
|
|
<!-- Shadok philosopher: character sitting cross-legged, floating -->
|
|
<svg class="shadok-philosopher" viewBox="0 0 220 280" fill="none" aria-hidden="true">
|
|
<!-- Body (round, serene) -->
|
|
<ellipse cx="110" cy="150" rx="48" ry="55" fill="currentColor" opacity="0.85"/>
|
|
<!-- Head -->
|
|
<ellipse cx="110" cy="82" rx="26" ry="25" fill="currentColor" opacity="0.8"/>
|
|
<!-- Closed eyes (meditating) -->
|
|
<path d="M96 80 Q100 84 105 80" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<path d="M115 80 Q119 84 124 80" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<!-- Serene smile -->
|
|
<path d="M102 93 Q110 98 118 93" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
<!-- Arms resting on knees -->
|
|
<path d="M64 155 Q55 180 70 200" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
|
|
<path d="M156 155 Q165 180 150 200" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
|
|
<!-- Hands on knees -->
|
|
<circle cx="70" cy="200" r="5" fill="currentColor" opacity="0.4"/>
|
|
<circle cx="150" cy="200" r="5" fill="currentColor" opacity="0.4"/>
|
|
<!-- Crossed legs -->
|
|
<path d="M80 205 Q90 230 120 235" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
|
|
<path d="M140 205 Q130 230 100 235" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
|
|
<!-- Floating aura lines -->
|
|
<path d="M50 245 Q110 260 170 245" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 4" fill="none" opacity="0.25"/>
|
|
<path d="M60 255 Q110 268 160 255" stroke="currentColor" stroke-width="1" stroke-dasharray="3 5" fill="none" opacity="0.18"/>
|
|
<!-- Small sparkles around -->
|
|
<circle cx="55" cy="110" r="2.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="170" cy="95" r="2" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="160" cy="130" r="3" fill="currentColor" opacity="0.15"/>
|
|
</svg>
|
|
|
|
<div class="container-content mx-auto max-w-3xl">
|
|
<ContentRenderer v-if="page" :value="page" class="prose" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
useSeoPage({
|
|
title: 'À propos — Le Librodrome',
|
|
description: 'Le Librodrome : l\'histoire du projet, la démarche et les personnes derrière le livre et les outils d\'autonomie.',
|
|
})
|
|
|
|
const { data: page } = await useAsyncData('about', () =>
|
|
queryCollection('pages').path('/pages/about').first(),
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.shadok-philosopher {
|
|
position: absolute;
|
|
right: 3%;
|
|
bottom: 6%;
|
|
width: clamp(120px, 15vw, 220px);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-float-philosopher 11s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shadok-float-philosopher {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12px); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.shadok-philosopher { display: none; }
|
|
}
|
|
</style>
|