240 lines
11 KiB
Markdown
240 lines
11 KiB
Markdown
|
# Prompt : Migration "Le Grand Atlas du Fédiverse" vers PWA SvelteKit
|
||
|
|
|
||
|
|
> Ce prompt est destiné a Kimi CLI. Il transforme le projet "Le Grand Atlas du Fédiverse v4.0" (actuellement React + Vite + Tailwind) en PWA SvelteKit 2 + Svelte 5, en respectant integralement la doctrine UI/UX OKI (document "UI UX souveraine Fondements.md").
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 1. CONTEXTE DU PROJET
|
||
|
|
|
||
|
|
Le projet est une cartographie interactive du Fediverse (reseau social decentralise) :
|
||
|
|
- **Site web** : https://vhgsr7e3fioam.kimi.page (reference visuelle)
|
||
|
|
- **Donnees** : 105 logiciels, 12 protocoles, 14 categories, chronologie 2008-2026, ponts Nostr-ActivityPub
|
||
|
|
- **Pages** : Accueil (hero shader + graphe 3D + timeline + catalogue + protocoles), page Nostr dediee, page SimpleX dediee
|
||
|
|
- **Stack actuelle** : React 19 + Vite + Tailwind CSS + shadcn/ui + Three.js + D3 (a migrer)
|
||
|
|
- **Licence** : CC BY-SA 4.0
|
||
|
|
- **Langue** : Francais (avec preparation pour bilinguisme FR/créole)
|
||
|
|
|
||
|
|
## 2. STACK CIBLE (OBLIGATOIRE — non negociable)
|
||
|
|
|
||
|
|
```
|
||
|
|
Svelte 5 (runes : $state, $derived, $effect)
|
||
|
|
SvelteKit 2 (SSR par defaut, adapter-static pour PWA)
|
||
|
|
CSS natif sur design tokens (PAS Tailwind, PAS shadcn, PAS framework CSS)
|
||
|
|
Three.js + D3 (conserves pour le graphe 3D — lazy loaded)
|
||
|
|
Bits UI ou Melt UI (headless uniquement — comportement + ARIA, pas de styles imposes)
|
||
|
|
```
|
||
|
|
|
||
|
|
**Pourquoi pas Tailwind** : redondant avec CSS scopé Svelte, disperse le design system dans les templates, court-circuite la comprehension de la cascade. Voir doctrine OKI §5.2.
|
||
|
|
|
||
|
|
## 3. ARCHITECTURE CSS (OBLIGATOIRE)
|
||
|
|
|
||
|
|
```
|
||
|
|
src/styles/
|
||
|
|
tokens.css /* custom properties oklch, typo fluide clamp(), espacements */
|
||
|
|
reset.css /* reset moderne minimal */
|
||
|
|
base.css /* HTML semantique, focus visible */
|
||
|
|
layouts.css /* .stack, .cluster, .sidebar, .center (Every Layout) */
|
||
|
|
themes/
|
||
|
|
default.css /* tokens couleurs du projet */
|
||
|
|
|
||
|
|
src/app.css /* @layer reset, tokens, base, layouts, components, utilities */
|
||
|
|
```
|
||
|
|
|
||
|
|
**Tokens couleurs (oklch, methodologie modus-vivendi)** :
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
color-scheme: light dark;
|
||
|
|
--ink: light-dark(oklch(22% 0.02 260), oklch(92% 0.01 260));
|
||
|
|
--surface: light-dark(oklch(98% 0.005 90), oklch(15% 0.02 260));
|
||
|
|
--surface-2: light-dark(oklch(95% 0.01 90), oklch(20% 0.02 260));
|
||
|
|
--accent: oklch(55% 0.2 350); /* rose coral #F72585 */
|
||
|
|
--accent-2: oklch(70% 0.15 250); /* bleu #4CC9F0 */
|
||
|
|
--accent-3: oklch(65% 0.18 80); /* orange Nostr #F7931A */
|
||
|
|
--accent-4: oklch(70% 0.15 160); /* vert SimpleX #06D6A0 */
|
||
|
|
--muted: oklch(70% 0.02 260);
|
||
|
|
--tap-target: 48px;
|
||
|
|
--measure: 65ch;
|
||
|
|
--text-1: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
|
||
|
|
--text-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
|
||
|
|
--text-3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
|
||
|
|
--text-4: clamp(2rem, 1.8rem + 1.2vw, 3rem);
|
||
|
|
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem;
|
||
|
|
--space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**Chaque composant Svelte utilise `<style>` scopé** et consomme les tokens — jamais de valeur brute.
|
||
|
|
|
||
|
|
## 4. STRUCTURE SVELTEKIT
|
||
|
|
|
||
|
|
```
|
||
|
|
src/
|
||
|
|
routes/
|
||
|
|
+page.svelte /* Accueil : hero + sections */
|
||
|
|
+page.ts /* prerender = true */
|
||
|
|
nostr/
|
||
|
|
+page.svelte
|
||
|
|
simplex/
|
||
|
|
+page.svelte
|
||
|
|
data/
|
||
|
|
+server.ts /* API JSON pour les donnees */
|
||
|
|
lib/
|
||
|
|
components/
|
||
|
|
Header.svelte
|
||
|
|
Footer.svelte
|
||
|
|
HeroShader.svelte /* Shader WebGL ocean */
|
||
|
|
NetworkGraph.svelte /* Graphe 3D Three.js + D3 */
|
||
|
|
Timeline.svelte /* Chronologie */
|
||
|
|
SoftwareCatalog.svelte /* Catalogue filtrable */
|
||
|
|
ProtocolSection.svelte /* Protocoles */
|
||
|
|
ProtocolStream.svelte /* Data stream animé */
|
||
|
|
data/
|
||
|
|
fediverse.ts /* 105 logiciels, protocoles, categories */
|
||
|
|
timeline.ts /* 30 evenements 2008-2026 */
|
||
|
|
bridges.ts /* Ponts Nostr-AP */
|
||
|
|
styles/
|
||
|
|
tokens.css, reset.css, base.css, layouts.css
|
||
|
|
app.html
|
||
|
|
app.css
|
||
|
|
service-worker.ts /* PWA offline-first */
|
||
|
|
static/
|
||
|
|
manifest.json /* Web App Manifest */
|
||
|
|
icons/ /* 192x192, 512x512 */
|
||
|
|
```
|
||
|
|
|
||
|
|
## 5. PWA OFFLINE-FIRST (OBLIGATOIRE)
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// src/service-worker.ts
|
||
|
|
// Strategy : Cache-First pour les assets statiques
|
||
|
|
// Network-First pour les donnees JSON
|
||
|
|
// File d'attente pour les actions hors-ligne
|
||
|
|
```
|
||
|
|
|
||
|
|
- **Service Worker** : cache les pages visitées, les donnees JSON, les assets statiques
|
||
|
|
- **Manifest** : `name: "Atlas Fediverse"`, `short_name: "Atlas"`, `display: standalone`, `theme_color: #001219`
|
||
|
|
- **Icons** : generer a partir du SVG logo (globe + couleurs du projet)
|
||
|
|
- **Offline** : le catalogue et les pages Nostr/SimpleX doivent fonctionner hors-ligne apres premiere visite
|
||
|
|
- **Installable** : bouton "Installer" dans le header si beforeinstallprompt disponible
|
||
|
|
|
||
|
|
## 6. PERFORMANCE (OBLIGATOIRE — seuils a respecter)
|
||
|
|
|
||
|
|
| Métrique | Seuil |
|
||
|
|
|----------|-------|
|
||
|
|
| JS initial | < 100 Ko compressé (Three.js lazy loaded) |
|
||
|
|
| CSS total | < 50 Ko |
|
||
|
|
| Page totale | < 500 Ko |
|
||
|
|
| Premier rendu | < 3s en Slow 4G |
|
||
|
|
| Interactions | < 400 ms (skeleton screens si > 1s) |
|
||
|
|
| Polices | ≤ 2 fichiers WOFF2, auto-hebergees, font-display: swap |
|
||
|
|
|
||
|
|
**Lazy loading** : Three.js et D3 ne chargent que sur la route `/` (graphe 3D). Pages Nostr et SimpleX n'embarquent pas Three.js.
|
||
|
|
|
||
|
|
## 7. ACCESSIBILITÉ (OBLIGATOIRE — WCAG 2.2 AA minimum)
|
||
|
|
|
||
|
|
- [ ] Contraste 4.5:1 texte courant, 3:1 grand texte (palette oklch calculée)
|
||
|
|
- [ ] Information jamais portee par la couleur seule (doubler par icone/texte/forme)
|
||
|
|
- [ ] `prefers-color-scheme`, `prefers-reduced-motion`, `prefers-contrast` respectes
|
||
|
|
- [ ] Tout en `rem`, jamais de `font-size` en `px` sur `html`
|
||
|
|
- [ ] HTML semantique : landmarks, hiérarchie titres, `<button>` pour actions
|
||
|
|
- [ ] Focus visible sur tous les elements interactifs
|
||
|
|
- [ ] Ordre de tabulation logique
|
||
|
|
- [ ] Navigation clavier complete (desktop) : `?` pour raccourcis, `/` pour recherche
|
||
|
|
|
||
|
|
## 8. DOCTRINE MOBILE-FIRST (OBLIGATOIRE)
|
||
|
|
|
||
|
|
- Actions primaires dans le **tiers inferieur** (barre de nav basse si justifiée)
|
||
|
|
- Cibles tactiles **≥ 48 px**, espacement **≥ 8 px**, corps **≥ 16 px**
|
||
|
|
- Une colonne, un flux : pas de multi-colonnes sur mobile
|
||
|
|
- Valeur livree en < 5 secondes par ecran
|
||
|
|
- Reprennabilite : etat sauvegarde (filtres catalogue, position scroll)
|
||
|
|
- **Frugalite data** : lazy loading, AVIF/WebP, pas de police web au-dela de 2 fichiers
|
||
|
|
|
||
|
|
## 9. ÉTHIQUE ATTENTIONNELLE (OBLIGATOIRE — calm technology)
|
||
|
|
|
||
|
|
- [ ] **Pagination** ou marqueur "vous etes a jour" dans les listes (PAS de scroll infini)
|
||
|
|
- [ ] Notifications : actionnables uniquement, jamais de re-engagement artificiel
|
||
|
|
- [ ] Pas de compteurs anxiogenes masques/optionnels uniquement
|
||
|
|
- [ ] Pas de dark patterns
|
||
|
|
- [ ] Points d'arret naturels dans les flux
|
||
|
|
|
||
|
|
## 10. DONNÉES (reutiliser telles quelles)
|
||
|
|
|
||
|
|
Les fichiers de donnees du projet actuel sont dans `/public/data/` :
|
||
|
|
- `fediverse.json` : 105 logiciels + protocoles + categories
|
||
|
|
- `software.json`, `protocols.json`, `categories.json`, `network.json`
|
||
|
|
|
||
|
|
Les importer comme modules JSON dans SvelteKit (`import data from './data.json' assert { type: 'json' }`).
|
||
|
|
|
||
|
|
## 11. FEATURES A CONSERVER (parité fonctionnelle)
|
||
|
|
|
||
|
|
### Page d'accueil (`/`)
|
||
|
|
1. **Hero** : Shader WebGL ocean (Le réseau social, sans les chaînes) + CTA "Plonger"
|
||
|
|
2. **Graphe 3D** : Three.js + D3-force, 105 noeuds colorés par categorie, survol tooltip, filtres par categorie
|
||
|
|
3. **Timeline** : Chronologie verticale 2008-2026, filtres par type, alternance gauche/droite
|
||
|
|
4. **Catalogue** : Grille logiciels, recherche instantanee, filtres categorie/statut, modal detail
|
||
|
|
5. **Protocoles** : 12 protocoles en cartes, data stream animé en fond
|
||
|
|
|
||
|
|
### Page Nostr (`/nostr`)
|
||
|
|
- Hero, comment ca marche (3 etapes), 6 features, 15 clients, tableau comparatif AP vs Nostr
|
||
|
|
|
||
|
|
### Page SimpleX (`/simplex`)
|
||
|
|
- Hero, 3 etapes, 8 features, tableau comparatif (SimpleX vs Signal vs WhatsApp vs Matrix), cas d'usage
|
||
|
|
|
||
|
|
### Global
|
||
|
|
- Header fixe glassmorphism avec nav + liens Nostr/SimpleX
|
||
|
|
- Footer avec credits CC BY-SA 4.0
|
||
|
|
- Telechargement des donnees JSON / YAML
|
||
|
|
- Infographie SVG/PDF telechargeable
|
||
|
|
|
||
|
|
## 12. FEATURES A AJOUTER
|
||
|
|
|
||
|
|
- [ ] **Bouton installer PWA** dans le header (detecter beforeinstallprompt)
|
||
|
|
- [ ] **Indicateur offline** discret quand pas de connexion
|
||
|
|
- [ ] **Marqueur "vous etes a jour"** en fin de catalogue (ethique attentionnelle)
|
||
|
|
- [ ] **Raccourcis clavier** : `/` recherche, `?` aide, `j/k` navigation catalogue
|
||
|
|
- [ ] **Preparation i18n** : structure de cles pour FR et créole (creole guadeloupeen)
|
||
|
|
|
||
|
|
## 13. STEPS D'IMPLEMENTATION (ordre)
|
||
|
|
|
||
|
|
1. **Init** : `npm create svelte@latest atlas-fediverse` → skeleton → TypeScript, ESLint, Prettier, Vitest
|
||
|
|
2. **Config** : `svelte.config.js` avec `adapter-static`, prerender all routes
|
||
|
|
3. **Styles** : Creer `src/styles/` (tokens, reset, base, layouts) + `app.css` avec `@layer`
|
||
|
|
4. **Data** : Copier les fichiers de donnees JSON dans `src/lib/data/`, importer comme modules
|
||
|
|
5. **Layout** : `+layout.svelte` avec Header + Footer, slot pour le contenu
|
||
|
|
6. **Accueil** : Sections hero (sans shader d'abord), protocoles, timeline, catalogue
|
||
|
|
7. **Graphe 3D** : Migrer NetworkGraph (Three.js + D3) — lazy loaded via `await import()`
|
||
|
|
8. **Shader** : Migrer HeroShader (Three.js) — lazy loaded
|
||
|
|
9. **Pages** : Nostr + SimpleX
|
||
|
|
10. **PWA** : service-worker.ts, manifest.json, icons
|
||
|
|
11. **Polish** : accessibilite, raccourcis clavier, reduced-motion, offline indicator
|
||
|
|
12. **Build** : `npm run build` → verifiez les seuils perf (JS < 100Ko, page < 500Ko)
|
||
|
|
|
||
|
|
## 14. VERIFICATION FINALE (checklist doctrine OKI)
|
||
|
|
|
||
|
|
Avant de livrer, verifier :
|
||
|
|
- [ ] Pas de Tailwind, pas de shadcn, pas de framework CSS — CSS natif + tokens uniquement
|
||
|
|
- [ ] Svelte 5 runes utilises ($state, $derived, $effect) — pas de syntaxe Svelte 4
|
||
|
|
- [ ] Service Worker fonctionnel, PWA installable, offline-first
|
||
|
|
- [ ] JS initial < 100 Ko (sans Three.js qui est lazy loaded)
|
||
|
|
- [ ] Page totale < 500 Ko
|
||
|
|
- [ ] Contraste WCAG 2.2 AA verifie sur tous les textes
|
||
|
|
- [ ] prefers-reduced-motion, prefers-color-scheme, prefers-contrast gérés
|
||
|
|
- [ ] Navigation clavier complete
|
||
|
|
- [ ] Cibles tactiles ≥ 48 px
|
||
|
|
- [ ] Pas de scroll infini — pagination ou marqueur de fin
|
||
|
|
- [ ] Polices auto-hebergees ≤ 2 fichiers WOFF2
|
||
|
|
- [ ] Container queries pour le responsive des composants (pas seulement media queries)
|
||
|
|
- [ ] Fonctionne a 50% de largeur d'ecran (multi-fenêtrage desktop)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## NOTES POUR KIMI CLI
|
||
|
|
|
||
|
|
- Le projet actuel est accessible sur https://vhgsr7e3fioam.kimi.page pour reference visuelle
|
||
|
|
- Les donnees JSON sont telechargeables depuis https://vhgsr7e3fioam.kimi.page/data/fediverse.json
|
||
|
|
- Le code source React actuel est dans `/mnt/agents/output/app/src/` (reference pour les donnees et la logique, mais PAS pour le style — tout le CSS est a recrire selon la doctrine)
|
||
|
|
- Le graphe 3D et le shader sont les composants les plus complexes — les migrer en dernier
|
||
|
|
- Priorite : fonctionnel + beau + performant + accessible, dans cet ordre
|
||
|
|
- Ne pas hesiter a simplifier visuellement si necessaire pour respecter les budgets perf
|