2f438d9d7a
- Source unique : supprime app/data/librodrome.config.yml, renomme site/ en bookplayer.config.yml - Morceaux : renommés avec slugs lisibles, fichiers audio renommés, inversion ch2↔ch3 corrigée - Chapitres : 11 fichiers .md réécrits avec le vrai contenu du livre (synthèse fidèle du PDF) - Routes : /lire → /modele-eco, /ecouter → /en-musique, redirections 301 - Admin chapitres : champs structurés (titre, description, temps lecture), compteur mots - Éditeur markdown : mode split, plein écran, support Tab, meilleur rendu aperçu - Admin morceaux : drag & drop, ajout/suppression, gestion playlist - Light mode : palettes printemps/été plus saturées et contrastées, teintes primary - Raccourcis clavier player : espace, flèches gauche/droite - Paroles : toggle supprimé, toujours visibles et scrollables - Nouvelles pages : autonomie, evenement Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
133 lines
3.6 KiB
Vue
133 lines
3.6 KiB
Vue
<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">
|
|
{{ chapterTitle || slug }}
|
|
</h1>
|
|
<span class="text-xs text-white/30 font-mono">{{ slug }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span v-if="wordCount" class="text-xs text-white/30">{{ wordCount }} mots</span>
|
|
<AdminSaveButton :saving="saving" :saved="saved" @save="save" />
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="chapter">
|
|
<AdminFormSection title="Métadonnées">
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label class="field-label">Titre</label>
|
|
<input v-model="title" class="field-input" placeholder="Titre du chapitre" />
|
|
</div>
|
|
<div>
|
|
<label class="field-label">Temps de lecture</label>
|
|
<input v-model="readingTime" class="field-input" placeholder="15 min" />
|
|
</div>
|
|
<div class="sm:col-span-2">
|
|
<label class="field-label">Description</label>
|
|
<input v-model="description" class="field-input" placeholder="Description courte pour le SEO" />
|
|
</div>
|
|
</div>
|
|
</AdminFormSection>
|
|
|
|
<AdminFormSection title="Contenu" open>
|
|
<AdminMarkdownEditor v-model="body" :rows="35" />
|
|
</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 title = ref('')
|
|
const description = ref('')
|
|
const readingTime = ref('')
|
|
const body = ref('')
|
|
|
|
const chapterTitle = computed(() => title.value)
|
|
const wordCount = computed(() => {
|
|
if (!body.value) return 0
|
|
return body.value.trim().split(/\s+/).filter(Boolean).length
|
|
})
|
|
|
|
watch(chapter, (val) => {
|
|
if (val) {
|
|
// Parse frontmatter fields
|
|
const fm = val.frontmatter ?? ''
|
|
title.value = extractFmField(fm, 'title')
|
|
description.value = extractFmField(fm, 'description')
|
|
readingTime.value = extractFmField(fm, 'readingTime')
|
|
body.value = val.body ?? ''
|
|
}
|
|
}, { immediate: true })
|
|
|
|
function extractFmField(fm: string, field: string): string {
|
|
const match = fm.match(new RegExp(`^${field}:\\s*"?([^"\\n]*)"?`, 'm'))
|
|
return match ? match[1].trim() : ''
|
|
}
|
|
|
|
const saving = ref(false)
|
|
const saved = ref(false)
|
|
|
|
async function save() {
|
|
saving.value = true
|
|
saved.value = false
|
|
try {
|
|
const order = chapter.value?.frontmatter?.match(/order:\s*(\d+)/)?.[1] ?? '1'
|
|
const frontmatter = [
|
|
`title: "${title.value}"`,
|
|
`description: "${description.value}"`,
|
|
`order: ${order}`,
|
|
`readingTime: "${readingTime.value}"`,
|
|
].join('\n')
|
|
|
|
await $fetch(`/api/admin/chapters/${slug.value}`, {
|
|
method: 'PUT',
|
|
body: { frontmatter, body: body.value },
|
|
})
|
|
saved.value = true
|
|
setTimeout(() => { saved.value = false }, 2000)
|
|
}
|
|
finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.field-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: hsl(20 8% 50%);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.field-input {
|
|
width: 100%;
|
|
padding: 0.5rem 0.625rem;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid hsl(20 8% 18%);
|
|
background: hsl(20 8% 6%);
|
|
color: white;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.field-input:focus {
|
|
outline: none;
|
|
border-color: hsl(12 76% 48% / 0.5);
|
|
}
|
|
</style>
|