Files
portfolio-generator-app/components/templates/OutroTemplate.vue
Valentin Le Moign 1c1604ea2f Pages équipe + conclusion, colonnes de page libre, réglages couverture
- Page « équipe » : roster statique du collectif (composables/useTeam),
  portraits servis depuis public/portraits, grille ≤ 3 colonnes équilibrée
  (portrait/nom/rôle/présentation), sélection + surcharges par membre
  (repliables, réordonnables, réinitialisables) dans le composeur
- Page « conclusion » : « Merci ! » centré + rappel des contacts
- Page libre : 1 à 3 colonnes texte (markdown) ou images avec sous-titres,
  réordonnables ; migration des champs body/media legacy vers columns
- Couverture : texte libre sous l'intro, adresse en bas à gauche (3 lignes),
  case « afficher les années » au niveau du document
- Sommaire : items centrés (self-center), filet en points dégradés stable
- Retrait de la dépendance morte pagedjs
- Docs à jour (CLAUDE.md, README) ; spec marquée comme archive réalisée
2026-07-13 16:00:59 +02:00

75 lines
2.8 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup lang="ts">
// Page de conclusion — bookend de la couverture : « Merci ! » en grand au
// centre + rappel des contacts (site, mail, adresse tirés de la couverture).
import type { Background } from '~~/types'
const props = withDefaults(
defineProps<{
title?: string // texte central — défaut « Merci ! »
background: Background
bandColor?: string // filet couleur en bas
siteUrl?: string
contactEmail?: string
address?: string
renderMode?: 'preview' | 'print'
}>(),
{ renderMode: 'preview' },
)
const strip = computed(() => props.bandColor || FL_INK)
// Même logique de fond que la couverture (blanc = gris charte, plein = filet).
const pageStyle = computed(() => {
const base
= props.background.mode === 'full'
? strip.value
: props.background.mode === 'tint'
? TINT_COLOR
: FL_BASE
return { backgroundColor: base, color: inkOn(base) }
})
const heading = computed(() => props.title?.trim() || 'Merci !')
const siteHref = computed(() => props.siteUrl?.trim() || DEFAULT_SITE_URL)
const siteLabel = computed(() => siteHref.value.replace(/^https?:\/\//, '').replace(/\/$/, ''))
const email = computed(() => props.contactEmail?.trim() || DEFAULT_CONTACT_EMAIL)
// Adresse coupée aux virgules : une ligne par segment.
const addressLines = computed(() =>
(props.address?.trim() || DEFAULT_ADDRESS).split(',').map(s => s.trim()).filter(Boolean),
)
</script>
<template>
<div class="fl-page" :style="pageStyle">
<div
class="absolute inset-0 flex flex-col items-center justify-center"
:style="{ padding: 'var(--fl-margin)', gap: '64px' }"
>
<p :style="{ fontFamily: 'Syne, sans-serif', fontSize: '150px', lineHeight: '1' }">{{ heading }}</p>
<!-- Rappel des contacts (liens actifs PDF/viewer) -->
<div
class="flex flex-col items-center"
:style="{ fontFamily: 'Syne, sans-serif', fontSize: '22px', lineHeight: '1.6' }"
>
<a :href="siteHref" target="_blank" rel="noopener" class="text-current no-underline">{{ siteLabel }}</a>
<a :href="`mailto:${email}`" class="text-current no-underline">{{ email }}</a>
</div>
</div>
<!-- Adresse postale dans l'angle bas-gauche (comme la couverture) -->
<p
v-if="addressLines.length"
class="absolute left-0"
:style="{
bottom: background.mode === 'full' ? '0' : 'var(--fl-strip)',
padding: 'var(--fl-margin)',
fontFamily: 'Syne, sans-serif', fontSize: '19px', lineHeight: '1.5',
}"
><span v-for="(line, i) in addressLines" :key="i" class="block">{{ line }}</span></p>
<!-- Filet couleur pleine largeur en bas (masqué en fond plein) -->
<div v-if="background.mode !== 'full'" class="absolute inset-x-0 bottom-0" :style="{ height: 'var(--fl-strip)', backgroundColor: strip }" />
</div>
</template>