doc/configuration.md

@@ -1,3 +1,9 @@
+- [Configuration](#configuration)
+  - [Personnalisation](#personnalisation)
+    - [Exemple](#exemple)
+      - [index.gohtml exemple](#indexgohtml-exemple)
+
+
 # Configuration
 
 Le server Arcast utilise un fichier de configuration permettant de personnaliser son comportement.
@@ -57,3 +63,60 @@ Voici un exemple commenté du fichier de configuration:
 Il est possible de personnaliser la page d'accueil du player Arcast en créant des fichiers dans le répertoire définit par l'attribut de configuration `http.customDir`.
 
 Le contenu de ce répertoire doit répliquer l'arborescence embarquée par défaut (voir https://forge.cadoles.com/arcad/arcast/src/branch/develop/pkg/server/embed). Chaque fichier présent remplacera celui embarqué par défaut.
+
+### Exemple
+
+Nous voulons ajouter une image, et du texte à la page d'accueil, étant sur une ubuntu nous allons à l'emplacement : `${HOME}/.config/arcast-player/`
+
+Soit :
+
+```Shell
+${HOME}/.config/arcast-player/
+├── config.json
+└── custom
+```
+
+Nous avons une image **logo.png**, un fichier css pour l'apparence **exemple.css**, et un templates **index.gohtml** dans le dossier _templates, contenant le texte à afficher, et sa position dans la fenêtre.
+
+Soit :
+
+```Shell
+${HOME}/.config/arcast-player/
+├── config.json
+└── custom
+    ├── exemple.css
+    ├── logo.png
+    └── _templates
+        └── index.gohtml
+```
+
+Une fois les fichiers dûments remplis, il suffit de lancer, ou re-lancer arcast-player pour voir le résultat.
+
+#### index.gohtml exemple
+
+```go
+{{ define "message" }}
+<h1 style="margin-top: 20px" class="text-centered">Bienvenue chez moi !</h1>
+<hr style="margin: 20px 0 20px 0" />
+<div style="margin: 20px 0 20px 0">
+  <p>Pensez à vous essuyer les pieds</p>
+  <ul>
+    <li>
+      <b style="width: 33%; display: inline-block">Pour la bière:</b>
+      <code>Le frigo est à droite</code>
+    </li>
+    <li>
+      <b style="width: 33%; display: inline-block">Pour le barbecue</b>
+      <code>Porte fenêtre de gauche, puis à droite ce trouve votre bonheur</code>
+    </li>
+  </ul>
+  <hr style="margin: 20px 0 20px 0" />
+</div>
+{{ end }}
+{{ define "head" }}
+<link rel="stylesheet" href="exemple.css" />
+{{ end }}
+{{ define "index" }}
+{{ template "base" . }}
+{{ end }}
+```