cedric/annu-kute-ced
1
0
Fork 0
forked from ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI
Code Pull Requests Activity
Files
eaacd2370283d4a569a5aa3ad7197d7f81c68756
annu-kute-ced/README.adoc
T

772 lines
30 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
= 🎙️ ANNU KUTE CED - Hub multimédia du podcast
:toc: left
:toc-title: Sommaire
:toclevels: 3
🌍 *Hub multimédia du podcast ANNU KUTE CED*
== 📖 Description
**ANNU KUTE CED** est une interface web responsive dédiée au podcast *ANNU KUTE CED*. Elle regroupe en un seul lieu la chaîne PeerTube du podcast, son compte Castopod et sa timeline Mastodon, offrant ainsi un point d'entrée unique pour suivre l'ensemble de ses contenus.
Cette plateforme est un *fork* de **FEDIVERSE OKI** (https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI[FEDIVERSE-OKI^]), développée par l'https://o-k-i.net[ORGANISATION KA INTERNATIONALE (OKI)^]. Le présent dépôt est hébergé sur LaBola : `git@labola.o-k-i.net:cedric/annu-kute-ced.git`.
OKI continue de gérer l'application ; ce fork est porté par le propriétaire du dépôt *cedric* (Cédric Famibelle-Pronzola). Le code source reste disponible et le projet respecte la licence d'origine (GNU Affero General Public License v3 ou ultérieure).
🎯 *Mission* : Offrir un hub libre et décentralisé pour découvrir, écouter et suivre le podcast ANNU KUTE CED sans dépendre des grandes plateformes propriétaires.
== 🔗 Sources et instances utilisées
Le hub est configuré par défaut pour agréger les sources suivantes du podcast ANNU KUTE CED :
- 🎥 *Chaîne PeerTube (GADE)* : https://gade.o-k-i.net/c/annu_kute_ced/videos
- 🎙️ *Compte Castopod (KUTE)* : https://kute.o-k-i.net/@annu_kute_cedric
- 📡 *Timeline Mastodon (BOKANTE)* : https://bokante.o-k-i.net/@cedric
== ✨ Fonctionnalités
- 🎥 Affichage des vidéos à la une et récentes depuis PeerTube
- 📚 Navigation par catégories
- ▶️ Lecture de vidéos
- 🔍 Recherche de contenu
- 📱 Interface responsive (mobile et desktop)
- 🔗 Intégration avec l'instance PeerTube GADE
- 📲 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 Castopod* : Affichage des derniers épisodes du 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 :
+
[source,bash]
----
git clone git@labola.o-k-i.net:cedric/annu-kute-ced.git
----
. 📦 *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 (par défaut : https://gade.o-k-i.net)
* Compte Castopod à afficher (par défaut : `@annu_kute_cedric` sur https://kute.o-k-i.net)
* Compte Mastodon à suivre (par défaut : `@cedric` sur https://bokante.o-k-i.net)
* 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 `America/Guadeloupe`. 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 (`annukuteced.buzz`). 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 `annukuteced.buzz`
* `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
ANNU KUTE CED 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', 'annu_kute_ced');
// === 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 ANNU KUTE CED');
// 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 podcast');
----
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://kute.o-k-i.net');
define('PLAYLIST_ID', '@annu_kute_cedric');
----
=== 📺 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', 'Enregistrement du prochain épisode ANNU KUTE CED.');
// 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
ANNU KUTE CED 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 au podcast
* 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)
ANNU KUTE CED peut afficher les derniers épisodes du podcast Castopod directement sur la page d'accueil, à côté de la timeline Mastodon.
=== ✨ 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');
// Slug du podcast ANNU KUTE CED
// Le feed RSS est accessible à : https://kute.o-k-i.net/@annu_kute_cedric/feed
define('CASTOPOD_PODCAST_SLUGS', [
'annu_kute_cedric'
]);
// Nombre d'épisodes à afficher
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. *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', ['annu_kute_cedric']);`
=== 📋 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
== 📡 Intégration Mastodon
La page d'accueil affiche la timeline publique du compte Mastodon du podcast.
=== ⚙️ Configuration
[source,php]
----
// URL de l'instance Mastodon
define('MASTODON_INSTANCE_URL', 'https://bokante.o-k-i.net');
// URL publique du compte (utilisée pour les liens "Voir plus")
define('MASTODON_URL', 'https://bokante.o-k-i.net/@cedric');
// Nombre maximum de posts à récupérer et afficher
define('MASTODON_MAX_POST_FETCH', '10');
define('MASTODON_MAX_POST_SHOW', '10');
----
== 🛡️ 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 annukuteced.buzz"
* 🍎 *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 `annukuteced.buzz` 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
== 📜 Origine et licence
**ANNU KUTE CED** est un fork de **FEDIVERSE OKI**, une application développée par l'https://o-k-i.net[ORGANISATION KA INTERNATIONALE (OKI)^] sous licence GNU Affero General Public License v3 ou ultérieure.
- *Dépôt upstream* : https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI
- *Dépôt du fork* : `git@labola.o-k-i.net:cedric/annu-kute-ced.git`
- *Gestion* : L'application est maintenue par OKI ; ce fork est porté par le propriétaire du dépôt *cedric* (Cédric Famibelle-Pronzola).
- *Licence* : Le projet continue d'être distribué sous https://www.gnu.org/licenses/agpl-3.0.html[GNU Affero General Public License version 3 (AGPL-V3)^] ou toute version ultérieure, conformément à la licence d'origine.
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].
View Git Blame Copy Permalink