FEDIVERSE-OKI/README.adoc

= 🎬 FEDIVERSE OKI - ORGANISATION KA INTERNATIONALE
:toc: left
:toc-title: Sommaire
:toclevels: 3

🌍 *Une plateforme multimédia indépendante*

== 📖 Description

**FEDIVERSE OKI** est une interface web responsive qui permet de consulter et rechercher des vidéos hébergées sur une instance PeerTube. Il est également possible de suivre le fil du réseau social Mastodon. C'est le fork de https://codeberg.org/Ka-Ubuntu/kaubuntu.re[kaubuntu.re], développée par le mouvement politique *https://kaubuntu.com[Ka-Ubuntu]*. Cette plateforme est conçue pour être légère, facilement déployable sur un serveur mutualisé, et optimisée pour les appareils mobiles et desktop.

🎯 *Mission* : Offrir une alternative libre et décentralisée aux plateformes vidéo traditionnelles.

== ✨ Fonctionnalités

- 🎥 Affichage des vidéos à la une et récentes
- 📚 Navigation par catégories
- ▶️ Lecture de vidéos
- 🔍 Recherche de contenu
- 📱 Interface responsive (mobile et desktop)
- 🔗 Intégration avec une instance PeerTube
- 📲 Progressive Web App (PWA) avec installation native
- 🌐 Mode hors ligne avec cache intelligent
- 📡 Détection automatique d'état de connexion
- 📊 Analytics intégré avec Plausible (respectueux de la vie privée)
- 📰 *Intégration WordPress* : Affichage des articles depuis un site WordPress via REST API
- 🎙️ *Intégration Castopod* : Affichage des derniers épisodes de podcast via flux RSS
- 💝 *Système de dons* : Support multi-plateformes (LiberaPay, Ko-fi, Stripe) avec dons ponctuels et récurrents
- ⏰ *Système de countdown* : Page de lancement configurable avec compte à rebours multi-fuseaux
- 📺 *Annonce du prochain live* : Affichage dynamique avec multi-fuseaux horaires et image personnalisable

== 🛠️ Technologies utilisées

- 📄 HTML5
- 🎨 CSS3 avec Media Queries pour le responsive design
- 🐘 PHP pour le backend
- ⚡ JavaScript pour les interactions côté client
- 🔧 Service Worker pour le cache offline et PWA
- 📋 Web App Manifest pour l'installation native
- 📦 Bibliothèques externes via CDN:
  * 🎯 Font Awesome (icônes)
  * 📊 Plausible Analytics (statistiques respectueuses de la vie privée)

== 📁 Structure du projet

[source]
----
├── css/
│   ├── styles.css
│   ├── video-page.css
│   ├── categories.css
│   └── search.css
├── img/
│   ├── categories/
│   ├── video-thumbnails/
│   └── channels/
├── js/
│   └── main.js
├── includes/
│   ├── header.php
│   ├── footer.php
│   ├── mobile-menu.php
│   ├── featured-videos.php
│   ├── recent-videos.php
│   ├── categories.php
│   ├── pwa-init.php
│   └── config.local.php.sample     # Exemple de configuration locale
├── conf/
│   ├── .htaccess.sample            # Configuration Apache sécurisée
│   └── nginx.conf.sample           # Configuration Nginx sécurisée
├── index.php
├── video.php
├── categories.php
├── search.php
├── sw.js                           # Service Worker pour PWA
├── site.webmanifest.sample         # Exemple de manifest PWA
├── browserconfig.xml               # Configuration Windows
├── sitemap.xml.sample              # Exemple de sitemap
├── robots.txt.sample               # Exemple de robots.txt
├── mentions-legales.php.sample     # Exemple de mentions légales
└── README.adoc
----

== 📋 Prérequis

- 🐘 *PHP 7.4+* (recommandé : PHP 8.0+)
- 📦 *Extensions PHP requises :*
  * `curl` - Pour les appels API vers PeerTube
  * `json` - Pour le traitement des données JSON
  * `intl` - Pour la gestion des dates internationales et traductions
  * `mbstring` - Pour la manipulation des chaînes multi-octets
  * `xml` (SimpleXML) - Recommandée pour Castopod (fallback regex disponible)
- 🌐 *Serveur web* : Apache ou Nginx
- 🔒 *HTTPS* : Requis pour les fonctionnalités PWA

=== Installation de l'extension intl

L'extension `intl` est nécessaire pour l'affichage des dates et heures de directs en plusieurs langues et fuseaux horaires.

[source,bash]
----
# Sur Ubuntu/Debian
sudo apt-get install php-intl

# Sur Fedora/RHEL/CentOS
sudo dnf install php-intl

# Puis redémarrer le serveur web
sudo systemctl restart apache2
# ou pour nginx avec php-fpm
sudo systemctl restart php8.3-fpm
----

Pour vérifier que l'extension est bien chargée :
[source,bash]
----
php -m | grep intl
----

== 🚀 Installation

. 📥 Clonez ce dépôt
. 📦 *Vérifiez les prérequis :* Assurez-vous que toutes les extensions PHP requises sont installées
. 🔧 Configurez votre serveur web (Apache, Nginx, etc.) pour pointer vers le répertoire racine
. 🔒 *Important :* Assurez-vous que votre serveur supporte HTTPS (requis pour PWA)
. 🛡️ *Configuration serveur sécurisée :* Copiez le fichier de configuration approprié depuis `conf/`

== ⚙️ Configuration

Le site utilise un système de configuration en deux parties :

- 📋 `includes/config.php` : La configuration de base (versionnée)
- 🔧 `includes/config.local.php` : Votre configuration locale (non versionnée)

Pour configurer votre environnement local :

. Copiez le fichier d'exemple vers le fichier local :
+
[source,bash]
----
cp includes/config.local.php.sample includes/config.local.php
----

. Modifiez `includes/config.local.php` selon vos besoins :
  * URL de l'instance PeerTube
  * Clé API
  * Catégories à afficher
  * Nombre de vidéos par section
  * Fuseau horaire par défaut (`DEFAULT_TIMEZONE`)
  * etc.

Les modifications apportées à `config.local.php` ne seront pas suivies par Git, ce qui vous permet de personnaliser votre instance sans affecter le code source principal.

=== Configuration du fuseau horaire

Par défaut, le site utilise le fuseau horaire `Indian/Reunion`. Vous pouvez le changer en définissant la constante `DEFAULT_TIMEZONE` dans votre `config.local.php` :

[source,php]
----
// Fuseau horaire par défaut pour l'affichage des dates
// Liste des fuseaux disponibles : https://www.php.net/manual/fr/timezones.php
define('DEFAULT_TIMEZONE', 'America/Guadeloupe');
----

Cette configuration affecte :

- L'affichage des dates et heures sur tout le site
- Les annonces de directs à venir avec leurs horaires
- Le système de compte à rebours
- La gestion des fuseaux horaires multiples dans les annonces

== 🏷️ Personnalisation des catégories

Pour personnaliser les catégories affichées sur la page d'accueil, modifiez la constante `PRIORITY_CATEGORIES` dans votre fichier `config.local.php` :

[source,php]
----
define('PRIORITY_CATEGORIES', [
    11 => 'Actualité & Politique',
    14 => 'Activisme',
    15 => 'Science & Technologie',
    1 => 'Musique',
    // Ajoutez d'autres catégories selon vos besoins
]);
----

- Les clés sont les IDs des catégories dans PeerTube
- Les valeurs sont les noms personnalisés que vous souhaitez afficher
- L'ordre dans le tableau détermine l'ordre d'affichage sur la page

== 🎨 Personnalisation

Vous pouvez personnaliser l'apparence de la plateforme en modifiant les fichiers CSS dans le dossier `css/`. Pour changer le logo et les couleurs principales:

. 🖼️ Remplacez le fichier `img/logo.png` par votre propre logo
. 🎨 Modifiez les couleurs dans `css/styles.css`

== 📝 Personnalisation du sitemap, robots.txt, webmanifest et mentions légales

Les fichiers `sitemap.xml`, `robots.txt`, `site.webmanifest` et `mentions-legales.php` contiennent des données spécifiques au domaine (`bokantaj.o-k-i.net`). Pour les adapter à votre domaine :

. Copiez les fichiers samples pour créer vos propres versions :
+
[source,bash]
----
cp sitemap.xml.sample sitemap.xml
cp robots.txt.sample robots.txt
cp site.webmanifest.sample site.webmanifest
cp mentions-legales.php.sample mentions-legales.php
----

. Remplacez les placeholders par vos informations réelles :
  * `VOTRE-DOMAINE` par votre nom de domaine
  * `VOTRE-DATE-MAJ` par la date de dernière mise à jour des mentions légales

Ces fichiers sont listés dans le `.gitignore` afin que vos modifications ne soient pas suivies par Git, ce qui vous permet de personnaliser votre instance sans affecter le code source principal.

== 📺 Section Hero : Direct, Vidéo et Playlists

FEDIVERSE OKI propose une section hero flexible et configurable en haut de la page d'accueil, pouvant afficher soit un direct PeerTube, soit une vidéo unique, soit une playlist audio/vidéo (PeerTube, Funkwhale, Castopod), soit être masquée complètement.

=== 🎯 Modes disponibles

La section hero supporte quatre modes configurables via `HERO_TYPE` :

- *`live`* : Affiche le direct PeerTube s'il est actif, sinon affiche l'annonce du prochain live
- *`video`* : Affiche une vidéo PeerTube spécifique
- *`playlist`* : Affiche une playlist embarquée (PeerTube, Funkwhale ou Castopod)
- *`none`* : Masque complètement la section hero

=== ⚙️ Configuration

Ajoutez dans votre `config.local.php` :

[source,php]
----
// Type de contenu à afficher dans la section hero
// Options: 'live', 'video', 'playlist', 'none'
define('HERO_TYPE', 'video');

// === Configuration pour HERO_TYPE = 'live' ===
define('LIVE_ACCOUNT_NAME', 'admin');

// === Configuration pour HERO_TYPE = 'video' ===

// ID de la vidéo (extrait de l'URL: https://gade.o-k-i.net/w/VIDEO_ID)
define('HERO_VIDEO_ID', '1aJ2u9euwF9fWKQhFxwFio');

// Titre de la vidéo (optionnel, pour l'accessibilité)
define('HERO_VIDEO_TITLE', 'Vidéo de présentation');

// === Configuration pour HERO_TYPE = 'playlist' ===

// Type de plateforme: 'peertube', 'funkwhale', 'castopod'
define('PLAYLIST_PLATFORM', 'peertube');

// URL de base de la plateforme
define('PLAYLIST_INSTANCE_URL', 'https://gade.o-k-i.net');

// ID de la playlist à afficher
define('PLAYLIST_ID', 'b0f923b5-f8f6-4b5c-b167-6c4f0e04fd42');

// Titre de la playlist (optionnel)
define('PLAYLIST_TITLE', 'Sélection OKI');

// Description de la playlist (optionnel)
define('PLAYLIST_DESCRIPTION', 'Notre sélection de vidéos');
----

=== 🎬 Exemples de configuration

==== Vidéo unique PeerTube

[source,php]
----
define('HERO_TYPE', 'video');
define('HERO_VIDEO_ID', '1aJ2u9euwF9fWKQhFxwFio');
define('HERO_VIDEO_TITLE', 'Présentation du mouvement');
----

L'URL de la vidéo sera : `https://gade.o-k-i.net/w/1aJ2u9euwF9fWKQhFxwFio`

==== PeerTube (Playlist vidéo)

[source,php]
----
define('PLAYLIST_PLATFORM', 'peertube');
define('PLAYLIST_INSTANCE_URL', 'https://gade.o-k-i.net');
define('PLAYLIST_ID', 'b0f923b5-f8f6-4b5c-b167-6c4f0e04fd42');
----

L'URL de la playlist sera : `https://gade.o-k-i.net/w/p/b0f923b5-f8f6-4b5c-b167-6c4f0e04fd42`

==== Funkwhale (Playlist audio)

[source,php]
----
define('PLAYLIST_PLATFORM', 'funkwhale');
define('PLAYLIST_INSTANCE_URL', 'https://tanker.funkwhale.audio');
define('PLAYLIST_ID', '12345');
----

==== Castopod (Podcast)

[source,php]
----
define('PLAYLIST_PLATFORM', 'castopod');
define('PLAYLIST_INSTANCE_URL', 'https://podcast.example.com');
define('PLAYLIST_ID', '@nom-du-podcast');
----

=== 📺 Annonce du prochain live (mode `HERO_TYPE = 'live'`)

Lorsque le mode est configuré sur `live`, le système affiche automatiquement une annonce configurable lorsqu'il n'y a pas de diffusion en direct en cours.

==== ✨ Fonctionnalités de l'annonce live

- 📅 *Date et heure dynamiques* : Génération automatique à partir de `NEXT_LIVE_DATE`
- 🌍 *Multi-fuseaux horaires* : Affichage automatique pour 5 territoires (Ma'ohi Nui, Martinique/Guadeloupe, Guyane, France, Kanaky)
- ⏰ *Décalage UTC* : Affichage du fuseau horaire de référence (UTC-04:00 pour La Guadeloupe)
- 📅 *Indicateurs de jour* : Affichage des décalages de jour (+1j/-1j) si nécessaire
- 🖼️ *Image personnalisable* : Support des formats Instagram (portrait 4:5, carré 1:1) et paysage (16:9)
- 📱 *Responsive complet* : Layouts adaptés pour desktop (50/50), tablette (vertical), et mobile
- 🔄 *Flexbox intelligent* : Réorganisation automatique des fuseaux horaires selon la largeur d'écran

==== ⚙️ Configuration de l'annonce live

Pour configurer l'annonce du prochain live, ajoutez dans votre `config.local.php` :

[source,php]
----
// Activer l'annonce du prochain live
define('NEXT_LIVE_ENABLED', true);

// Titre (la date sera ajoutée automatiquement)
define('NEXT_LIVE_TITLE', 'Prochain live');

// Description (l'heure sera ajoutée automatiquement)
define('NEXT_LIVE_DESCRIPTION', 'Constitution du futur état réunionnais & Hommage à Thomas Sankara.');

// Date du prochain live au format Y-m-d H:i:s
define('NEXT_LIVE_DATE', '2025-10-11 10:00:00');

// Chemin vers l'image d'annonce (optionnel)
define('NEXT_LIVE_IMAGE', 'uploads/next-live.jpg');
----

=== 📁 Gestion des images

. Placez vos images dans le dossier `uploads/` (non tracké par Git)
. Formats recommandés :
  * Portrait 4:5 : 1080×1350px ou 1280×1600px - *Idéal*
  * Carré 1:1 : 1080×1080px - *Parfait*
  * Paysage 16:9 : 1920×1080px
. Optimisez vos images (< 500 Ko recommandé)

=== 🎯 Affichage

*Desktop (≥1700px)* : Layout 50/50 (image à gauche, informations à droite)

*Tablette (1025-1699px)* : Hero seul sur une ligne, Mastodon et WordPress côte à côte en dessous

*Mobile (<769px)* : Stack vertical avec scroll si nécessaire

=== 🌍 Fuseaux horaires affichés

L'annonce calcule automatiquement les heures locales pour :

- *Ma'ohi Nui* (Polynésie française) - UTC-10:00
- *Martinique / Guadeloupe* - UTC-04:00
- *Guyane* - UTC-03:00
- *France* - UTC+02:00
- *Kanaky* (Nouvelle-Calédonie) - UTC+11:00

L'heure de référence (La Guadeloupe, UTC-04:00) est affichée dans le badge principal.

== 💝 Système de dons

FEDIVERSE OKI intègre un système de dons moderne et flexible supportant plusieurs plateformes de paiement.

=== ✨ Fonctionnalités

- 💳 *Multi-plateformes* : Support de LiberaPay, Ko-fi et Stripe
- 🔄 *Dons ponctuels et récurrents* : Système d'onglets pour choisir le type de don (Stripe)
- 🎯 *Montants prédéfinis* : Boutons rapides avec montants suggérés (1€, 5€, 10€, 20€, 50€)
- 🎨 *Design moderne* : Interface élégante avec logos officiels des plateformes
- 🔒 *Sécurisé* : Validation stricte des URLs et protection XSS
- 📱 *Responsive* : Interface optimisée mobile et desktop
- ♿ *Accessible* : Conforme aux standards d'accessibilité
- 🌙 *Mode sombre* : Support complet du thème sombre

=== ⚙️ Configuration

Pour activer le système de dons, ajoutez dans votre `config.local.php` :

[source,php]
----
// Activer le système de dons
define('DONATIONS_ENABLED', true);

// URLs des plateformes de don externes
define('LIBERAPAY_URL', 'https://liberapay.com/votre-compte/donate');
define('KOFI_URL', 'https://ko-fi.com/votre-compte');

// Activer les dons via Stripe
define('STRIPE_ENABLED', true);

// Liens Stripe pour les dons ponctuels
define('STRIPE_ONE_TIME_LINKS', [
    1 => 'https://buy.stripe.com/xxxxx',  // Lien pour don de 1€
    5 => 'https://buy.stripe.com/xxxxx',  // Lien pour don de 5€
    10 => 'https://buy.stripe.com/xxxxx', // Lien pour don de 10€
    20 => 'https://buy.stripe.com/xxxxx', // Lien pour don de 20€
    50 => 'https://buy.stripe.com/xxxxx', // Lien pour don de 50€
    'custom' => 'https://buy.stripe.com/xxxxx' // Lien pour montant personnalisé
]);

// Liens Stripe pour les dons mensuels (récurrents)
define('STRIPE_MONTHLY_LINKS', [
    1 => 'https://buy.stripe.com/xxxxx',  // Lien pour don mensuel de 1€
    5 => 'https://buy.stripe.com/xxxxx',  // Lien pour don mensuel de 5€
    10 => 'https://buy.stripe.com/xxxxx', // Lien pour don mensuel de 10€
    20 => 'https://buy.stripe.com/xxxxx', // Lien pour don mensuel de 20€
    50 => 'https://buy.stripe.com/xxxxx', // Lien pour don mensuel de 50€
]);

// Montants suggérés (optionnel)
define('DONATION_AMOUNTS', [1, 5, 10, 20, 50]);

// Devise (optionnel, EUR par défaut)
define('DONATION_CURRENCY', 'EUR');
----

NOTE: Au moins une plateforme de don doit être configurée (LiberaPay, Ko-fi ou Stripe) pour que la page s'affiche.

=== 📄 Personnalisation

. Copiez le fichier sample pour créer votre page de dons :
+
[source,bash]
----
cp dons.php.sample dons.php
----

. Personnalisez le contenu directement dans `dons.php` :
  * Modifiez les textes dans les sections `<!-- PERSONNALISEZ -->`
  * Adaptez les objectifs listés à votre organisation
  * Ajustez les cartes d'information selon vos besoins

=== 🎯 Interface utilisateur

Une fois activé, le système de dons ajoute :

- 💝 *Icône cœur rouge* dans le header
- 📋 *Lien "Soutenir"* dans la sidebar
- 📄 *Page dédiée* accessible via `/dons.php`

La page de dons affiche uniquement les plateformes configurées :

- *LiberaPay* : Bouton avec logo jaune officiel
- *Ko-fi* : Bouton avec logo bleu officiel
- *Stripe* : Interface avec onglets "Don ponctuel" / "Don mensuel"

=== 💳 Configuration Stripe

Pour configurer Stripe :

. Créez vos liens de paiement dans votre tableau de bord Stripe
. Pour chaque montant (1€, 5€, 10€, 20€, 50€), créez :
  * Un lien de paiement ponctuel
  * Un lien d'abonnement mensuel (si souhaité)
. Copiez les URLs générées dans votre `config.local.php`
. Le lien `'custom'` permet de rediriger vers une page Stripe avec montant personnalisable

=== 🔒 Sécurité

Le système intègre plusieurs protections :

- ✅ *Validation des URLs* : Vérification que les plateformes sont bien configurées
- ✅ *Protection XSS* : Échappement de toutes les sorties utilisateur
- ✅ *Headers sécurisés* : CSP et autres headers de sécurité
- ✅ *Ouverture sécurisée* : Liens avec `noopener noreferrer`
- ✅ *Tokens CSRF* : Protection contre les attaques CSRF

== 🎙️ Intégration Castopod (Podcasts)

FEDIVERSE OKI peut afficher les derniers épisodes d'un podcast Castopod directement sur la page d'accueil, à côté de la timeline Mastodon et des articles WordPress.

=== ✨ Fonctionnalités

- 🎧 *Affichage des derniers épisodes* : Liste configurable des épisodes récents
- 🖼️ *Miniatures des épisodes* : Affichage des images de couverture
- ⏱️ *Durée et date* : Informations complètes sur chaque épisode
- 🎨 *Design cohérent* : Interface harmonisée avec le reste du site
- 📱 *Responsive* : Affichage adapté mobile et desktop
- 🌙 *Mode sombre* : Support complet du thème sombre
- 🔄 *Fallback intelligent* : Fonctionne avec ou sans l'extension PHP SimpleXML

=== ⚙️ Configuration

Pour activer l'intégration Castopod, ajoutez dans votre `config.local.php` :

[source,php]
----
// Activer l'affichage des podcasts Castopod
define('CASTOPOD_ENABLED', true);

// URL de l'instance Castopod
define('CASTOPOD_URL', 'https://kute.o-k-i.net');

// Liste des slugs de podcasts à afficher
// Les épisodes de tous les podcasts seront mélangés et triés par date
define('CASTOPOD_PODCAST_SLUGS', [
    'joukawouve',
    'cspcc',
    'radyobokaz'
]);

// Nombre d'épisodes à afficher (total, tous podcasts confondus)
define('CASTOPOD_EPISODES_COUNT', 5);

// IMPORTANT : Activer le cache pour éviter le rate limiting
define('CACHE_ENABLED', true);
define('CACHE_DURATION', 3600); // 1 heure recommandé
----

WARNING: *Rate Limiting* : Castopod applique un rate limit strict sur les requêtes RSS. Pour afficher plusieurs podcasts, le système ajoute un délai de 5 secondes entre chaque requête. *Le cache est fortement recommandé* pour éviter ces délais à chaque chargement de page.

TIP: Pour un seul podcast, vous pouvez utiliser une chaîne : `define('CASTOPOD_PODCAST_SLUGS', ['joukawouve']);`

=== 📋 Prérequis

- *Extension PHP XML* (recommandée mais optionnelle) :
+
[source,bash]
----
# Sur Ubuntu/Debian
sudo apt install php8.3-xml

# Sur CentOS/RHEL
sudo yum install php-xml
----
+
NOTE: Si l'extension n'est pas installée, un fallback avec parsing regex sera utilisé automatiquement (moins performant mais fonctionnel).

=== 🎯 Affichage

La section Castopod s'affiche automatiquement sur la page d'accueil selon la configuration :

*Ordre d'affichage* :
1. Vidéo hero (si configurée)
2. Podcasts Castopod
3. Timeline Mastodon
4. Articles WordPress (si activé)

*Desktop* :
- Castopod + Mastodon : Layout 1fr 2fr (podcasts étroit, timeline large)
- Castopod + Mastodon + WordPress : Layout 1fr 2fr 1fr (trois colonnes)
- Mastodon + WordPress (sans Castopod) : Layout 2fr 1fr (timeline large, articles étroits)

*Mobile/Tablette* :
- Layout vertical avec toutes les sections empilées dans l'ordre ci-dessus

=== 🔧 Fonctionnement technique

Le système récupère les épisodes via le flux RSS Castopod :

- *URL du feed* : `CASTOPOD_URL/@PODCAST_SLUG/feed`
- *Format* : RSS 2.0 avec namespace iTunes
- *Données extraites* : Titre, lien, date, durée, image, description
- *Cache* : Support du système de cache si activé
- *Timeout* : 10 secondes pour éviter les blocages

=== 🎨 Personnalisation CSS

Les styles sont définis dans `css/castopod-podcasts.css` :

- `.castopod-container` : Conteneur principal
- `.castopod-episode-item` : Élément d'épisode
- `.castopod-episode-thumb` : Miniature avec effet hover
- `.castopod-play-icon` : Icône de lecture au survol

== 🛡️ Configuration de sécurité Apache

Le fichier `conf/.htaccess.sample` fourni inclut des règles de sécurité importantes pour protéger votre installation :

=== Protections incluses :

- 🚫 *Blocage des fichiers de configuration* : Empêche l'accès direct aux fichiers `.php`, `.config`, etc.
- 🔒 *Protection des répertoires sensibles* : Bloque l'accès aux dossiers `/includes/`, `/cache/`, `/docs/`
- 🗂️ *Désactivation de l'exploration* : Empêche la liste des fichiers dans les répertoires
- 🔐 *Blocage des fichiers cachés* : Protège les fichiers commençant par `.`
- 📄 *Blocage des fichiers temporaires* : Empêche l'accès aux `.sample`, `.bak`, `.log`, etc.

=== Installation :

[source,bash]
----
cp conf/.htaccess.sample .htaccess
----

WARNING: Cette configuration est essentielle pour la sécurité de votre installation. Ne pas l'utiliser expose vos fichiers de configuration aux visiteurs.

== 🛡️ Configuration de sécurité Nginx

Pour les serveurs Nginx, utilisez le fichier `conf/nginx.conf.sample` qui inclut les mêmes protections :

=== Protections incluses :

- 🚫 *Blocage des fichiers de configuration* : Empêche l'accès direct aux fichiers sensibles
- 🔒 *Protection des répertoires sensibles* : Bloque l'accès aux dossiers critiques
- 🗂️ *Désactivation de l'exploration* : `autoindex off`
- 🔐 *Blocage des fichiers cachés* : Protection des fichiers commençant par `.`
- 📄 *Optimisations* : Cache, compression gzip, headers de sécurité

=== Installation :

[source,bash]
----
# Adaptez les chemins dans conf/nginx.conf.sample puis :
sudo cp conf/nginx.conf.sample /etc/nginx/sites-available/votre-site
sudo ln -s /etc/nginx/sites-available/votre-site /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
----

== 📱 Progressive Web App (PWA)

Cette plateforme est une PWA complète offrant :

=== ✨ Fonctionnalités PWA

- 📲 *Installation native* : Bouton d'installation automatique dans l'interface
- 🌐 *Mode hors ligne* : Cache intelligent des pages et ressources visitées
- 📡 *Détection d'état* : Indicateur visuel en cas de perte de connexion
- ⚡ *Performance* : Chargement instantané des ressources en cache
- 📱 *Responsive* : Interface adaptée pour l'utilisation en application mobile

=== 📥 Comment installer l'application

. 🔄 *Automatique* : Un bouton "Installer" apparaît dans le header lors de la première visite
. 🔧 *Manuel* :
  * 🌐 *Chrome/Edge* : Menu → "Installer bokantaj.o-k-i.net"
  * 🍎 *Safari iOS* : Partager → "Ajouter à l'écran d'accueil"
  * 🦊 *Firefox Android* : Menu → "Installer"

=== 🌐 Compatibilité PWA

- ✅ Chrome/Edge (Android/Desktop)
- ✅ Safari (iOS 11.3+)
- ✅ Firefox (Android)
- ✅ Samsung Internet

=== 📄 Fichiers PWA

- 🔧 `sw.js` : Service Worker gérant le cache et mode offline
- 📋 `site.webmanifest` : Configuration de l'application (nom, icônes, etc.)
- 🪟 `browserconfig.xml` : Support des tuiles Windows

== 🚀 Déploiement

Pour déployer sur un serveur mutualisé:

. 🐘 Assurez-vous que votre hébergeur supporte PHP (version 7.0 minimum recommandée)
. 🔒 *Configurez HTTPS* (obligatoire pour les fonctionnalités PWA)
. 📤 Transférez tous les fichiers via FTP dans le répertoire racine de votre site
. 🔧 Vérifiez que les permissions des fichiers sont correctement définies (644 pour les fichiers, 755 pour les dossiers)
. 🌐 Configurez votre domaine pour pointer vers le dossier où vous avez installé l'application
. 🧪 Testez l'installation PWA via les outils de développement du navigateur

== 👨‍💻 Développement

Si vous souhaitez contribuer au développement:

. 🌿 Créez une branche pour vos modifications: `git checkout -b ma-nouvelle-fonctionnalité`
. 💾 Committez vos changements: `git commit -m 'Ajout d'une nouvelle fonctionnalité'`
. 📤 Poussez vers la branche: `git push origin ma-nouvelle-fonctionnalité`
. 🔀 Soumettez une pull request

== 📜 License

Copyright (C) 2025 Cédric Famibelle-Pronzola & *ORGANISATION KA INTERNATIONALE*

*ORGANISATION KA INTERNATIONALE* : Nous sommes une association à but non lucratif dédiée à la promotion de nos langues et au traitement de l'actualité. Parallèlement, nous proposons des alternatives aux géants du numérique comme les GAFAM, en privilégiant l'utilisation de logiciels libres.

=== 🇫🇷 FR

Ce programme est un logiciel libre : vous pouvez le redistribuer et/ou le modifier selon les termes de la licence publique générale GNU Affero publiée par la Free Software Foundation, soit la version 3 de la licence, soit (à votre choix) toute version ultérieure.

Ce programme est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE GARANTIE ; sans même la garantie implicite de COMMERCIALISATION ou d'ADAPTATION À UN USAGE PARTICULIER. Voir la licence publique générale GNU Affero pour plus de détails.

Vous devriez avoir reçu une copie de la licence publique générale GNU Affero avec ce programme. Si ce n'est pas le cas, consultez https://www.gnu.org/licenses/.

=== 🇺🇸 EN

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License along with this program. If not, see https://www.gnu.org/licenses/.

== 📊 Analytics et Statistiques

=== 🔒 Respect de la vie privée

Cette plateforme utilise *Plausible Analytics*, une solution d'analyse web respectueuse de la vie privée qui :

- ✅ *Sans cookies* : Aucun cookie de suivi n'est installé
- ✅ *Conforme RGPD* : Respecte les réglementations européennes sur la protection des données
- ✅ *Open Source* : Code source ouvert et auditable
- ✅ *Données anonymes* : Aucune donnée personnelle collectée
- ✅ *Sans collecte inter-sites* : Pas de profilage des utilisateurs

=== 📈 Données collectées

Plausible collecte uniquement des statistiques anonymes :

- 📍 Pages visitées
- 🌍 Pays d'origine (basé sur l'IP, sans stockage)
- 📱 Type d'appareil (mobile, desktop, tablette)
- 🌐 Navigateur utilisé
- 📊 Temps passé sur le site

=== ⚙️ Configuration

Les analytics sont automatiquement activés via le script Plausible intégré dans le `<head>` de chaque page. La configuration est gérée dans `includes/security.php` avec les autorisations CSP appropriées.

== 📞 Contact

Pour toute question ou suggestion concernant cette plateforme, veuillez nous contacter à mailto:kontak@o-k-i.net[kontak@o-k-i.net].