- 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
75 lines
2.8 KiB
Vue
75 lines
2.8 KiB
Vue
<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>
|