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/FreeTextPage.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// Page libre (équipe, méthodologie…) — langage du gabarit : filet couleur
+// 5 mm, marges 8 mm, titre Syne 45 pt, texte Syne 12/16 pt, médias entiers
+// calés à droite. Pas de multi-colonnes CSS (Chromium les imprime en blanc).
+import type { Background, ResolvedMedia } from '~~/types'
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    text?: string // HTML
+    media?: ResolvedMedia[]
+    background: Background
+    bandColor?: string
+    page: { index: number; total: number }
+    renderMode?: 'preview' | 'print'
+  }>(),
+  { renderMode: 'preview' },
+)
+
+const strip = computed(() => props.bandColor || FL_INK)
+</script>
+
+<template>
+  <div class="fl-page" :style="backgroundStyle(background)">
+    <div class="absolute inset-x-0 top-0" :style="{ height: 'var(--fl-strip)', backgroundColor: strip }" />
+
+    <div class="absolute flex flex-col" :style="{ inset: 'var(--fl-margin)', top: '60px' }">
+      <h2 v-if="title" class="max-w-[1000px]" :style="{ fontSize: '60px', lineHeight: '1.1' }">{{ title }}</h2>
+      <div class="mt-12 flex min-h-0 flex-1" :style="{ gap: '48px' }">
+        <div v-if="text" class="fl-prose max-w-[740px] flex-1 overflow-hidden" v-html="text" />
+        <div v-if="media?.length" class="flex w-[560px] shrink-0 flex-col" :style="{ gap: 'var(--fl-gutter)' }">
+          <div v-for="m in media.slice(0, 3)" :key="m.filename" class="min-h-0 flex-1">
+            <img :src="m.url" :alt="m.filename" class="size-full object-contain" style="object-position: right top">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>