projet: améliore la structure

- Rassemble les fichiers statiques dans leur dossier.
- Crée un Makefile pour construire l'exemple en HTML et en PDF, et aussi
  pour démarrer un serveur web local et pour faciliter la publication de
  version.
- Mets à jour l'exemple avec les possibilités ajoutées (warning).
- Implémente les modifications apportées dans le CSS des projets où ce
  template est utilisé.

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

Makefile

@@ -0,0 +1,53 @@
+EXAMPLE_FOLDER := example
+PROJECT_STATIC_FOLDER := static
+EXAMPLE_STATIC_FOLDER := $(EXAMPLE_FOLDER)/static
+RELEASE_FOLDER := release
+
+EXAMPLE_FILENAME := example
+EXAMPLE_BIBLIOGRAPHY_PATH := $(EXAMPLE_FOLDER)/references.bib
+CSL_PATH := $(PROJECT_STATIC_FOLDER)/heg-iso-690.csl
+
+GIT_LAST_TAG := $(shell git describe --tags --abbrev=0 2>/dev/null || echo "no-tag")
+
+.PHONY: all
+all: pdf
+
+.PHONY: serve
+serve:
+	python -m http.server
+
+.PHONY: html
+html:
+	pandoc --to=html --standalone \
+	--template=$(PROJECT_STATIC_FOLDER)/template.html \
+	--css=../$(PROJECT_STATIC_FOLDER)/style.css \
+	-V static='../static' \
+	--toc --toc-depth=2 \
+	--citeproc --bibliography=$(EXAMPLE_BIBLIOGRAPHY_PATH) --csl=$(CSL_PATH) \
+	--out=$(EXAMPLE_FOLDER)/$(EXAMPLE_FILENAME).html \
+	$(EXAMPLE_FOLDER)/$(EXAMPLE_FILENAME).md
+
+.PHONY: pdf 
+pdf:
+	cd $(EXAMPLE_FOLDER); \
+	pandoc --to=pdf --pdf-engine=pagedjs-cli --embed-resource \
+	--template=../$(PROJECT_STATIC_FOLDER)/template.html \
+	--css=../$(PROJECT_STATIC_FOLDER)/style.css \
+	-V static='../static' -V noscript=true \
+	--toc --toc-depth=2 \
+	--citeproc --csl=../$(CSL_PATH) \
+	--out=$(EXAMPLE_FILENAME).pdf \
+	$(EXAMPLE_FILENAME).md
+
+.PHONY: watch
+watch:
+	watchexec -r -w . -i $(EXAMPLE_FOLDER)/$(EXAMPLE_FILENAME).html \
+	-- make html
+
+.PHONY: release
+release:
+	zip -r $(RELEASE_FOLDER)/$(GIT_LAST_TAG).zip static
+	cp $(EXAMPLE_FOLDER)/$(EXAMPLE_FILENAME).pdf $(RELEASE_FOLDER)/$(GIT_LAST_TAG).pdf
+
+.PHONY: clean
+	rm -f $(RELEASE_FOLDER)/*.*

example/example.md

@@ -1,6 +1,6 @@
 ---
 title: Un modèle pour la BUNIGE 
-date: Printemps 2023
+date: Automne 2025
 creation_date: 2023-04-21T11:30:49+02:00
 id: 20230421113057
 author:
@@ -10,9 +10,9 @@ logo:
 - ./static/pagedjs-logo.svg
 - ./static/markdown-logo.svg
 lang: fr
-tags: [example, markdown, pagedjs]
+tags: ["example", "markdown", "pagedjs"]
 bibliography: ./references.bib
-csl: ../heg-iso-690.csl
+csl: ../static/heg-iso-690.csl
 link-citations: true
 nocite: |
   @*
@@ -35,7 +35,7 @@ Au terme de cet atelier, vous serez en mesure de :
 [CC BY-SA 4.0][cc-by-sa] --- [Sources][sources]
 :::
 
-[logo]: ../static/by-sa.svg
+[logo]: ../static/images/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
 
@@ -132,13 +132,13 @@ 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*).
+le fichier `/static/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
+## Titres et blocs
 
 Il y a une particularité avec les titres, qui découlent de l'usage de
 `pandoc`. La première et qu'il est possible de définir l'attribut `id=` des
@@ -166,11 +166,31 @@ titre en question.
 La même chose peut être faite avec des `<div>`, par exemple :
 
 ```markdown
-:::{.class}{#id}
+::: {.class}{#id}
+
 Du texte.
+
 :::
 ```
 
+Ce mécanisme permet d'obtenir des blocs pour mettre en évidence du texte :
+
+```markdown
+::: {.warning}
+
+Texte en évidence.
+
+:::
+```
+
+Ce qui donne :
+
+::: {.warning}
+
+Texte en évidence.
+
+:::
+
 ## Citation
 
 > Tout d’abord un bon éditeur est un éditeur avec coloration syntaxique. Avec

static/style.css

@@ -28,7 +28,7 @@
          * bibliothèque de l'UNIGE. */
         @top-right {
                 content: "";
-                background-image: url("static/bibliotheque-logo.svg");
+                background-image: url("images/bibliotheque-logo.svg");
                 background-position: right;
                 background-repeat: no-repeat;
                 background-size: 25%;
@@ -85,7 +85,7 @@
         margin: 2em auto 1em auto;
     }
     .logo img {
-        max-width: 50%;
+        max-width: 25%;
         padding: .5em;
     }
 
@@ -196,6 +196,7 @@
     figure img {
         max-width: 85%;
         margin: 0 auto;
+        max-height: 35vh;
     }
     figcaption {
         text-align: center;
@@ -207,13 +208,28 @@
         content: "Figure " counter(figureNumber) " : ";
     }
 
-    .exercise {
+    .exercise,
+    .warning {
         background-color: #f2f1f1;
         width: 90%;
         margin: 0 auto;
         border: 2px solid #d80669;
         border-radius: .5em;
-        padding: 0 .5em;
+        padding: .5em;
+        display: flex;
+        align-items: center;
+    }
+
+    .exercice > p,
+    .warning > p {
+        margin: 0;
+        padding-left: .5em;
+    }
+
+    .exercice::before,
+    .warning::before {
+        content: "⚠️";
+        font-size: larger;
     }
 
     blockquote {

static/template.html

@@ -31,9 +31,9 @@ $endfor$
      when they are unnecessary. -->
 $if(noscript)$
 $else$
-  <link href="/interface.css" rel="stylesheet" type="text/css" />
-  <script src="/paged.polyfill.js"></script>
-  <script src="/reload-in-place.js"></script>
+  <link href="$static$/interface.css" rel="stylesheet" type="text/css" />
+  <script src="$static$/paged.polyfill.js"></script>
+  <script src="$static$/reload-in-place.js"></script>
 $endif$
 $for(header-includes)$
   $header-includes$