Fancy index, version nginx
==========================

:date: 2022-05-15
:tags: fancy index, nginx
:slug: fancy-index-nginx
:url: fancy-index-nginx

Introduction
------------

Nous avions vu précédemment comment utiliser fancy-index avec Apache httpd. Voyons maintenant comment procéder avec nginx.

Tout d'abord, nginx ne supporte pas nativement[ref]Peut être que c'est supporté via un module… flemme de chercher[/ref] les fichiers .htaccess. Le paramétrage de fancy index se fait donc dans le paramétrage du site ou du vhost.

. note:: Le site web fonctionnant avec Apache, il n'y aura pas de démos.

Sans Fancy Index
----------------

En utilisant la directive `autoindex on`, la liste des fichiers apparaît alors.

. image:: images/fancyindex-nginx/demo1.png

Configuration de nginx :

. code-block:: config

   server {
       listen 80;
       listen [::]:80;
       charset UTF-8;

       location / {
           root /srv/demo/nginx;
           autoindex on;
       }
   }

Avec Fancy Index
----------------

. note:: Penser à installer le module http-fancyindex. Sous Debian et dérivées, c'est le paquet libnginx-mod-http-fancyindex

. warning:: Redémarrer le service nginx après chaque modification du fichier de configuration.

. note:: Ici, le fichier de configuration du site est /etc/nginx/sites-enabled/001-demo.conf

Remplaçons `autoindex` par `fancyindex`.

Configuration de nginx :

. code-block:: config

   server {
       listen 80;
       listen [::]:80;
       charset UTF-8;

       location / {
           root /srv/demo/nginx;
           fancyindex on;
       }
   }

Résultat ?

. image:: images/fancyindex-nginx/demo2.png

Le style a effectivement changé, et c'est nettement plus flagrant ici comparé à Apache httpd.


Options de Fancy Index
----------------------

Pour la liste de toutes les options, se référer à la page de documentation officielle sur le site nginx :

https://www.nginx.com/resources/wiki/modules/fancy_index/

Bon, comparé à Apache httpd, la liste des options est réduite.

Les options sont :

* `fancyindex` (on|off) : activation/désactivation de fancy index ;
* `fancyindex_css_href uri` : uri = chemin vers le fichier .css ;
* `fancyindex_exact_size` (on|off) : affichage précis ou arrondie (au ko, Mo ou Go) de la taille des fichiers ;
* `fancyindex_footer` uri : chemin vers le fichier .html (cela peut être une URL externe) contenant la partie basse de la page (pied de page) ;
* `fancyindex_header` : chemin vers le fichier .html (cela peut être une URL externe) contenant la partie haute de la page (entête de page) ;
* `fancyindex_ignore` fichier1 fichier2 … : liste de fichiers à ne pas afficher dans la liste. Si nginx a été compilé avec le support des expressions régulières (PCRE), il est alors possible d'utiliser des regex pour spécifier la liste des fichiers à ignorer ;
* `fancyindex_localtime` (on|off) : affichage de l'heure locale ou UTC.


Ajouter des icônes
------------------

Les icônes utilisées ici pour l'exemple proviennent du thème Red Dot Black Plasma https://github.com/L4ki/Red-Dot-Black-Plasma-Themes

Créer un répertoire icons, faire une petite sélection d'icônes, les appeler

* archive.svg
* cue.svg
* flac.svg
* folder.svg
* image.svg
* ogg.svg
* text.svg
* up.svg

Oui, c'est du copier/coller de l'article Fancy index (Apache httpd) :)

L'une des différences avec Apache httpd, il n'y a pas d'icônes d'affichées avec nginx. Il n'y a pas non plus de directive ou de paramètre pour spécifier des icônes.

Pas grave, on va les ajouter dynamiquement, via une feuille de style :)

Créer un fichier `style.css`, avec ce contenu :

. code-block:: css

   #list .link a::before{
       content:"";
       padding: 12px;
       background: url('icons/text.svg') left center no-repeat;
   }

   #list a[href$="/"]::before {
       background: url('icons/folder.svg') left center no-repeat;
   }

   #list a[href^=".."]::before {
       background: url('icons/up.svg') left center no-repeat;
   }

   #list a[href$=".cue"]::before {
       background: url('icons/cue.svg') left center no-repeat;
   }

   #list a[href$=".ogg"]::before {
       background: url('icons/ogg.svg') left center no-repeat;
   }

   #list a[href$=".flac"]::before {
       background: url('icons/flac.svg') left center no-repeat;
   }

   #list a[href$=".zip"]::before {
       background: url('icons/archive.svg') left center no-repeat;
   }

. note:: On peut ajouter d'autres icônes et extensions, ou utiliser des règles css différentes.


Ajouter dans la configuration du site, le paramètre `fancyindex_css_href "style.css";`. Le fichier devrait ressembler à ceci :

. code-block:: config

   server {
       listen 80;
       listen [::]:80;
       charset UTF-8;

       location / {
           root /srv/demo/nginx;
           fancyindex on;
           fancyindex_css_href "style.css";
       }
   }

Résultat ?

. image:: images/fancyindex-nginx/demo3.png

Changer complètement le style et la présentation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Pour les personnes ayant lu l'article fancy index (avec Apache httpd), ce qui suit ne sera pas une surprise. Cela fonctionne quasiment de la même manière. Du coup, je n'entrerai pas dans les détails.

Organisation des fichiers :

. code-block:: bash

   Démo 4 $ tree -a
   .
   ├── .cover.jpg
   ├── .footer.html
   ├── .head.html
   ├── .icons
   │   ├── archive.svg
   │   ├── cue.svg
   │   ├── flac.svg
   │   ├── folder.svg
   │   ├── image.svg
   │   ├── ogg.svg
   │   ├── text.svg
   │   └── up.svg
   ├── .style.css
   ├── Ys2EMIDI.zip
   ├── Ys2-SC8820.cue
   ├── Ys2-SC8820.flac
   └── Ys2-SC8820.ogg

   1 directory, 16 files

La seule différence ici, c'est l'absence de fichier `.htaccess`.

Le contenu des fichiers `.head.html` et `.footer.html` est identique à la version Apache httpd, excepté un saut de ligne via `<br />` après l'image ajouté dans `.head.html`.

Contenu du fichier `.head.html` :

. code-block:: html

   <!DOCTYPE html>
   <html lang="fr">
       <head>
           <meta charset="utf-8" />
           <link rel="stylesheet" type="text/css" href=".style.css">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>ys2</title>
       </head>
       <body>
           <p>Ys II Eternal (MIDI) - SC-88Pro - SC-8820</p>
           <img src=".cover.jpg" />
           <br />

Contenu du fichier `.footer.html` :

. code-block:: html

           <p>Ys2-SC8820.cue + flac : Version SC-88Pro enregistrée avec un Roland SC-8820. L'ensemble des pistes est dans un seul fichier flac, d'où la nécessité d'utiliser le fichier .cue comme TOC.</p>
           <p>Ys2-SC8820.ogg : Pareil que la version flac, mais réencodé/compressé en ogg/vorbis. Il faudra modifier le fichier .cue pour indiquer que le fichier audio est le fichier .ogg et non .flac</p>
           <p>À noter : les nom des titres correspondent aux noms indiqués dans program.txt et ne correspondent pas forcément aux titres des albums.</p>
           <p>Ys2EMIDI.zip : contient l'ensemble de l'OST au format MIDI. Nécessite un Roland Sound Canvas SC-88, SC-88Pro, SC-8820, SC-8850 ou SC-D70</p>
       </body>
   </html>

La feuille de style `.style.css` contient quelques modifications. En effet, il faut ajouter les icônes pour nginx :

. code-block:: css

   html {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }

   body {
       color: #4a4a4a;
       background-color: #e9e9e9;
   }
   a {
       text-decoration: none;
       color: #2c8898;
   }

   a:hover {
       color: #982c61;
       text-decoration: none;
   border-bottom: 2px solid #4a4a4a;
   }

   img {
       height: auto;
       max-width: 100%;
       margin-top: 0px;
   }

   /* Icons */

   #list .link a::before{
       content:"";
       padding: 12px;
       background: url('.icons/text.svg') left center no-repeat;
   }

   #list a[href$="/"]::before {
       background: url('.icons/folder.svg') left center no-repeat;
   }

   #list a[href^=".."]::before {
       background: url('.icons/up.svg') left center no-repeat;
   }

   #list a[href$=".cue"]::before {
       background: url('.icons/cue.svg') left center no-repeat;
   }

   #list a[href$=".ogg"]::before {
       background: url('.icons/ogg.svg') left center no-repeat;
   }

   #list a[href$=".flac"]::before {
       background: url('.icons/flac.svg') left center no-repeat;
   }

   #list a[href$=".zip"]::before {
       background: url('.icons/archive.svg') left center no-repeat;
   }


   /* dark theme */
   @media (prefers-color-scheme: dark) {
       body, h1, h2, h3, h4, h5, h6 {
           color: #d9d8dc;
           background-color: #222222;
       }

   a {
           color: #eb99a1;
       }
       a:hover {
           color: #DA4453;
           border-bottom: 2px solid #d9d8dc;
       }
   }


Ajouter dans la configuration du site les paramètres `fancyindex_header` et `fancyindex_footer`. Le fichier devrait ressembler à ceci :

. code-block:: config

   server {
       listen 80;
       listen [::]:80;
       charset UTF-8;

       location / {
           root /srv/demo/nginx;
           fancyindex on;
           fancyindex_css_href ".style.css";
           fancyindex_header ".head.html";
           fancyindex_footer ".footer.html";
       }
   }


La présentation est toutefois un peu différente de celle obtenue avec Apache httpd.

Thème clair

. image:: images/fancyindex-nginx/demo4.png

Thème sombre

. image:: images/fancyindex-nginx/demo4-dark.png

Conclusion
----------

Tout comme avec Apache httpd, on peut modifier complètement la présentation d'un listing de fichiers avec nginx.


--