# Notes sur le Projet Sirius en Guadeloupe ## 📋 Vue d'ensemble Refonte complĂšte (v2) : passage d'une SPA Vite+Svelte 4 Ă  un site **11ty** statique avec **Svelte 5 en Ăźlots**, un design system CSS natif (oklch, `@layer`, container queries) et une i18n compilĂ©e (Paraglide/inlang). Conforme Ă  la doctrine UI/UX OKI : nav Ă  5 entrĂ©es, fonctionne sans JavaScript pour tout le contenu Ă©ditorial, budget JS minimal. ## đŸ—ïž Architecture - **Contenu** : pages Nunjucks (`src/*.njk`), chacune paginĂ©e sur les 3 langues (`fr`/`en`/`ht`) via `pagination.data: locales`. - **DonnĂ©es** : `src/_data/sites.js` (7 sites d'observation, dates interpolĂ©es Jean Meeus / Jeffrey L. Hunt), `src/_data/nav.js`, `src/_data/nextRising.js` (calculĂ© au build). - **i18n** : catalogues `messages/{fr,en,ht}.json`, compilĂ©s par `@inlang/paraglide-js` en `src/paraglide/` avant chaque build (`npm run messages`). `ht` retombe automatiquement sur `fr` pour les clĂ©s non traduites (contenu long, cf. portĂ©e d'origine). - **Îlots Svelte 5** (3 seulement, le reste est HTML/CSS pur) : - `PredictionsCalculator` — hydratation immĂ©diate, amĂ©liore le tableau statique des 7 sites - `ObservationMap` — carte canvas schĂ©matique, hydratation diffĂ©rĂ©e (IntersectionObserver) - `SiriusGlobe` — vague planĂ©taire du lever hĂ©liaque (13 villes), hydratation diffĂ©rĂ©e - **Onglets** (Science, Dogon) : 100 % CSS (`input[type=radio]` + `label`), zĂ©ro JS. - **Build** : `@11ty/eleventy-plugin-vite` fait passer la sortie 11ty par Vite (bundling CSS/JS, compilation Svelte). Un plugin maison recopie les assets passthrough aprĂšs le build Vite (voir commentaire dans `eleventy.config.js` — `emptyOutDir` de Vite les efface sinon). ## ⚠ Points d'attention connus 1. **`` et `vite-ignore`** : Vite traite tout `` comme une rĂ©fĂ©rence d'asset Ă  rĂ©soudre, y compris `rel="alternate"`/`rel="icon"`/`rel="preload"`. Un `href="/"` ou `href="/en/"` (URL de rĂ©pertoire) fait planter le build (`EISDIR`, cf. issue amont). Toujours ajouter `vite-ignore` sur ces `` de mĂ©tadonnĂ©es dans `layouts/base.njk`. 2. **Alias `/src`** : `eleventy-plugin-vite` fait tourner Vite avec pour racine une copie du dossier de **sortie** (`_site`), pas la racine du projet. Toute rĂ©fĂ©rence absolue Ă  un fichier source (`/src/styles/app.css`, `/src/islands/.../mount.js`) nĂ©cessite l'alias `resolve.alias["/src"]` dĂ©fini dans `eleventy.config.js`. 3. **Dates ISO sans heure** : `new Date("2026-07-22")` est interprĂ©tĂ© en UTC ; formatĂ© en heure locale Guadeloupe (UTC-4), ça peut reculer d'un jour. Toujours parser les composants (`year, month, day`) et construire la date en local — voir le filtre `formatDate` et `PredictionsCalculator.svelte`. 4. **Slinkity est abandonnĂ©** (son crĂ©ateur travaille sur Astro) : ne pas l'utiliser pour l'intĂ©gration 11ty+Svelte, `eleventy-plugin-vite` (officiel) est la voie robuste. ## 🔄 AmĂ©liorations possibles - Traduire le contenu long en KreyĂČl (actuellement chrome/labels uniquement, contenu de fond en français) - Vraies donnĂ©es GeoJSON pour `ObservationMap` (actuellement une carte schĂ©matique par position lat/lon normalisĂ©e, pas un tracĂ© de cĂŽte rĂ©el) - Service worker pour un usage hors-ligne (mentionnĂ© dans la doctrine, pas encore implĂ©mentĂ©) - Mettre Ă  jour chaque annĂ©e les informations d'Ă©vĂ©nements associatifs (`associations.njk`, donnĂ©es Ă  vĂ©rifier auprĂšs des organisateurs) ## 📩 Build pour production ```bash npm run build # Sortie dans _site/ ``` ## 🌐 DĂ©ploiement GitHub Pages via `.github/workflows/deploy.yml` (upload de `_site/`), dĂ©clenchĂ© sur push vers `main`.