oki-foundation/CHANGELOG.md

Changelog

[Unreleased]

🚀 Version 3 — Migration SvelteKit (branche svelte)

• ✅ Rebuild complet : SvelteKit 2 + Svelte 5 (runes) + TypeScript, pré-rendu statique intégral (adapter-static) — remplace Eleventy (conservé sur main)
• ✅ Zéro domaine tiers : images self-hébergées et optimisées au build (AVIF/WebP via vite-imagetools), polices Archivo/Inter self-hébergées en woff2 — BunnyCDN et Google Fonts supprimés (correction des 403 d'images)
• ✅ Iconographie : set SVG OKI (12 pictos, stroke 2 px, angles nets, noms kréyòl) en sprite, zéro emoji décoratif en interface
• ✅ Motion : KineticText (titres au scroll, stagger syncopé gwoka), ScrollProgressBar or→vert, View Transitions, gate unique prefers-reduced-motion
• ✅ Village écosystème : scène SVG isométrique « village créole » pour les services hébergés (BOKANTE, GADE, NIYAJ, KUTE), fallback grille accessible
• ✅ PWA : manifest + service worker (shell hors-ligne), page offline designée
• ✅ 404 designée en KA (404.html autonome + +error.svelte)
• ✅ CSP renforcée : retrait de Google Fonts et BunnyCDN, livrée en .htaccess (o2switch) et _headers (Cloudflare Pages)

🛡️ Sécurité

• ✅ Headers HTTP de sécurité : ajout d'un .htaccess Apache avec Strict-Transport-Security, Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy et Permissions-Policy
• ✅ Redirection HTTP → HTTPS : forçage du HTTPS via mod_rewrite
• ✅ CSP stricte : refactorisation des scripts inline en fichiers externes et suppression des gestionnaires onclick inline

🎬 Contenu

• ✅ Nouveau projet : ajout de FEDIVERSE.OKI dans la section projets
• ✅ Logos clients : récupération locale des logos distants et service via le CDN
• ✅ Réseaux sociaux : mise à jour du lien Discord, retrait de Stoat, X (Twitter) et TikTok
• ✅ Chaînes PAWOL.NU : distinction visuelle dans la page contact entre les chaînes WhatsApp/Telegram et les autres moyens de contact
• ✅ Mentions légales : hébergeur mis à jour (OVH → o2switch)
• ✅ Footer : année du copyright générée automatiquement via un shortcode Eleventy
• ✅ Liens Labola : lien footer vers le dépôt du site, lien contact vers l'organisation Gitea

🔧 Technique

• ✅ Shortcode Eleventy {% year %} pour l'année en cours
• ✅ Événements JS attachés dans main.js pour les accordéons FAQ et les dons personnalisés

Version 2.1.0 - Design Afrofuturisme Caribéen (2025-11-05)

🌓 Système de Thème Clair/Sombre

• ✅ Switch thème : Bouton dans la navigation pour basculer entre thème clair et sombre
• ✅ Détection automatique : Utilise le thème système par défaut (prefers-color-scheme)
• ✅ Persistance : Sauvegarde de la préférence utilisateur dans localStorage
• ✅ Sans flash : Script inline dans le head pour éviter le FOUC (Flash Of Unstyled Content)
• ✅ Palette claire adaptée : Couleurs ajustées pour une excellente lisibilité en mode clair
• ✅ Écoute système : Changement automatique si le thème système change (si pas de préférence utilisateur)
• ✅ Responsive : Bouton de thème visible et accessible sur mobile
• ✅ Accessibilité WCAG 2 AA : Toutes les couleurs en thème clair respectent le ratio de contraste 4.5:1
  • Variables de couleurs assombries (#B87A00, #006B3D, #A01030)
  • Ajustements spécifiques pour backgrounds, bordures et box-shadows
  • Navigation adaptée avec fond clair (#0D0D0D sur fond clair)
  • Tous les éléments décoratifs (tags, cards, boutons) optimisés
  • Section contact avec liens visibles en mode clair

🎨 Refonte Visuelle Complète - Style Afrofuturisme Caribéen

• ✅ Palette de couleurs enrichie : Couleurs plus vibrantes et chaudes
  • Or plus éclatant (#FDB813), vert émeraude saturé (#00D66C)
  • Ajout de turquoise caraïbes, jaune soleil, orange flamme, violet nuit
  • Nuances chaudes dans les noirs et gris
• ✅ Formes organiques : Remplacement des angles droits par des border-radius asymétriques
  • Border-radius à 4 valeurs pour créer des formes naturelles (ex: 35px 15px 35px 15px)
  • Toutes les cartes, boutons, et éléments UI ont des formes douces
• ✅ Patterns géométriques SVG caribéens :
  • Motifs de cercles concentriques sur le body (réseau décentralisé)
  • Ondulations organiques dans le hero (vagues des Caraïbes)
  • Losanges pour la section Fédiverse
  • Carrés en rotation pour la section Projects (textiles traditionnels)
• ✅ Animations organiques fluides :
  • Animation floatOrganic : mouvement flotant avec rotation subtile
  • Animation breathe : pulsation douce
  • Animation shimmer : gradients animés sur textes et bordures
  • Toutes les icônes ont des animations continues
• ✅ Effets avancés sur les cartes :
  • Hover avec rotation légère et scale
  • Box-shadows plus prononcées et colorées
  • Bordures animées avec gradients
  • Transitions avec cubic-bezier personnalisées
• ✅ Boutons avec effets lumineux :
  • Gradients à 3 couleurs animés
  • Effet de brillance au survol (shimmer)
  • Transformations organiques (scale + translateY)

Version 2.0.0 - Migration vers 11ty (2025-11-05)

Dernières améliorations de contenu (Phase 2)

• ✅ Nouvelle section Solutions : Segmentation par public (associations/entreprises/citoyens)
• ✅ Section FAQ interactive : Réponses aux questions fréquentes avec storytelling sur le nom "Ka"
• ✅ Section Engagement : Appels à l'action clairs pour chaque public (associations, entreprises, citoyens)
• ✅ Navigation réorganisée pour meilleure UX
• ✅ Animations de scroll pour toutes les nouvelles sections
• ✅ Design responsive pour mobiles et tablettes

Améliorations de contenu (Phase 1)

• ✅ Textes enrichis avec des messages engageants et culturels
• ✅ Mise en avant de l'importance de la langue dite créole
• ✅ Accroche percutante dans le hero : "Et si on prenait le contrôle ensemble ?"
• ✅ Section mission enrichie avec l'accompagnement et l'éthique GAFAM
• ✅ Section Fédiverse expliquant le pourquoi (créer sans censure, pas d'algorithme aveugle)
• ✅ Section support avec un message inspirant sur l'impact réel
• ✅ Section contact encourageante pour passer à l'action
• ✅ Section hébergement ciblée pour associations/collectifs
• ✅ Tags hero mis à jour avec des messages forts
• ✅ Meta tags réseaux sociaux optimisés avec titre accrocheur
• ✅ Keywords SEO enrichis (souveraineté numérique, mawonaj numérique, etc.)
• ✅ Description Open Graph/Twitter mise à jour pour refléter le nouveau message

Nouvelle architecture

• ✅ Migration complète de PHP vers 11ty (Eleventy)
• ✅ Structure modulaire avec templates Nunjucks
• ✅ Données centralisées en fichiers JSON
• ✅ Build statique optimisé

Nouvelle charte graphique

• ✅ Charte basée sur les couleurs officielles du logo OKI
• ✅ Palette de couleurs :
  • Or OKI (#E8A625) - couleur principale
  • Vert OKI (#00A854) - services Fédiverse
  • Rouge OKI (#ED1C4C) - accents
  • Noir OKI (#000000) - arrière-plans
• ✅ Logo intégré dans la navigation
• ✅ Favicon ajouté

Design & UX

• ✅ Fond noir élégant au lieu du bleu
• ✅ Accents or pour les titres et boutons
• ✅ Bordures et effets or pour cohérence visuelle
• ✅ Cartes de services avec bordures vertes
• ✅ Projets web avec accents rouges
• ✅ Footer avec bordure dorée

Fonctionnalités conservées

• ✅ Toutes les sections de la V1
• ✅ Animations et effets interactifs
• ✅ Navigation responsive
• ✅ Easter egg Konami Code
• ✅ Support des dons (Stripe)
• ✅ Services d'hébergement

Améliorations techniques

• ✅ Temps de build ultra-rapide (~60ms)
• ✅ Hot reload pour le développement
• ✅ Performance améliorée
• ✅ Code maintenable et modulaire
• ✅ Licence libre AGPL-V3

SEO & Référencement

• ✅ Meta tags Open Graph pour Facebook et LinkedIn
• ✅ Twitter Cards pour un meilleur partage sur X/Twitter
• ✅ JSON-LD avec Schema.org (Organization)
• ✅ Sitemap.xml avec URLs principales
• ✅ Robots.txt configuré
• ✅ Balises canonical pour éviter le contenu dupliqué
• ✅ Meta descriptions personnalisées par page
• ✅ Mots-clés optimisés (Fédiverse, logiciel libre, Guadeloupe, etc.)
• ✅ Structured data avec adresse et contacts

Fichiers principaux

• eleventy.config.js - Configuration 11ty
• src/_data/ - Données du site (services, projets, valeurs, etc.)
• src/_includes/layouts/ - Templates de mise en page
• src/_includes/partials/ - Composants réutilisables
• src/assets/ - CSS, JS, images

Migration depuis V1

La V1 utilisait PHP et Bootstrap. La V2 utilise 11ty avec :

• CSS personnalisé (pas de framework)
• JavaScript Vanilla
• Structure de fichiers organisée
• Build statique déployable partout

Services Fédiverse

• ✅ GADE (PeerTube) - Alternative libre à YouTube
• ✅ BOKANTAJ (Pleroma + Soapbox) - Alternative libre à X/Twitter
• ✅ MIZIK (Funkwhale) - Alternative libre à SoundCloud
• ✅ KUTE (Castopod) - Plateforme libre de podcasting

Projets Web

• ✅ FEDIVERSE OKI - Portail d'accès à tous nos services Fédiverse
• ✅ OKI.RE - Transcriptions et traductions de productions musicales
• ✅ NUVEL.NU - Actualités multilingues de nos régions
• ✅ JWE.OVH - Jeu cartographique éducatif et ludique
• ✅ GONG.GP - Documents historiques du GONG
• ✅ Tous les projets sont cliquables avec liens directs

Partenaires

• ✅ Joukawouvè - Créateur de contenu sur GADE
• ✅ Aktivist Vybz #AKV - Émission engagée sur GADE
• ✅ cyber-mawonaj - Vers le mawonaj numérique
• ✅ Section dédiée avec logos et descriptions
• ✅ Lien dans la navigation
• ✅ Appel à devenir partenaire

Contenu juridique

• ✅ Page de mentions légales complète
• ✅ Conformité RGPD
• ✅ Licence AGPL-V3 intégrée
• ✅ Liens Stripe configurés (dons ponctuels et mensuels)
• ✅ Liens Liberapay et Ko-fi ajoutés

TODO

• Ajouter plus d'images si nécessaire
• Configurer le déploiement automatique