From 3d28d3832f51ff7710dd8fb0a686c3866e7bae4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Thu, 23 Jul 2026 05:10:04 +0400 Subject: [PATCH] docs: rewrite README as bilingual FR/EN reference --- README.adoc | 2273 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 1630 insertions(+), 643 deletions(-) diff --git a/README.adoc b/README.adoc index 2f030b4..e3ec9de 100644 --- a/README.adoc +++ b/README.adoc @@ -1,771 +1,1758 @@ -= 🎙️ ANNU KUTE CED - Hub multimédia du podcast += 🎙️ ANNU KUTE CED — Hub multimédia du podcast :toc: left -:toc-title: Sommaire +:toc-title: Sommaire / Contents :toclevels: 3 -🌍 *Hub multimédia du podcast ANNU KUTE CED* +[[top]] +🌍 *Hub multimédia du podcast ANNU KUTE CED* + +🌍 *Multimedia hub for the ANNU KUTE CED podcast* -== 📖 Description +[.text-center] +*Choisissez votre langue / Choose your language :* + +<> · <> -**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`. +[[fr]] +== 🇫🇷 Version française -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). +=== 📖 Description -🎯 *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. +*ANNU KUTE CED* est une interface web responsive qui fait office de *hub multimédia* pour le podcast du même nom. Elle regroupe en un seul lieu : -== 🔗 Sources et instances utilisées +- 🎥 la chaîne *PeerTube* du podcast (vidéos, shorts, directs) ; +- 🎙️ son compte *Castopod* (derniers épisodes, lecture audio intégrée) ; +- 📡 sa timeline *Mastodon* (actualités et annonces). -Le hub est configuré par défaut pour agréger les sources suivantes du podcast ANNU KUTE CED : +La plateforme est légère, déployable sur un serveur mutualisé (PHP + serveur web, sans base de données) et optimisée pour mobile et desktop. C'est aussi une *Progressive Web App* installable, avec mode hors ligne. -- 🎥 *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 +🎯 *Mission* : offrir un point d'entrée unique, libre et décentralisé, pour découvrir, écouter et suivre le podcast ANNU KUTE CED sans dépendre des grandes plateformes propriétaires. -== ✨ Fonctionnalités +=== 🌳 Origine du projet -- 🎥 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 +Cette application est un *fork* de 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)^], elle-même issue du projet https://codeberg.org/Ka-Ubuntu/kaubuntu.re[kaubuntu.re^] du mouvement https://kaubuntu.com[Ka-Ubuntu^]. La licence d'origine (GNU AGPL v3) est conservée et respectée. -== 🛠️ Technologies utilisées +[cols="1,3",options="header"] +|=== +| Élément | Détail -- 📄 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) +| Dépôt upstream +| https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI -== 📁 Structure du projet +| Dépôt de ce fork +| `git@labola.o-k-i.net:cedric/annu-kute-ced.git` + +| Domaine de production +| https://annukuteced.buzz + +| Gouvernance +| Application maintenue par OKI ; fork porté par le propriétaire du dépôt *cedric* (Cédric Famibelle-Pronzola) + +| Licence +| https://www.gnu.org/licenses/agpl-3.0.html[GNU Affero General Public License v3^] (AGPL-V3) ou ultérieure +|=== + +=== 🔗 Sources et instances utilisées + +Le hub est configuré par défaut pour agréger les sources du podcast ANNU KUTE CED : + +[cols="1,2,3",options="header"] +|=== +| Service | Instance | Compte / chaîne + +| 🎥 PeerTube (vidéos, lives) +| GADE — `https://gade.o-k-i.net` +| https://gade.o-k-i.net/c/annu_kute_ced/videos[`annu_kute_ced`^] + +| 🎙️ Castopod (épisodes audio) +| KUTE — `https://kute.o-k-i.net` +| https://kute.o-k-i.net/@annu_kute_cedric[`@annu_kute_cedric`^] + +| 📡 Mastodon (timeline) +| BOKANTE — `https://bokante.o-k-i.net` +| https://bokante.o-k-i.net/@cedric[`@cedric`^] + +| 🎵 Funkwhale (musique, optionnel, désactivé par défaut) +| MIZIK — `https://mizik.o-k-i.net` +| morceaux aléatoires de l'instance +|=== + +Toutes ces sources sont modifiables dans `includes/config.local.php` (voir <>). + +=== ✨ Fonctionnalités + +==== 🎥 Vidéos PeerTube + +- Vidéos récentes, tendances et par catégories (configurables) +- *Shorts* : carrousel dédié aux vidéos portrait de moins de 3 minutes (défilement tactile) +- Page vidéo complète : lecteur PeerTube embarqué, description Markdown, badge de licence Creative Commons, commentaires (lecture seule), vidéos suggérées +- *Téléchargement* : fichiers directs et playlists HLS, avec résolution et taille +- *Partage* : copie de lien, code d'intégration, e-mail, Facebook, X, WhatsApp, LinkedIn, Telegram +- Recherche plein texte et recherche par hashtag (préfixe `#`) +- Pagination AJAX « Voir plus » (protégée par jeton CSRF et vérification d'origine) + +==== 📺 Directs et annonces + +- Page *Direct* (`/direct`) : embed du live PeerTube s'il est en cours, avec autoplay +- *Annonce du prochain live* : date et heure converties automatiquement pour 5 territoires (Ma'ohi Nui, Martinique/Guadeloupe, Guyane, France, Kanaky), image personnalisable (4:5, 1:1, 16:9) +- Section *hero* d'accueil configurable : live, vidéo unique, playlist (PeerTube / Funkwhale / Castopod) ou masquée + +==== 🎙️ Podcast et audio + +- *Castopod* : derniers épisodes via flux RSS, avec *lecteur audio intégré* (lecture/pause, avance automatique à l'épisode suivant, un seul flux à la fois) +- *Funkwhale* (optionnel) : sélection aléatoire de morceaux de l'instance, avec le même lecteur intégré + +==== 📡 Réseaux sociaux et contenus externes + +- *Timeline Mastodon* intégrée (bibliothèque vendored https://gitlab.com/idotj/mastodon-embed-timeline[mastodon-embed-timeline^] v4.7.0, AGPLv3) +- *Compatibilité Pleroma* : adaptateur qui convertit les réponses de l'API Pleroma au format Mastodon attendu par la timeline +- *WordPress* (optionnel) : derniers articles via l'API REST, avec image à la une et auteur + +==== 📱 PWA et confort d'utilisation + +- *Progressive Web App* installable (bouton d'installation automatique) +- Mode hors ligne : pages et ressources statiques en cache via Service Worker +- Indicateur visuel de perte de connexion +- *Mode sombre* (basé sur `prefers-color-scheme`, mémorisé en `localStorage`) +- Interface entièrement responsive (mobile, tablette, desktop) + +==== 💝 Dons, compte à rebours et divers + +- *Page de dons* : LiberaPay, Ko-fi et Stripe (dons ponctuels et mensuels, montants suggérés) +- *Compte à rebours* : page de lancement/maintenance multi-fuseaux qui verrouille le site jusqu'à la date cible +- Bloc « À propos » configurable (titre, deux paragraphes, image légendée) + +==== 🔍 SEO et données structurées + +- *JSON-LD* généré automatiquement : `WebSite` (avec `SearchAction`), `VideoObject`, `CollectionPage`, `BreadcrumbList` +- Balises *Open Graph* et *Twitter Cards* +- `sitemap.xml` et `robots.txt` fournis en exemples +- Prêt pour *Plausible Analytics* (voir <>) : désactivé par défaut, sans cookies et conforme RGPD + +==== 🛡️ Sécurité + +- En-têtes de sécurité complets : CSP dynamique avec *nonce* par requête, HSTS, `X-Frame-Options`, `nosniff`, `Referrer-Policy`, `Permissions-Policy` +- Protection *CSRF* sur les requêtes AJAX, vérification de l'en-tête `Origin` +- Validation anti-*SSRF* des URLs d'instances et liste blanche des endpoints de l'API PeerTube +- Échappement systématique des sorties (anti-XSS) +- Exemples de configuration sécurisée pour Apache et Nginx dans `conf/` + +=== 🛠️ Technologies utilisées + +- 📄 HTML5, 🎨 CSS3 (Media Queries), ⚡ JavaScript vanilla (sans framework, sans jQuery) +- 🐘 PHP 7.4+ (aucune base de données requise) +- 🔧 Service Worker (cache offline) et 📋 Web App Manifest (installation) +- 📦 Bibliothèques : + * 🎯 Font Awesome 7 (icônes, via CDN cdnjs) + * 📡 mastodon-embed-timeline v4.7.0 (vendored dans `js/`, AGPLv3) + * 📊 Plausible Analytics (pré-configuré, à activer manuellement) + +=== 📁 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 +├── ajax/ +│ └── load-more-videos.php # Endpoint AJAX « Voir plus » (CSRF + Origin) ├── 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 +├── css/ # Feuilles de style (styles, vidéo, catégories, +│ │ # recherche, dons, countdown, mastodon, +│ ├── castopod-podcasts.css # castopod, funkwhale, wordpress, grille…) +│ └── … +├── docs/ +│ └── wireframes/ # Maquettes d'origine (PNG desktop + mobile) +├── img/ # Logo, favicons, icône de lecture +├── includes/ +│ ├── config.php # Bootstrap + fonctions API (PeerTube, Castopod, +│ │ # Funkwhale) et formatage +│ ├── config.default.php # Valeurs par défaut de toutes les constantes +│ ├── config.local.php.sample # Modèle de configuration locale (à copier) +│ ├── security.php # CSRF, CSP + nonce, en-têtes, validateurs +│ ├── simple-cache.php # Cache fichier de l'API (cache/api/) +│ ├── wordpress.php # Intégration API REST WordPress +│ ├── structured-data.php # Générateurs JSON-LD +│ ├── header.php # Barre supérieure (recherche, réseaux, thème…) +│ ├── footer.php # Pied de page +│ ├── sidebar.php # Navigation latérale +│ ├── mobile-menu.php # Menu mobile coulissant +│ ├── hero-section.php # Bannière d'accueil (live/vidéo/playlist) +│ ├── featured-videos.php # ⚠️ legacy, non utilisé par les pages actuelles +│ ├── recent-videos.php # ⚠️ legacy, non utilisé par les pages actuelles +│ ├── pwa-init.php # ⚠️ legacy, PWA désormais inline dans index.php +│ └── lib/ +│ └── markdown.php # Rendu Markdown (sous-ensemble PeerTube) +├── js/ +│ ├── main.js # UI globale (thème, carrousel, « Voir plus »…) +│ ├── audio-player.js # Lecteur audio Castopod / Funkwhale +│ ├── categories.js # « Voir plus » de la page catégorie +│ ├── countdown.js # Compte à rebours +│ ├── search.js # Cartes cliquables de la recherche +│ ├── mastodon-config.php # Configuration JS de la timeline (servie en JS) +│ ├── mastodon-timeline.umd.js # mastodon-embed-timeline v4.7.0 (vendored) +│ └── pleroma-adapter.js # Adaptateur Pleroma → API Mastodon +├── uploads/ # Images d'annonces (non versionné, hors .gitkeep) +├── index.php # Page d'accueil (agrégateur) +├── video.php # Page de lecture d'une vidéo +├── categories.php # Page d'une catégorie +├── recherche.php # Page de recherche +├── direct.php # Page du direct / annonce du prochain live +├── countdown.php # Page de compte à rebours (maintenance) +├── sw.js # Service Worker (PWA) ├── site.webmanifest.sample # Exemple de manifest PWA -├── browserconfig.xml # Configuration Windows +├── browserconfig.xml # Tuiles Windows ├── sitemap.xml.sample # Exemple de sitemap ├── robots.txt.sample # Exemple de robots.txt ├── mentions-legales.php.sample # Exemple de mentions légales +├── dons.php.sample # Exemple de page de dons +├── LICENSE # GNU AGPL v3 └── README.adoc ---- -== 📋 Prérequis +NOTE: Les fichiers marqués « legacy » sont conservés pour référence mais ne sont inclus par aucune page ; la page d'accueil rend ces sections en interne. + +=== 📋 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) + * `curl` — appels API (PeerTube, Castopod, Funkwhale, WordPress) + * `json` — traitement des réponses + * `intl` — dates internationales et fuseaux horaires + * `mbstring` — chaînes multi-octets + * `xml` (SimpleXML) — recommandée pour Castopod (un fallback regex existe) - 🌐 *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. +- 🔒 *HTTPS* : requis pour les fonctionnalités PWA +.Installation de l'extension `intl` [source,bash] ---- -# Sur Ubuntu/Debian +# Ubuntu / Debian sudo apt-get install php-intl -# Sur Fedora/RHEL/CentOS +# 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 ----- +# Redémarrer le serveur web +sudo systemctl restart apache2 # Apache +sudo systemctl restart php8.3-fpm # Nginx + php-fpm -Pour vérifier que l'extension est bien chargée : -[source,bash] ----- +# Vérifier php -m | grep intl ---- -== 🚀 Installation +=== 🚀 Installation -. 📥 Clonez ce dépôt : +. 📥 Clonez le dépôt : + [source,bash] ---- git clone git@labola.o-k-i.net:cedric/annu-kute-ced.git +cd annu-kute-ced ---- -. 📦 *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 : +. 📦 Vérifiez les prérequis PHP (voir ci-dessus). +. 🔧 Créez votre configuration locale et les fichiers d'instance : + +[source,bash] +---- +cp includes/config.local.php.sample includes/config.local.php +cp site.webmanifest.sample site.webmanifest +cp robots.txt.sample robots.txt +cp sitemap.xml.sample sitemap.xml +cp mentions-legales.php.sample mentions-legales.php +cp dons.php.sample dons.php +---- +. 🛡️ Installez la configuration serveur sécurisée depuis `conf/` (voir <>). +. ✍️ Rendez le dossier `cache/` accessible en écriture par le serveur web (créé automatiquement au premier appel API). +. 🔒 Assurez-vous que HTTPS est actif (obligatoire pour la PWA). +. 🌐 Faites pointer votre domaine (`annukuteced.buzz`) vers la racine du projet. + +[[fr-configuration]] +=== ⚙️ Configuration + +==== Le système en trois fichiers + +[cols="1,2,2",options="header"] +|=== +| Fichier | Rôle | Versionné ? + +| `includes/config.php` +| Bootstrap : charge les autres fichiers et contient toutes les fonctions métier +| ✅ Oui + +| `includes/config.default.php` +| Valeurs par défaut de chaque constante (définies seulement si absentes) +| ✅ Oui + +| `includes/config.local.php` +| Vos surcharges locales — *prioritaires* car chargées en premier +| ❌ Non (`.gitignore`) +|=== + +Pour personnaliser l'instance, ne modifiez jamais `config.default.php` : définissez la constante dans `config.local.php`. Comme ce dernier est chargé avant, vos valeurs ont toujours la priorité. + [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. +==== Référence des constantes -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. +Valeurs par défaut issues de `includes/config.default.php`. -=== Configuration du fuseau horaire +.Application et organisation +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description -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` : +| `APP_HOST_NAME` +| `'annukuteced.buzz'` +| Nom de domaine affiché (mentions légales…) + +| `ORGANIZATION_SHORT_NAME` +| `'ANNU KUTE CED'` +| Nom court de l'organisation + +| `ORGANIZATION_NAME` +| `'ANNU KUTE CED'` +| Nom complet de l'organisation +|=== + +.PeerTube +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `PEERTUBE_URL` +| `'https://gade.o-k-i.net'` +| URL de l'instance PeerTube (obligatoire) + +| `PEERTUBE_DISPLAY_NAME` +| `'gade.o-k-i.net'` +| Nom affiché de l'instance + +| `API_KEY` +| `''` +| Clé API optionnelle (`Authorization: ApiKey …`) + +| `SHOW_VIDEO_VIEWS` +| `false` +| Afficher le nombre de vues sur les cartes vidéo + +| `PRIORITY_CATEGORIES` +| `[11, 15, 4, 9, 10]` +| Catégories mises en avant : `[ID => 'Nom']`, ordre = ordre d'affichage (accueil, sidebar, footer, menu mobile) + +| `DEFAULT_TIMEZONE` +| `'America/Guadeloupe'` +| Fuseau horaire d'affichage (https://www.php.net/manual/fr/timezones.php[liste PHP^]) +|=== + +.Section hero (bannière d'accueil) +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `HERO_TYPE` +| `'live'` +| `'live'` · `'video'` · `'playlist'` · `'none'` + +| `LIVE_ACCOUNT_NAME` +| `'annu_kute_ced'` +| Compte PeerTube surveillé pour les directs (hero + page `/direct`) + +| `HERO_VIDEO_ID` +| `'1aJ2u9euwF9fWKQhFxwFio'` +| UUID de la vidéo (mode `video`), extrait de l'URL `/w/` + +| `HERO_VIDEO_TITLE` +| `'Vidéo de présentation'` +| Titre (accessibilité) + +| `PLAYLIST_PLATFORM` +| `'peertube'` +| `'peertube'` · `'funkwhale'` · `'castopod'` + +| `PLAYLIST_INSTANCE_URL` +| `''` +| URL de base de la plateforme de playlist + +| `PLAYLIST_ID` +| `''` +| ID de la playlist ; pour Castopod : `'@slug'` + +| `PLAYLIST_TITLE` / `PLAYLIST_DESCRIPTION` +| `''` / `''` +| Textes optionnels (sinon récupérés via API) +|=== + +.Castopod (podcast) +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `CASTOPOD_ENABLED` +| `true` +| Activer la section podcast de l'accueil + +| `CASTOPOD_URL` +| `'https://kute.o-k-i.net'` +| URL de l'instance Castopod + +| `CASTOPOD_PODCAST_SLUGS` +| `['annu_kute_cedric']` +| Slug(s) de podcast ; flux RSS = `{URL}/@{slug}/feed`. Plusieurs podcasts : épisodes fusionnés et triés par date + +| `CASTOPOD_EPISODES_COUNT` +| `5` +| Nombre total d'épisodes affichés +|=== + +WARNING: Castopod applique un *rate limit* strict (HTTP 429) sur les flux RSS. Le code patiente 5 s entre chaque podcast. *Activez le cache* (`CACHE_ENABLED`) pour éviter ces délais à chaque page. + +.Funkwhale (musique, optionnel) +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `FUNKWHALE_ENABLED` +| `false` +| Activer la section musique + +| `FUNKWHALE_URL` +| `'https://mizik.o-k-i.net'` +| URL de l'instance Funkwhale + +| `FUNKWHALE_TRACKS_COUNT` +| `10` +| Morceaux aléatoires locaux affichés (50 mis en cache) +|=== + +.Mastodon (timeline) +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `MASTODON_INSTANCE_URL` +| `'https://bokante.o-k-i.net'` +| Instance Mastodon (ou Pleroma, via l'adaptateur) + +| `MASTODON_URL` +| `'https://bokante.o-k-i.net/@cedric'` +| URL publique du compte (liens « Voir plus », footer) + +| `MASTODON_DATE_FORMAT` +| `'fr-FR'` +| Locale de date des posts + +| `MASTODON_BTN_SEE_MORE` / `MASTODON_BTN_RELOAD` +| `'Voir plus de post'` / `'Rafraichir'` +| Libellés des boutons + +| `MASTODON_MAX_POST_FETCH` / `MASTODON_MAX_POST_SHOW` +| `'10'` / `'10'` +| Posts récupérés / affichés + +| `MASTODON_S3_MEDIA_URL` +| _(non défini)_ +| Origine S3 des médias (ajoutée à la CSP `media-src`) +|=== + +NOTE: La timeline n'a pas de flag d'activation : elle est toujours affichée sur l'accueil. + +.WordPress (optionnel) +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `WORDPRESS_ENABLED` +| `false` +| Activer la section articles + +| `WORDPRESS_URL` +| `''` +| URL du site WordPress (sans `/` final) + +| `WORDPRESS_POSTS_COUNT` +| `6` +| Nombre d'articles (API REST `/wp-json/wp/v2/`) +|=== + +.Dons +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `DONATIONS_ENABLED` +| `false` +| Activer le système (icône cœur, lien « Soutenir », page `/dons.php`) + +| `LIBERAPAY_URL` / `KOFI_URL` +| `''` / `''` +| URLs des plateformes externes + +| `STRIPE_ENABLED` +| `false` +| Activer l'interface Stripe (onglets ponctuel / mensuel) + +| `STRIPE_ONE_TIME_LINKS` +| `[1, 5, 10, 20, 50, 'custom'] => ''` +| Liens de paiement Stripe par montant + +| `STRIPE_MONTHLY_LINKS` +| `[1, 5, 10, 20, 50] => ''` +| Liens d'abonnement mensuel Stripe + +| `DONATION_AMOUNTS` +| `[1, 5, 10, 20, 50]` +| Montants suggérés + +| `DONATION_CURRENCY` +| `'EUR'` +| Devise +|=== + +NOTE: Au moins une plateforme (LiberaPay, Ko-fi ou Stripe) doit être configurée pour que `dons.php` s'affiche, sinon la page renvoie une erreur 500. + +.Compte à rebours (maintenance / lancement) +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `COUNTDOWN_ENABLED` +| `false` +| ⚠️ Si `true`, *toutes* les pages redirigent vers `countdown.php` + +| `COUNTDOWN_TARGET_DATE` +| `'2025-10-11 00:00:00'` +| Date cible (`Y-m-d H:i:s`) ; à la fin, redirection vers `/` + +| `COUNTDOWN_TIMEZONES` +| 5 territoires +| `[Libellé => fuseau PHP]` affichés sur la page +|=== + +.Annonce du prochain live +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `NEXT_LIVE_ENABLED` +| `false` +| Afficher l'annonce quand aucun direct n'est en cours + +| `NEXT_LIVE_TITLE` / `NEXT_LIVE_DESCRIPTION` +| `'Prochain live'` / `'Rejoignez-nous…'` +| Textes (date et heure ajoutées automatiquement) + +| `NEXT_LIVE_DATE` +| `''` +| Date du live (`Y-m-d H:i:s`) + +| `NEXT_LIVE_IMAGE` +| `'uploads/next-live.jpg'` +| Image d'annonce (utilisée seulement si le fichier existe) +|=== + +.Site, réseaux sociaux et contact +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `SITE_NAME` +| `'ANNU KUTE CED'` +| Nom du site (titres, meta) + +| `SITE_DESCRIPTION` +| `'Hub multimédia du podcast ANNU KUTE CED'` +| Description SEO + +| `SITE_LOGO` / `SITE_FAVICON` +| `'img/logo.png'` / `'img/favicon.png'` +| Chemins des images + +| `FACEBOOK_URL`, `X_URL`, `INSTAGRAM_URL`, `YOUTUBE_URL`, `TIKTOK_URL` +| `'#'` +| `'#'` ou vide = icône masquée + +| `CONTACT_EMAIL` +| `'kontak@o-k-i.net'` +| E-mail de contact (footer) +|=== + +.Mentions légales +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `LEGAL_COPYRIGHT` +| `'ANNU KUTE CED'` +| Titulaire du copyright + +| `LEGAL_WEBMASTER_NAME` / `LEGAL_WEBMASTER_EMAIL` +| `'Cédric Famibelle-Pronzola'` / `'contact@cedric-pronzola.dev'` +| Webmaster + +| `LEGAL_HOST_NAME`, `LEGAL_HOST_COMPANY`, `LEGAL_HOST_RCS`, `LEGAL_HOST_ADDRESS` +| valeurs o2Switch +| Coordonnées de l'hébergeur + +| `LEGAL_CONTACT_EMAIL` +| `'kontak@o-k-i.net'` +| Contact juridique + +| `LEGAL_LICENSE` / `LEGAL_LICENSE_URL` +| AGPL-V3 + URL GNU +| Licence du code + +| `LEGAL_SOURCE_CODE_URL` +| `'https://labola.o-k-i.net/cedric/annu-kute-ced'` +| Dépôt du code source (exigé par l'AGPL pour un service réseau) + +| `LEGAL_SERVICE_DESCRIPTION` +| `'est le hub multimédia du podcast ANNU KUTE CED.'` +| Phrase de description du service +|=== + +.Tags et filtres +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `TAG_INDEPENDENCE` +| `'indépendance'` +| Tag de la fonction `getIndependenceVideos()` (pas de section d'accueil associée actuellement) + +| `SHORTS_MAX_DURATION` +| `180` +| Durée max d'un short (s) ; ratio portrait (`aspectRatio ≤ 1`) aussi requis + +| `IMPORTANT_TAGS` +| `['ANNUKUTECED', 'podcast', …]` +| Hashtags de la sidebar, du footer et du menu mobile + +| `POPULAR_TAGS` +| `['podcast', 'annukuteced', …]` +| Hashtags affichés sur l'accueil +|=== + +.Pagination et volumes d'affichage +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `VIDEOS_PER_PAGE` +| `12` +| Vidéos par page (recherche) + +| `COUNT_VIDEO_SEARCH` +| `20` +| Résultats récupérés par recherche + +| `RECENT_VIDEOS_COUNT` / `TRENDING_VIDEOS_COUNT` / `CATEGORY_VIDEOS_COUNT` +| `6` +| Taille des sections d'accueil + +| `SHORTS_COUNT` / `SHORTS_COUNT_SEARCH` +| `6` / `100` +| Shorts affichés / pool de recherche + +| `LOAD_MORE_COUNT` +| `6` +| Vidéos chargées par clic sur « Voir plus » + +| `FEATURED_VIDEOS_COUNT` / `INDEPENDENCE_VIDEOS_COUNT` +| `6` +| Réservés (sections non affichées actuellement) +|=== + +.Cache +[cols="2,2,3",options="header"] +|=== +| Constante | Défaut | Description + +| `CACHE_ENABLED` +| `false` +| Active le cache pour *Castopod et Funkwhale* (fortement recommandé) + +| `CACHE_DURATION` +| `3600` +| Durée de vie du cache (s) +|=== + +NOTE: Le cache de l'API PeerTube et de WordPress (`includes/simple-cache.php`) est *toujours actif*, indépendamment de `CACHE_ENABLED`, avec des TTL par endpoint (catégories 1 h, vidéos/recherche 10 min, articles WP 15 min, comptes 5 min). Les fichiers sont stockés dans `cache/api/`. + +.Bloc « À propos » (pas de valeur par défaut — bloc masqué tant que non défini) +[cols="2,3",options="header"] +|=== +| Constante | Description + +| `MOVEMENT_TITLE` +| Titre du bloc (défaut template : « À propos ») + +| `MOVEMENT_DESCRIPTION` +| Premier paragraphe ; *commenter cette ligne masque tout le bloc* + +| `MOVEMENT_DESCRIPTION_2` +| Second paragraphe (optionnel) + +| `MOVEMENT_IMAGE` / `MOVEMENT_IMAGE_ALT` / `MOVEMENT_CAPTION` +| Image (`img/movement_presentation.png`, non versionnée), texte alternatif et légende (HTML simple accepté) +|=== + +==== Exemple complet de `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'); ----- + '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' === +// Hero : direct de la chaîne, sinon annonce du prochain live +define('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_DESCRIPTION', 'Enregistrement du prochain épisode !'); 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 `` - * 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 +// Castopod (compte KUTE du podcast) 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_PODCAST_SLUGS', ['annu_kute_cedric']); 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 +// Mastodon (compte BOKANTE) 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'); +// Cache : indispensable pour Castopod (rate limit RSS) +define('CACHE_ENABLED', true); +define('CACHE_DURATION', 3600); ---- -== 🛡️ Configuration de sécurité Apache +=== 🎨 Personnalisation de l'apparence -Le fichier `conf/.htaccess.sample` fourni inclut des règles de sécurité importantes pour protéger votre installation : +. 🖼️ Remplacez `img/logo.png` par votre logo (et les favicons du dossier `img/`) +. 🎨 Modifiez les couleurs dans `css/styles.css` +. 📝 Textes : la plupart passent par les constantes de `config.local.php` (bloc « À propos », libellés Mastodon, etc.) -=== Protections incluses : +==== Fichiers d'instance à personnaliser -- 🚫 *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. +Les fichiers `sitemap.xml`, `robots.txt`, `site.webmanifest`, `mentions-legales.php` et `dons.php` sont ignorés par Git : copiez les `.sample` puis adaptez-les. Les exemples fournis sont *pré-remplis pour `annukuteced.buzz`* ; pour un autre domaine, remplacez simplement les occurrences du domaine. Dans `mentions-legales.php`, remplacez aussi le placeholder `VOTRE-DATE-MAJ`. -=== Installation : +=== 🧭 Ordre des sections sur la page d'accueil + +La page d'accueil assemble les sections dans cet ordre, chacune conditionnée par sa configuration : + +. *Hero* — si `HERO_TYPE` ≠ `'none'` (live, vidéo ou playlist) +. *Podcasts Castopod* — si `CASTOPOD_ENABLED` et `CASTOPOD_URL` non vide +. *Morceaux Funkwhale* — si `FUNKWHALE_ENABLED` et `FUNKWHALE_URL` non vide +. *Timeline Mastodon* — toujours affichée +. *Articles WordPress* — si `WORDPRESS_ENABLED` et `WORDPRESS_URL` non vide +. *Hashtags populaires* (`POPULAR_TAGS`) +. *Shorts* — carrousel +. *Dernières vidéos* + bouton « Voir plus » +. *Tendances* + « Voir plus » +. *Une section par catégorie prioritaire* (`PRIORITY_CATEGORIES`, seulement si elle contient des vidéos) + « Voir plus » +. *Bloc « À propos »* (si `MOVEMENT_DESCRIPTION` défini) + aside hashtags + +Mise en page desktop : hero/Castopod/Funkwhale + Mastodon + WordPress s'organisent en colonnes (1fr 2fr, ou 1fr 2fr 1fr avec WordPress) ; empilés verticalement sur mobile. + +[[fr-securite]] +=== 🛡️ Sécurité + +==== Ce que l'application applique déjà + +- *CSP dynamique* : `default-src 'self'` avec *nonce* unique par requête pour les scripts/styles inline ; origines PeerTube/Mastodon/CDN ajoutées automatiquement ; assouplissements `localhost` pour le développement +- *En-têtes* : `X-Frame-Options: SAMEORIGIN`, `X-Content-Type-Options: nosniff`, `X-XSS-Protection`, `Referrer-Policy: strict-origin-when-cross-origin`, `Permissions-Policy` restrictive, HSTS (HTTPS uniquement), CORP/COOP `same-origin` ++ +NOTE: L'en-tête COEP a été *volontairement retiré* (commit `62d4d99`) : `require-corp` bloquait les embeds cross-origin de PeerTube, Mastodon, Castopod et Funkwhale. +- *CSRF* : jeton de session (`random_bytes(32)`) injecté en ``, vérifié par `hash_equals` sur l'endpoint AJAX ; vérification de l'en-tête `Origin` +- *Anti-SSRF* : validation des URLs d'instances (schéma http/https, blocage IP privées et `localhost`), liste blanche des endpoints de l'API PeerTube, cURL sans redirections +- *Anti-XSS* : échappement systématique des sorties ; validation des entrées (UUID vidéo, requête de recherche ≤ 200 car., numéros de page, ID de catégorie 1–20) + +==== Configuration serveur (Apache) [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. +Protections incluses : blocage des fichiers de configuration et `.sample`, des dossiers `/includes/`, `/cache/`, `/docs/`, `/conf/` ; pas de listing de répertoires ; fichiers cachés bloqués ; HTTPS forcé ; masquage de l'extension `.php` (URLs propres `/video` au lieu de `/video.php`). -== 🛡️ Configuration de sécurité Nginx +WARNING: Cette configuration est *essentielle* : sans elle, vos fichiers de configuration sont exposés aux visiteurs. -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 : +==== Configuration serveur (Nginx) [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 cp conf/nginx.conf.sample /etc/nginx/sites-available/annukuteced.buzz +sudo ln -s /etc/nginx/sites-available/annukuteced.buzz /etc/nginx/sites-enabled/ sudo nginx -t && sudo systemctl reload nginx ---- -== 📱 Progressive Web App (PWA) +WARNING: Le bloc `location ~* \.(php|inc|conf|config|local)$ { deny all; }` de l'exemple correspond tel quel à *tous* les fichiers `.php`. Ajustez-le pour ne cibler que les chemins sensibles (par exemple `^/includes/`), sous peine de rendre l'application inaccessible. -Cette plateforme est une PWA complète offrant : +=== 📱 Progressive Web App (PWA) -=== ✨ Fonctionnalités PWA +==== Fonctionnalités -- 📲 *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 +- 📲 *Installation native* : bouton « Installer » dans le header à la première visite +- 🌐 *Mode hors ligne* : cache des pages visitées et des ressources statiques +- 📡 *Détection de connexion* : indicateur visuel en cas de perte réseau +- 🔄 *Mise à jour* : proposition de rechargement quand une nouvelle version est détectée -=== 📥 Comment installer l'application +==== Stratégies de cache du Service Worker (`sw.js`) -. 🔄 *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" +[cols="1,2,3",options="header"] +|=== +| Type de requête | Stratégie | Détail -=== 🌐 Compatibilité PWA +| Ressources statiques (`/css/`, `/js/`, `/img/`, CDN cdnjs) +| *Cache First* +| Mise en cache à l'installation et au premier accès ; repli sur `img/logo.png` si une image échoue -- ✅ Chrome/Edge (Android/Desktop) -- ✅ Safari (iOS 11.3+) -- ✅ Firefox (Android) -- ✅ Samsung Internet +| Pages (`/`, `*.php`…) +| *Network First* +| Réseau d'abord, cache en secours hors ligne -=== 📄 Fichiers PWA +| API et AJAX (`/ajax/`, `mastodon-config.php`…) +| *Network Only* +| Jamais de cache ; réponse JSON 503 synthétique hors ligne +|=== -- 🔧 `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 +TIP: Pour déployer une nouvelle version des assets, changez le suffixe de version des noms de cache dans `sw.js` (format date, ex. `08072026-0720`) : les anciens caches sont supprimés à l'activation. -== 🚀 Déploiement +==== Installation par les visiteurs -Pour déployer sur un serveur mutualisé: +- 🌐 *Chrome/Edge* : menu → « Installer annukuteced.buzz » +- 🍎 *Safari iOS* : Partager → « Ajouter à l'écran d'accueil » +- 🦊 *Firefox Android* : menu → « Installer » -. 🐘 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 +[[fr-analytics]] +=== 📊 Analytics (Plausible) -== 👨‍💻 Développement +Le site est *pré-configuré* pour https://plausible.io[Plausible Analytics^] (sans cookies, conforme RGPD, données anonymes), mais le script est *désactivé par défaut*. -Si vous souhaitez contribuer au développement: +Pour l'activer : -. 🌿 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 +. Ouvrez `index.php` et *décommentez* le snippet Plausible (balise `