export: génère le polycopié en PDF avec `paged.js`

- Ajoute un modèle HTML contenant les éléments nécessaires pour utiliser
  `paged.js` dans un navigateur web.
- Ajoute une feuille de style pour définir les styles utilisés pour le
  PDF, de manière à s'approcher de la charte de l'UNIGE.
- Ajoute également la feuille de style pour l'interface de `pagedjs`,
  afin de pouvoir avoir un rendu paginé dans le navigateur web.
- Documente l'usage de `paged.js`.
- Crée un dossier `sources` avec des sous-répertoires pour le polycopié
  et la présentation. S'y trouvent les sources et les fichiers
  nécessaires pour les différentes conversions de fichiers.
- Renomme le dossier `media` en `medias`, ce qui a plus de sens, et
  place le dossier dans le répertoire des sources.

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

README.md

@@ -41,17 +41,50 @@ Pour pouvoir utiliser ce projet, il est nécessaire :
 
 ## Convertir le support de cours en PDF
 
+### Avec LaTeX
+
 Pour convertir le support de cours (`polycopié.md`) au format PDF, il faut
 utiliser la commande suivante :
 
 ```bash
-pandoc --citeproc -t pdf --pdf-engine=tectonic -o polycopié.pdf polycopié.md
+pandoc --citeproc --to=pdf --pdf-engine=tectonic \
+       --output=public/polycopié.pdf \
+       source/polycopié/polycopié.md
 ```
 
 - `--citeproc` traite les citations et génère la bibliographie.
+- `--to=pdf` détermine le format de sortie, ici PDF.
 - `--pdf-engine` définit le moteur de compilation a utiliser pour produire le
   PDF, ici `tectonic`, mais `xelatex` devrait fonctionner aussi, si il est
   installé.
+- `--output=` spécifie le chemin et le nom du fichier généré.
+
+### Avec `paged.js`
+
+Avec cet outil, il est possible de définir les styles des éléments dans le PDF
+au moyen de règles CSS (voir [paged.js][pagedjs]). Pour pouvoir l'utiliser, il
+faut avoir installé sur sa machine les paquets `npm` suivants :
+
+```bash
+npm install -g puppeteer pagedjs pagedjs-cli
+```
+
+Puis, on peut soit produire directement un PDF :
+
+```bash
+pandoc --self-contained --citeproc --t pdf --pdf-engine=pagedjs-cli \
+       --css=source/polycopié/polycopié.css \
+       --output=public/polycopié.pdf polycopié.md
+```
+
+```bash
+pandoc --self-contained --citeproc --t html \
+       --template=source/polycopié/template.html \
+       --css=source/polycopié/polycopié.css \
+       -o test.html polycopié.md
+```
+
+[pagedjs]: https://pagedjs.org/
 
 ## Déroulé de la présentation
 

sources/polycopié/interface.css

@@ -0,0 +1,180 @@
+/* CSS for Paged.js interface – v0.4 */
+
+/* Change the look */
+:root {
+    --color-background: whitesmoke;
+    --color-pageSheet: #cfcfcf;
+    --color-pageBox: violet;
+    --color-paper: white;
+    --color-marginBox: transparent;
+    --pagedjs-crop-color: black;
+    --pagedjs-crop-shadow: white;
+    --pagedjs-crop-stroke: 1px;
+}
+
+/* To define how the book look on the screen: */
+@media screen, pagedjs-ignore {
+    body {
+        background-color: var(--color-background);
+    }
+
+    .pagedjs_pages {
+        display: flex;
+        width: calc(var(--pagedjs-width) * 2);
+        flex: 0;
+        flex-wrap: wrap;
+        margin: 0 auto;
+    }
+
+    .pagedjs_page {
+        background-color: var(--color-paper);
+        box-shadow: 0 0 0 1px var(--color-pageSheet);
+        margin: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-top: 10mm;
+    }
+
+    .pagedjs_first_page {
+        margin-left: var(--pagedjs-width);
+    }
+
+    .pagedjs_page:last-of-type {
+        margin-bottom: 10mm;
+    }
+
+    .pagedjs_pagebox{
+        box-shadow: 0 0 0 1px var(--color-pageBox);
+    }
+
+    .pagedjs_left_page{
+        z-index: 20;
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
+        border-color: transparent;
+    }
+    
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: 0;
+    } 
+
+    .pagedjs_right_page{
+        z-index: 10;
+        position: relative;
+        left: calc(var(--pagedjs-bleed-left)*-1);
+    }
+
+    /* show the margin-box */
+
+    .pagedjs_margin-top-left-corner-holder,
+    .pagedjs_margin-top,
+    .pagedjs_margin-top-left,
+    .pagedjs_margin-top-center,
+    .pagedjs_margin-top-right,
+    .pagedjs_margin-top-right-corner-holder,
+    .pagedjs_margin-bottom-left-corner-holder,
+    .pagedjs_margin-bottom,
+    .pagedjs_margin-bottom-left,
+    .pagedjs_margin-bottom-center,
+    .pagedjs_margin-bottom-right,
+    .pagedjs_margin-bottom-right-corner-holder,
+    .pagedjs_margin-right,
+    .pagedjs_margin-right-top,
+    .pagedjs_margin-right-middle,
+    .pagedjs_margin-right-bottom,
+    .pagedjs_margin-left,
+    .pagedjs_margin-left-top,
+    .pagedjs_margin-left-middle,
+    .pagedjs_margin-left-bottom {
+        box-shadow: 0 0 0 1px inset var(--color-marginBox);
+    }
+
+    /* uncomment this part for recto/verso book : ------------------------------------ */
+
+    /*
+    .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    } 
+
+    .pagedjs_left_page{
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
+        border-color: var(--pagedjs-crop-color);
+    }
+
+    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: var(--pagedjs-cross-size)!important;
+    } 
+
+    .pagedjs_right_page{
+        left: 0; 
+    } 
+    */
+    
+    
+
+    /*--------------------------------------------------------------------------------------*/
+
+
+
+    /* uncomment this par to see the baseline : -------------------------------------------*/
+
+    
+    /* .pagedjs_pagebox {
+        --pagedjs-baseline: 22px;
+        --pagedjs-baseline-position: 5px;
+        --pagedjs-baseline-color: cyan;
+        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
+        background-repeat: repeat-y;
+        background-position-y: var(--pagedjs-baseline-position);
+    }  */
+   
+
+    /*--------------------------------------------------------------------------------------*/
+}
+
+
+
+
+
+/* Marks (to delete when merge in paged.js) */
+
+.pagedjs_marks-crop{
+    z-index: 999999999999;
+  
+}
+
+.pagedjs_bleed-top .pagedjs_marks-crop, 
+.pagedjs_bleed-bottom .pagedjs_marks-crop{
+    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
+    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
+}  
+
+.pagedjs_bleed-left .pagedjs_marks-crop,
+.pagedjs_bleed-right .pagedjs_marks-crop{
+    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
+}
+
+.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
+.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
+    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
+}

sources/polycopié/polycopié.css

@@ -0,0 +1,101 @@
+@media print {
+    body {
+        font-family: TheSans, "Open Sans", Arial, Helvetica, sans-serif;
+        counter-reset: figureNumber;
+    }
+    @page {
+        size: A4;
+        margin: 25mm 0;
+        bleed: 6mm;
+        @bottom-center {
+            content: counter(page)
+        }
+    }
+    @page:left {
+        margin-left: 25mm;
+        margin-right: 15mm;
+    }
+    @page:right {
+        margin-left: 15mm;
+        margin-right: 25mm;
+    }
+    @page:first {
+        @bottom-center {
+            content: none;
+        }
+    }
+    @page:nth(11) {
+        @bottom-center {
+            content: none;
+        }
+    }
+    h2 {
+        color: #d80669;
+        text-decoration: underline;
+    }
+    #principes-généraux,
+    #utilisation-de-biblatex,
+    #bibliographie,
+    .footnotes {
+        break-before: page;
+    }
+    #title-block-header {
+        text-align: center;
+        margin-bottom: 8em;
+    }
+    .author {
+        display: inline;
+        padding-right: 10px;
+    }
+    pre {
+        font-family:'Courier New', Courier, monospace;
+        font-size: 90%;
+        background-color: #f2f1f1;
+        border: 2px solid #d80669;
+        border-radius: .5em;
+        margin: 1em;
+        padding: .5em 1em;
+    }
+    code {
+        font-family:'Courier New', Courier, monospace;
+        font-size: 90%;
+        background-color: #f2f1f1;
+        padding: 2px;
+        border-radius: 5px;
+    }
+    .footnotes::before {
+        content: "Notes";
+        color: #d80669;
+        font-size: 120%;
+        font-weight: bold;
+    }
+    figure {
+        display: flex;
+        flex-direction: column;
+        border: 2px solid #d80669;
+        border-radius: .5em;
+        padding: .5em;
+    }
+    figure img {
+        max-width: 85%;
+        margin: 0 auto;
+    }
+    figcaption {
+        text-align: center;
+        font-size: 90%;
+        counter-increment: figureNumber;
+        padding-top: .5em;
+    }
+    figcaption::before {
+        content: "Figure " counter(figureNumber) " : ";
+    }
+    blockquote {
+        font-style: italic;
+    }
+    blockquote em {
+        font-style: normal;
+    }
+    div.csl-entry {
+        padding: .5em;
+    }
+}

sources/polycopié/polycopié.md

@@ -1,5 +1,5 @@
 ---
-title: "Citer ses références et créer une bibliographie avec \\LaTeX"
+title: "Citer ses références et créer une bibliographie avec LaTeX et Zotero"
 date: 2023-03-30
 creation_date: 2023-03-24T08:25:47+01:00
 id: 20230324082557
@@ -9,7 +9,6 @@ author:
 - Igor Milhit^[Bibliothèque de l'UNIGE, site CMU]
 lang: fr
 bibliography: references-support.bib
-reference-section-title: Bibliographie
 nocite: '@*'
 link-citations: true
 ---
@@ -46,7 +45,7 @@ Au terme de cet atelier, vous serez en mesure de :
 
  
 
-![Logo de la licence CC BY-SA 4.0](media/by-sa.png) \
+![Logo de la licence CC BY-SA 4.0](../medias/by-sa.png) \
 Ce document est sous licence [*CC BY-SA 4.0*][cc-by-sa]. \
 Les sources sont sur <https://git.milhit.ch/igor/biblatex-zotero>
 
@@ -192,22 +191,25 @@ L'extension *Better BibTeX for Zotero* résout deux problèmes des fichiers
    contenu de celui-ci sera mis à jour automatiquement lorsque la collection
    correspondante dans Zotero sera modifiée**. Pour cela, il faut choisir le
    format d'exportation *Better BibTeX* ou *Better BibLaTeX* et sélectionner
-   l'option *Garder à jour.* \
+   l'option *Garder à jour*. (Figure 1) \
-   ![Dialogue Better BibTex](./media/better-bibtex-a-jour.png)
 1. Elle permet de **modifier une clé de citation (citekey) manuellement ou de
    créer un format de citekey par défaut.**
 
+![Fenêtre de dialogue de Better BibTex](../medias/better-bibtex-a-jour.png)
+
 Pour installer l'extension (au format `.xpi`) *Better BibTeX* :
 
 - Se rendre sur <https://github.com/retorquere/zotero-better-bibtex/releases/latest>.
 - Télécharger le fichier `Zotero-better-bibtex-X.X.X.xpi`.
-- Dans Zotero, choisir le menu *Outils / Extensions*. \
+- Dans Zotero, choisir le menu *Outils / Extensions*. (Figure 2) \
-  ![Menu « outils » de Zotero](./media/menu-outils.png)
 - Cliquer sur la roue crantée en haut à droite et sélectionner *Install Add-on
-  from file*. \
+  from file*. (Figure 3) \
-  ![Installer un fichier `.xpi`](./media/install-add-on.png)
 - Sélectionner le fichier téléchargé.
 
+![Menu « outils » de Zotero](../medias/menu-outils.png)
+
+![Installer un fichier `.xpi`](../medias/install-add-on.png)
+
 ### Autres fonctionnalités de Better BibTeX
 
 Better BibTeX propose des fonctionnalités plus avancées :
@@ -222,8 +224,7 @@ Ces fonctionnalités ne seront pas décrites en détail dans ce document.
 Les informations supplémentaires à ce sujet sont disponibles sur le site
 <https://retorque.re/zotero-better-BibTeX/>.
 
-
+## Configurer la compilation
-## Configuer la compilation
 
 Pour générer le fichier PDF à partir des sources `.tex` et `.bib`, il est
 nécessaire de configurer le système de composition que l'on va utiliser. Il
@@ -241,9 +242,10 @@ donc lui préciser lequel on utilise :
 
 1. Menu Options.
 1. Configurer Texmaker.
-1. Dans l'onglet *Commandes*, chercher l'entrée *Bib(la)tex* et entrer `biber
+1. Dans l'onglet *Commandes*, chercher l'entrée *Bib(la)tex* et entrer
-   %`. \
+   `biber %`. (Figure 4) \
-   ![Configuer Biber pour BibLaTeX](./media/texmaker-biber.png)
+
+![Configuer Biber pour BibLaTeX](../medias/texmaker-biber.png)
 
 Lorsque l'on compile avec des références bibliographiques, il est nécessaire de
 le faire quatre fois :
@@ -252,6 +254,7 @@ le faire quatre fois :
 1. Biber.
 1. LaTeX.
 1. LaTeX.
+1. Afficher le PDF.
 
 Heureusement Texmaker permet de configure une *Compilation rapide* qui lance
 tout seul ces quatre itération :
@@ -264,12 +267,12 @@ tout seul ces quatre itération :
 Dans le cas de l'exercice présenté, une bonne solution est d'utiliser XeLaTeX.
 Pour cela, il faut choisir l'option *Utilisateur* et utiliser l'assistant.
 
-![Assistant de configuration de compil rapide](./media/compil-rapide-assistant.png)
+![Assistant de configuration de compil rapide](../medias/compil-rapide-assistant.png)
 
 Puis, dans l'assistant, sélectionner les commandes à ajouter, une à une, dans
 l'ordre.
 
-![Ajout des commandes](./media/compil-rapide-liste.png)
+![Ajout des commandes](../medias/compil-rapide-liste.png)
 
 Les outils comme Overleaf ou `tectonic`[^5] prennent eux-mêmes en charge ce
 genre de complexité.
@@ -387,3 +390,4 @@ Sous Windows la commande ne prend qu'un tiret pour le paramètre :
 kpsewhich -var-value TEXMFLOCAL
 ```
 
+## Bibliographie

sources/polycopié/template.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+$for(author-meta)$
+  <meta name="author" content="$author-meta$" />
+$endfor$
+$if(date-meta)$
+  <meta name="dcterms.date" content="$date-meta$" />
+$endif$
+$if(keywords)$
+  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+$endif$
+$if(description-meta)$
+  <meta name="description" content="$description-meta$" />
+$endif$
+  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+  <style>
+    $styles.html()$
+  </style>
+$for(css)$
+  <link rel="stylesheet" href="$css$" />
+$endfor$
+  <link href="interface.css" rel="stylesheet" type="text/css" />
+  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
+$for(header-includes)$
+  $header-includes$
+$endfor$
+$if(math)$
+  $math$
+$endif$
+
+</head>
+<body>
+$for(include-before)$
+$include-before$
+$endfor$
+$if(title)$
+<header id="title-block-header">
+<h1 class="title">$title$</h1>
+$if(subtitle)$
+<p class="subtitle">$subtitle$</p>
+$endif$
+$for(author)$
+<p class="author">$author$</p>
+$endfor$
+$if(date)$
+<p class="date">$date$</p>
+$endif$
+$if(abstract)$
+<div class="abstract">
+<div class="abstract-title">$abstract-title$</div>
+$abstract$
+</div>
+$endif$
+</header>
+$endif$
+$if(toc)$
+<nav id="$idprefix$TOC" role="doc-toc">
+$if(toc-title)$
+<h2 id="$idprefix$toc-title">$toc-title$</h2>
+$endif$
+$table-of-contents$
+</nav>
+$endif$
+$body$
+$for(include-after)$
+$include-after$
+$endfor$
+</body>
+</html>