From 553616acfb2f3fbf4ef5704d527c469e9bb696f5 Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Tue, 4 Apr 2023 13:45:27 +0200 Subject: [PATCH] =?UTF-8?q?export:=20g=C3=A9n=C3=A8re=20le=20polycopi?= =?UTF-8?q?=C3=A9=20en=20PDF=20avec=20`paged.js`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ajoute un modèle HTML contenant les éléments nécessaires pour utiliser `paged.js` dans un navigateur web. - Ajoute le support de logos. - 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. - Utilise le style de citation et de bibliographie Haute École de Gestion de Genève, ISO 690. - Apporte quelques petites corrections au polycopié lui-même. Co-Authored-by: iGor milhit --- README.md | 35 +- .../medias}/better-bibtex-a-jour.png | Bin sources/medias/bibliotheque-logo.svg | 210 +++++++ {media => sources/medias}/by-sa.png | Bin {media => sources/medias}/by-sa.svg | 0 .../medias}/compil-rapide-assistant.png | Bin .../medias}/compil-rapide-liste.png | Bin {media => sources/medias}/install-add-on.png | Bin sources/medias/latex-logo.svg | 8 + {media => sources/medias}/menu-outils.png | Bin {media => sources/medias}/texmaker-biber.png | Bin sources/medias/zotero-logo.svg | 10 + sources/polycopié/heg-iso-690.csl | 562 ++++++++++++++++++ sources/polycopié/interface.css | 180 ++++++ sources/polycopié/polycopié.css | 127 ++++ .../polycopié/polycopié.md | 42 +- .../polycopié/references-support.bib | 0 sources/polycopié/template.html | 83 +++ .../presentation/presentation.md | 0 19 files changed, 1239 insertions(+), 18 deletions(-) rename {media => sources/medias}/better-bibtex-a-jour.png (100%) create mode 100644 sources/medias/bibliotheque-logo.svg rename {media => sources/medias}/by-sa.png (100%) rename {media => sources/medias}/by-sa.svg (100%) rename {media => sources/medias}/compil-rapide-assistant.png (100%) rename {media => sources/medias}/compil-rapide-liste.png (100%) rename {media => sources/medias}/install-add-on.png (100%) create mode 100644 sources/medias/latex-logo.svg rename {media => sources/medias}/menu-outils.png (100%) rename {media => sources/medias}/texmaker-biber.png (100%) create mode 100644 sources/medias/zotero-logo.svg create mode 100644 sources/polycopié/heg-iso-690.csl create mode 100644 sources/polycopié/interface.css create mode 100644 sources/polycopié/polycopié.css rename polycopié.md => sources/polycopié/polycopié.md (94%) rename references-support.bib => sources/polycopié/references-support.bib (100%) create mode 100644 sources/polycopié/template.html rename presentation.md => sources/presentation/presentation.md (100%) diff --git a/README.md b/README.md index ec99fe9..ede7146 100644 --- a/README.md +++ b/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 diff --git a/media/better-bibtex-a-jour.png b/sources/medias/better-bibtex-a-jour.png similarity index 100% rename from media/better-bibtex-a-jour.png rename to sources/medias/better-bibtex-a-jour.png diff --git a/sources/medias/bibliotheque-logo.svg b/sources/medias/bibliotheque-logo.svg new file mode 100644 index 0000000..b33b2b1 --- /dev/null +++ b/sources/medias/bibliotheque-logo.svg @@ -0,0 +1,210 @@ + + + + diff --git a/media/by-sa.png b/sources/medias/by-sa.png similarity index 100% rename from media/by-sa.png rename to sources/medias/by-sa.png diff --git a/media/by-sa.svg b/sources/medias/by-sa.svg similarity index 100% rename from media/by-sa.svg rename to sources/medias/by-sa.svg diff --git a/media/compil-rapide-assistant.png b/sources/medias/compil-rapide-assistant.png similarity index 100% rename from media/compil-rapide-assistant.png rename to sources/medias/compil-rapide-assistant.png diff --git a/media/compil-rapide-liste.png b/sources/medias/compil-rapide-liste.png similarity index 100% rename from media/compil-rapide-liste.png rename to sources/medias/compil-rapide-liste.png diff --git a/media/install-add-on.png b/sources/medias/install-add-on.png similarity index 100% rename from media/install-add-on.png rename to sources/medias/install-add-on.png diff --git a/sources/medias/latex-logo.svg b/sources/medias/latex-logo.svg new file mode 100644 index 0000000..d02e869 --- /dev/null +++ b/sources/medias/latex-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/media/menu-outils.png b/sources/medias/menu-outils.png similarity index 100% rename from media/menu-outils.png rename to sources/medias/menu-outils.png diff --git a/media/texmaker-biber.png b/sources/medias/texmaker-biber.png similarity index 100% rename from media/texmaker-biber.png rename to sources/medias/texmaker-biber.png diff --git a/sources/medias/zotero-logo.svg b/sources/medias/zotero-logo.svg new file mode 100644 index 0000000..889adf3 --- /dev/null +++ b/sources/medias/zotero-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/sources/polycopié/heg-iso-690.csl b/sources/polycopié/heg-iso-690.csl new file mode 100644 index 0000000..4698051 --- /dev/null +++ b/sources/polycopié/heg-iso-690.csl @@ -0,0 +1,562 @@ + + diff --git a/sources/polycopié/interface.css b/sources/polycopié/interface.css new file mode 100644 index 0000000..170f47e --- /dev/null +++ b/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); +} diff --git a/sources/polycopié/polycopié.css b/sources/polycopié/polycopié.css new file mode 100644 index 0000000..1730754 --- /dev/null +++ b/sources/polycopié/polycopié.css @@ -0,0 +1,127 @@ +@media print { + body { + font-family: TheSans, "Open Sans", Arial, Helvetica, sans-serif; + counter-reset: figureNumber; + } + /* Définit que string(date) contient la date */ + .date { + string-set: date content(text) + } + @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 { + @top-right { + content: ""; + background-image: url("../medias/bibliotheque-logo.svg"); + background-position: right; + background-repeat: no-repeat; + background-size: 25%; + } + @bottom-center { + content: none; + } + @bottom-right { + content: string(date); + } + } + @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: 6em; + } + .authors { + display: flex; + justify-content: space-evenly; + } + .author { + margin: 0; + } + 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; + } + .logo { + display: inline-flex; + width: 60%; + margin: 0 auto; + } + .logo img { + max-width: 50%; + padding: .5em; + } +} diff --git a/polycopié.md b/sources/polycopié/polycopié.md similarity index 94% rename from polycopié.md rename to sources/polycopié/polycopié.md index b2273af..e50483c 100644 --- a/polycopié.md +++ b/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 @@ -7,9 +7,12 @@ author: - Dimitri Donzé^[Bibliothèque de l'UNIGE, site UNIMAIL] - Vincent Huber^[Bibliothèque de l'UNIGE, site Arve] - Igor Milhit^[Bibliothèque de l'UNIGE, site CMU] +logo: +- ../medias/latex-logo.svg +- ../medias/zotero-logo.svg lang: fr bibliography: references-support.bib -reference-section-title: Bibliographie +csl: heg-iso-690.csl nocite: '@*' link-citations: true --- @@ -46,7 +49,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 @@ -192,22 +195,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.* \ - ![Dialogue Better BibTex](./media/better-bibtex-a-jour.png) + l'option *Garder à jour*. (Figure 1) \ 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 . - Télécharger le fichier `Zotero-better-bibtex-X.X.X.xpi`. -- Dans Zotero, choisir le menu *Outils / Extensions*. \ - ![Menu « outils » de Zotero](./media/menu-outils.png) +- Dans Zotero, choisir le menu *Outils / Extensions*. (Figure 2) \ - Cliquer sur la roue crantée en haut à droite et sélectionner *Install Add-on - from file*. \ - ![Installer un fichier `.xpi`](./media/install-add-on.png) + from file*. (Figure 3) \ - 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 +228,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 . - -## Configuer la compilation +## Configurer 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 +246,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 - %`. \ - ![Configuer Biber pour BibLaTeX](./media/texmaker-biber.png) +1. Dans l'onglet *Commandes*, chercher l'entrée *Bib(la)tex* et entrer + `biber %`. (Figure 4) \ + +![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 +258,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 +271,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é. @@ -332,7 +339,7 @@ la *cheatsheet*), pour les différents cas. La syntaxe est la suivante : exemple `[voir]` permet d'obtenir `(voir Auteur, date)`. - `[]`, optionnel, ajoute du texte après l'appel à citation, comme un numérotation de pages. -- `{}`, obligatoire, est la clé de citation indiquant de quelle référence +- `{}`, obligatoire, est la clé de citation indiquant de quelle référence il s'agit. Par exemple `{slaweckiParadigmsQualitativeResearch2018}`. Voici les appels de citation les plus utiles : @@ -387,3 +394,4 @@ Sous Windows la commande ne prend qu'un tiret pour le paramètre : kpsewhich -var-value TEXMFLOCAL ``` +## Bibliographie diff --git a/references-support.bib b/sources/polycopié/references-support.bib similarity index 100% rename from references-support.bib rename to sources/polycopié/references-support.bib diff --git a/sources/polycopié/template.html b/sources/polycopié/template.html new file mode 100644 index 0000000..f3bd0fc --- /dev/null +++ b/sources/polycopié/template.html @@ -0,0 +1,83 @@ + + + + + + +$for(author-meta)$ + +$endfor$ +$if(date-meta)$ + +$endif$ +$if(keywords)$ + +$endif$ +$if(description-meta)$ + +$endif$ + $if(title-prefix)$$title-prefix$ – $endif$$pagetitle$ + +$for(css)$ + +$endfor$ + + +$for(header-includes)$ + $header-includes$ +$endfor$ +$if(math)$ + $math$ +$endif$ + + + +$for(include-before)$ +$include-before$ +$endfor$ +$if(title)$ +
+

$title$

+$if(subtitle)$ +

$subtitle$

+$endif$ +$if(author)$ +
+$for(author)$ +

$author$

+$endfor$ +
+$endif$ +$if(date)$ +

$date$

+$endif$ +$if(logo)$ + +$endif$ +$if(abstract)$ +
+$abstract$ +
+$endif$ +
+$endif$ +$if(toc)$ + +$endif$ +$body$ +$for(include-after)$ +$include-after$ +$endfor$ + + diff --git a/presentation.md b/sources/presentation/presentation.md similarity index 100% rename from presentation.md rename to sources/presentation/presentation.md