====== 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.