forked from LPK/librodrome
- 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>
145 lines
4.7 KiB
TypeScript
145 lines
4.7 KiB
TypeScript
// 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),
|
|
}
|
|
}
|