From 72b3785499ada58fbdd76bb2bad4c9da1abab504 Mon Sep 17 00:00:00 2001 From: Florian Date: Wed, 27 May 2026 18:41:57 +0200 Subject: [PATCH] feat(design): refonte hi-fi (tokens, pills glyphes, dark mode, accueil) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adopte le design system livré par Claude Design (Info Canicule.html) : palette --paper/--brand/--ink + ramp vigilance, Public Sans + Manrope, header sticky blurred avec toggle clair/sombre, pills vigilance avec glyphes ●▲◆■ (a11y daltonisme), home restructurée (hero, stat tiles, map + sidebar avec recherche département, liste filtrable, CTA conseils). Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/FranceMap.astro | 8 +- src/components/VigilanceChip.astro | 10 +- src/components/VigilanceLegend.astro | 26 +- src/layouts/Base.astro | 247 ++++++++++-- src/pages/index.astro | 581 +++++++++++++++++++-------- src/styles/global.css | 377 ++++++++++++++++- tailwind.config.mjs | 4 +- 7 files changed, 1003 insertions(+), 250 deletions(-) diff --git a/src/components/FranceMap.astro b/src/components/FranceMap.astro index 72dcacc..def4185 100644 --- a/src/components/FranceMap.astro +++ b/src/components/FranceMap.astro @@ -55,17 +55,15 @@ for (const [code] of entries) { { entries.map(([code, dept]) => { const colorId = colorsByDept.get(code) ?? 1; - const color = COLORS[colorId]; return ( ); diff --git a/src/components/VigilanceChip.astro b/src/components/VigilanceChip.astro index 4b822e1..346c5f3 100644 --- a/src/components/VigilanceChip.astro +++ b/src/components/VigilanceChip.astro @@ -6,15 +6,17 @@ interface Props { colorId: ColorId; phenomenonId?: PhenomenonId; showLevel?: boolean; + size?: 'sm' | 'lg'; } -const { colorId, phenomenonId, showLevel = false } = Astro.props; +const { colorId, phenomenonId, showLevel = false, size = 'sm' } = Astro.props; const phenomenon = phenomenonId ? PHENOMENA[phenomenonId] : null; -const colorClass = `vigilance-chip-${colorId}`; +// Glyphes redondants à la couleur (accessibilité daltonisme + niveaux de gris). +const GLYPHS: Record = { 1: '●', 2: '▲', 3: '◆', 4: '■' }; --- - - {phenomenon && } + + {phenomenon ? phenomenon.label : COLORS[colorId].name} {showLevel && — {COLOR_LABEL[colorId]}} diff --git a/src/components/VigilanceLegend.astro b/src/components/VigilanceLegend.astro index 3290569..c886123 100644 --- a/src/components/VigilanceLegend.astro +++ b/src/components/VigilanceLegend.astro @@ -1,22 +1,28 @@ --- -import { COLORS, COLOR_LABEL } from '../lib/phenomena'; +import VigilanceChip from './VigilanceChip.astro'; +import { COLOR_LABEL } from '../lib/phenomena'; import type { ColorId } from '../lib/phenomena'; +interface Props { + inline?: boolean; +} +const { inline = false } = Astro.props; const levels: ColorId[] = [1, 2, 3, 4]; +const NAMES: Record = { 1: 'Vert', 2: 'Jaune', 3: 'Orange', 4: 'Rouge' }; --- -
- Niveaux : +
+ Légende { levels.map((id) => ( - )) } diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index f27ae1a..7264562 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -23,6 +23,9 @@ const fullOgImage = ogImage.startsWith('http') ? ogImage : `${SITE}${ogImage}`; const umamiId = process.env.UMAMI_WEBSITE_ID; const umamiSrc = process.env.UMAMI_SRC ?? 'https://analytics.nocleus.com/script.js'; +const path = Astro.url.pathname; +const isActive = (p: string) => (p === '/' ? path === '/' : path.startsWith(p)); + const jsonLd = { '@context': 'https://schema.org', '@graph': [ @@ -44,7 +47,7 @@ const jsonLd = { '@type': 'Service', '@id': `${SITE}/#service`, name: 'Info Canicule', - serviceType: 'Service d\'information météorologique grand public', + serviceType: "Service d'information météorologique grand public", areaServed: { '@type': 'Country', name: 'France' }, audience: { '@type': 'PeopleAudience', audienceType: 'Grand public, personnes fragiles' }, provider: { @@ -69,7 +72,7 @@ const jsonLd = { - + {noindex ? : } @@ -90,68 +93,234 @@ const jsonLd = { - + + + + + + + {umamiId && ( )} - -
-
- - - Info Canicule + + + +
+
+ + + Info Canicule -
-
+ +
-