Générateur de portfolios PDF Figures Libres (app Nuxt autonome)

App Nuxt 3 + Nuxt UI qui lit les projets du CMS Grav et compose des portfolios
A3 paysage exportés en PDF (gabarit book_v3) : composeur WYSIWYG, templates
cover/toc/projet/grille/page libre, pipeline Playwright + Ghostscript, gel du
contenu à la génération, partage public opt-in.

Dépôt autonome : Dockerfile (base Playwright + Ghostscript + ffmpeg + rsync) inclus.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

pages/index.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { PortfolioSummary } from '~~/types'
+
+const { data, refresh } = await useFetch<{ portfolios: PortfolioSummary[] }>('/api/portfolios')
+const toast = useToast()
+
+const portfolios = computed(() => data.value?.portfolios ?? [])
+const creating = ref(false)
+const newName = ref('')
+const showCreate = ref(false)
+
+const dateFmt = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium', timeStyle: 'short' })
+
+async function create() {
+  creating.value = true
+  try {
+    const p = await $fetch<{ id: string }>('/api/portfolios', {
+      method: 'POST',
+      body: { name: newName.value },
+    })
+    navigateTo(`/portfolios/${p.id}`)
+  } finally {
+    creating.value = false
+  }
+}
+
+async function duplicate(id: string) {
+  await $fetch(`/api/portfolios/${id}/duplicate`, { method: 'POST' })
+  await refresh()
+  toast.add({ title: 'Portfolio dupliqué', color: 'success' })
+}
+
+async function remove(id: string, name: string) {
+  if (!confirm(`Supprimer le portfolio « ${name} » ? Cette action est définitive.`)) return
+  await $fetch(`/api/portfolios/${id}`, { method: 'DELETE' })
+  await refresh()
+  toast.add({ title: 'Portfolio supprimé', color: 'neutral' })
+}
+
+const downloading = ref<string | null>(null)
+
+/**
+ * Télécharge le PDF : direct s'il est à jour, sinon (jamais généré ou modifié
+ * depuis) on le génère puis on le télécharge.
+ */
+async function downloadPdf(p: PortfolioSummary) {
+  if (p.pdfCurrent && p.exportFileName) {
+    window.open(`/api/exports/${encodeURIComponent(p.exportFileName)}`, '_blank')
+    return
+  }
+  downloading.value = p.id
+  try {
+    const result = await $fetch<{ fileName: string, downloadUrl: string }>(`/api/portfolios/${p.id}/generate`, {
+      method: 'POST',
+      body: {},
+      timeout: 300_000,
+    })
+    toast.add({ title: 'PDF généré', description: result.fileName, color: 'success' })
+    window.open(result.downloadUrl, '_blank')
+    await refresh() // rafraîchit pdfCurrent / exportFileName sur la carte
+  } catch {
+    toast.add({ title: 'Échec de la génération', color: 'error' })
+  } finally {
+    downloading.value = null
+  }
+}
+
+async function copyPublicLink(id: string) {
+  const url = `${window.location.origin}/view/${id}`
+  try {
+    await navigator.clipboard.writeText(url)
+    toast.add({ title: 'Lien public copié', color: 'success' })
+  } catch {
+    toast.add({ title: 'Copie impossible', description: url, color: 'error' })
+  }
+}
+</script>
+
+<template>
+  <UContainer class="py-8">
+    <div class="mb-6 flex items-end justify-between gap-4">
+      <div>
+        <h1 class="text-2xl font-bold text-[var(--fl-ink)] dark:text-white">Portfolios</h1>
+      </div>
+      <UButton icon="i-lucide-plus" label="Nouveau portfolio" @click="showCreate = true" />
+    </div>
+
+    <div v-if="!portfolios.length" class="rounded-lg border border-dashed border-neutral-300 p-16 text-center text-neutral-500 dark:border-neutral-700">
+      Aucun portfolio pour l'instant — créez-en un pour composer votre premier PDF.
+    </div>
+
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+      <UCard v-for="p in portfolios" :key="p.id">
+        <div class="flex items-start justify-between gap-2">
+          <div>
+            <NuxtLink :to="`/portfolios/${p.id}`" class="font-semibold text-[var(--fl-ink)] hover:underline dark:text-white">
+              {{ p.name }}
+            </NuxtLink>
+            <p class="mt-1 text-xs text-neutral-500">
+              {{ p.pageCount }} page{{ p.pageCount > 1 ? 's' : '' }} · modifié le {{ dateFmt.format(new Date(p.updatedAt)) }}
+            </p>
+          </div>
+          <div class="flex shrink-0 items-center gap-1.5">
+            <UBadge v-if="p.publicShare" color="info" variant="subtle" size="sm">Public</UBadge>
+            <UBadge v-if="p.hasPdf" color="success" variant="subtle" size="sm">PDF</UBadge>
+          </div>
+        </div>
+        <div class="mt-4 flex items-center gap-2">
+          <UButton :to="`/portfolios/${p.id}`" size="sm" variant="soft" icon="i-lucide-pencil" label="Ouvrir" />
+          <UButton size="sm" variant="ghost" color="neutral" icon="i-lucide-copy" label="Dupliquer" @click="duplicate(p.id)" />
+          <UButton
+            size="sm"
+            variant="ghost"
+            color="neutral"
+            :icon="p.pdfCurrent ? 'i-lucide-download' : 'i-lucide-file-down'"
+            :label="p.pdfCurrent ? 'Télécharger' : (p.hasPdf ? 'Régénérer' : 'Générer')"
+            :loading="downloading === p.id"
+            @click="downloadPdf(p)"
+          />
+          <UButton
+            v-if="p.publicShare"
+            size="sm"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-link"
+            aria-label="Copier le lien public"
+            @click="copyPublicLink(p.id)"
+          />
+          <UButton size="sm" variant="ghost" color="error" icon="i-lucide-trash-2" class="ml-auto" @click="remove(p.id, p.name)" />
+        </div>
+      </UCard>
+    </div>
+
+    <UModal v-model:open="showCreate" title="Nouveau portfolio">
+      <template #body>
+        <form class="space-y-4" @submit.prevent="create">
+          <UInput v-model="newName" placeholder="Nom du portfolio (ex. Candidature Bagneux)" class="w-full" autofocus />
+          <div class="flex justify-end gap-2">
+            <UButton variant="ghost" color="neutral" label="Annuler" @click="showCreate = false" />
+            <UButton type="submit" :loading="creating" label="Créer" />
+          </div>
+        </form>
+      </template>
+    </UModal>
+  </UContainer>
+</template>