design : accueil en trois variantes (console, parcours, établi) + couleur par axe

- typo : Bricolage Grotesque (titres) + Atkinson Hyperlegible (texte),
  Syne gardée pour le logo seul ; une seule source de polices (Bunny)
- palettes : teinte propre à chaque axe dans les 4 ambiances ;
  pages d'axe en axis-scope, cartes sans bordure (canon design)
- accueil : console des trois curseurs (tablist clavier), boîte à outils,
  bloc format éditorial + événement + reproduction ; ?v=a|b|c|0
- numérique : carte LPK ; bouquet rendu avec statut et légende
- messages : sans bordure, deux colonnes en grand écran

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-09-28 10:15:46 +02:00
co-authored by Claude Opus 5.5
parent c3ada04e52
commit e9fce4be8f
29 changed files with 2901 additions and 56 deletions
+144
View File
@@ -0,0 +1,144 @@
// Normalised view of the home content, shared by the three home variants.
// Everything comes from YAML (site/pages/home.yml, site/site.yml,
// site/pages/evenement.yml, site/pages/numerique/cloud-libre.yml) — no copy here.
export type AxisKey = 'numerique' | 'economie' | 'politique'
export type StackStatus = 'service' | 'catalogue' | 'avenir'
export interface HomeAction {
id: string
label: string
icon: string
highlight?: boolean
secondary?: boolean
to?: string
href?: string
}
export interface HomeTool {
label: string
description: string
to?: string
href?: string
gestation?: boolean
icon?: string
presentation?: { title: string, text: string }
actions?: HomeAction[]
}
export interface HomeStack {
role: string
name?: string
status: StackStatus
url?: string
}
export interface HomeAxis {
key: AxisKey
/** Short label as used in the navigation ("numérique", "économique", "citoyenne") */
short: string
title: string
icon: string
to: string
/** What is "le plus en amont" on this axis (hero.axes) */
lever: string
promise: string
/** CSS custom property holding the axis hue */
hue: string
items: HomeTool[]
}
const AXIS_META: Record<AxisKey, { heroLabel: string, to: string, hue: string, short: string }> = {
numerique: { heroLabel: 'numérique', to: '/numerique', hue: '--axis-num', short: 'numérique' },
economie: { heroLabel: 'économie', to: '/economique', hue: '--axis-eco', short: 'économique' },
politique: { heroLabel: 'citoyenne', to: '/citoyenne', hue: '--axis-cit', short: 'citoyenne' },
}
export const AXIS_ORDER: AxisKey[] = ['numerique', 'economie', 'politique']
export async function useHomeData() {
const [{ data: home }, { data: site }, { data: event }, { data: cloud }] = await Promise.all([
usePageContent('home'),
useSiteContent(),
usePageContent('evenement'),
usePageContent('numerique/cloud-libre'),
])
const hero = computed(() => (home.value as any)?.hero ?? {})
const axes = computed<HomeAxis[]>(() => {
const raw = (home.value as any)?.axes ?? {}
const levers: { label: string, value: string }[] = hero.value.axes ?? []
return AXIS_ORDER.filter(k => raw[k]).map((key) => {
const meta = AXIS_META[key]
return {
key,
short: meta.short,
title: raw[key].title,
icon: raw[key].icon,
to: meta.to,
lever: levers.find(l => l.label === meta.heroLabel)?.value ?? '',
promise: raw[key].promise ?? '',
hue: meta.hue,
items: raw[key].items ?? [],
}
})
})
const lpk = computed(() => (site.value as any)?.lpk as
{ name: string, fullName: string, text: string, role: string, to: string } | undefined)
/** Bouquet sweethomeCloud, flattened — the stacks served by LPK */
const bouquet = computed(() => {
const section = ((cloud.value as any)?.sections ?? []).find((s: any) => s.type === 'territoire')
const b = section?.bouquet
if (!b) return null
const stacks: (HomeStack & { category: string })[] = []
for (const cat of b.categories ?? []) {
for (const item of cat.items ?? []) {
if (typeof item === 'string') continue
stacks.push({ ...item, category: cat.label })
}
}
return {
title: b.title as string,
statuses: (b.statuses ?? {}) as Record<StackStatus, string>,
categories: (b.categories ?? []) as { label: string, icon: string, items: HomeStack[] }[],
stacks,
inService: stacks.filter(s => s.status === 'service' && s.name),
}
})
const evenement = computed(() => {
const e = event.value as any
const teaser = (home.value as any)?.evenement
if (!e && !teaser) return null
const politique = (e?.axes ?? []).find((a: any) => a.label === 'Politique')
return {
to: teaser?.to ?? '/evenement',
title: e?.title ?? teaser?.title,
teaser: teaser ? `${teaser.title} ${teaser.subtitle}` : '',
subtitle: e?.subtitle ?? '',
tagline: e?.tagline ?? '',
leitmotiv: e?.leitmotiv ?? '',
description: e?.description ?? '',
gestation: e?.gestation ?? teaser?.gestation,
config: (e?.config ?? []) as { icon: string, label: string, detail: string }[],
espaces: (e?.espaces ?? []) as { icon: string, label: string, desc: string }[],
/** "Autonomie d'un bassin de vie — accessible et reproductible" */
reproduction: (politique?.items?.[0] as string) ?? '',
}
})
return {
home,
hero,
axes,
lpk,
bouquet,
evenement,
book: computed(() => (home.value as any)?.book),
format: computed(() => (home.value as any)?.format as { title: string, text: string } | undefined),
gratewizard: computed(() => (home.value as any)?.gratewizard),
}
}
+7
View File
@@ -14,6 +14,13 @@ interface SiteContent {
credits: string
links: NavItem[]
}
lpk?: {
name: string
fullName: string
text: string
role: string
to: string
}
gratewizard: {
url: string
popup: {