Implementing a search page for the 3 last years

david/2022/01/19/index.html

@@ -59,11 +59,29 @@
 </header>
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2021/" title="Publication précédente : Publications 2021">← Précédent</a> •
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
-     • <a rel="next" href="/david/2022/02/17/" title="Publication suivante : Envie">Suivant →</a>
+    <a rel="prev" href="/david/2021/" title="Publication précédente : Publications 2021">← Précédent</a> •
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
+     • <a rel="next" href="/david/2022/02/17/" title="Publication suivante : Envie">Suivant →</a>
   </p>
 </nav>
 <hr>
@@ -123,9 +141,9 @@
 
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2021/" title="Publication précédente : Publications 2021">← Précédent</a> •
-    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
-     • <a rel="next" href="/david/2022/02/17/" title="Publication suivante : Envie">Suivant →</a>
+    <a rel="prev" href="/david/2021/" title="Publication précédente : Publications 2021">← Précédent</a> •
+    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
+     • <a rel="next" href="/david/2022/02/17/" title="Publication suivante : Envie">Suivant →</a>
   </p>
 </nav>
 </article>
@@ -135,27 +153,60 @@
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -224,5 +275,6 @@
         }
     })
 </script>
+
 </body>
 </html>

david/2022/02/17/index.html

@@ -59,11 +59,29 @@
 </header>
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2022/01/19/" title="Publication précédente : Négatif">← Précédent</a> •
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
-     • <a rel="next" href="/david/2022/03/04/" title="Publication suivante : Régime">Suivant →</a>
+    <a rel="prev" href="/david/2022/01/19/" title="Publication précédente : Négatif">← Précédent</a> •
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
+     • <a rel="next" href="/david/2022/03/04/" title="Publication suivante : Régime">Suivant →</a>
   </p>
 </nav>
 <hr>
@@ -204,9 +222,9 @@
 
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2022/01/19/" title="Publication précédente : Négatif">← Précédent</a> •
-    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
-     • <a rel="next" href="/david/2022/03/04/" title="Publication suivante : Régime">Suivant →</a>
+    <a rel="prev" href="/david/2022/01/19/" title="Publication précédente : Négatif">← Précédent</a> •
+    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
+     • <a rel="next" href="/david/2022/03/04/" title="Publication suivante : Régime">Suivant →</a>
   </p>
 </nav>
 </article>
@@ -216,27 +234,60 @@
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -305,5 +356,6 @@
         }
     })
 </script>
+
 </body>
 </html>

david/2022/03/04/index.html

@@ -59,11 +59,29 @@
 </header>
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2022/02/17/" title="Publication précédente : Envie">← Précédent</a> •
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
-     • <a rel="next" href="/david/2022/03/18/" title="Publication suivante : Temps">Suivant →</a>
+    <a rel="prev" href="/david/2022/02/17/" title="Publication précédente : Envie">← Précédent</a> •
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
+     • <a rel="next" href="/david/2022/03/18/" title="Publication suivante : Temps">Suivant →</a>
   </p>
 </nav>
 <hr>
@@ -225,9 +243,9 @@ We feared and hated what is&nbsp;here.</p>
 
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2022/02/17/" title="Publication précédente : Envie">← Précédent</a> •
-    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
-     • <a rel="next" href="/david/2022/03/18/" title="Publication suivante : Temps">Suivant →</a>
+    <a rel="prev" href="/david/2022/02/17/" title="Publication précédente : Envie">← Précédent</a> •
+    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
+     • <a rel="next" href="/david/2022/03/18/" title="Publication suivante : Temps">Suivant →</a>
   </p>
 </nav>
 </article>
@@ -237,27 +255,60 @@ We feared and hated what is&nbsp;here.</p>
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -326,5 +377,6 @@ We feared and hated what is&nbsp;here.</p>
         }
     })
 </script>
+
 </body>
 </html>

david/2022/03/18/index.html

@@ -59,10 +59,28 @@
 </header>
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2022/03/04/" title="Publication précédente : Régime">← Précédent</a> •
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
+    <a rel="prev" href="/david/2022/03/04/" title="Publication précédente : Régime">← Précédent</a> •
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
     
   </p>
 </nav>
@@ -133,8 +151,8 @@
 
 <nav>
   <p class="center">
-    <a rel="prev" href="/david/2022/03/04/" title="Publication précédente : Régime">← Précédent</a> •
-    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
+    <a rel="prev" href="/david/2022/03/04/" title="Publication précédente : Régime">← Précédent</a> •
+    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
     
   </p>
 </nav>
@@ -145,27 +163,60 @@
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -234,5 +285,6 @@
         }
     })
 </script>
+
 </body>
 </html>

david/2022/index.html

@@ -58,9 +58,27 @@
 </header>
 <nav>
   <p class="center">
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
   </p>
 </nav>
 <hr>
@@ -93,27 +111,60 @@
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -182,5 +233,6 @@
         }
     })
 </script>
+
 </body>
 </html>

david/index.html

@@ -62,13 +62,14 @@
   Il se veut modeste, accueillant et pérenne.
   Il fixe mes pensées et parfois engage des échanges.
   J’essaye de tenir et lier des propos bienveillants.
-  Je vous souhaite une jolie promenade.
+  Je vous souhaite une jolie promenade.
 </p>
 
 <p lang="en">
   For an English profile, check out
   <a href="http://larlet.com" data-instant>this page 🇨🇦</a>.
 </p>
+
 <h2>Publications sporadiques 2022</h2>
 
 <p>Liste des publications récentes en ordre chronologique :</p>
@@ -85,7 +86,7 @@
 
 <h2 id="tags">
   Publications <a href="/david/2021/" title="Voir la liste de toutes les publications 2021">2021</a> par tags <svg class="icon icon-tags">
-    <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
+    <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
   </svg>
 </h2>
 <nav>
@@ -189,26 +190,37 @@
   </p>
 </nav>
 
+<h2>Recherche</h2>
+
+<p>Les contenus de ces 3 dernières années sont indexés.</p>
+
+<form action="/david/recherche/" method="get" id="form-search">
+  <label for="input-search">Termes de votre recherche :</label>
+  <input type="text" name="s" id="input-search" required>
+  <button>Chercher</button>
+</form>
+
+
 <h2>Publications archéologiques</h2>
 
 <p>
   Vous pouvez consulter les différents
   <a href="/david/blog/">billets de blog</a> qui ont été rédigés de 2004 à 2019
   ou les <a href="/david/stream/">entrées de journaux</a> relativement
-  régulières entre 2009 et 2019.
+  régulières entre 2009 et 2019.
 </p>
 
 <p>
   <em>
     Notez qu’avec un tel historique, certaines informations sont obsolètes et/ou
-    plus cautionnées.
+    plus cautionnées.
   </em>
 </p>
 
 <h2>Me contacter</h2>
 
 <p>
-  Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même. Si vous souhaitez correspondre de manière chiffrée, voici <a href="/static/david/david-larlet-pgp-public-key-1359EA98.asc" title="Clé publique de chiffrement">ma clé publique</a>.
+  Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même. Si vous souhaitez correspondre de manière chiffrée, voici <a href="/static/david/david-larlet-pgp-public-key-1359EA98.asc" title="Clé publique de chiffrement">ma clé publique</a>.
 </p>
 </article>
 
@@ -217,27 +229,60 @@
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -306,5 +351,6 @@
         }
     })
 </script>
+
 </body>
 </html>

david/templates/archives_2020.html

@@ -7,9 +7,27 @@
 </header>
 <nav>
   <p class="center">
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
   </p>
 </nav>
 <hr>
@@ -26,7 +44,7 @@
   {% if tags %}
     <h3 id="tags">
       Par tags <svg class="icon icon-tags">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
+        <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
       </svg>
     </h3>
     <p>

david/templates/article_2020.html

@@ -9,11 +9,29 @@
 </header>
 <nav>
   <p class="center">
-    {% if prev and not prev.is_draft %}<a rel="prev" href="{{ prev.url }}" title="Publication précédente : {{ prev.title }}">← Précédent</a> •{% endif %}
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a>
-    {% if next and not next.is_draft %} • <a rel="next" href="{{ next.url }}" title="Publication suivante : {{ next.title }}">Suivant →</a>{% endif %}
+    {% if prev and not prev.is_draft %}<a rel="prev" href="{{ prev.url }}" title="Publication précédente : {{ prev.title }}">← Précédent</a> •{% endif %}
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/recherche/" title="Aller à la page de recherche"
+        ><svg class="icon icon-search">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
+          ></use>
+        </svg>
+        Recherche</a
+      >
+    </nobr>
+    {% if next and not next.is_draft %} • <a rel="next" href="{{ next.url }}" title="Publication suivante : {{ next.title }}">Suivant →</a>{% endif %}
   </p>
 </nav>
 <hr>
@@ -29,16 +47,18 @@
       <a href="/david/#tags"
         title="Liste de toutes les étiquettes existantes"
         ><svg class="icon icon-tags">
-          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
-        </svg> tous ?</a>
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
+        </svg>
+        tous ?</a
+      >
     </p>
   </nav>
 {% endif%}
 <nav>
   <p class="center">
-    {% if prev and not prev.is_draft %}<a rel="prev" href="{{ prev.url }}" title="Publication précédente : {{ prev.title }}">← Précédent</a> •{% endif %}
-    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
-    {% if next and not next.is_draft %} • <a rel="next" href="{{ next.url }}" title="Publication suivante : {{ next.title }}">Suivant →</a>{% endif %}
+    {% if prev and not prev.is_draft %}<a rel="prev" href="{{ prev.url }}" title="Publication précédente : {{ prev.title }}">← Précédent</a> •{% endif %}
+    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
+    {% if next and not next.is_draft %} • <a rel="next" href="{{ next.url }}" title="Publication suivante : {{ next.title }}">Suivant →</a>{% endif %}
   </p>
 </nav>
 </article>

david/templates/base_2020.html

@@ -58,27 +58,60 @@
 
 <footer>
   <p>
-    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
-      </svg> Accueil</a> •
-    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
-      </svg> Suivre</a> •
-    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
-      </svg> Pro</a> •
-    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
-      </svg> Email</a> •
-    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
-        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
-      </svg> Légal</abbr>
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="/david/log/" title="Accès au flux RSS"
+        ><svg class="icon icon-rss2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+        </svg>
+        Suivre</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="http://larlet.com" title="Go to my English profile" data-instant
+        ><svg class="icon icon-user-tie">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+        </svg>
+        Pro</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
+        ><svg class="icon icon-mail">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+        </svg>
+        Email</a
+      >
+    </nobr>
+    •
+    <nobr>
+      <abbr
+        class="nowrap"
+        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
+        ><svg class="icon icon-hammer2">
+          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+        </svg>
+        Légal</abbr
+      >
+    </nobr>
   </p>
   <template id="theme-selector">
       <form>
           <fieldset>
               <legend><svg class="icon icon-brightness-contrast">
-                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
               </svg> Thème</legend>
               <label>
                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
@@ -147,5 +180,6 @@
         }
     })
 </script>
+{% block extra_body %}{% endblock %}
 </body>
 </html>

david/templates/profil.html

@@ -12,13 +12,14 @@
   Il se veut modeste, accueillant et pérenne.
   Il fixe mes pensées et parfois engage des échanges.
   J’essaye de tenir et lier des propos bienveillants.
-  Je vous souhaite une jolie promenade.
+  Je vous souhaite une jolie promenade.
 </p>
 
 <p lang="en">
   For an English profile, check out
   <a href="http://larlet.com" data-instant>this page 🇨🇦</a>.
 </p>
+
 <h2>Publications sporadiques 2022</h2>
 
 <p>Liste des publications récentes en ordre chronologique :</p>
@@ -34,7 +35,7 @@
 
 <h2 id="tags">
   Publications <a href="/david/2021/" title="Voir la liste de toutes les publications 2021">2021</a> par tags <svg class="icon icon-tags">
-    <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
+    <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
   </svg>
 </h2>
 <nav>
@@ -138,26 +139,37 @@
   </p>
 </nav>
 
+<h2>Recherche</h2>
+
+<p>Les contenus de ces 3 dernières années sont indexés.</p>
+
+<form action="/david/recherche/" method="get" id="form-search">
+  <label for="input-search">Termes de votre recherche :</label>
+  <input type="text" name="s" id="input-search" required>
+  <button>Chercher</button>
+</form>
+
+
 <h2>Publications archéologiques</h2>
 
 <p>
   Vous pouvez consulter les différents
   <a href="/david/blog/">billets de blog</a> qui ont été rédigés de 2004 à 2019
   ou les <a href="/david/stream/">entrées de journaux</a> relativement
-  régulières entre 2009 et 2019.
+  régulières entre 2009 et 2019.
 </p>
 
 <p>
   <em>
     Notez qu’avec un tel historique, certaines informations sont obsolètes et/ou
-    plus cautionnées.
+    plus cautionnées.
   </em>
 </p>
 
 <h2>Me contacter</h2>
 
 <p>
-  Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même. Si vous souhaitez correspondre de manière chiffrée, voici <a href="/static/david/david-larlet-pgp-public-key-1359EA98.asc" title="Clé publique de chiffrement">ma clé publique</a>.
+  Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même. Si vous souhaitez correspondre de manière chiffrée, voici <a href="/static/david/david-larlet-pgp-public-key-1359EA98.asc" title="Clé publique de chiffrement">ma clé publique</a>.
 </p>
 </article>
 {% endblock content %}

david/templates/recherche.html

@@ -0,0 +1,290 @@
+{% extends "base_2020.html" %}
+{% block lang %}fr{% endblock %}
+{% block title %}Recherche{% endblock %}
+{% block description %}Voici l’espace personnel de David Larlet sur le Web.{% endblock %}
+{% block content %}
+<article>
+<header>
+<h1>Recherche</h1>
+</header>
+<nav>
+  <p class="center">
+    <nobr>
+      <a href="/david/" title="Aller à l’accueil"
+        ><svg class="icon icon-home">
+          <use
+            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
+          ></use>
+        </svg>
+        Accueil</a
+      >
+    </nobr>
+  </p>
+</nav>
+<hr>
+<form action="https://duckduckgo.com/" method="get" id="form-search">
+  <label for="input-search">Termes de votre recherche :</label>
+  <input type="text" name="q" id="input-search" required>
+  <input type="hidden" name="sites" value="larlet.fr">
+  <button>Chercher</button>
+  <button type="reset">Annuler</button>
+</form>
+
+<div id="search-status" role="status"></div>
+<div id="search-results"></div>
+
+<hr>
+
+<p>
+  Vous pouvez aussi consulter les archives chronologiques de
+  <a href="/david/2022/">2022</a>,
+  <a href="/david/2021/">2021</a>,
+  <a href="/david/2020/">2020</a>,
+  <a href="/david/blog/">etc</a>.
+</p>
+{% endblock content %}
+
+{% block extra_body %}
+<script id="search-index" type="application/json">
+  {{ search_index }}
+</script>
+<script type="text/javascript">
+  /* See:
+   * https://gomakethings.com/how-to-create-a-search-page-for-a-static-website-with-vanilla-js/
+   * https://gomakethings.com/how-to-update-the-url-of-a-page-without-causing-a-reload-using-vanilla-javascript/
+   */
+  (function () {
+    // Retrieving the index from JSON.
+    // See https://v8.dev/blog/cost-of-javascript-2019#json
+    let searchIndex = JSON.parse(document.getElementById('search-index').textContent)
+
+    // French stopwords from https://github.com/stopwords-iso/stopwords-fr
+    let stopWords = [
+      "a", "abord", "absolument", "afin", "ah", "ai", "aie", "aient", "aies",
+      "ailleurs", "ainsi", "ait", "allaient", "allo", "allons", "allô",
+      "alors", "anterieur", "anterieure", "anterieures", "apres", "après",
+      "as", "assez", "attendu", "au", "aucun", "aucune", "aucuns", "aujourd",
+      "aujourd'hui", "aupres", "auquel", "aura", "aurai", "auraient", "aurais",
+      "aurait", "auras", "aurez", "auriez", "aurions", "aurons", "auront",
+      "aussi", "autant", "autre", "autrefois", "autrement", "autres", "autrui",
+      "aux", "auxquelles", "auxquels", "avaient", "avais", "avait", "avant",
+      "avec", "avez", "aviez", "avions", "avoir", "avons", "ayant", "ayez",
+      "ayons", "b", "bah", "bas", "basee", "bat", "beau", "beaucoup", "bien",
+      "bigre", "bon", "boum", "bravo", "brrr", "c", "car", "ce", "ceci",
+      "cela", "celle", "celle-ci", "celle-là", "celles", "celles-ci",
+      "celles-là", "celui", "celui-ci", "celui-là", "celà", "cent",
+      "cependant", "certain", "certaine", "certaines", "certains", "certes",
+      "ces", "cet", "cette", "ceux", "ceux-ci", "ceux-là", "chacun", "chacune",
+      "chaque", "cher", "chers", "chez", "chiche", "chut", "chère", "chères",
+      "ci", "cinq", "cinquantaine", "cinquante", "cinquantième", "cinquième",
+      "clac", "clic", "combien", "comme", "comment", "comparable",
+      "comparables", "compris", "concernant", "contre", "couic", "crac", "d",
+      "da", "dans", "de", "debout", "dedans", "dehors", "deja", "delà",
+      "depuis", "dernier", "derniere", "derriere", "derrière", "des",
+      "desormais", "desquelles", "desquels", "dessous", "dessus", "deux",
+      "deuxième", "deuxièmement", "devant", "devers", "devra", "devrait",
+      "different", "differentes", "differents", "différent", "différente",
+      "différentes", "différents", "dire", "directe", "directement", "dit",
+      "dite", "dits", "divers", "diverse", "diverses", "dix", "dix-huit",
+      "dix-neuf", "dix-sept", "dixième", "doit", "doivent", "donc", "dont",
+      "dos", "douze", "douzième", "dring", "droite", "du", "duquel", "durant",
+      "dès", "début", "désormais", "e", "effet", "egale", "egalement",
+      "egales", "eh", "elle", "elle-même", "elles", "elles-mêmes", "en",
+      "encore", "enfin", "entre", "envers", "environ", "es", "essai", "est",
+      "et", "etant", "etc", "etre", "eu", "eue", "eues", "euh", "eurent",
+      "eus", "eusse", "eussent", "eusses", "eussiez", "eussions", "eut", "eux",
+      "eux-mêmes", "exactement", "excepté", "extenso", "exterieur", "eûmes",
+      "eût", "eûtes", "f", "fais", "faisaient", "faisant", "fait", "faites",
+      "façon", "feront", "fi", "flac", "floc", "fois", "font", "force",
+      "furent", "fus", "fusse", "fussent", "fusses", "fussiez", "fussions",
+      "fut", "fûmes", "fût", "fûtes", "g", "gens", "h", "ha", "haut", "hein",
+      "hem", "hep", "hi", "ho", "holà", "hop", "hormis", "hors", "hou", "houp",
+      "hue", "hui", "huit", "huitième", "hum", "hurrah", "hé", "hélas", "i",
+      "ici", "il", "ils", "importe", "j", "je", "jusqu", "jusque", "juste",
+      "k", "l", "la", "laisser", "laquelle", "las", "le", "lequel", "les",
+      "lesquelles", "lesquels", "leur", "leurs", "longtemps", "lors",
+      "lorsque", "lui", "lui-meme", "lui-même", "là", "lès", "m", "ma",
+      "maint", "maintenant", "mais", "malgre", "malgré", "maximale", "me",
+      "meme", "memes", "merci", "mes", "mien", "mienne", "miennes", "miens",
+      "mille", "mince", "mine", "minimale", "moi", "moi-meme", "moi-même",
+      "moindres", "moins", "mon", "mot", "moyennant", "multiple", "multiples",
+      "même", "mêmes", "n", "na", "naturel", "naturelle", "naturelles", "ne",
+      "neanmoins", "necessaire", "necessairement", "neuf", "neuvième", "ni",
+      "nombreuses", "nombreux", "nommés", "non", "nos", "notamment", "notre",
+      "nous", "nous-mêmes", "nouveau", "nouveaux", "nul", "néanmoins", "nôtre",
+      "nôtres", "o", "oh", "ohé", "ollé", "olé", "on", "ont", "onze",
+      "onzième", "ore", "ou", "ouf", "ouias", "oust", "ouste", "outre",
+      "ouvert", "ouverte", "ouverts", "o|", "où", "p", "paf", "pan", "par",
+      "parce", "parfois", "parle", "parlent", "parler", "parmi", "parole",
+      "parseme", "partant", "particulier", "particulière", "particulièrement",
+      "pas", "passé", "pendant", "pense", "permet", "personne", "personnes",
+      "peu", "peut", "peuvent", "peux", "pff", "pfft", "pfut", "pif", "pire",
+      "pièce", "plein", "plouf", "plupart", "plus", "plusieurs", "plutôt",
+      "possessif", "possessifs", "possible", "possibles", "pouah", "pour",
+      "pourquoi", "pourrais", "pourrait", "pouvait", "prealable",
+      "precisement", "premier", "première", "premièrement", "pres", "probable",
+      "probante", "procedant", "proche", "près", "psitt", "pu", "puis",
+      "puisque", "pur", "pure", "q", "qu", "quand", "quant", "quant-à-soi",
+      "quanta", "quarante", "quatorze", "quatre", "quatre-vingt", "quatrième",
+      "quatrièmement", "que", "quel", "quelconque", "quelle", "quelles",
+      "quelqu'un", "quelque", "quelques", "quels", "qui", "quiconque",
+      "quinze", "quoi", "quoique", "r", "rare", "rarement", "rares",
+      "relative", "relativement", "remarquable", "rend", "rendre", "restant",
+      "reste", "restent", "restrictif", "retour", "revoici", "revoilà", "rien",
+      "s", "sa", "sacrebleu", "sait", "sans", "sapristi", "sauf", "se", "sein",
+      "seize", "selon", "semblable", "semblaient", "semble", "semblent",
+      "sent", "sept", "septième", "sera", "serai", "seraient", "serais",
+      "serait", "seras", "serez", "seriez", "serions", "serons", "seront",
+      "ses", "seul", "seule", "seulement", "si", "sien", "sienne", "siennes",
+      "siens", "sinon", "six", "sixième", "soi", "soi-même", "soient", "sois",
+      "soit", "soixante", "sommes", "son", "sont", "sous", "souvent", "soyez",
+      "soyons", "specifique", "specifiques", "speculatif", "stop",
+      "strictement", "subtiles", "suffisant", "suffisante", "suffit", "suis",
+      "suit", "suivant", "suivante", "suivantes", "suivants", "suivre",
+      "sujet", "superpose", "sur", "surtout", "t", "ta", "tac", "tandis",
+      "tant", "tardive", "te", "tel", "telle", "tellement", "telles", "tels",
+      "tenant", "tend", "tenir", "tente", "tes", "tic", "tien", "tienne",
+      "tiennes", "tiens", "toc", "toi", "toi-même", "ton", "touchant",
+      "toujours", "tous", "tout", "toute", "toutefois", "toutes", "treize",
+      "trente", "tres", "trois", "troisième", "troisièmement", "trop", "très",
+      "tsoin", "tsouin", "tu", "té", "u", "un", "une", "unes", "uniformement",
+      "unique", "uniques", "uns", "v", "va", "vais", "valeur", "vas", "vers",
+      "via", "vif", "vifs", "vingt", "vivat", "vive", "vives", "vlan", "voici",
+      "voie", "voient", "voilà", "voire", "vont", "vos", "votre", "vous",
+      "vous-mêmes", "vu", "vé", "vôtre", "vôtres", "w", "x", "y", "z", "zut",
+      "à", "â", "ça", "ès", "étaient", "étais", "était", "étant", "état",
+      "étiez", "étions", "été", "étée", "étées", "étés", "êtes", "être", "ô"
+    ]
+
+    // Get the DOM elements
+    let form = document.querySelector('#form-search')
+    let input = document.querySelector('#input-search')
+    let resultList = document.querySelector('#search-results')
+    let searchStatus = document.querySelector('#search-status')
+
+    // Make sure required content exists
+    if (!form || !input || !resultList || !searchStatus || !searchIndex) return
+
+    // Create a submit handler
+    form.addEventListener('submit', submitHandler)
+
+    // Create a reset handler
+    form.addEventListener('reset', function() {
+      search('')
+      searchStatus.innerHTML = ''
+    })
+
+    // Check for query strings onload
+    onload()
+
+    /**
+     * If there's a query string search term, search it on page load
+     */
+    function onload () {
+      let query = new URLSearchParams(window.location.search).get('s')
+      if (!query) return
+      input.value = query
+      search(query)
+    }
+
+    /**
+     * Handle submit events
+     */
+    function submitHandler (event) {
+      event.preventDefault()
+      search(input.value)
+    }
+
+    /**
+     * Search for matches
+     * @param  {String} query The term to search for
+     */
+    function search (query) {
+
+      // Create a regex for each query
+      let regMap = query.toLowerCase().split(' ').filter(function (word) {
+        return word.length && !stopWords.includes(word)
+      }).map(function (word) {
+        return new RegExp(word, 'i')
+      })
+
+      // Get and sort the results
+      let results = searchIndex.reduce(function (results, article, index) {
+
+        // Setup priority count
+        let priority = 0
+
+        // Assign priority
+        for (let reg of regMap) {
+          if (reg.test(article.title)) { priority += 100 }
+          let occurences = article.content.match(reg)
+          if (occurences) { priority += occurences.length }
+        }
+
+        // If any matches, push to results
+        if (priority > 0) {
+          results.push({
+            priority: priority,
+            article: article
+          })
+        }
+
+        return results
+
+      }, []).sort(function (article1, article2) {
+        return article2.priority - article1.priority
+      })
+
+      // Display the results
+      showResults(results)
+
+      // Update the URL
+      updateURL(query)
+
+    }
+
+    /**
+     * Show the search results in the UI
+     * @param  {Array}  results The results to display
+     */
+    function showResults (results) {
+      if (results.length) {
+        const plural = results.length > 1 ? 's' : ''
+        searchStatus.innerHTML = `<p>${results.length} publication${plural} trouvée${plural} 🙌</p>`
+        resultList.innerHTML = results.map(function (result) {
+          return `
+            <h2>
+              <a href="${result.article.url}">${result.article.title}</a>
+              (${result.article.date})
+            </h2>
+            <p>${result.article.content.slice(0, 280)}…</p>
+          `
+        }).join('')
+      } else {
+        searchStatus.innerHTML = '<p>Aucune publication n’a été trouvée 😢<br>Seuls les écrits des 3 dernières années sont indexés.</p>'
+        resultList.innerHTML = ''
+      }
+    }
+
+    /**
+     * Update the URL with a query string for the search string
+     * @param  {String} query The search query
+     */
+    function updateURL (query) {
+      // Create the properties
+      let state = history.state
+      let title = document.title
+      let url = window.location.origin + window.location.pathname
+      if (query) {
+        url += '?s=' + encodeURI(query)
+      }
+
+      // Update the URL
+      history.pushState(state, title, url)
+
+    }
+
+  })()
+
+</script>
+{% endblock %}

site.py

@@ -1,5 +1,6 @@
 #!/usr/bin/env python3
 import fnmatch
+import json
 import locale
 import os
 from collections import defaultdict
@@ -15,6 +16,7 @@ from time import perf_counter
 import mistune
 from jinja2 import Environment as Env
 from jinja2 import FileSystemLoader
+from jinja2.filters import do_striptags
 from minicli import cli, run, wrap
 from mistune.directives import DirectiveInclude
 from PIL import Image
@@ -252,7 +254,13 @@ class Page:
     lang: str = "fr"
 
     def __post_init__(self):
-        date_str, _ = self.file_path.split(" - ", 1)
+        try:
+            date_str, _ = self.file_path.split(" - ", 1)
+        except ValueError:
+            # Fallback for 2020 contents (search index)
+            suffix = len(".md")
+            prefix = len("YYYY/MM-DD") + suffix
+            date_str = "2020-" + self.file_path[-prefix:-suffix]
         self.url = f"/david/{date_str.replace('-', '/')}/"
         self.date = datetime.strptime(date_str, "%Y-%m-%d").date()
         self.full_url = f"{DOMAIN}{self.url}"
@@ -274,6 +282,15 @@ class Page:
         )
         # Extract first paragraph.
         self.extract = self.content.split("</p>", 1)[0] + "</p>"
+        # Create the index for the search.
+        self.search_data = {
+            "title": self.title,
+            "url": self.url,
+            "date": date_str,
+            "content": do_striptags(self.content)
+            .replace("\u00a0(cache)", " ")
+            .replace("'", " "),
+        }
 
     def __eq__(self, other):
         return self.url == other.url
@@ -301,14 +318,18 @@ class Page:
                 content, tags_links = content.split("<nav><p>", 1)
                 nav_closing_size = len("</p></nav>\n")
                 tags_links = tags_links[:-nav_closing_size]
-                tags = sorted(
-                    {
-                        tag.strip().split("#", 1)[1]
-                        for tag in tags_links.split("</a>")
-                        if tag.strip()
-                    },
-                    key=lambda tag: slugify(tag),
-                )
+                try:
+                    tags = sorted(
+                        {
+                            tag.strip().split("#", 1)[1]
+                            for tag in tags_links.split("</a>")
+                            if tag.strip()
+                        },
+                        key=lambda tag: slugify(tag),
+                    )
+                except IndexError:
+                    # It happens for old contents, parsed for the search index.
+                    pass
             page = Page(title, content, tags, file_name)
             pages_by_url[page.url] = page
             if not page.is_draft:
@@ -386,6 +407,25 @@ def home():
     open(DAVID / "index.html", "w").write(content)
 
 
+@cli
+def search():
+    """Build the static search page with custom index."""
+    template = environment.get_template("recherche.html")
+    page_list_2022 = Page.all(
+        source=SOURCES_PATH, only_published=True, with_h2_anchors=False
+    )
+    page_list_2021 = Page.all(
+        source=DAVID / "2021" / "sources", only_published=True, with_h2_anchors=False
+    )
+    page_list_2020 = Page.all(
+        source=DAVID / "2020", only_published=True, with_h2_anchors=False
+    )
+    page_list = page_list_2022 + page_list_2021 + page_list_2020
+    search_index = json.dumps([page.search_data for page in page_list], indent=2)
+    content = template.render(search_index=search_index)
+    open(DAVID / "recherche" / "index.html", "w").write(content)
+
+
 @cli
 def feed():
     """Generate a feed from last published items."""