Fix broken images: replace HTML with Markdown

posts/2011/2011-06-04-personnalisation-de-gnome-3.md

@@ -15,9 +15,7 @@ L'auteur va très loin, du rajout d'un menu d'application discret sur le panel
 au déplacement des icônes de la systray vers le panel... exactement ce que je
 cherchais pour ne plus rater les notifications de Choqok, Empathy et Dropbox.
 
- [<img src="/images/04x/systray2panel.jpg" alt="déplacer les apps systray
+ ![déplacer les apps systray vers le panel](/images/04x/systray2panel.jpg#center)
-vers le panel" width="600" style="margin: 0px 20px" />
-](/images/04x/systray2panel.jpg)
 
 Je vous conseille aussi la lecture des trucs et astuces Gnome 3 parus sur [Tux-
 Planet](http://www.tux-planet.fr/toutes-les-astuces-pour-gnome-shell/) et la

posts/2012/2012-01-08-installation-de-jenkins-ci.md

@@ -2,8 +2,7 @@
 <!-- category: Développement -->
 <!-- tag: planet -->
 
-<img src="/images/06x/jenkins-logo.png" alt="Jenkins CI" title="Jenkins
+![Jenkins CI](/images/06x/jenkins-logo.png#left) L'intégration
-CI" style="float:left; margin: 0px 20px" checked="true" /> L'intégration
 continue s'inscrit dans [la méthodologie
 Agile](http://fr.wikipedia.org/wiki/M%C3%A9thode_agile) ; Son objectif est de
 garantir que le projet est stable tout au long du développement et qu'on peut
@@ -39,8 +38,8 @@ secondes. Sinon démarrez Tomcat :
 sudo /etc/init.d/tomcat6 start
 ```
 
-Jenkins est accessible ici : [http://&lt;nom du
+Jenkins est accessible ici : [http://nom du
-serveur&gt;:8080/jenkins](http://localhost:8080/jenkins)
+serveur:8080/jenkins](http://localhost:8080/jenkins)
 
 Par défaut la sécurité n'est pas activée et tout le monde peut accéder et
 administrer Jenkins. Nous allons remédier à cela en modifiant les paramètres

posts/2012/2012-07-13-ranger-son-cartable.md

@@ -12,8 +12,7 @@ langage et la qualité du rendu en PDF avec pdflatex. J'ai décidé de continuer
 sur la même voie, avec l'objectif de produire une mise en page moins austère
 à défaut de pouvoir rajeunir le candidat ;-)
 
- <img src="/images/06x/trollface_cv.png" width="50%" height="50%" alt="CV
+![CV de Jean Code](/images/06x/trollface_cv.png#left) En cherchant des idées
-de Jean Code" style="float:left; margin: 0px 20px;" /> En cherchant des idées
 de mise en forme j'ai découvert [moderncv](http://www.ctan.org/pkg/moderncv),
 une classe de document LaTeX qui permet de structurer le document par des
 commandes supplémentaires (définir les données personnelles, définir une

posts/2012/2012-12-31-bilan-de-l-annee-2012.md

@@ -11,9 +11,7 @@ intégré une nouvelle société avec une double casquette développeur Java /
 admin système GNU/Linux qui m'amène à mettre en place des solutions de Haute
 Disponibilité.
 
-<img src="/images/07x/calendar.png" style="float:left; margin: 0px 20px;"
+![31-dec-calendrier](/images/07x/calendar.png#left) Sinon ma belle découverte de l'année c'est Fedora que j'utilise au travail et à la maison depuis 6 mois. Alors que j'ai surtout utilisé des distributions
-/> Sinon ma belle découverte de l'année c'est Fedora que j'utilise au travail et
-à la maison depuis 6 mois. Alors que j'ai surtout utilisé des distributions
 basées sur Debian hormis ArchLinux par le passé, j'ai été enchanté par le
 spin XFCE de Fedora 17. Mon portable relativement récent est correctement
 géré *"out of the box"*, les dépôts Fedora sont plutôt complets et

posts/2014/2014-01-02-horde-debian.md

@@ -22,7 +22,7 @@ Côté ordinateur, Lightning supporte nativement le protocole CalDav et le carne
 d'adresse peut être synchronisé avec CardDAV en installant le [module
 complémentaire pour Sogo](http://www.sogo.nu/english/downloads/frontends.html).
 
-<img src="/images/2014/logo-horde.jpg" style="float:left; margin: 0px 20px;"/>A
+![logo horde](/images/2014/logo-horde.jpg#left) A
 l'époque de mon Motorola Droid, j'avais déjà utilisé le client Funambol pour
 synchroniser mes données avec
 [eGroupware](http://www.egroupware.org/community_edition) et je m'étais
@@ -144,31 +144,31 @@ en tant qu'administrateur sans mot de passe.
 
 1. Aller dans le menu Administration / Configuration
 
-    <img src="/images/2014/horde-config.png"/>
+![horde config](/images/2014/horde-config.png#center)
 
 2. Cliquer sur le composant Horde (horde)
 
-    <img src="/images/2014/horde-application.png"/>
+![horde application](/images/2014/horde-application.png#center)
 
 3. Configurer la base de donnée dans l'onglet Database
 
-    <img src="/images/2014/horde-database.png"/>
+![horde database](/images/2014/horde-database.png#center)
 
 #### 2ème étape : créer un utilisateur avec les droits d'administration.
 
 1. Aller dans le menu Administration / Utilisateur
 
-    <img src="/images/2014/horde-user.png"/>
+![horde user](/images/2014/horde-user.png#center)
 
 2. Créer un nouvel utilisateur
 
-    <img src="/images/2014/horde-adduser.png"/>
+![horde adduser](/images/2014/horde-adduser.png#center)
 
 3. Retourner dans le menu Administration / Configuration et rajouter
    l'utilisateur nouvellement créé dans les admins de l'onglet
    Authentification.
 
-    <img src="/images/2014/horde-setadmin.png"/>
+![horde setadmin](/images/2014/horde-setadmin.png#center)
 
 4. Il est conseillé de tester le nouvel utilisateur en se déconnectant et en se
    reconnectant. Si cela fonctionne, on peut enlever l'utilisateur

posts/2014/2014-08-05-vacances.md

@@ -20,4 +20,4 @@ Pour me relaxer, j'ai travaillé un peu la cosmétique du site :
 
 Bon été à tous
 
-<img src="/images/2014/apero.jpg"/>
+![apero](/images/2014/apero.jpg)

posts/2014/2014-08-07-pecosys.md

@@ -40,8 +40,8 @@ s'installe en 5 minutes ?
 
 Cela dépend de tout un chacun mais j'y suis venu pour les raisons suivantes :
 
--    Les articles sont écrits dans un format simpliste (pour ma part c'est Markdown), la présentation est clairement séparée du contenu. C'est lors du build qu'on génère le code HTML en fonction de *templates* et de CSS personnalisés par nos soins. Le code HTML généré par Pelican est propre et léger. Le jour où j'ai migré de WordPress à PluXml, j'ai été horrifié par le code HTML de WordPress.  
+- Les articles sont écrits dans un format simpliste (pour ma part c'est Markdown), la présentation est clairement séparée du contenu. C'est lors du build qu'on génère le code HTML en fonction de *templates* et de CSS personnalisés par nos soins. Le code HTML généré par Pelican est propre et léger. Le jour où j'ai migré de WordPress à PluXml, j'ai été horrifié par le code HTML de WordPress.  
--    Le contenu du blog est un ensemble de fichier au format texte, idéal à gérer avec un gestionnaire de sources afin de garder trace des modifications. Un gestionnaire de sources devient aussi un moyen d'automatiser la mise à jour du site. On écrit et on teste sur sa machine de dev, on publie sous GIT et il suffit que le serveur rafraîchisse sa version du site quand une modification a été effectuée.
+- Le contenu du blog est un ensemble de fichier au format texte, idéal à gérer avec un gestionnaire de sources afin de garder trace des modifications. Un gestionnaire de sources devient aussi un moyen d'automatiser la mise à jour du site. On écrit et on teste sur sa machine de dev, on publie sous GIT et il suffit que le serveur rafraîchisse sa version du site quand une modification a été effectuée.
 
 #### La problématique des commentaires
 
@@ -79,9 +79,9 @@ La sauvegarde se fait grâce à GIT. Ah j'avais pas encore parlé de GIT :-) On
 
 Donc, pour résumer :
 
--     j'écris mes articles sur ma machine de dev perso, je publie dans GIT et je pousse mes modifications au GIT centralisé de BitBucket (au sens GIT: ORIGIN).
+- j'écris mes articles sur ma machine de dev perso, je publie dans GIT et je pousse mes modifications au GIT centralisé de BitBucket (au sens GIT: ORIGIN).
--     mon serveur vérifie périodiquement si le dépôt BitBucket a été modifié et si c'est le cas, il rapatrie les sources du blog et reconstruit le site grâce à sa mécanique Pelican installée localement.
+- mon serveur vérifie périodiquement si le dépôt BitBucket a été modifié et si c'est le cas, il rapatrie les sources du blog et reconstruit le site grâce à sa mécanique Pelican installée localement.
--     Pecosys a sa propre version du blog (au sens GIT: CLONE) maintenue à jour de BitBucket.
+- Pecosys a sa propre version du blog (au sens GIT: CLONE) maintenue à jour de BitBucket.
 
 Donc quand Pecosys reçoit un nouveau commentaire, il met à jour sa version du
 blog (la branche MASTER) et il crée une nouvelle branche XYZ pour ce
@@ -101,8 +101,8 @@ signifie qu'on refuse le commentaire.
 En fonction de cette réponse, le serveur Pecosys qui vérifie sa boite de
 réception régulièrement, va traiter le commentaire :
 
--    un refus du commentaire revient à supprimer la branche GIT XYZ
+- un refus du commentaire revient à supprimer la branche GIT XYZ
--    une approbation du commentaire ramène les modifications de la branche XYZ sur la branche MASTER (au sens GIT: MERGE) et pousse les modifications sur le GIT distant (dans mon cas BitBucket)
+- une approbation du commentaire ramène les modifications de la branche XYZ sur la branche MASTER (au sens GIT: MERGE) et pousse les modifications sur le GIT distant (dans mon cas BitBucket)
 
 Dans les deux cas, un email de confirmation de l'action réalisée est envoyé à
 l'administrateur du blog.
@@ -113,7 +113,7 @@ publier le commentaire.
 
 Si vous avez bien suivi et je sais que c'est un peu touffu et compliqué, vous
 vous demandez comment les commentaires (ces fichiers en Markdown) sont générés
-en HTML. Et bien, pas le biais d'un plugin Pelican nommé **CaCause**, en
+en HTML. Et bien, par le biais d'un plugin Pelican nommé **CaCause**, en
 hommage au projet de base initié il y a un an avec [Bruno
 Adele](http://www.jesuislibre.org) et [Nahir
 Mohamed](https://github.com/nadley) dont Pecosys est une reprise des idées
@@ -127,4 +127,4 @@ qui contient donc mes *templates* avec le formulaire et les sources du plugin.
 
 En attendant je retourne à mon farniente estival :-)
 
-<img src="/images/2014/lemon.jpg"/>
+![lemon](/images/2014/lemon.jpg)

posts/2014/2014-08-12-qemu-raspbian.md

@@ -2,13 +2,9 @@
 <!-- category: Debian Matériel Virtualisation -->
 <!-- tag: planet -->
 
-<img src="/images/2014/rasplogo.png" alt="Raspberry logo" style="margin: 0px
+![Raspberry logo](/images/2014/rasplogo.png#left) Je m'intéresse de plus en plus au Raspberry et je franchirai peut-être le pas de l'achat dans quelque temps. J'ai voulu voir à
-20px; float:left;" />Je m'intéresse de plus en plus au Raspberry et je
-franchirai peut-être le pas de l'achat dans quelque temps. J'ai voulu voir à
 quoi ressemble sa distribution principale Raspbian (basée sur Debian) en
-l'émulant sous Qemu. <!-- more -->Je me suis basé sur [le tutorial pointé par beaucoup de
+l'émulant sous Qemu. <!-- more -->Je me suis basé sur [le tutorial pointé par beaucoup de gens dans les forums](http://xecdesign.com/qemu-emulating-raspberry-pi-the-easy-way/) et j'ai effectué des recherches annexes pour résoudre
-gens dans les forums](http://xecdesign.com/qemu-emulating-raspberry-pi-the-
-easy-way/)  et j'ai effectué des recherches annexes pour résoudre
 certains problèmes : taille des partitions, gestion de la souris sous Qemu. Ce
 qui suit est le résultat de mes manipulations pour émuler Raspbian avec Qemu
 depuis une distribution GNU/Linux 64 bits.

posts/2015/2015-04-30-back-to-roots-bash.md

@@ -14,9 +14,7 @@ intéressant de personnaliser la configuration de son shell pour se l'approprier
 C'est *fun à réaliser* et cela donne envie de faire plus de choses depuis le
 terminal.
 
-<img src="/images/2015/stallman-code.jpg" alt="Un barbu" style="margin: 0px
+![un barbu](/images/2015/stallman-code.jpg#right) Bon si dans quelques mois, les annonces de sortie du nouveau KDE ou Gnome vous font ricaner, que vous ne jurez que par
-20px; float:right;" /> Bon si dans quelques mois, les annonces de sortie du nouveau KDE ou
-Gnome vous font ricaner, que vous ne jurez que par
 [Awesome](http://awesome.naquadah.org),
 [Rxvt](http://sourceforge.net/projects/rxvt) et
 [Tmux](http://tmux.sourceforge.net), vous êtes au bout du chemin, peut-être un

posts/2015/2015-09-23-obsolescence-repoussee.md

@@ -22,8 +22,7 @@ la durée de vie du téléphone. L'équipe Ubuntu promet une mise à jour des
 téléphones sans intermédiaire tant que le matériel sera suffisamment puissant
 pour supporter les évolutions d'Ubuntu Touch.
 
-<img src="/images/2015/poussiere.jpg" alt="poussiere" style="float:left; margin:
+![poussiere](/images/2015/poussiere.jpg#left) Pour les PC, un coup de pouce peut rajeunir un matériel
-0px 25px 20px 25px;"/> Pour les PC, un coup de pouce peut rajeunir un matériel
 vieillissant : une distribution GNU/Linux légère et l'investissement dans un
 SSD. J'ai profité des soldes de l'été pour acheter un SSD de 64 Go pour ma
 machine principale, un portable Toshiba de 2009 (processeur Core 2 Duo et 4 Go

posts/2015/2015-12-12-retour-experience-ubuntu-touch.md

@@ -13,8 +13,7 @@ ont été commercialisés : deux modèles du constructeur espagnol BQ qui semble
 très appréciés par la communauté Ubuntu et un modèle assez puissant, le MX4 du
 constructeur chinois Meizu.
 
-<img src="/images/2015/ubuntu-about.png" alt="A propos" style="margin: 0px 20px;
+![A propos](/images/2015/ubuntu-about.png#left) Ca commence donc par l'installation du système qui est assez
-float:left;" />Ca commence donc par l'installation du système qui est assez
 simple car d'une part le Nexus 4 a un booloader facile à déverrouiller et
 Ubuntu Touch est basé sur un Android, on utilise donc des outils Android (adb,
 fastreboot) pour flasher le système. Ensuite les outils Canonical
@@ -49,30 +48,30 @@ je m'emballe, faisons d'abord un petit tour en images du système.
 
 **L'écran de déverrouillage et ses statistiques amusantes :**
 
-<img src="/images/2015/ubuntu-unlock1.png" alt="ubuntu unlock"/>
+![ubuntu unlock](/images/2015/ubuntu-unlock1.png)
 
-<img src="/images/2015/ubuntu-unlock2.png" alt="ubuntu unlock"/>
+![ubuntu unlock](/images/2015/ubuntu-unlock2.png)
 
 **L'écran principal avec ses applications en rang d'oignons:**
 
-<img src="/images/2015/ubuntu-appli1.png" alt="ubuntu application"/>
+![ubuntu application](/images/2015/ubuntu-appli1.png)
 
-<img src="/images/2015/ubuntu-appli2.png" alt="ubuntu application"/>
+![ubuntu application](/images/2015/ubuntu-appli2.png)
 
 **Les applications favorites sur la gauche en faisant glisser le bord gauche de l'écran**
 
 **et les applications lancées en faisant glisser le bord droit de l'écran :**
 
-<img src="/images/2015/ubuntu-unity.png" alt="ubuntu unity"/>
+![ubuntu unity](/images/2015/ubuntu-unity.png)
 
-<img src="/images/2015/ubuntu-tasks.png" alt="ubuntu tasks"/>
+![ubuntu tasks](/images/2015/ubuntu-tasks.png)
 
 **Les paramètres système et un aperçu du magasin d'applications :**
 
 
-<img src="/images/2015/ubuntu-settings.png" alt="ubuntu settings"/>
+![ubuntu settings](/images/2015/ubuntu-settings.png)
 
-<img src="/images/2015/ubuntu-store.png" alt="ubuntu store"/>
+![ubuntu store](/images/2015/ubuntu-store.png)
 
 A part la particularité du tirage des bords d'écran pour faire apparaître la
 barre latérale ou passer d'une application à l'autre mais on pige vite le coup,

posts/2017/2017-02-24-termux-pour-quoi-faire.md

@@ -13,9 +13,7 @@ régulières. La série de Cascador décrit différents scénarios d'utilisation
 installer un serveur SSH, utiliser des outils console, accéder à des API
 Android. 
 
-<img src="/images/2017/termux-esynic.jpg" alt="termux" style="margin: 0px 20px;
+![Clavier esynic](/images/2017/termux-esynic.jpg#left) J'ai bien mordu, jusqu'à me faire offrir un super clavier bluetooth pour Noël (merci frérot).
-float:left;" />J'ai bien mordu, jusqu'à me faire offrir un super clavier
-bluetooth pour Noël (merci frérot).
 
 Le risque était que le coup de coeur retombe ; qu'après avoir
 bien rigolé à installer **vim** et consorts, on s'essoufle à cause des

posts/2018/2018-02-07-quel-systeme-serveur.md

@@ -17,7 +17,7 @@ nous sommes arrivés à **"le meilleur système c'est AUCUN"**.
 
 ### Phase 1 : le monolithe
 
-![Monolithe](/images/2018/monolithe.jpg)
+![Monolithe](/images/2018/monolithe.jpg#left)
 
 Le serveur est monolithique donc le choix du système d'exploitation est crucial.
 
@@ -104,7 +104,7 @@ Bon j'ai l'air emballé sur Docker et c'est le cas, d'un point de vue
 professionnel. Ce n'est pas mon rêve pour mon auto-hébergement, les conteneurs
 ont tous la même taille, ça manque de diversité et de fun pour moi.
 
-![Have Fun](/images/2018/havefun.jpg)
+![Have Fun](/images/2018/havefun.jpg#left)
 
 La plupart des entreprises sont entre la phase 2 et la phase 3 : elle ont
 virtualisé tout ce qui est possible et elles migrent des services sous

static/css/style.css

@@ -154,3 +154,18 @@ footer {
     text-align: right;
 }
 
+/* image placement (https://stackoverflow.com/questions/255170/markdown-and-image-alignment) */
+img[src*='#left'] {
+    float: left;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+img[src*='#right'] {
+    float: right;
+    margin-left: 20px;
+    margin-right: 20px;    
+}
+img[src*='#center'] {
+    display: block;
+    margin: auto;
+}

static/css/style.min.css

@@ -1,2 +1 @@
-body{font-family:system-ui,sans-serif;background-color:#fbfefb}body,p{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,li{font-weight:400;font-size:large;line-height:28px;vertical-align:baseline;color:#384743;margin-bottom:2rem}h1,h2,h3,h4,h5,h6{color:#05bf85}h1{font-weight:400}a:link,a:visited{color:#006cac;text-decoration:none}li{margin-bottom:0}a:hover,a:active{color:#2e8b57}.banner div{background-image:url(/fond-resized.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;width:100%;height:250px;line-height:13rem;text-align:center;vertical-align:middle;margin-bottom:5rem}.banner div>h1{color:#242e2b;vertical-align:baseline}.banner div>h2{font-weight:400;color:#384743;vertical-align:baseline}#menu-blog{font-weight:500;font-size:larger;line-height:96px;vertical-align:middle}#menu-blog a{padding-right:2rem}.post{margin-left:1rem;margin-right:1rem}.summary{margin-top:0}.article>h1{margin-bottom:0}.meta{margin-top:0;margin-bottom:0}.meta>span{display:inline;margin-right:1rem}
+body{font-family:system-ui,sans-serif;background-color:#fbfefb}body,p{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,li{font-weight:400;font-size:large;line-height:28px;vertical-align:baseline;color:rgb(56,71,67);margin-bottom:2rem}h1,h2,h3,h4,h5,h6{color:#05bf85}h1{font-weight:400}a:link,a:visited{color:rgb(0,108,172);text-decoration:none}li{margin-bottom:0rem}a:hover,a:active{color:seagreen}.banner div{background-image:url(/fond-resized.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;width:100%;height:250px;line-height:13rem;text-align:center;vertical-align:middle;margin-bottom:5rem}.banner div>h1{color:rgb(36,46,43);vertical-align:baseline}.banner div>h2{font-weight:400;color:rgb(56,71,67);vertical-align:baseline}#menu-blog{font-weight:500;font-size:larger;line-height:96px;vertical-align:middle}#menu-blog a{padding-right:2rem}.post{margin-left:1rem;margin-right:1rem}.summary{margin-top:0rem}.article>h1{margin-bottom:0rem}.meta{margin-top:0rem;margin-bottom:0rem}.meta>span{display:inline;margin-right:1rem}.meta-post{margin-top:0rem;margin-bottom:2.4rem}.meta-post>span{display:inline;margin-right:1rem}.hidden{display:none}#comment-form>form>fieldset>.remarque{display:none}.comment-separator{height:.1rem;background:#717171;border-bottom:.2rem solid #6E9CC7;margin-bottom:1rem}.comment-indicator{color:coral}.comment-author{font-weight:500}.comment-detail{margin-bottom:2.5rem}.comment-body{margin-left:4.2rem}footer{background:#f0f0f0;border-top:thin solid #e0e0e0;margin-left:2rem;margin-right:2rem;margin-top:2rem;padding:1rem 0;box-shadow:0 100vh 0 100vh #f0f0f0}.txtright{text-align:right}img[src*='#left']{float:left;margin-left:20px;margin-right:20px}img[src*='#right']{float:right;margin-left:20px;margin-right:20px}img[src*='#center']{display:block;margin:auto}
-.meta-post{margin-top:0;margin-bottom:2.4rem}.meta-post>span{display:inline;margin-right:1rem}.hidden{display:none}#comment-form>form>fieldset>.remarque{display:none}.comment-separator{height:.1rem;background:#717171;border-bottom:.2rem solid #6e9cc7;margin-bottom:1rem}.comment-indicator{color:coral}.comment-author{font-weight:500}.comment-detail{margin-bottom:2.5rem}.comment-body{margin-left:4.2rem}footer{background:#f0f0f0;border-top:thin solid #e0e0e0;margin-left:2rem;margin-right:2rem;margin-top:2rem;padding:1rem 0;box-shadow:0 100vh 0 100vh #f0f0f0}.txtright{text-align:right}