initiation librodrome
This commit is contained in:
Yvv
21
app/pages/a-propos.vue
Normal file
21
app/pages/a-propos.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="section-padding">
|
||||
<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',
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'À propos',
|
||||
})
|
||||
|
||||
const { data: page } = await useAsyncData('about', () =>
|
||||
queryCollection('pages').path('/pages/about').first(),
|
||||
)
|
||||
</script>
|
||||
94
app/pages/admin/book/[slug].vue
Normal file
94
app/pages/admin/book/[slug].vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<NuxtLink to="/admin/book" class="text-sm text-white/40 hover:text-white/60 transition-colors">
|
||||
← Chapitres
|
||||
</NuxtLink>
|
||||
<h1 class="font-display text-2xl font-bold text-white mt-1">
|
||||
{{ chapter?.slug }}
|
||||
</h1>
|
||||
</div>
|
||||
<AdminSaveButton :saving="saving" :saved="saved" @save="save" />
|
||||
</div>
|
||||
|
||||
<template v-if="chapter">
|
||||
<AdminFormSection title="Frontmatter" open>
|
||||
<textarea
|
||||
v-model="frontmatter"
|
||||
class="fm-textarea"
|
||||
rows="6"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</AdminFormSection>
|
||||
|
||||
<AdminFormSection title="Contenu Markdown" open>
|
||||
<AdminMarkdownEditor v-model="body" :rows="30" />
|
||||
</AdminFormSection>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const slug = computed(() => route.params.slug as string)
|
||||
|
||||
const { data: chapter } = await useFetch(() => `/api/admin/chapters/${slug.value}`)
|
||||
|
||||
const frontmatter = ref('')
|
||||
const body = ref('')
|
||||
|
||||
watch(chapter, (val) => {
|
||||
if (val) {
|
||||
frontmatter.value = val.frontmatter ?? ''
|
||||
body.value = val.body ?? ''
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const saving = ref(false)
|
||||
const saved = ref(false)
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
saved.value = false
|
||||
try {
|
||||
await $fetch(`/api/admin/chapters/${slug.value}`, {
|
||||
method: 'PUT',
|
||||
body: {
|
||||
frontmatter: frontmatter.value,
|
||||
body: body.value,
|
||||
},
|
||||
})
|
||||
saved.value = true
|
||||
setTimeout(() => { saved.value = false }, 2000)
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fm-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(20 8% 4%);
|
||||
color: hsl(36 80% 76%);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.7;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.fm-textarea:focus {
|
||||
outline: none;
|
||||
border-color: hsl(12 76% 48% / 0.5);
|
||||
}
|
||||
</style>
|
||||
59
app/pages/admin/book/index.vue
Normal file
59
app/pages/admin/book/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="font-display text-2xl font-bold text-white mb-6">Chapitres</h1>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<NuxtLink
|
||||
v-for="chapter in chapters"
|
||||
:key="chapter.slug"
|
||||
:to="`/admin/book/${chapter.slug}`"
|
||||
class="chapter-item"
|
||||
>
|
||||
<span class="chapter-order">{{ String(chapter.order ?? 0).padStart(2, '0') }}</span>
|
||||
<span class="chapter-title">{{ chapter.title }}</span>
|
||||
<div class="i-lucide-chevron-right h-4 w-4 text-white/20" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const { data: chapters } = await useFetch('/api/admin/chapters')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chapter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid hsl(20 8% 14%);
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.chapter-item:hover {
|
||||
border-color: hsl(12 76% 48% / 0.3);
|
||||
background: hsl(20 8% 6%);
|
||||
}
|
||||
|
||||
.chapter-order {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.85rem;
|
||||
color: hsl(12 76% 48% / 0.5);
|
||||
font-weight: 600;
|
||||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
flex: 1;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
60
app/pages/admin/index.vue
Normal file
60
app/pages/admin/index.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="font-display text-2xl font-bold text-white mb-6">Dashboard</h1>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<NuxtLink to="/admin/site" class="dash-card">
|
||||
<div class="i-lucide-globe h-8 w-8 text-primary mb-2" />
|
||||
<h2 class="text-lg font-semibold text-white">Site</h2>
|
||||
<p class="text-sm text-white/50">Identité, navigation, footer</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/pages/home" class="dash-card">
|
||||
<div class="i-lucide-home h-8 w-8 text-primary mb-2" />
|
||||
<h2 class="text-lg font-semibold text-white">Pages</h2>
|
||||
<p class="text-sm text-white/50">Contenus des pages publiques</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/book" class="dash-card">
|
||||
<div class="i-lucide-book-open h-8 w-8 text-primary mb-2" />
|
||||
<h2 class="text-lg font-semibold text-white">Chapitres</h2>
|
||||
<p class="text-sm text-white/50">Éditer le contenu du livre</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/songs" class="dash-card">
|
||||
<div class="i-lucide-music h-8 w-8 text-accent mb-2" />
|
||||
<h2 class="text-lg font-semibold text-white">Chansons</h2>
|
||||
<p class="text-sm text-white/50">Métadonnées des pistes</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/admin/media" class="dash-card">
|
||||
<div class="i-lucide-image h-8 w-8 text-accent mb-2" />
|
||||
<h2 class="text-lg font-semibold text-white">Médias</h2>
|
||||
<p class="text-sm text-white/50">Images, audio, PDF</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dash-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(20 8% 14%);
|
||||
background: hsl(20 8% 6%);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dash-card:hover {
|
||||
border-color: hsl(12 76% 48% / 0.3);
|
||||
background: hsl(20 8% 8%);
|
||||
}
|
||||
</style>
|
||||
134
app/pages/admin/login.vue
Normal file
134
app/pages/admin/login.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<form class="login-form" @submit.prevent="login">
|
||||
<div class="i-lucide-lock h-10 w-10 text-primary mb-4 mx-auto" />
|
||||
<h1 class="font-display text-2xl font-bold text-white text-center mb-6">Administration</h1>
|
||||
|
||||
<div v-if="error" class="login-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<label class="login-label" for="password">Mot de passe</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="login-input"
|
||||
placeholder="Entrez le mot de passe"
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<button type="submit" class="login-btn" :disabled="loading">
|
||||
<div v-if="loading" class="i-lucide-loader-2 h-4 w-4 animate-spin" />
|
||||
Se connecter
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
})
|
||||
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function login() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
await $fetch('/api/admin/auth/login', {
|
||||
method: 'POST',
|
||||
body: { password: password.value },
|
||||
})
|
||||
navigateTo('/admin')
|
||||
}
|
||||
catch {
|
||||
error.value = 'Mot de passe incorrect'
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: hsl(20 8% 3.5%);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
padding: 2.5rem;
|
||||
border: 1px solid hsl(20 8% 14%);
|
||||
border-radius: 1rem;
|
||||
background: hsl(20 8% 6%);
|
||||
}
|
||||
|
||||
.login-error {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(0 60% 45% / 0.15);
|
||||
color: hsl(0 60% 70%);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.login-label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: hsl(20 8% 60%);
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.login-input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
background: hsl(20 8% 4%);
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.login-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(12 76% 48% / 0.5);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background: hsl(12 76% 48%);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.login-btn:hover:not(:disabled) {
|
||||
background: hsl(12 76% 42%);
|
||||
}
|
||||
|
||||
.login-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: wait;
|
||||
}
|
||||
</style>
|
||||
32
app/pages/admin/media.vue
Normal file
32
app/pages/admin/media.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="font-display text-2xl font-bold text-white mb-6">Médias</h1>
|
||||
|
||||
<AdminMediaUpload class="mb-6" @uploaded="refresh" />
|
||||
|
||||
<AdminMediaBrowser
|
||||
v-if="files"
|
||||
:files="files"
|
||||
@delete="deleteFile"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const { data: files, refresh } = await useFetch('/api/admin/media')
|
||||
|
||||
async function deleteFile(path: string) {
|
||||
if (!confirm(`Supprimer ${path} ?`)) return
|
||||
|
||||
// Remove leading slash for the API path
|
||||
const apiPath = path.startsWith('/') ? path.slice(1) : path
|
||||
|
||||
await $fetch(`/api/admin/media/${apiPath}`, { method: 'DELETE' })
|
||||
await refresh()
|
||||
}
|
||||
</script>
|
||||
209
app/pages/admin/messages.vue
Normal file
209
app/pages/admin/messages.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="font-display text-2xl font-bold text-white">Messages</h1>
|
||||
<span class="text-sm text-white/40">{{ messages?.length || 0 }} message(s)</span>
|
||||
</div>
|
||||
|
||||
<div v-if="messages?.length" class="space-y-3">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
class="msg-row"
|
||||
:class="{ 'msg-row--draft': !msg.published }"
|
||||
>
|
||||
<!-- En-tête -->
|
||||
<div class="flex items-center justify-between gap-4 mb-2">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="font-semibold text-white text-sm truncate">{{ msg.author }}</span>
|
||||
<span v-if="msg.email" class="text-white/30 text-xs truncate">{{ msg.email }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<span class="text-xs text-white/30">{{ formatDate(msg.createdAt) }}</span>
|
||||
<span
|
||||
class="status-badge"
|
||||
:class="msg.published ? 'status-badge--pub' : 'status-badge--draft'"
|
||||
>
|
||||
{{ msg.published ? 'Publié' : 'En attente' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Texte éditable -->
|
||||
<div v-if="editing === msg.id" class="mb-3">
|
||||
<input
|
||||
v-model="editForm.author"
|
||||
class="admin-input mb-2 w-full"
|
||||
placeholder="Auteur"
|
||||
/>
|
||||
<textarea
|
||||
v-model="editForm.text"
|
||||
class="admin-input w-full"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
<p v-else class="text-white/70 text-sm leading-relaxed mb-3">{{ msg.text }}</p>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="action-btn" @click="togglePublished(msg)">
|
||||
<div :class="msg.published ? 'i-lucide-eye-off' : 'i-lucide-eye'" class="h-3.5 w-3.5" />
|
||||
{{ msg.published ? 'Dépublier' : 'Publier' }}
|
||||
</button>
|
||||
|
||||
<template v-if="editing === msg.id">
|
||||
<button class="action-btn action-btn--save" @click="saveEdit(msg)">
|
||||
<div class="i-lucide-check h-3.5 w-3.5" />
|
||||
Valider
|
||||
</button>
|
||||
<button class="action-btn" @click="editing = null">
|
||||
Annuler
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="action-btn" @click="startEdit(msg)">
|
||||
<div class="i-lucide-pencil h-3.5 w-3.5" />
|
||||
Modifier
|
||||
</button>
|
||||
|
||||
<button class="action-btn action-btn--danger ml-auto" @click="remove(msg)">
|
||||
<div class="i-lucide-trash-2 h-3.5 w-3.5" />
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-else class="text-center text-white/40 py-12">Aucun message.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const { data: messages, refresh } = await useFetch<any[]>('/api/admin/messages')
|
||||
|
||||
const editing = ref<number | null>(null)
|
||||
const editForm = reactive({ author: '', text: '' })
|
||||
|
||||
function startEdit(msg: any) {
|
||||
editing.value = msg.id
|
||||
editForm.author = msg.author
|
||||
editForm.text = msg.text
|
||||
}
|
||||
|
||||
async function saveEdit(msg: any) {
|
||||
await $fetch(`/api/admin/messages/${msg.id}`, {
|
||||
method: 'PUT',
|
||||
body: { author: editForm.author, text: editForm.text },
|
||||
})
|
||||
editing.value = null
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function togglePublished(msg: any) {
|
||||
await $fetch(`/api/admin/messages/${msg.id}`, {
|
||||
method: 'PUT',
|
||||
body: { published: !msg.published },
|
||||
})
|
||||
await refresh()
|
||||
}
|
||||
|
||||
async function remove(msg: any) {
|
||||
if (!confirm(`Supprimer le message de "${msg.author}" ?`)) return
|
||||
await $fetch(`/api/admin/messages/${msg.id}`, { method: 'DELETE' })
|
||||
await refresh()
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.msg-row {
|
||||
background: hsl(20 8% 6%);
|
||||
border: 1px solid hsl(20 8% 14%);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.msg-row--draft {
|
||||
border-left: 3px solid hsl(36 80% 52%);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.status-badge--pub {
|
||||
background: hsl(142 70% 40% / 0.15);
|
||||
color: hsl(142 70% 60%);
|
||||
}
|
||||
|
||||
.status-badge--draft {
|
||||
background: hsl(36 80% 52% / 0.15);
|
||||
color: hsl(36 80% 66%);
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
background: hsl(20 8% 6%);
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(12 76% 48% / 0.5);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(20 8% 60%);
|
||||
background: none;
|
||||
border: 1px solid hsl(20 8% 16%);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: hsl(20 8% 10%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn--save {
|
||||
border-color: hsl(142 70% 40% / 0.3);
|
||||
color: hsl(142 70% 60%);
|
||||
}
|
||||
|
||||
.action-btn--save:hover {
|
||||
background: hsl(142 70% 40% / 0.1);
|
||||
}
|
||||
|
||||
.action-btn--danger:hover {
|
||||
background: hsl(0 70% 40% / 0.1);
|
||||
border-color: hsl(0 70% 40% / 0.3);
|
||||
color: hsl(0 70% 60%);
|
||||
}
|
||||
</style>
|
||||
98
app/pages/admin/pages/[name].vue
Normal file
98
app/pages/admin/pages/[name].vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<NuxtLink to="/admin" class="text-sm text-white/40 hover:text-white/60 transition-colors">
|
||||
← Dashboard
|
||||
</NuxtLink>
|
||||
<h1 class="font-display text-2xl font-bold text-white mt-1">
|
||||
Page : {{ pageName }}
|
||||
</h1>
|
||||
</div>
|
||||
<AdminSaveButton :saving="saving" :saved="saved" @save="save" />
|
||||
</div>
|
||||
|
||||
<div v-if="data" class="page-editor">
|
||||
<AdminFormSection title="Contenu YAML" open>
|
||||
<div class="yaml-editor-wrapper">
|
||||
<textarea
|
||||
v-model="yamlContent"
|
||||
class="yaml-textarea"
|
||||
rows="30"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</div>
|
||||
</AdminFormSection>
|
||||
</div>
|
||||
|
||||
<p v-else-if="error" class="text-red-400">
|
||||
Erreur de chargement : {{ error.message }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import yaml from 'yaml'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const pageName = computed(() => route.params.name as string)
|
||||
|
||||
const { data, error } = await useFetch(() => `/api/content/pages/${pageName.value}`)
|
||||
|
||||
const yamlContent = ref('')
|
||||
|
||||
watch(data, (val) => {
|
||||
if (val) {
|
||||
yamlContent.value = yaml.stringify(val, { lineWidth: 120 })
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const saving = ref(false)
|
||||
const saved = ref(false)
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
saved.value = false
|
||||
try {
|
||||
const parsed = yaml.parse(yamlContent.value)
|
||||
await $fetch(`/api/admin/content/pages/${pageName.value}`, {
|
||||
method: 'PUT',
|
||||
body: parsed,
|
||||
})
|
||||
saved.value = true
|
||||
setTimeout(() => { saved.value = false }, 2000)
|
||||
}
|
||||
catch (e: any) {
|
||||
alert('Erreur YAML : ' + (e?.message ?? 'format invalide'))
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.yaml-textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(20 8% 4%);
|
||||
color: hsl(36 80% 76%);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.7;
|
||||
resize: vertical;
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
.yaml-textarea:focus {
|
||||
outline: none;
|
||||
border-color: hsl(12 76% 48% / 0.5);
|
||||
}
|
||||
</style>
|
||||
116
app/pages/admin/site.vue
Normal file
116
app/pages/admin/site.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="font-display text-2xl font-bold text-white">Configuration du site</h1>
|
||||
<AdminSaveButton :saving="saving" :saved="saved" @save="save" />
|
||||
</div>
|
||||
|
||||
<template v-if="data">
|
||||
<AdminFormSection title="Identité" open>
|
||||
<AdminFieldText v-model="data.identity.name" label="Nom du site" />
|
||||
<AdminFieldTextarea v-model="data.identity.description" label="Description" :rows="3" />
|
||||
<AdminFieldText v-model="data.identity.url" label="URL" />
|
||||
</AdminFormSection>
|
||||
|
||||
<AdminFormSection title="Navigation" open>
|
||||
<AdminFieldList
|
||||
v-model="data.navigation"
|
||||
label="Liens de navigation"
|
||||
add-label="Ajouter un lien"
|
||||
:default-item="() => ({ label: '', to: '/' })"
|
||||
>
|
||||
<template #default="{ item, update }">
|
||||
<div class="flex gap-2 flex-1">
|
||||
<input
|
||||
:value="item.label"
|
||||
class="admin-input flex-1"
|
||||
placeholder="Label"
|
||||
@input="update({ ...item, label: ($event.target as HTMLInputElement).value })"
|
||||
/>
|
||||
<input
|
||||
:value="item.to"
|
||||
class="admin-input w-32"
|
||||
placeholder="/chemin"
|
||||
@input="update({ ...item, to: ($event.target as HTMLInputElement).value })"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</AdminFieldList>
|
||||
</AdminFormSection>
|
||||
|
||||
<AdminFormSection title="Pied de page">
|
||||
<AdminFieldText v-model="data.footer.credits" label="Crédits" />
|
||||
<AdminFieldList
|
||||
v-model="data.footer.links"
|
||||
label="Liens"
|
||||
add-label="Ajouter un lien"
|
||||
:default-item="() => ({ label: '', to: '/' })"
|
||||
>
|
||||
<template #default="{ item, update }">
|
||||
<div class="flex gap-2 flex-1">
|
||||
<input
|
||||
:value="item.label"
|
||||
class="admin-input flex-1"
|
||||
placeholder="Label"
|
||||
@input="update({ ...item, label: ($event.target as HTMLInputElement).value })"
|
||||
/>
|
||||
<input
|
||||
:value="item.to"
|
||||
class="admin-input w-32"
|
||||
placeholder="/chemin"
|
||||
@input="update({ ...item, to: ($event.target as HTMLInputElement).value })"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</AdminFieldList>
|
||||
</AdminFormSection>
|
||||
|
||||
<AdminFormSection title="GrateWizard">
|
||||
<AdminFieldText v-model="data.gratewizard.url" label="URL de l'application" />
|
||||
</AdminFormSection>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const { data } = await useFetch('/api/content/site')
|
||||
const saving = ref(false)
|
||||
const saved = ref(false)
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
saved.value = false
|
||||
try {
|
||||
await $fetch('/api/admin/content/site', {
|
||||
method: 'PUT',
|
||||
body: data.value,
|
||||
})
|
||||
saved.value = true
|
||||
setTimeout(() => { saved.value = false }, 2000)
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
background: hsl(20 8% 6%);
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(12 76% 48% / 0.5);
|
||||
}
|
||||
</style>
|
||||
92
app/pages/admin/songs.vue
Normal file
92
app/pages/admin/songs.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="font-display text-2xl font-bold text-white">Chansons</h1>
|
||||
<AdminSaveButton :saving="saving" :saved="saved" @save="save" />
|
||||
</div>
|
||||
|
||||
<template v-if="config">
|
||||
<AdminFormSection title="Métadonnées des chansons" open>
|
||||
<div
|
||||
v-for="(song, i) in config.songs"
|
||||
:key="i"
|
||||
class="song-row"
|
||||
>
|
||||
<span class="song-num">{{ i + 1 }}</span>
|
||||
<div class="flex-1 grid gap-2 sm:grid-cols-2">
|
||||
<input
|
||||
v-model="song.title"
|
||||
class="admin-input"
|
||||
placeholder="Titre"
|
||||
/>
|
||||
<input
|
||||
v-model="song.file"
|
||||
class="admin-input"
|
||||
placeholder="/audio/fichier.mp3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AdminFormSection>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: 'admin',
|
||||
})
|
||||
|
||||
const { data: config } = await useFetch('/api/content/config')
|
||||
const saving = ref(false)
|
||||
const saved = ref(false)
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
saved.value = false
|
||||
try {
|
||||
await $fetch('/api/admin/content/config', {
|
||||
method: 'PUT',
|
||||
body: config.value,
|
||||
})
|
||||
saved.value = true
|
||||
setTimeout(() => { saved.value = false }, 2000)
|
||||
}
|
||||
finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.song-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid hsl(20 8% 10%);
|
||||
}
|
||||
|
||||
.song-num {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 0.8rem;
|
||||
color: hsl(20 8% 40%);
|
||||
width: 1.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
background: hsl(20 8% 6%);
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
outline: none;
|
||||
border-color: hsl(12 76% 48% / 0.5);
|
||||
}
|
||||
</style>
|
||||
110
app/pages/ecouter/index.vue
Normal file
110
app/pages/ecouter/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<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-accent 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>
|
||||
|
||||
<!-- Search + view toggle -->
|
||||
<div class="mb-6 flex items-center justify-between gap-4">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<div class="i-lucide-search absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/30" />
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
:placeholder="content?.searchPlaceholder"
|
||||
class="w-full rounded-lg bg-surface border border-white/8 py-2 pl-10 pr-4 text-sm text-white placeholder:text-white/30 focus:border-primary/50 focus:outline-none"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1 rounded-lg bg-surface p-1">
|
||||
<button
|
||||
class="rounded p-1.5 transition-colors"
|
||||
:class="viewMode === 'list' ? 'bg-white/10 text-white' : 'text-white/40'"
|
||||
@click="viewMode = 'list'"
|
||||
>
|
||||
<div class="i-lucide-list h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
class="rounded p-1.5 transition-colors"
|
||||
:class="viewMode === 'grid' ? 'bg-white/10 text-white' : 'text-white/40'"
|
||||
@click="viewMode = 'grid'"
|
||||
>
|
||||
<div class="i-lucide-grid-3x3 h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Song list -->
|
||||
<div v-if="viewMode === 'list'" class="flex flex-col gap-2">
|
||||
<SongItem
|
||||
v-for="song in filteredSongs"
|
||||
:key="song.id"
|
||||
:song="song"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Song grid -->
|
||||
<div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<SongItem
|
||||
v-for="song in filteredSongs"
|
||||
:key="song.id"
|
||||
:song="song"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p v-if="filteredSongs.length === 0" class="text-center text-white/40 py-12">
|
||||
{{ content?.noResults }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
})
|
||||
|
||||
const { data: content } = await usePageContent('ecouter')
|
||||
|
||||
useHead({
|
||||
title: content.value?.meta?.title ?? 'Écouter',
|
||||
})
|
||||
|
||||
const store = usePlayerStore()
|
||||
const bookData = useBookData()
|
||||
const { loadFullPlaylist } = usePlaylist()
|
||||
|
||||
await bookData.init()
|
||||
|
||||
// Switch to free mode
|
||||
store.setMode('free')
|
||||
await loadFullPlaylist()
|
||||
|
||||
const search = ref('')
|
||||
const viewMode = ref<'list' | 'grid'>('list')
|
||||
|
||||
const filteredSongs = computed(() => {
|
||||
const songs = bookData.getSongs()
|
||||
if (!search.value.trim()) return songs
|
||||
|
||||
const q = search.value.toLowerCase()
|
||||
return songs.filter(
|
||||
s => s.title.toLowerCase().includes(q)
|
||||
|| s.artist.toLowerCase().includes(q)
|
||||
|| s.tags.some(t => t.toLowerCase().includes(q)),
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-title {
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
}
|
||||
</style>
|
||||
95
app/pages/gratewizard.vue
Normal file
95
app/pages/gratewizard.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="section-padding">
|
||||
<div class="container-content max-w-3xl mx-auto">
|
||||
<!-- Back link -->
|
||||
<UiScrollReveal>
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80 mb-8 transition-colors">
|
||||
<div class="i-lucide-arrow-left h-4 w-4" />
|
||||
Retour à l'accueil
|
||||
</NuxtLink>
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- Header -->
|
||||
<UiScrollReveal>
|
||||
<div class="text-center mb-12">
|
||||
<span class="inline-block mb-3 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
|
||||
{{ content?.kicker }}
|
||||
</span>
|
||||
<h1 class="page-title font-display font-bold text-white">
|
||||
{{ content?.title }}
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-white/60 leading-relaxed max-w-xl mx-auto">
|
||||
{{ content?.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- Explanation cards -->
|
||||
<div class="grid gap-6 md:grid-cols-2 mb-12">
|
||||
<UiScrollReveal
|
||||
v-for="(feature, i) in content?.features"
|
||||
:key="i"
|
||||
:delay="(i + 1) * 100"
|
||||
>
|
||||
<div class="gw-feature-card">
|
||||
<div :class="`i-lucide-${feature.icon}`" class="h-6 w-6 text-amber-400 mb-3" />
|
||||
<h3 class="font-display text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
|
||||
<p class="text-sm text-white/60 leading-relaxed">
|
||||
{{ feature.description }}
|
||||
</p>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<UiScrollReveal :delay="500">
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-white/40 mb-4">
|
||||
{{ content?.cta.note }}
|
||||
</p>
|
||||
<UiBaseButton @click="launch">
|
||||
<div class="i-lucide-external-link mr-2 h-5 w-5" />
|
||||
{{ content?.cta.label }}
|
||||
</UiBaseButton>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { data: content } = await usePageContent('gratewizard')
|
||||
|
||||
useHead({
|
||||
title: content.value?.meta?.title ?? 'GrateWizard — Coefficients relatifs',
|
||||
})
|
||||
|
||||
const { launch } = useGrateWizard()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-title {
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
}
|
||||
|
||||
.gw-feature-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(20 8% 18%);
|
||||
background: hsl(20 8% 8% / 0.5);
|
||||
transition: border-color 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
.gw-feature-card:hover {
|
||||
border-color: hsl(40 80% 50% / 0.25);
|
||||
background: hsl(20 8% 10% / 0.5);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85em;
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: 0.25em;
|
||||
background: hsl(40 80% 50% / 0.1);
|
||||
}
|
||||
</style>
|
||||
18
app/pages/index.vue
Normal file
18
app/pages/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<HomeHeroSection />
|
||||
<HomeBookSection @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
|
||||
<HomeGrateWizardTeaser />
|
||||
<BookPlayer v-model="showBookPlayer" />
|
||||
<BookPdfReader v-model="showPdfReader" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: 'Accueil',
|
||||
})
|
||||
|
||||
const showBookPlayer = ref(false)
|
||||
const showPdfReader = ref(false)
|
||||
</script>
|
||||
81
app/pages/lire/[slug].vue
Normal file
81
app/pages/lire/[slug].vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div v-if="chapter">
|
||||
<BookChapterHeader
|
||||
:title="chapter.title"
|
||||
:description="chapter.description"
|
||||
:order="chapter.order"
|
||||
:reading-time="chapter.readingTime"
|
||||
:chapter-slug="slug"
|
||||
/>
|
||||
|
||||
<BookChapterContent :content="chapter" />
|
||||
|
||||
<!-- Prev / Next navigation -->
|
||||
<nav class="mt-16 flex items-center justify-between border-t border-white/8 pt-8">
|
||||
<NuxtLink
|
||||
v-if="prevChapter"
|
||||
:to="`/lire/${prevChapter.stem}`"
|
||||
class="btn-ghost gap-2"
|
||||
>
|
||||
<div class="i-lucide-arrow-left h-4 w-4" />
|
||||
<span class="text-sm">{{ prevChapter.title }}</span>
|
||||
</NuxtLink>
|
||||
<div v-else />
|
||||
|
||||
<NuxtLink
|
||||
v-if="nextChapter"
|
||||
:to="`/lire/${nextChapter.stem}`"
|
||||
class="btn-ghost gap-2"
|
||||
>
|
||||
<span class="text-sm">{{ nextChapter.title }}</span>
|
||||
<div class="i-lucide-arrow-right h-4 w-4" />
|
||||
</NuxtLink>
|
||||
<div v-else />
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'reading',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
// Initialize guided mode
|
||||
useGuidedMode()
|
||||
|
||||
const { data: chapter } = await useAsyncData(`chapter-${slug}`, () =>
|
||||
queryCollection('book').path(`/book/${slug}`).first(),
|
||||
)
|
||||
|
||||
if (!chapter.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Chapitre non trouvé' })
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: chapter.value?.title,
|
||||
})
|
||||
|
||||
// Get adjacent chapters for navigation
|
||||
const { data: allChapters } = await useAsyncData('book-nav', () =>
|
||||
queryCollection('book').order('order', 'ASC').all(),
|
||||
)
|
||||
|
||||
const currentIndex = computed(() =>
|
||||
allChapters.value?.findIndex(c => c.stem === slug) ?? -1,
|
||||
)
|
||||
|
||||
const prevChapter = computed(() => {
|
||||
const idx = currentIndex.value
|
||||
if (idx <= 0 || !allChapters.value) return null
|
||||
return allChapters.value[idx - 1]
|
||||
})
|
||||
|
||||
const nextChapter = computed(() => {
|
||||
const idx = currentIndex.value
|
||||
if (!allChapters.value || idx >= allChapters.value.length - 1) return null
|
||||
return allChapters.value[idx + 1]
|
||||
})
|
||||
</script>
|
||||
71
app/pages/lire/index.vue
Normal file
71
app/pages/lire/index.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<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>
|
||||
50
app/pages/messages.vue
Normal file
50
app/pages/messages.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="section-padding">
|
||||
<div class="container-content mx-auto max-w-3xl">
|
||||
<h1 class="font-display text-3xl font-bold text-gradient mb-2">Messages des visiteurs</h1>
|
||||
<p class="text-white/50 mb-8">Les mots laissés par celles et ceux qui passent par ici.</p>
|
||||
|
||||
<div v-if="messages?.length" class="space-y-4">
|
||||
<div v-for="msg in messages" :key="msg.id" class="message-card">
|
||||
<p class="text-white/80 leading-relaxed">{{ msg.text }}</p>
|
||||
<div class="mt-3 flex items-center gap-2 text-xs text-white/40">
|
||||
<span class="font-semibold text-white/60">{{ msg.author }}</span>
|
||||
<span>·</span>
|
||||
<span>{{ formatDate(msg.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-else class="text-center text-white/40 py-12">Aucun message pour l'instant.</p>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<NuxtLink to="/" class="btn-ghost text-sm">
|
||||
<div class="i-lucide-arrow-left mr-1 h-3.5 w-3.5" />
|
||||
Retour à l'accueil
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: 'Messages',
|
||||
})
|
||||
|
||||
const { data: messages } = await useFetch('/api/messages')
|
||||
|
||||
function formatDate(iso: string) {
|
||||
const date = new Date(iso)
|
||||
return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-card {
|
||||
background: hsl(20 8% 6%);
|
||||
border: 1px solid hsl(20 8% 14%);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user