global: génère du HTML non paginé

- Adapte le projet pour pouvoir construire des fichiers HTML
  indépendamment de l'interface pagedjs, par exemple pour pouvoir
  réutiliser le HTML dans d'autres contextes.
- Reprend la feuille de style pour trier entre les règles par défaut,
  les règles spécifiques à l'écran (HTML « normal ») et les règles pour
  l'impression (HTML « pagedjs »).
- Adapte le template et le frontmatter de la source pour ajouter un
  texte alternatif aux images.
- Corrige une image.

Co-Authored-by: iGor milhit <igor@milhit.ch>

Makefile

@@ -16,6 +16,7 @@ all: $(PDF_FILES)
 %.html: $(SOURCES_FOLDER)/%.md
 	pandoc \
 	--css=$(CSS_FILE) --template=$(HTML_TEMPLATE) \
+	--toc --toc-depth=2 \
 	--to=html --standalone \
 	--out=$@ $<
 

source/bookmarklet.md

@@ -5,7 +5,8 @@ date: Printemps 2026
 id: 20250808095505
 tags: ["OpenAthens", "navigateur web", "bookmarklet"]
 logo:
-  - ./static/images/logo-openathens.svg
+  - path: ./static/images/logo-openathens.svg
+    alt: "Logo d'OpenAthens."
 toc-title: Table des matières
 ---
 
@@ -14,7 +15,6 @@ toc-title: Table des matières
 [CC BY-SA 4.0][12] --- [Sources][13]
 :::
 
-
 ## Description
 
 Un *bookmarklet* est un signet (marqueur, favori ou *bookmark*) ajouté au

static/style.css

@@ -1,6 +1,8 @@
+/* --- Règles pour pagedjs --- */
+
 @media print {
 
-    /* ************************** 
+/* ************************** 
  *   Définition des pages   *
  * ************************ */
 
@@ -9,8 +11,8 @@
     margin: 25mm; 
     bleed: 6mm;
     /* Numérotation de page au centre en bas
-         * de la page. Le compteur est définit 
+* de la page. Le compteur est définit 
-         * dans le selecteur body. */
+* dans le selecteur body. */
     @bottom-center {
       content: counter(page);
     }
@@ -25,7 +27,7 @@
   }
   @page:first {
     /* Insertion en haut à droite du logo de la
-         * bibliothèque de l'UNIGE. */
+* bibliothèque de l'UNIGE. */
     @top-right {
       content: "";
       background-image: url("images/bibliotheque-logo.svg");
@@ -34,8 +36,8 @@
       background-size: 25%;
     }
     /* Place le bloc de la licence en bas à gauche
-         * de la première page. Voir le sélecteur
+* de la première page. Voir le sélecteur
-         * #licence plus bas. */
+* #licence plus bas. */
     @bottom-left{
       content: element(licenceBlock);
       font-size: small; 
@@ -44,37 +46,38 @@
       content: none;
     }
     /* Insert la date en bas à droite de la 
-         * première page. Voir le sélecteur .date */
+* première page. Voir le sélecteur .date */
     @bottom-right {
       content: string(date);
       font-size: small;
     }
   }
 
-    /* ************************** 
+/* ************************** 
  *   Définitions globales   *
  * ************************ */
 
   body {
-        font-family: "Noto Sans", "Open Sans",
-                     Arial, Helvetica, sans-serif;
     /* Définit les trois variables de compteur nécessaires */
-        counter-reset: figureNumber toc tableNumber;
+    /* font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif; */
+    /* counter-reset: figureNumber toc tableNumber; */
+    counter-reset: toc;
   }
+
   /* Définit que string(date) contient la date indiquée dans le frontmatter
-     * de la source markdown */
+* de la source markdown */
   .date {
     string-set: date content(text);
     display: none; /* Pour ne pas afficher la date sous le titre. */
   }
   /* Définit que running(licenceBlock) contient le block licence.
-     * Le bloc licence est décrit dans le fichier markdown source, au-dessous
+* Le bloc licence est décrit dans le fichier markdown source, au-dessous
-     * de la section des objectifs. Le CSS permet de le placer correctement */
+* de la section des objectifs. Le CSS permet de le placer correctement */
   #licence {
     position: running(licenceBlock);
   }
 
-    /* ***************** 
+/* ***************** 
  *   Page de titre *
  * *************** */
 
@@ -105,8 +108,8 @@
   }
 
   /* Les 4 règles suivantes mettent en forme la table des matières :*
-     * Suppression des liste à puce, numérotation des chapitres et affichage du
+* Suppression des liste à puce, numérotation des chapitres et affichage du
-     * numéro de page. */
+* numéro de page. */
   #TOC ul {
     list-style: none;
     counter-reset: toc;
@@ -124,67 +127,131 @@
     right: 0;
   }
 
-    /* *************************** 
+/* *************************** 
  *   Structure du document   *
  * ************************* */
 
-    /* Ajouter ou supprimer les ID de titre pour un saut de page.
+/* Ajouter ou supprimer les ID de titre pour un saut de page.
-     * Les IDs #first-section et #bibliography peuvent être ajoutés
+* Les IDs #first-section et #bibliography peuvent être ajoutés
-     * dans la source markdown. */
+* dans la source markdown. */
   #first-section,
   #bibliography,
   .newpage,
   .footnotes {
     break-before: page;
   }
+}
 
-    /* ************* 
+/* --- Règles par défaut --- */
+
+/* ************* 
  *   Contenu   *
  * *********** */
 
-    h2 {
+body {
+  font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif;
+  counter-reset: figureNumber toc tableNumber;
+}
+
+@media screen {
+  body {
+    max-width: 960px;
+    margin: 0 auto;
+  }
+}
+
+/* ***************** 
+*   Page de titre *
+* *************** */
+
+.logo {
+  display: inline-flex;
+  justify-content: center;
+  width: 60%;
+  margin: 2em auto 1em auto;
+}
+.logo img {
+  max-width: 25%;
+  padding: .5em;
+}
+
+#TOC ul {
+  list-style: none;
+  counter-reset: toc;
+  padding-left: 1.5em;
+}
+#TOC li {
+  counter-increment: toc;
+}
+#TOC li::before {
+  content: counter(toc) ". ";
+}
+#TOC a::after {
+  content: target-counter(attr(href url), page);
+  position: absolute;
+  right: 0;
+}
+
+#licence {
+  display: none;
+}
+
+#title-block-header {
+  /* Concerne le bloc titre sur la page de titre */
+  text-align: center;
+  margin: 4em 0;
+}
+
+h2 {
   color: #d80669;
   text-decoration: underline;
-    }
+}
 
-    pre {
+pre {
   background-color: #f2f1f1;
   border: 2px solid #d80669;
   border-radius: .5em;
   padding: .5em 1em;
   /* Évite que les blocs de code ne soient séparés sur 2 pages */
   break-inside: avoid;
-    }
+}
-    pre > code {
+pre > code {
   border-radius: none;
   padding: none;
-    }
+}
-    code {
+code {
   font-family: 'Lilex Nerd Font', 'Courier New', Courier, monospace;
   font-size: 90%;
   line-height: 1.4;
   background-color: #f2f1f1;
   padding: 2px;
   border-radius: 5px;
-    }
+}
 
-    .footnotes::before {
+.footnotes::before {
   content: "Notes";
   color: #d80669;
   font-size: 120%;
   font-weight: bold;
-    }
+}
-    .footnote-ref {
+.footnote-ref {
   text-decoration: none;
   padding-left: 2px;
-    }
+}
-    .footnote-back {
+.footnote-back {
   font-size: small;
   text-decoration: none;
   padding-left: .5em;
-    }
+}
 
+@media screen {
   figure {
+    max-width: max-content;
+    margin: 1em auto;
+  }
+}
+
+figure {
   display: flex;
   flex-direction: column;
   border: 2px solid #d80669;
@@ -192,24 +259,24 @@
   padding: .5em;
   /* Évite que les figures ne soient séparés sur 2 pages */
   break-inside: avoid;
-    }
+}
-    figure img {
+figure img {
   max-width: 85%;
   margin: 0 auto;
   max-height: 250px;
-    }
+}
-    figcaption {
+figcaption {
   text-align: center;
   font-size: 90%;
   counter-increment: figureNumber;
   padding-top: .5em;
-    }
+}
-    figcaption::before {
+figcaption::before {
   content: "Figure " counter(figureNumber) " : ";
-    }
+}
 
-    .exercise,
+.exercise,
-    .warning {
+.warning {
   background-color: #f2f1f1;
   width: 90%;
   margin: 0 auto;
@@ -218,48 +285,48 @@
   padding: .5em;
   display: flex;
   align-items: center;
-    }
+}
 
-    .exercice > p,
+.exercice > p,
-    .warning > p {
+.warning > p {
   margin: 0;
   padding-left: .5em;
-    }
+}
 
-    .exercice::before,
+.exercice::before,
-    .warning::before {
+.warning::before {
   content: "⚠️";
   font-size: larger;
-    }
+}
 
-    blockquote {
+blockquote {
   font-style: italic;
-    }
+}
-    blockquote em {
+blockquote em {
   font-style: normal;
-    }
+}
 
-    div.csl-entry {
+div.csl-entry {
   padding: .5em;
-    }
+}
 
-    table {
+table {
   width: 90%;
   margin: 1em auto;
   border-collapse: collapse;
-    }
+}
 
-    th, td {
+th, td {
   padding: 5px;
   border: 1px solid;
-    }
+}
-    table > caption {
+table > caption {
   counter-increment: tableNumber;
   caption-side: bottom;
   font-size: small;
   padding-top: .5em;
-    }
-    table > caption:before {
-        content: "Table " counter(tableNumber) " : ";
-    }
 }
+table > caption:before {
+  content: "Table " counter(tableNumber) " : ";
+}
+

static/template.html

@@ -65,7 +65,7 @@ $endif$
 $if(logo)$
 <div class="logo">
 $for(logo)$
-<img src="$logo$" />
+<img src="$logo.path$" alt="$logo.alt$" />
 $endfor$
 </div>
 $endif$