projet: complète le modèle

- Améliore l'usage des polices, pour se passer de TheSans. - Utilise une version des scripts JS servis par le projet, que ce soit pour l'interface de pagedjs ou pour recharger le document dans l'interface web restant au même endroit dans le document. - Ajoute la classe `.newpage` à la liste des sélecteurs provoquant un saut de page. - Crée la classe `.exercise` pour mettre en avant les sections d'exercice. - Utilise la variable pandoc `noscript` (à passer dans la commande pandoc avec -V noscript=true) lors de la production du PDF avec pandoc et le pdf-engine pagedjs-cli. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-10-23 16:28:13 +02:00 · 2024-10-23 16:28:13 +02:00 · 1d49fe91d9
parent 2687b0e0bc
commit 1d49fe91d9
7 changed files with 33430 additions and 12 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,4 @@ example.html
 example.pdf
 test.*
 release/
+watched-files.txt
--- a/README.md
+++ b/README.md
@ -90,13 +90,16 @@ Pour générer directement le PDF, en utilisant `pagedjs` au moyen de `pandoc`
 pandoc --citeproc \
       --to=pdf --pdf-engine=pagedjs-cli \
       --css=../style.css \
+       --template=../template.html \
       --toc --toc-depth=2 \
+       -V noscript=true 
       --output=example.pdf example.md
 ```

 - `--pdf-engine=` impose `pagedjs` pour la conversion en PDF.
- Ici le `template` ne doit pas être utilisé, mais la feuille de style doit
-  l'être.
+- `-V noscript=true` permet d'indiquer que la feuille de style de l'interface
+  web de `pagedjs` et les scripts javascript utile dans le navigateur web ne
+  soient pas utilisés, car ils perturbent la conversion par `pandoc`.

 Pour générer le PDF en utilisant directement `pagedjs` :

--- a/example/example.md
+++ b/example/example.md
@ -31,10 +31,11 @@ Au terme de cet atelier, vous serez en mesure de :
 &nbsp;

 :::{#licence}
-![Logo de la licence CC BY-SA 4.0](../static/by-sa.svg) \
+![Logo de la licence CC BY-SA 4.0][logo] \
 [CC BY-SA 4.0][cc-by-sa] --- [Sources][sources]
 :::

+[logo]: ../static/by-sa.svg
 [cc-by-sa]: https://creativecommons.org/licenses/by-sa/4.0/deed.fr "Texte de la licence en français"
 [sources]: https://git.milhit.ch/igor/bunige-pagedjs-template

@ -123,16 +124,20 @@ par exemple un livre.</p>

 ## Police

-Pour que la police *TheSans* puisse s'appliquer correctement, elle doit être
-installée sur votre système d'exploitation. Malheureusement, elle n'est pas
-publiée avec une licence libre, ce qui en réduit l'usage. Les polices de
-remplacement sont dans l'ordre *Open Sans*, *Arial*, *Helvetica*, ou la police
+Bien que la police *TheSans* face partie de la charte de l'UNIGE et de la
+Bibliothèque de l'Université, je trouve qu'elle n'est pas des plus lisible,
+notamment sur les titres. De plus, la licence de cette police, sauf erreur,
+n'est pas libre, ce qui en limite l'usage. C'est pourquoi je préfère spécifier
+ici les polices *Noto Sans*, *Open Sans*, *Arial*, *Helvetica*, ou la police
 *sans-serif* par défaut de votre système ou de votre navigateur.

 La police peut être facilement configurable au moyen du sélecteur `body` dans
 le fichier `style.css` (règle déjà existante, dans la section *Définitions
 globales*).

+Pour les éléments verbatim (`pre`, `code`), la police est *Lilex*, *Courier
+New*, *Courier*, *monospace*.
+
 ## Titres

 Il y a une particularité avec les titres, qui découlent de l'usage de
@ -149,6 +154,23 @@ Ainsi, un sélecteur unique est disponible pour appliquer un saut de page à ce
 titre, quel que soit son texte. Une logique similaire est appliquée au titre de
 la bibliographie (`bibliography`).

+De la même façon, une ou plusieurs classes peuvent être attribuées :
+
+```markdown
+## Titre {.class}
+```
+
+Ainsi, on peut ajouter la classe `.newpage` qui insert un saut de page avant le
+titre en question.
+
+La même chose peut être faite avec des `<div>`, par exemple :
+
+```markdown
+:::{.class}{#id}
+Du texte.
+:::
+```
+
 ## Citation

 > Tout d’abord un bon éditeur est un éditeur avec coloration syntaxique. Avec
--- a/paged.polyfill.js
+++ b/paged.polyfill.js
--- a/reload-in-place.js
+++ b/reload-in-place.js
@ -0,0 +1,117 @@
+// Reload-in-place v2.0
+// Nicolas Taffin + Sameh Chafik - 2020
+// MIT License https://opensource.org/licenses/MIT
+// A simple script to add your pagedjs project. On reload, it will make the web browser scroll to the place it was before reload. 
+// Useful when styling or proof correcting your book. Multi docs compatible and doesn't wait for complete compilation to go.
+
+
+console.log("reload in place");
+
+
+// separate human / machine scroll
+var machineScroll = false;
+
+// check pagedJS ended compilation
+var pagedjsEnd = false;
+
+class pagedjsEnded extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+    }
+    afterRendered(pages) {
+        pagedjsEnd = true;
+    }
+}
+Paged.registerHandlers(pagedjsEnded);
+
+// set a "unique" filename based on title element, in case several books are opened
+var fileTitle = document.getElementsByTagName("title")[0].text;
+
+function getDocHeight() {
+    var D = document;
+    return Math.max(
+        D.body.scrollHeight, D.documentElement.scrollHeight,
+        D.body.offsetHeight, D.documentElement.offsetHeight,
+        D.body.clientHeight, D.documentElement.clientHeight
+    )
+}
+function saveAmountScrolled(){
+    var scrollArray = [];
+    var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
+    if (!machineScroll) {
+        var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft
+        scrollArray.push({ X: Math.round(scrollLeft), Y: Math.round(scrollTop) });
+        console.log("Saved ", scrollArray);
+        localStorage[fileTitle] = JSON.stringify(scrollArray);
+    }
+}
+
+// on Load, blur or opacify the page, and try to join ASAP 
+// last saved position, or at least last compiled page
+
+
+window.onload = moveFast;
+
+function moveFast() {
+    machineScroll= true;
+    var styleEl = document.createElement('style');
+    document.head.appendChild(styleEl);
+    var styleSheet = styleEl.sheet;
+    styleSheet.insertRule('.pagedjs_pages { filter: blur(10px); }', 0); 
+    //styleSheet.insertRule('.pagedjs_pages { opacity: 0.1; }', 0); 
+    var savedData = localStorage.getItem(fileTitle);
+    if (savedData) {
+        var scrollArray = JSON.parse(savedData);
+        var scrollTop = scrollArray[0].Y;
+        var scrollLeft = scrollArray[0].X;
+    } else {
+        var scrollTop = 0;
+        var scrollLeft = 0;
+    }
+    var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
+    window.currentInterval = setInterval(function(){
+        var docheight = getDocHeight();
+        
+        if ( scrollTop > 0 && scrollTop > docheight - winheight && !pagedjsEnd) {  
+            window.scrollTo(scrollLeft,docheight);
+        } else {
+            window.scrollTo(scrollLeft,scrollTop);
+            clearInterval(window.currentInterval);
+            setTimeout(function(){ 
+                window.scrollTo(scrollLeft,scrollTop);
+                machineScroll = false;
+                styleSheet.deleteRule(0);
+            }, 500); // Delay to start
+        }
+    }, 50); // refresh frequency
+};
+
+// slow down a bit save position pace
+
+var slowSave = debounce(function() {
+	if(!machineScroll) { 
+        saveAmountScrolled();
+    }
+}, 100); // save frequency
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
+// Scroll triggers save, but not immediately on load
+
+setTimeout(function(){ 
+    window.addEventListener('scroll', slowSave);
+}, 1000); // wait a bit before starting position save
+
--- a/style.css
+++ b/style.css
@ -28,7 +28,7 @@
         * bibliothèque de l'UNIGE. */
        @top-right {
                content: "";
-                background-image: url("./static/bibliotheque-logo.svg");
+                background-image: url("static/bibliotheque-logo.svg");
                background-position: right;
                background-repeat: no-repeat;
                background-size: 25%;
@ -56,7 +56,8 @@
     * ************************ */

    body {
-        font-family: "TheSansOsF", "Open Sans", Arial, Helvetica, sans-serif;
+        font-family: "Noto Sans", "Open Sans",
+                     Arial, Helvetica, sans-serif;
        /* Définit les trois variables de compteur nécessaires */
        counter-reset: figureNumber toc tableNumber;
    }
@ -132,6 +133,7 @@
     * dans la source markdown. */
    #first-section,
    #bibliography,
+    .newpage,
    .footnotes {
        break-before: page;
    }
@ -158,8 +160,9 @@
        padding: none;
    }
    code {
-        font-family:'Courier New', Courier, monospace;
+        font-family: 'Lilex Nerd Font', 'Courier New', Courier, monospace;
        font-size: 90%;
+        line-height: 1.4;
        background-color: #f2f1f1;
        padding: 2px;
        border-radius: 5px;
@ -173,6 +176,12 @@
    }
    .footnote-ref {
        text-decoration: none;
+        padding-left: 2px;
+    }
+    .footnote-back {
+        font-size: small;
+        text-decoration: none;
+        padding-left: .5em;
    }

    figure {
@ -198,6 +207,15 @@
        content: "Figure " counter(figureNumber) " : ";
    }

+    .exercise {
+        background-color: #f2f1f1;
+        width: 90%;
+        margin: 0 auto;
+        border: 2px solid #d80669;
+        border-radius: .5em;
+        padding: 0 .5em;
+    }
+
    blockquote {
        font-style: italic;
    }
--- a/template.html
+++ b/template.html
@ -26,15 +26,21 @@ $endif$
 $for(css)$
  <link rel="stylesheet" href="$css$" />
 $endfor$
+<!-- Allow to use -V noscript=true with pandoc 
+     in order to avoid to insert these lines 
+     when they are unnecessary. -->
+$if(noscript)$
+$else$
  <link href="/interface.css" rel="stylesheet" type="text/css" />
-  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
+  <script src="/paged.polyfill.js"></script>
+  <script src="/reload-in-place.js"></script>
+$endif$
 $for(header-includes)$
  $header-includes$
 $endfor$
 $if(math)$
  $math$
 $endif$
-
 </head>
 <body>
 $for(include-before)$