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>
2026-09-28 10:15:46 +02:00
parent c3ada04e52
commit e9fce4be8f
29 changed files with 2901 additions and 56 deletions
@@ -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),
+  }
+}