o-k-i.net/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