Browse Source

Use mistune to implement lightbox markup for images

As a bonus, the feed now only displays one image.
master
David Larlet 2 years ago
parent
commit
14a8744eea

+ 4
- 2
david/2021/02/09/index.html View File

@@ -73,10 +73,12 @@
<p>C’était tout de même une bien belle sortie, j’en suis revenu épuisé et heureux. L’avantage de vieillir, c’est que ton corps te rappelle plusieurs jours de suite que tu t’es bien dépensé&#8239;!</p>
<figure>
<a href="#ski_de_fond">
<img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond" loading="lazy" />
<img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond"
loading="lazy" width="2016" height="1512" />
</a>
<a href="#_" class="lightbox" id="ski_de_fond">
<img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond" loading="lazy" />
<img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond"
loading="lazy" width="2016" height="1512" />
</a>
<figcaption>Une piste aussi sinueuse que mes pensées.</figcaption>
</figure>

+ 4
- 2
david/2021/02/10/index.html View File

@@ -76,10 +76,12 @@
<p>Petit plaisir du jour&nbsp;: avoir créé un nuage en lançant de l’eau à ébullition en l’air lorsqu’il fait «&nbsp;frête&nbsp;». Je ne l’avais jamais fait et c’était plaisant, d’autant que non prémédité (je faisais la vaisselle en m’aidant du poêle).</p>
<figure>
<a href="#refuge_corbeau">
<img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil" loading="lazy" />
<img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil"
loading="lazy" width="2016" height="1512" />
</a>
<a href="#_" class="lightbox" id="refuge_corbeau">
<img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil" loading="lazy" />
<img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil"
loading="lazy" width="2016" height="1512" />
</a>
<figcaption>Les couleurs par -22°C sont toujours aussi magnifiques.</figcaption>
</figure>

+ 14
- 6
david/2021/03/30/index.html View File

@@ -73,28 +73,36 @@
<p>Un truc que je n’avais pas anticipé, c’est que je peux récupérer parmi toutes les prises de vues celles que j’ai envie de garder sous forme de photos. J’en ai gardé 3&nbsp;pour l’occasion&nbsp;:</p>
<figure>
<a href="#timelapse1">
<img src="/static/david/2021/timelapse1.jpg" alt="Coucher de soleil 1" loading="lazy" />
<img src="/static/david/2021/timelapse1.jpg" alt="Coucher de soleil 1"
loading="lazy" width="1600" height="1200" />
</a>
<a href="#_" class="lightbox" id="timelapse1">
<img src="/static/david/2021/timelapse1.jpg" alt="Coucher de soleil 1" loading="lazy" />
<img src="/static/david/2021/timelapse1.jpg" alt="Coucher de soleil 1"
loading="lazy" width="1600" height="1200" />
</a>
<figcaption>Coucou les bernaches, merci de nous annoncer le printemps <3.</figcaption>
</figure>

<figure>
<a href="#timelapse2">
<img src="/static/david/2021/timelapse2.jpg" alt="Coucher de soleil 2" loading="lazy" />
<img src="/static/david/2021/timelapse2.jpg" alt="Coucher de soleil 2"
loading="lazy" width="1600" height="1200" />
</a>
<a href="#_" class="lightbox" id="timelapse2">
<img src="/static/david/2021/timelapse2.jpg" alt="Coucher de soleil 2" loading="lazy" />
<img src="/static/david/2021/timelapse2.jpg" alt="Coucher de soleil 2"
loading="lazy" width="1600" height="1200" />
</a>
<figcaption>Le ciel, aussi rouge que le bout de mon nez.</figcaption>
</figure>

<figure>
<a href="#timelapse3">
<img src="/static/david/2021/timelapse3.jpg" alt="Coucher de soleil 3" loading="lazy" />
<img src="/static/david/2021/timelapse3.jpg" alt="Coucher de soleil 3"
loading="lazy" width="1600" height="1200" />
</a>
<a href="#_" class="lightbox" id="timelapse3">
<img src="/static/david/2021/timelapse3.jpg" alt="Coucher de soleil 3" loading="lazy" />
<img src="/static/david/2021/timelapse3.jpg" alt="Coucher de soleil 3"
loading="lazy" width="1600" height="1200" />
</a>
<figcaption>Le ciel s’éteint et la rivière s’illumine.</figcaption>
</figure>

+ 4
- 2
david/2021/04/03/index.html View File

@@ -70,10 +70,12 @@
<p>Le retour des bernaches est un moment de joie qui annonce le printemps. Elles sont la sonalité de la sai·sonnalité, le balancier de la pendule annuelle, le grand «&nbsp;V&nbsp;» de la Vie dans le ciel.</p>
<figure>
<a href="#bernache">
<img src="/static/david/2021/bernache.jpg" alt="Une bernache le long de la rivière" loading="lazy" />
<img src="/static/david/2021/bernache.jpg" alt="Une bernache le long de la rivière"
loading="lazy" width="1600" height="1200" />
</a>
<a href="#_" class="lightbox" id="bernache">
<img src="/static/david/2021/bernache.jpg" alt="Une bernache le long de la rivière" loading="lazy" />
<img src="/static/david/2021/bernache.jpg" alt="Une bernache le long de la rivière"
loading="lazy" width="1600" height="1200" />
</a>
<figcaption>Cette bernache a fait plus de kilomètres que moi cette dernière année.</figcaption>
</figure>

+ 4
- 2
david/2021/04/13/index.html View File

@@ -69,10 +69,12 @@

<figure>
<a href="#nuns">
<img src="/static/david/2021/nuns.jpg" alt="Article de presse de 1990 sur cette histoire" loading="lazy" />
<img src="/static/david/2021/nuns.jpg" alt="Article de presse de 1990 sur cette histoire"
loading="lazy" width="1440" height="1156" />
</a>
<a href="#_" class="lightbox" id="nuns">
<img src="/static/david/2021/nuns.jpg" alt="Article de presse de 1990 sur cette histoire" loading="lazy" />
<img src="/static/david/2021/nuns.jpg" alt="Article de presse de 1990 sur cette histoire"
loading="lazy" width="1440" height="1156" />
</a>
<figcaption>Mais que fait Holywood ?!</figcaption>
</figure>

+ 1
- 9
david/2021/sources/2021-02-09 - Calme.md View File

@@ -8,12 +8,4 @@ Je décide d’y aller sans équipement vidéo, pour le fun, mon Kalimba sous le

C’était tout de même une bien belle sortie, j’en suis revenu épuisé et heureux. L’avantage de vieillir, c’est que ton corps te rappelle plusieurs jours de suite que tu t’es bien dépensé !

<figure>
<a href="#ski_de_fond">
<img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="ski_de_fond">
<img src="/static/david/2021/ski_de_fond.jpg" alt="Piste de ski de fond" loading="lazy" />
</a>
<figcaption>Une piste aussi sinueuse que mes pensées.</figcaption>
</figure>
![Piste de ski de fond](/static/david/2021/ski_de_fond.jpg "Une piste aussi sinueuse que mes pensées.")

+ 1
- 9
david/2021/sources/2021-02-10 - Retraite.md View File

@@ -8,12 +8,4 @@ Sur les pistes, je ne croise que quelques personnes manifestement retraitées. J

Petit plaisir du jour : avoir créé un nuage en lançant de l’eau à ébullition en l’air lorsqu’il fait « frête ». Je ne l’avais jamais fait et c’était plaisant, d’autant que non prémédité (je faisais la vaisselle en m’aidant du poêle).

<figure>
<a href="#refuge_corbeau">
<img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="refuge_corbeau">
<img src="/static/david/2021/refuge_corbeau.jpg" alt="Lever de soleil" loading="lazy" />
</a>
<figcaption>Les couleurs par -22°C sont toujours aussi magnifiques.</figcaption>
</figure>
![Lever de soleil](/static/david/2021/refuge_corbeau.jpg "Les couleurs par -22°C sont toujours aussi magnifiques.")

+ 4
- 28
david/2021/sources/2021-03-30 - Timelapse.md View File

@@ -8,33 +8,9 @@ Je n’ai pas encore tenté d’animer la prise en combinant avec la [gimbal](/d

Un truc que je n’avais pas anticipé, c’est que je peux récupérer parmi toutes les prises de vues celles que j’ai envie de garder sous forme de photos. J’en ai gardé 3 pour l’occasion :

<figure>
<a href="#timelapse1">
<img src="/static/david/2021/timelapse1.jpg" alt="Coucher de soleil 1" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="timelapse1">
<img src="/static/david/2021/timelapse1.jpg" alt="Coucher de soleil 1" loading="lazy" />
</a>
<figcaption>Coucou les bernaches, merci de nous annoncer le printemps <3.</figcaption>
</figure>
<figure>
<a href="#timelapse2">
<img src="/static/david/2021/timelapse2.jpg" alt="Coucher de soleil 2" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="timelapse2">
<img src="/static/david/2021/timelapse2.jpg" alt="Coucher de soleil 2" loading="lazy" />
</a>
<figcaption>Le ciel, aussi rouge que le bout de mon nez.</figcaption>
</figure>
<figure>
<a href="#timelapse3">
<img src="/static/david/2021/timelapse3.jpg" alt="Coucher de soleil 3" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="timelapse3">
<img src="/static/david/2021/timelapse3.jpg" alt="Coucher de soleil 3" loading="lazy" />
</a>
<figcaption>Le ciel s’éteint et la rivière s’illumine.</figcaption>
</figure>
![Coucher de soleil 1](/static/david/2021/timelapse1.jpg "Coucou les bernaches, merci de nous annoncer le printemps <3.")
![Coucher de soleil 2](/static/david/2021/timelapse2.jpg "Le ciel, aussi rouge que le bout de mon nez.")
![Coucher de soleil 3](/static/david/2021/timelapse3.jpg "Le ciel s’éteint et la rivière s’illumine.")

---

@@ -42,4 +18,4 @@ En revenant à la maison, de nuit :

> — Je pensais que tu nous avais abandonnés. Parce que je fais trop de bruit.

Il va falloir encaisser ça et travailler cette insécurité, à la fois pour le fils… et le père !
Il va falloir encaisser ça et travailler cette insécurité, à la fois pour le fils… et le père !

+ 1
- 9
david/2021/sources/2021-04-03 - Bernaches.md View File

@@ -2,12 +2,4 @@

Le retour des bernaches est un moment de joie qui annonce le printemps. Elles sont la sonalité de la sai·sonnalité, le balancier de la pendule annuelle, le grand « V » de la Vie dans le ciel.

<figure>
<a href="#bernache">
<img src="/static/david/2021/bernache.jpg" alt="Une bernache le long de la rivière" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="bernache">
<img src="/static/david/2021/bernache.jpg" alt="Une bernache le long de la rivière" loading="lazy" />
</a>
<figcaption>Cette bernache a fait plus de kilomètres que moi cette dernière année.</figcaption>
</figure>
![Une bernache le long de la rivière](/static/david/2021/bernache.jpg "Cette bernache a fait plus de kilomètres que moi cette dernière année.")

+ 1
- 9
david/2021/sources/2021-04-13 - Nonnes.md View File

@@ -1,14 +1,6 @@
# Nonnes

<figure>
<a href="#nuns">
<img src="/static/david/2021/nuns.jpg" alt="Article de presse de 1990 sur cette histoire" loading="lazy" />
</a>
<a href="#_" class="lightbox" id="nuns">
<img src="/static/david/2021/nuns.jpg" alt="Article de presse de 1990 sur cette histoire" loading="lazy" />
</a>
<figcaption>Mais que fait Holywood ?!</figcaption>
</figure>
![Article de presse de 1990 sur cette histoire](/static/david/2021/nuns.jpg "Mais que fait Holywood ?!")

Je ne pensais pas un jour faire une entrée sur des nonnes mais [cette](https://www.lesoir.be/art/la-saga-des-colettines-rebondit-une-ferme-au-coeur-des-_t-19900704-Z02VMP.html) [histoire](https://www.lesoir.be/art/le-jardinier-des-clarisses-de-bruges-est-inculpe-_t-19900323-Z02HCD.html) [complètement](https://www.lesoir.be/art/%25252Fpauvres-claires-ronny-crab-en-correctionnelle_t-19941024-Z08NWK.html) [rocambolesque](https://www.lesoir.be/art/%252Fm%252Fla-cour-d-appel-de-gand-acquitte-ronny-crab-le-dossier-_t-19960206-Z0AMZN.html) mérite d’être connue !


+ 17
- 43
david/log/index.xml View File

@@ -5,7 +5,7 @@
<link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
<link href="https://larlet.fr/david/log/" rel="self" />
<id>https://larlet.fr/david/</id>
<updated>2021-05-06T12:00:00+01:00</updated>
<updated>2021-05-08T12:00:00+01:00</updated>
<author>
<name>David Larlet</name>
<uri>https://larlet.fr/david/</uri>
@@ -357,12 +357,8 @@
<id>https://larlet.fr/david/2021/04/13/</id>
<summary type="html">
&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/04/13/#nuns&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/nuns.jpg&quot; alt=&quot;Article de presse de 1990 sur cette histoire&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/04/13/#_&quot; class=&quot;lightbox&quot; id=&quot;nuns&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/nuns.jpg&quot; alt=&quot;Article de presse de 1990 sur cette histoire&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/nuns.jpg&quot; alt=&quot;Article de presse de 1990 sur cette histoire&quot;
width=&quot;1440&quot; height=&quot;1156&quot; /&gt;
&lt;figcaption&gt;Mais que fait Holywood ?!&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Je ne pensais pas un jour faire une entrée sur des nonnes mais &lt;a href=&quot;https://www.lesoir.be/art/la-saga-des-colettines-rebondit-une-ferme-au-coeur-des-_t-19900704-Z02VMP.html&quot;&gt;cette&lt;/a&gt; &lt;a href=&quot;https://www.lesoir.be/art/le-jardinier-des-clarisses-de-bruges-est-inculpe-_t-19900323-Z02HCD.html&quot;&gt;histoire&lt;/a&gt; &lt;a href=&quot;https://www.lesoir.be/art/%25252Fpauvres-claires-ronny-crab-en-correctionnelle_t-19941024-Z08NWK.html&quot;&gt;complètement&lt;/a&gt; &lt;a href=&quot;https://www.lesoir.be/art/%252Fm%252Fla-cour-d-appel-de-gand-acquitte-ronny-crab-le-dossier-_t-19960206-Z0AMZN.html&quot;&gt;rocambolesque&lt;/a&gt; mérite d’être connue&amp;#8239;!&lt;/p&gt;
@@ -525,12 +521,8 @@
<summary type="html">
&lt;p&gt;Le retour des bernaches est un moment de joie qui annonce le printemps. Elles sont la sonalité de la sai·sonnalité, le balancier de la pendule annuelle, le grand «&amp;nbsp;V&amp;nbsp;» de la Vie dans le ciel.&lt;/p&gt;
&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/04/03/#bernache&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/bernache.jpg&quot; alt=&quot;Une bernache le long de la rivière&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/04/03/#_&quot; class=&quot;lightbox&quot; id=&quot;bernache&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/bernache.jpg&quot; alt=&quot;Une bernache le long de la rivière&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/bernache.jpg&quot; alt=&quot;Une bernache le long de la rivière&quot;
width=&quot;1600&quot; height=&quot;1200&quot; /&gt;
&lt;figcaption&gt;Cette bernache a fait plus de kilomètres que moi cette dernière année.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
@@ -565,30 +557,20 @@
&lt;p&gt;Je n’ai pas encore tenté d’animer la prise en combinant avec la &lt;a href=&quot;https://larlet.fr/david/2021/03/21/&quot;&gt;gimbal&lt;/a&gt; mais je vois déjà que ça me prend une bonne partie d’une batterie aussi ça m’inquiète pour des situations où j’ai des contraintes fortes à ce niveau. Au passage, je me demande comment font celleux qui réalisent des &lt;em&gt;timelapses&lt;/em&gt; d’aurores boréales, il doit falloir un générateur à côté de l’appareil 😅.&lt;/p&gt;
&lt;p&gt;Un truc que je n’avais pas anticipé, c’est que je peux récupérer parmi toutes les prises de vues celles que j’ai envie de garder sous forme de photos. J’en ai gardé 3&amp;nbsp;pour l’occasion&amp;nbsp;:&lt;/p&gt;
&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/03/30/#timelapse1&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse1.jpg&quot; alt=&quot;Coucher de soleil 1&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/03/30/#_&quot; class=&quot;lightbox&quot; id=&quot;timelapse1&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse1.jpg&quot; alt=&quot;Coucher de soleil 1&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse1.jpg&quot; alt=&quot;Coucher de soleil 1&quot;
width=&quot;1600&quot; height=&quot;1200&quot; /&gt;
&lt;figcaption&gt;Coucou les bernaches, merci de nous annoncer le printemps &lt;3.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/03/30/#timelapse2&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse2.jpg&quot; alt=&quot;Coucher de soleil 2&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/03/30/#_&quot; class=&quot;lightbox&quot; id=&quot;timelapse2&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse2.jpg&quot; alt=&quot;Coucher de soleil 2&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse2.jpg&quot; alt=&quot;Coucher de soleil 2&quot;
width=&quot;1600&quot; height=&quot;1200&quot; /&gt;
&lt;figcaption&gt;Le ciel, aussi rouge que le bout de mon nez.&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/03/30/#timelapse3&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse3.jpg&quot; alt=&quot;Coucher de soleil 3&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/03/30/#_&quot; class=&quot;lightbox&quot; id=&quot;timelapse3&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse3.jpg&quot; alt=&quot;Coucher de soleil 3&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/timelapse3.jpg&quot; alt=&quot;Coucher de soleil 3&quot;
width=&quot;1600&quot; height=&quot;1200&quot; /&gt;
&lt;figcaption&gt;Le ciel s’éteint et la rivière s’illumine.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr /&gt;
@@ -1486,12 +1468,8 @@ Si nous n’explorons pas cette histoire, qui vit activement en nous comme les p
&lt;p&gt;Sur les pistes, je ne croise que quelques personnes manifestement retraitées. Je me demande si j’en suis une. Pas dans le sens &lt;abbr title=&quot;Financial Independence, Retire Early&quot;&gt;FIRE&lt;/abbr&gt; qui semble avoir du succès chez les personnes à hauts salaires — comme les développeurs et développeuses. Plutôt en ayant des choix de vie me permettant d’avoir des pratiques de retraité dès maintenant.&lt;/p&gt;
&lt;p&gt;Petit plaisir du jour&amp;nbsp;: avoir créé un nuage en lançant de l’eau à ébullition en l’air lorsqu’il fait «&amp;nbsp;frête&amp;nbsp;». Je ne l’avais jamais fait et c’était plaisant, d’autant que non prémédité (je faisais la vaisselle en m’aidant du poêle).&lt;/p&gt;
&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/02/10/#refuge_corbeau&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/refuge_corbeau.jpg&quot; alt=&quot;Lever de soleil&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/02/10/#_&quot; class=&quot;lightbox&quot; id=&quot;refuge_corbeau&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/refuge_corbeau.jpg&quot; alt=&quot;Lever de soleil&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/refuge_corbeau.jpg&quot; alt=&quot;Lever de soleil&quot;
width=&quot;2016&quot; height=&quot;1512&quot; /&gt;
&lt;figcaption&gt;Les couleurs par -22°C sont toujours aussi magnifiques.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
@@ -1508,12 +1486,8 @@ Si nous n’explorons pas cette histoire, qui vit activement en nous comme les p
&lt;p&gt;Je décide d’y aller sans équipement vidéo, pour le fun, mon Kalimba sous le bras (j’apprends en voulant faire un lien qu’il s’agit en fait d’un &lt;a href=&quot;https://fr.wikipedia.org/wiki/Mbira&quot;&gt;Mbira&lt;/a&gt; d’origine africaine). Malheureusement, le calme n’était pas de la partie pour autant, mes pensées étant focalisées sur la suite j’ai du mal à rester dans le présent.&lt;/p&gt;
&lt;p&gt;C’était tout de même une bien belle sortie, j’en suis revenu épuisé et heureux. L’avantage de vieillir, c’est que ton corps te rappelle plusieurs jours de suite que tu t’es bien dépensé&amp;#8239;!&lt;/p&gt;
&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/02/09/#ski_de_fond&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/ski_de_fond.jpg&quot; alt=&quot;Piste de ski de fond&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;a href=&quot;https://larlet.fr/david/2021/02/09/#_&quot; class=&quot;lightbox&quot; id=&quot;ski_de_fond&quot;&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/ski_de_fond.jpg&quot; alt=&quot;Piste de ski de fond&quot; loading=&quot;lazy&quot; /&gt;
&lt;/a&gt;
&lt;img src=&quot;https://larlet.fr/static/david/2021/ski_de_fond.jpg&quot; alt=&quot;Piste de ski de fond&quot;
width=&quot;2016&quot; height=&quot;1512&quot; /&gt;
&lt;figcaption&gt;Une piste aussi sinueuse que mes pensées.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>

+ 33
- 5
site.py View File

@@ -82,7 +82,7 @@ class TypographyAndBlockquoteLanguageRenderer(FrenchTypographyRenderer, MarkRend


class ImgsWithSizesRenderer(TypographyAndBlockquoteLanguageRenderer):
"""Renders images as <figure>s and add sizes (useful for lazy loading)."""
"""Renders images as <figure>s and add sizes."""

def paragraph(self, text):
# In case of a figure, we do not want the (non-standard) paragraph.
@@ -97,16 +97,44 @@ class ImgsWithSizesRenderer(TypographyAndBlockquoteLanguageRenderer):
return dedent(
f"""\
<figure>
<img src="{src}"
alt="{alt}"
loading="lazy" width="{width}" height="{height}" />
<img src="{src}" alt="{alt}"
width="{width}" height="{height}" />
<figcaption>{title}</figcaption>
</figure>
"""
)


class H2AnchorsRenderer(ImgsWithSizesRenderer):
class ImgsWithSizesAndLightboxRenderer(ImgsWithSizesRenderer):
"""Renders images as <figure>s and add sizes + lazy attribute.

Also, implement a lightbox markup. See:
https://www.sylvaindurand.org/overlay-image-in-pure-css/
"""

def image(self, src, alt="", title=None):
file_name = Path(src).stem
full_path = STATIC / Path(src[1:])
image = Image.open(full_path)
width, height = image.size
return dedent(
f"""\
<figure>
<a href="#{file_name}">
<img src="{src}" alt="{alt}"
loading="lazy" width="{width}" height="{height}" />
</a>
<a href="#_" class="lightbox" id="{file_name}">
<img src="{src}" alt="{alt}"
loading="lazy" width="{width}" height="{height}" />
</a>
<figcaption>{title}</figcaption>
</figure>
"""
)


class H2AnchorsRenderer(ImgsWithSizesAndLightboxRenderer):
"""Custom renderer for H2 titles with anchors."""

def heading(self, text, level):

Loading…
Cancel
Save