Différences

Ci-dessous, les différences entre deux révisions de la page.

--- services:banner.chapril.org [2026/04/11 17:40] – supprimée - modification externe (Date inconnue) 127.0.0.1
+++ services:banner.chapril.org [2026/04/11 17:40] (Version actuelle) – ↷ Page déplacée de admin:services:banner.chapril.org à services:banner.chapril.org pitchum
@@ Ligne 1: / Ligne 1: @@
+====== Service banner.chapril.org ======
+<note important>La séparation des interventions entre animateur et administrateur systèmes manque.
+De même la différence entre la VM ''lamp'' et celle du service doit être explicite.
+Enfin les pages Web générées par le //reverse proxy// du service n’impliquent pas la même procédure que les autres pages.</note>
+À fin d'apporter une personnalisation homogène des services Chapril, une bannière mutualisée a été mise en place.
+Son intégration dans les sites des services passe par NGinx en insérant du code au passage.
+Au début, les fichiers de la bannière étaient dans le site [[https://www.chapril.org/|SPIP du Chapril]] puis ils ont été déplacés dans le site Web de démonstration : https://banner.chapril.org.
+===== Dépôt Git =====
+Dans la VM ''lamp'' le répertoire ''/var/www/banner.chapril.org/'' est versionné par Git.
+Le dépôt distant se situe dans la forge de l’April à l’adresse https://forge.april.org/Chapril/banner.chapril.org.
+Ce dépôt abrite deux versions distinctes :
+  * La version 1 dans ''Chapril-banner/v1/'', faite au début juste pour qu'il y ait quelque chose ;
+  * La version 2 actuelle dans ''Chapril-banner/v2/''.
+===== Intégration v1 dans NGinx =====
+Deux objectifs :
+  * rendre disponibles les fichiers utiles à la bannière ;
+  * modifier le code HTML des pages servies par NGinx.
+==== Fichier prédéfinis ====
+Fichier de configuration pour rendre disponible les fichiers utiles à la bannière :
+<file nginx /etc/nginx/chapril-banner-location>
+    location /Chapril-banner {
+        proxy_set_header Host banner.chapril.org;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_pass http://lamp.cluster.chapril.org;
+    }
+</file>
+Fichier de configuration pour modifier le code HTML des pages servies :
+<file nginx /etc/nginx/chapril-banner>
+set $banner_head '        <link rel="stylesheet" type="text/css"  href="/Chapril-banner/v1/chapril-banner.css" />';
+set $banner_body '    <!-- CHAPRIL BANNER -->
+    <header id="chapril-banner">
+      <div id="chapril-banner-zone">
+    <div id="chapril-banner-logo">
+      <a href="https://www.chapril.org/"><img src="/Chapril-banner/v1/chapril-logo-small.png" alt="Logo Chapril" /></a>
+    </div>
+    <div id="chapril-banner-menu">
+      <ul>
+        <li><a href="https://www.chapril.org/">Accueil Chapril</a></li>
+        <li><a href="https://www.chapril.org/services.html">Services libres</a></li>
+        <li><a href="https://pouet.april.org/@aprilorg">Nous suivre</a></li>
+        <li><a href="https://www.chapril.org/cgu.html">CGU</a></li>
+        <li><a href="https://www.chapril.org/a-propos.html">Mentions légales</a></li>
+        <li><a href="https://www.chapril.org/contact.html">Nous contacter</a></li>
+      </ul>
+    </div>
+    <div id="chapril-banner-aprillogo">
+      <a href="https://www.april.org/"><img src="/Chapril-banner/v1/april-logo-small.png" alt="Logo April" /></a>
+    </div>
+      </div>
+    </header>';
+subs_filter '</head>' '
+$banner_head
+</head>';
+subs_filter '</body>' '
+$banner_body
+  </body>';
+sub_filter_once on;
+</file>
+==== Inclusion des fichiers prédéfinis ====
+Si le nom de domaine du site ciblé est ''foo.chapril.org'' des directives sont à inclure dans son fichier de configuration ''/etc/nginx/sites-enabled/foo.chapril.org'' :
+<code nginx>
+    #[…]
+    include /etc/nginx/sexy-chapril;
+    include /etc/nginx/acme-challenge;
+    include /etc/nginx/chapril-banner-location;
+    #[…]
+    location / {
+        include /etc/nginx/chapril-banner;
+    #[…]
+    }
+</code>
+==== Fichiers de la bannière ====
+Fichiers de la bannière v1 :
+<code bash>
+cd /var/www/banner.chapril.org/Chapril-banner/v1/
+ll
+</code>
+<code>
+total 24
+-rw-r--r-- 1 root root 3574 oct.  14 01:19 april-logo-small.png
+-rw-r--r-- 1 root root 1960 oct.  14 01:51 chapril-banner.css
+-rw-r--r-- 1 root root 2345 oct.  14 01:28 chapril-favicon.png
+-rw-r--r-- 1 root root 2096 oct.  14 00:50 chapril-logo-small.png
+-rw-r--r-- 1 root root 1477 oct.  14 01:24 test.xhtml
+</code>
+===== Intégration v2 dans un site statique =====
+Intégrer manuellement la bannière dans une page Web consiste à inclure quelque lignes de code et à copier deux fichiers.
+Pour ça le répertoire ''Chapril-banner/v2/'' doit être récupéré.
+Le dépôt ''banner.chapril.org'' dans la forge de l’April contient un exemplaire de ce répertoire.
+On y compte trois fichiers :
+  * ''index.html'' pour intégrer la bannière dans la page Web ;
+  * ''chapril-banner.css'' pour le style de la bannière ;
+  * ''chapril-banner-logo.png'' pour le logotype du Chapril.
+Dans le fichier HTML de la page d’accueil on inclut ces lignes de code :
+<code html>
+<html lang="fr">
+  <head>
+    <!--Avant tout style-->
+    <link rel="stylesheet" type="text/css" href="chapril-banner.css"/>
+    <!--Autres styles-->
+  </head>
+  <body>
+    <header>
+      <nav>
+        <!--Balise à substituer !-->
+      </nav>
+    </header>
+    <!--Reste du contenu-->
+  </body>
+</html>
+</code>
+La balise ''<nav>'' doit être substituée par celle écrite dans le fichier ''Chapril-banner/v2/index.html''.
+Puis l’URL associée au logotype doit être ajustée comme suit :
+<code html>
+<img alt="" src="chapril-banner-logo.png"/>
+</code>
+Ainsi la bannière est insérée comme un en-tête de navigation avant le début du contenu.
+Les fichiers ''Chapril-banner/v2/chapril-banner.css'' et ''Chapril-banner/v2/chapril-banner-logo.png'' sont à copier à la racine du site statique.