cyber-mawonaj/oki-atlas-fediverse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9b574d918c8d511addbe739479c84e12efd7ef1c
oki-atlas-fediverse/prompt-pwa-sveltekit.md
T
sucupira 93c577c5d3 chore: état initial avant refonte (atlas SvelteKit v4.0.0) 
Snapshot de l'existant avant application du playbook OKI :
background shader Three.js, carte graphe 3D, timeline statique.
2026-07-21 13:10:12 -04:00

11 KiB
Raw Blame History

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) :

: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)

// 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
Reference in New Issue View Git Blame Copy Permalink