davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
							<!DOCTYPE html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Développement(s)
  — David Larlet</title>
  <meta name="description" content="J’ai un peu de mal ces temps-ci à dire que je suis un développeur car j’ai l’impression de passer énormément d’énergie à faire d’autres choses. Lorsqu’on me demande ce que je fais, je dis « des trucs, de-ci de-là… », rien de bien grandiloquent. Une bonne partie de mes journées est passée dans la gestion de Scopyleft (au sens très large), une autre à interagir avec les équipes avec lesquelles je travaille. Et puis parfois, l’après-midi ou le soir, lorsqu’il n’y a ni grève, ni neige, ni journée pédagogique, ni covid, ni flemme, il m’arrive de coder des trucs.">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <article>
    <header>
      <h1>Développement(s)</h1>
    </header>
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/12/06/"
             title="Publication précédente : Équivalent">← Précédent</a> •
        
        <nobr>
          <a href="/david/" title="Aller à l’accueil" rel="up">
            <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"
             rel="search">
            <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/2023/12/12/"
    title="Publication suivante : Abonnement">Suivant →</a>
        
      </p>
    </nav>
    <hr>
    
<p>J’ai un peu de mal ces temps-ci à dire que je suis un développeur car j’ai l’impression de passer énormément d’énergie à faire d’autres choses. Lorsqu’on me demande ce que je fais, je dis «&nbsp;des trucs, de-ci de-là…&nbsp;», rien de bien grandiloquent. Une bonne partie de mes journées est passée dans la gestion de Scopyleft (au sens très large), une autre à interagir avec les équipes avec lesquelles je travaille. Et puis parfois, l’après-midi ou le soir, lorsqu’il n’y a ni grève, ni neige, ni journée pédagogique, ni covid, ni flemme, il m’arrive de coder des&nbsp;trucs.</p>
<h2 id="anthologie-palatine">Anthologie Palatine <a href="#anthologie-palatine" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-anthologie-palatine.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-anthologie-palatine.jpg"
            width="2862" height="2124"
            srcset="/static/david/2023/2023-12-08-anthologie-palatine.jpg 2862w, /static/david/2023/2023-12-08-anthologie-palatine_660x440.jpg 660w, /static/david/2023/2023-12-08-anthologie-palatine_990x660.jpg 990w, /static/david/2023/2023-12-08-anthologie-palatine_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2862 / 2124))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>Projet de longue date avec la <a href="https://www.ecrituresnumeriques.ca/">Chaire du Canada sur les écritures numériques</a> qui consiste à rendre possible le parcours et l’analyse de <a href="https://anthologiagraeca.org/">textes en Grec ancien</a>. C’est un peu en pause depuis le début de l’année mais j’ai pris beaucoup de plaisir à échanger / pairer techniquement avec Sarah (de Scopyleft) sur ces&nbsp;évolutions.</p>
<p>Participer à de la recherche par l’angle du développement est <del>un des moyens d’être bien payé</del> une façon de garder un pied dans un domaine qui me fait mouliner le cerveau pour autre chose que le profit des&nbsp;autres.</p>
<h2 id="pressoir">Pressoir <a href="#pressoir" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-ateliers-sens-public.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-ateliers-sens-public.jpg"
            width="2288" height="2122"
            srcset="/static/david/2023/2023-12-08-ateliers-sens-public.jpg 2288w, /static/david/2023/2023-12-08-ateliers-sens-public_660x440.jpg 660w, /static/david/2023/2023-12-08-ateliers-sens-public_990x660.jpg 990w, /static/david/2023/2023-12-08-ateliers-sens-public_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2288 / 2122))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>Toujours avec la <a href="https://www.ecrituresnumeriques.ca/">Chaire du Canada sur les écritures numériques</a>, parce qu’on apprécie bien de travailler ensemble, on a fait il y a quelques années un outil permettant de générer des livres numériques à partir de sources en <em>markdown</em>.</p>
<p>Cela a donné lieu à <a href="https://ateliers.sens-public.org/">deux</a> <a href="http://parcoursnumeriques-pum.ca/">collections</a> enrichies de contenus numériques (vidéos, etc).</p>
<figure>
    <a href="/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg"
            width="2310" height="2108"
            srcset="/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg 2310w, /static/david/2023/2023-12-08-presses-universitaires-montreal_660x440.jpg 660w, /static/david/2023/2023-12-08-presses-universitaires-montreal_990x660.jpg 990w, /static/david/2023/2023-12-08-presses-universitaires-montreal_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2310 / 2108))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>Depuis l’automne, on assume d’avoir fait un <a href="https://gitlab.huma-num.fr/ecrinum/pressoir-cli/">Générateur de Livres Statiques</a> et on essaye de le rendre plus polyvalent / autonome. C’est un exercice de recherche qui va vers une dé-GAFAM-isation et qui m’intéresse <a href="/david/biologeek/archives/20060119-open-articles-liberez-votre-savoir/">depuis un bout de&nbsp;temps…</a></p>
<h2 id="stylo">Stylo <a href="#stylo" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-stylo-export.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-stylo-export.jpg"
            width="2302" height="1770"
            srcset="/static/david/2023/2023-12-08-stylo-export.jpg 2302w, /static/david/2023/2023-12-08-stylo-export_660x440.jpg 660w, /static/david/2023/2023-12-08-stylo-export_990x660.jpg 990w, /static/david/2023/2023-12-08-stylo-export_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2302 / 1770))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>Puisque j’en suis sur la recherche, j’ai aussi contribué modestement à l’éditeur de texte <a href="https://stylo.huma-num.fr/">Stylo</a> pour la partie export. Cela m’a fait plonger dans l’univers de <a href="https://gitlab.huma-num.fr/ecrinum/stylo/pandoc-api">Pandoc</a> (et Docker), de la bibliographie académique et puis j’ai refait des API et j’aime bien&nbsp;ça.</p>
<h2 id="labrri">LABRRI <a href="#labrri" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-labrri.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-labrri.jpg"
            width="2446" height="2028"
            srcset="/static/david/2023/2023-12-08-labrri.jpg 2446w, /static/david/2023/2023-12-08-labrri_660x440.jpg 660w, /static/david/2023/2023-12-08-labrri_990x660.jpg 990w, /static/david/2023/2023-12-08-labrri_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2446 / 2028))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>Pour finir côté recherche, j’ai accompagné le <a href="https://labrri.net/">LABRRI</a> dans l’analyse et la mise en forme de leurs données autour de situations interculturelles au Québec. C’est en interagissant avec des personnes peu/pas techniques que j’ai l’impression de progresser aujourd’hui. Cela permet de revoir les contraintes, l’autonomie, la consommation des ressources, les outils déjà en place. Cette prise de recul est nécessaire pour un avenir&nbsp;frugal.</p>
<p>Le sujet en lui-même est une façon de m’intégrer au Québec en analysant le prisme des incompréhensions culturelles qu’il peut parfois y&nbsp;avoir.</p>
<h2 id="croix-rouge">Croix-Rouge <a href="#croix-rouge" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-croix-rouge-aime.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-croix-rouge-aime.jpg"
            width="2340" height="2124"
            srcset="/static/david/2023/2023-12-08-croix-rouge-aime.jpg 2340w, /static/david/2023/2023-12-08-croix-rouge-aime_660x440.jpg 660w, /static/david/2023/2023-12-08-croix-rouge-aime_990x660.jpg 990w, /static/david/2023/2023-12-08-croix-rouge-aime_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2340 / 2124))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>On a mis en place un outil pour qu’un lieu d’accueil et d’orientation puisse donner des formations à des mineurs étrangers avec <a href="https://www.maiwann.net/">Maïtané</a> et c’était émotionnellement intense. Beaucoup de <a href="/david/2023/02/18/" title="Quiz">remises en questions techniques</a> personnelles mais surtout de réflexions sur quelles sont les véritables héroïnes de ce&nbsp;monde…</p>
<p>Un des enjeux était de voir ce que l’on arrivait à produire avec un budget très restreint (pour le domaine). Il y aurait de la matière pour un article&nbsp;dédié.</p>
<h2 id="outils-scopyleft">Outils scopyleft <a href="#outils-scopyleft" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-outils-scopyleft.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-outils-scopyleft.jpg"
            width="2430" height="2124"
            srcset="/static/david/2023/2023-12-08-outils-scopyleft.jpg 2430w, /static/david/2023/2023-12-08-outils-scopyleft_660x440.jpg 660w, /static/david/2023/2023-12-08-outils-scopyleft_990x660.jpg 990w, /static/david/2023/2023-12-08-outils-scopyleft_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2430 / 2124))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>J’ai produit et maintenu une quinzaine d’outils pour <a href="http://scopyleft.fr/">Scopyleft</a> au cours de l’année. C’est beaucoup et je m’en suis rendu compte au moment où j’ai dû faire une page pour en faire la liste car on avait du mal à nous y retrouver&#8239;! Plus que les outils en eux-mêmes, c’est la structuration et l’aide qu’ils ont pu apporter à des moments critiques qui me&nbsp;réjouit.</p>
<p>J’ai aussi développé pas mal de bouts de code relatifs à l’automatisation / vérification des sous-traitant·es qui sont de plus en plus nombreuses avec le <a href="https://www.data.gouv.fr/fr/datasets/realisation-de-services-publics-numeriques-en-mode-produit-coordonnes-par-le-programme-interministeriel-beta-gouv/">marché public</a> que l’on a remporté il y a quelques années. Extraire et vérifier des données issues de PDF provenant de l’administration ou d’outils de comptabilité n’est pas une mince&nbsp;affaire…</p>
<h2 id="umap">uMap <a href="#umap" title="Ancre vers cette partie">#</a></h2><figure>
    <a href="/static/david/2023/2023-12-08-umap-anct.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-umap-anct.jpg"
            width="2472" height="2124"
            srcset="/static/david/2023/2023-12-08-umap-anct.jpg 2472w, /static/david/2023/2023-12-08-umap-anct_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-anct_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-anct_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2472 / 2124))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<p>Au printemps dernier, Yohan m’a motivé pour que l’on transforme un logiciel open-source en commun tout en se faisant financer par l’État. Je dois avouer que j’étais un peu dubitatif mais j’ai tenté le coup. Quelques mois après, on a une <a href="https://umap.incubateur.anct.gouv.fr/">instance souveraine</a> en production, des centaines d’<em>issues</em> traitées, un <a href="https://umap-project.org/">site dédié</a> avec une possibilité de financement participatif, des mises à jour régulières, des réflexions de fond avec la communauté, un financement par <a href="https://nlnet.nl/">NLnet</a>, etc.</p>
<p>Pari tellement réussi qu’on a décidé de me passer en mécénat de compétences avec Scopyleft pour les derniers mois de l’année. Il faudra que je fasse un billet&nbsp;dédié.</p>
<figure>
    <a href="/static/david/2023/2023-12-08-umap-project.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-12-08-umap-project.jpg"
            width="2462" height="2108"
            srcset="/static/david/2023/2023-12-08-umap-project.jpg 2462w, /static/david/2023/2023-12-08-umap-project_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-project_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-project_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2462 / 2108))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du produit">
    </a>
    <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
</figure>
<hr />
<p>La plupart de ces sites sont statiques ou <a href="/david/2023/09/13/" title="Documentation">semynamiques</a>, sans faire appel à NPM.&nbsp;Vous n’avez pas idée d’à quel point cela me tranquillise et augmente mon efficacité en terme de maintenance sur le long&nbsp;terme.</p>

    
      <nav>
        <p>
          
            <a href="/david/2023/complexite/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#complexité</a>
          
            <a href="/david/2023/recherche/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#recherche</a>
          
            <a href="/david/2023/web/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
            <svg class="icon icon-tags">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
            </svg>
          tous ?</a>
        </p>
      </nav>
    
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/12/06/"
             title="Publication précédente : Équivalent">← Précédent</a> •
        
        <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
        
          • <a rel="next"
    href="/david/2023/12/12/"
    title="Publication suivante : Abonnement">Suivant →</a>
        
      </p>
    </nav>
  </article>

    <hr>
    <footer>
      <p>
        <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-2022-03.svg#icon-brightness-contrast"></use>
              </svg>
              Thème
            </legend>
            <label>
              <input type="radio" value="auto" name="chosen-color-scheme" checked>
              Auto
            </label>
            <label>
              <input type="radio" value="dark" name="chosen-color-scheme">
              Foncé
            </label>
            <label>
              <input type="radio" value="light" name="chosen-color-scheme">
              Clair
            </label>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
          form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
      }

      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
      window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                continue
              }
            }
            mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
          }

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            styleSheet.insertRule(mediaRule.cssText)
            hasDarkRules = true
          }
        }
        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
        }
      })
    </script>
    
  </body>
</html>