Service banner.chapril.org

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.

À 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 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 :

/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;
    }

Fichier de configuration pour modifier le code HTML des pages servies :

/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;

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 :

    #[…]
    include /etc/nginx/sexy-chapril;
    include /etc/nginx/acme-challenge;
    include /etc/nginx/chapril-banner-location;
    #[…]
    location / {
        include /etc/nginx/chapril-banner;
    #[…]
    }

Fichiers de la bannière

Fichiers de la bannière v1 :

cd /var/www/banner.chapril.org/Chapril-banner/v1/
ll

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

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 :

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

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 :

<img alt="" src="chapril-banner-logo.png"/>

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.