Fancy index, version lighttpd
=============================

:date: 2022-05-19
:tags: fancy index, lighttpd
:slug: fancy-index-lighttpd
:url: fancy-index-lighttpd

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

Après les listings de fichiers customisés avec Apache httpd et nginx, qu'en est-il de lighttpd ?

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

Avec lighttpd, le module permettant d'afficher la liste des fichiers est `mod_dirlisting`. Ce module gère non seulement la génération de la liste des fichiers mais propose également quelques modifications possibles côté affichage. Cependant, le côté personnalisable étant assez limité (dixit la doc), la doc officielle recommande d'utiliser plutôt php ou python pour avoir plus de possibilités au niveau modifications/personnalisation/customisation… nous verrons ici que `mod_dirlisting` est amplement suffisant.

https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting


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

Dans la configuration du vhost, il suffit d'ajouter `dir-listing.activate = "enable"`.

Simple et sobre.

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

Configuration de lighttpd :

. code-block:: config

   $HTTP["host"] =~ "localhost" {
       server.document-root = "/srv/demo/lighttpd"
       dir-listing.encoding = "utf-8"
       dir-listing.activate = "enable"
   }

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

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

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

Alors, là, ça va être très différent de Apache httpd et nginx. En effet, il n'y a pas de paramètre pour activer Fancy Index. En fait, c'est « déjà » activé par défaut. Par contre, si on désactive `dir-listing.auto-layout`, voici ce que l'on obtient :

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

. code-block:: config

   $HTTP["host"] =~ "localhost" {
       server.document-root = "/srv/demo/lighttpd"
       dir-listing.encoding = "utf-8"
       dir-listing.activate = "enable"
       dir-listing.auto-layout = "disable"
   }

En fait, désactiver auto-layout permet de définir soi-même son code html


Options d'affichage
-------------------

La liste étant assez longue, on ne va pas tout énumérer. Se référer à la page de documentation officielle sur le site de lighttpd :

https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting

On va se contenter de l'essentiel :

* `dir-listing.activate` : activer le listing des fichiers et répertoires.
* `dir-listing.hide-dotfiles` : masquer les fichiers commençant par un point. Activé par défaut.
* `dir-listing.external-css` : spécifie une feuille de style à charger.
* `dir-listing.encoding` : encodage des fichiers par défaut. Dans les exemples plus haut, j'ai indiqué `utf-8`.
* `dir-listing.show-readme` : permet d'afficher le contenu de README.txt après le listing. À noter : on peut spécifier un fichier autre que README.txt
* `dir-listing.hide-readme-file` : masque le fichier README.txt. Désactivé par défaut.
* `dir-listing.show-header` : permet d'afficher le contenu de HEADER.txt avant le listing. À noter : on peut spécifier un fichier autre que HEADER.txt
* `dir-listing.hide-header-file` : masque le fichier HEADER.txt. Désactivé par défaut.
* `dir-listing.set-footer` : permet d'afficher une chaîne de caractères. Par défaut, c'est `"<PACKAGE_NAME>/<PACKAGE_VERSION>"`, ce qui affiche `lighttpd/1.4.64`.
* `dir-listing.encode-header` : permet d'afficher tel-quel (sans interpréter) le code html présent dans HEADER.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à `disable`.
* `dir-listing.encode-readme` : permet d'afficher tel-quel (sans interpréter) le code html présent dans README.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à `disable`.
* `dir-listing.auto-layout` : permet de désactiver le template html par défaut de lighttpd. Cela permet d'utiliser du contenu html complet pour header et readme.


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 encore du copier/coller de l'article Fancy index (Apache httpd) :)

L'une des différences avec Apache httpd, et c'est commun avec nginx, il n'y a pas d'icônes d'affichées avec lighttpd. Il n'y a pas non plus de directive ou de paramètre pour spécifier des icônes (copier-coller depuis l'article fancy index avec nginx).

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

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

. code-block:: css

   /* style par défaut de lighttpd */

   a, a:active {
       text-decoration: none;
       color: blue;
   }

   a:visited {
       color: #48468F;
   }

   a:hover, a:focus {
       text-decoration: underline;
       color: red;
   }

   body {
       background-color: #F5F5F5;
   }

   h2 {
       margin-bottom: 12px;
   }

   table {
       margin-left: 12px;
   }

   th, td {
       font: 90% monospace;
       text-align: left;
   }

   th {
       font-weight: bold;
       padding-right: 14px;
       padding-bottom: 3px;
   }

   td {
       padding-right: 14px;
   }

   td.s, th.s {
       text-align: right;
   }
   div.list {
       background-color: white;
       border-top: 1px solid #646464;
       border-bottom: 1px solid #646464;
       padding-top: 10px;
       padding-bottom: 14px;
   }

   div.foot {
       font: 90% monospace;
       color: #787878;
       padding-top: 4px;
   }

   /* icônes */
   a::before{
       content:"";
       padding: 12px;
       background: url('icons/text.svg') left center no-repeat;
   }

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

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

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

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

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

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

C'est long ? Normal. En plus des icônes, j'ai copié-collé la feuille de style par défaut de lighttpd, pour garder le même style d'affichage que celui par défaut.

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

Dans la configuration du site, ajouter `dir-listing.external-css = "style.css"`, comme ceci :

. code-block:: config

   $HTTP["host"] =~ "localhost" {
       server.document-root = "/srv/demo/lighttpd"
       dir-listing.encoding = "utf-8"
       dir-listing.activate = "enable"
       dir-listing.auto-layout = "enable"
       dir-listing.external-css = "style.css"
   }

Résultat ?

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

On a gardé l'aspect visuel par défaut de lighttpd, tout en ajoutant dynamiquement les icônes voulues.

HEADER et README
----------------

Avant de passer à la section où on change complètement l'affichage, on va regarder ces deux éléments que sont README.txt et HEADER.txt

Créons deux fichiers, un s'appelant `HEADER.txt` et l'autre `README.txt`.

Dans `HEADER.txt`, mettons simplement : 

. code-block:: text

   Je suis HEADER.txt

Et dans `README.txt` : 

. code-block:: text

   Je suis README.txt

Modifions la configuration du site, en ajoutant les lignes concernant readme et header :

. code-block:: config

   $HTTP["host"] =~ "localhost" {
       server.document-root = "/srv/demo/lighttpd"
       dir-listing.encoding = "utf-8"
       dir-listing.activate = "enable"
       dir-listing.show-readme = "enable"
       dir-listing.hide-readme-file = "enable"
       dir-listing.show-header = "enable"
       dir-listing.hide-header-file = "enable"
   }

Et enfin, voyons le résultat :

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

Je suis HEADER.txt est bien affiché au dessus, et Je suis README.txt est bien affiché en dessous du listing.

. note:: Pour simplifier cet exemple, je n'ai pas utilisé la feuille de style.

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

On commence à avoir l'habitude, c'est la 3e fois que je fais cette manip.

L'organisation des fichiers est identique à celle dans l'article de nginx.

Organisation des fichiers :

. code-block:: bash

   Démo 5 $ 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


Le contenu des fichiers `.head.html` et `.footer.html` est identique à la version nginx.

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 contient les modifications spécifiques au formatage de lighttpd pour les icônes et le tableau.

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


   /* lighttpd */
   table {
       margin-left: 12px;
   }

   th, td {
       text-align: left;
   }

   th {
       font-weight: bold;
       padding-right: 14px;
       padding-bottom: 3px;
   }

   td {
       padding-right: 14px;
   }

   td.s, th.s {
       text-align: right;
   }

   /* icônes */
   a::before{
       content:"";
       padding: 12px;
       background: url('.icons/text.svg') left center no-repeat;
   }

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

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

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

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

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

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


Éditons le fichier de configuration pour indiquer d'utiliser les fichiers `.footer.html` et `.head.html`.

. code-block:: config

   $HTTP["host"] =~ "localhost" {
       server.document-root = "/srv/demo/lighttpd"
       dir-listing.encoding = "utf-8"
       dir-listing.activate = "enable"
       dir-listing.show-readme = ".footer.html"
       dir-listing.show-header = ".head.html"
   }

Un redémarrage de lighttpd plus tard, et … oups ! Il y a un problème.

. image:: images/fancyindex-lighttpd/demo5.png

Au lieu d'interpréter le code html de Header et de Footer, le navigateur a affiché le contenu.

Pour rappel, dans la liste des paramètres évoqués plus tôt, il y avait ceux-là : 

* `dir-listing.encode-header` : permet d'afficher tel-quel (sans interpréter) le code html présent dans HEADER.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à `disable`.
* `dir-listing.encode-readme` : permet d'afficher tel-quel (sans interpréter) le code html présent dans README.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à `disable`.
* `dir-listing.auto-layout` : permet de désactiver le template html par défaut de lighttpd. Cela permet d'utiliser du contenu html complet pour header et readme.


Corrigeons le fichier de configuration.

. code-block:: config

   $HTTP["host"] =~ "localhost" {
       server.document-root = "/srv/demo/lighttpd"
       dir-listing.encoding = "utf-8"
       dir-listing.activate = "enable"
       dir-listing.show-readme = ".footer.html"
       dir-listing.show-header = ".head.html"
       dir-listing.auto-layout = "disable"
       dir-listing.encode-header = "disable"
       dir-listing.encode-readme = "disable"
   }

Une fois corrigé, l'affichage est celui attendu, même si légèrement différent de Apache httpd et nginx.

Thème clair

. image:: images/fancyindex-lighttpd/demo5-2.png

Thème sombre

. image:: images/fancyindex-lighttpd/demo5-dark.png

Conclusion
----------

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