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>

components/templates/CoverTemplate.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// Couverture du portfolio — reprend l'accueil du site figureslibres.cc
+// (docs/portfolios-examples/screenshot-site-figures-libres.png) : la phrase
+// d'intro seule, bloc centré à 65 % de large, chaque keyword dans sa fonte
+// (sans soulignement, contrairement au site), flèche vers le bas. Rien d'autre.
+import type { Background } from '~~/types'
+
+const props = withDefaults(
+  defineProps<{
+    title: string // utilisé pour les métadonnées PDF, pas affiché
+    subtitle?: string
+    recipient?: string
+    background: Background
+    bandColor?: string // filet couleur en bas (définit aussi celui du sommaire)
+    renderMode?: 'preview' | 'print'
+  }>(),
+  { renderMode: 'preview' },
+)
+
+// Le site affiche l'intro sur fond gris clair : « Blanc » rend le gris charte.
+const pageStyle = computed(() => {
+  const s = backgroundStyle(props.background)
+  if (props.background.mode === 'white') s.backgroundColor = FL_BASE
+  return s
+})
+
+const strip = computed(() => props.bandColor || FL_INK)
+</script>
+
+<template>
+  <div class="fl-page" :style="pageStyle">
+    <div class="absolute inset-0 flex flex-col items-center justify-center">
+      <!-- Phrase d'intro du site (pages/01.home) — Lato, keywords dans les
+           fontes d'« utilité » du thème Grav, non soulignés -->
+      <p class="w-[65%]" :style="{ fontFamily: 'Lato, sans-serif', fontSize: '54px', lineHeight: '1.35' }">
+        <span class="font-bold" style="font-family: 'Syne', sans-serif">Figures&nbsp;Libres</span>
+        est un&nbsp;collectif de&nbsp;design graphique et interactif porteur de messages d'utilité
+        <span class="fl-font-publique">publique</span>,
+        <span class="fl-font-sociale">sociale</span> et
+        <span class="fl-font-culturelle">culturelle</span>
+        qui œuvre sur logiciels&nbsp;libres.
+      </p>
+
+      <!-- Flèche vers le bas (theme://images/pictos/arrow-down.svg) -->
+      <svg viewBox="0 0 24 30" :style="{ width: '60px', height: '54px', marginTop: '90px' }" aria-hidden="true">
+        <g transform="rotate(90,11,12.999996)">
+          <path
+            d="m 16.681932,5.2684395 0.08629,0.091376 5.042819,6.0548205 v 0 l 0.06362,0.100098 v 0 l 0.06561,0.144066 v 0 l 0.0389,0.137168 v 0 l 0.01717,0.117449 v 0 L 22,12 v 0 l -0.0025,0.07061 v 0 l -0.01594,0.12126 v 0 l -0.02359,0.09573 -0.0317,0.08965 v 0 l -0.06326,0.128377 v 0 l -0.09484,0.134549 -5,6 c -0.353564,0.424277 -0.984128,0.481601 -1.408405,0.128037 C 14.968124,18.441846 14.889154,17.879455 15.15741,17.46116 L 15.231779,17.359816 18.864,12.999975 3,13 C 2.4477153,13 2,12.552285 2,12 2,11.487164 2.3860402,11.064493 2.8833789,11.006728 L 3,11 18.864,10.999975 15.231779,6.6401844 c -0.353564,-0.4242769 -0.29624,-1.0548416 0.128037,-1.4084057 0.39164,-0.3263668 0.959052,-0.3026278 1.322116,0.036661 z"
+            fill="currentColor"
+            fill-rule="nonzero"
+          />
+        </g>
+      </svg>
+    </div>
+
+    <!-- Filet couleur pleine largeur en bas -->
+    <div class="absolute inset-x-0 bottom-0" :style="{ height: 'var(--fl-strip)', backgroundColor: strip }" />
+  </div>
+</template>