ajout d'une fonctionnalité pour l'affichage des diapositives des présentations dans la page présentations lors du clic sur un hyperlien

- modification du Makefile pour ajouter un template pour les pages
- ajout d'un script JS pour capturer l'événement du clic sur un hyperlien avec la classe 'load-content'
- ajout de propriété css pour que la div contenant l'iframe n'apparaisse que lorsqu'il y a une iframe à l'intérieur
- réglage de l'affichage des slides en css
- la commande 'make html' a mis à jour toutes les pages du site utilisant le template page.html

11 files changed, 149 insertions, 42 deletions

diff --git a/Makefile b/Makefile
index 1f07628..75bde66 100644
--- a/Makefile
+++ b/Makefile
@@ -68,15 +68,16 @@ docs/index.html: src/index.md templates/index.html $(metadata_site)
 		--output $@
 	@ echo "L'index est construit."
 
-docs/pages/%.html: src/pages/%.md $(metadata_site) templates/post.html
+docs/pages/%.html: src/pages/%.md $(metadata_site) templates/page.html
 	@ mkdir -p "$(@D)"
 	@ echo "Production de la page \"$@\"..."
 	@ pandoc \
   	$< \
 		$(PANDOCFLAGS) \
-		--template templates/post.html \
+		--template templates/page.html \
 		--output $@
 	@ echo "La page \"$@\" est construite."
+	
 
 docs/posts/%.html: src/posts/%.md $(metadata_site) templates/post.html
 	@ mkdir -p "$(@D)"
diff --git a/docs/css/styles.css b/docs/css/styles.css
index c18f08e..8ed60a7 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -33,6 +33,7 @@ img {
     grid-row: 2;
     background-color: rgb(255, 255, 255);
     border: 3px solid black;
+    height: fit-content;
 }
 
 .content {
@@ -149,6 +150,23 @@ footer a:hover, footer a:active {
     grid-row: 2;
 }
 
+.side-page.has-iframe {
+    position: -webkit-sticky;
+    position: sticky;
+    height: fit-content;
+    top: 0;
+    border: 3px solid black;
+    background-color: rgb(255, 255, 255);
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.side-page iframe {
+    width: 100%;
+    height: 350px;
+    border: 0;
+}
+
 .toc ul {
     list-style: none;
 }
diff --git a/docs/js/script.js b/docs/js/script.js
new file mode 100644
index 0000000..f388be4
--- /dev/null
+++ b/docs/js/script.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Sélectionner tous les hyperliens avec la classe 'load-content'
+    const links = document.querySelectorAll('a.load-content');
+
+    // Ajouter un gestionnaire d'événements pour chaque lien
+    links.forEach(function(link) {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Empêcher le comportement par défaut du lien
+
+            const url = this.href; // Récupérer l'URL du lien
+
+            // Créer une nouvelle iframe
+            const iframe = document.createElement('iframe');
+            iframe.src = url;
+
+            // Vider la div 'contentDiv' et y ajouter la nouvelle iframe
+            const contentDiv = document.getElementById('contentIframe');
+            contentDiv.innerHTML = ''; // Effacer le contenu précédent
+            contentDiv.appendChild(iframe);
+            contentDiv.classList.add('has-iframe');
+        });
+    });
+});
\ No newline at end of file
diff --git a/docs/pages/colophon.html b/docs/pages/colophon.html
index 215c532..78b1878 100644
--- a/docs/pages/colophon.html
+++ b/docs/pages/colophon.html
@@ -26,7 +26,9 @@
                     <li><a href="/pages/presentations.html">Présentations</a></li>
                     <li class="right"><a href="/index-cache.html"></a></li>
                 </ul>
-            </nav></header>                    <div class="container">
+            </nav></header>        <div class="side-page" id="contentIframe">
+        </div>
+            <div class="container">
                 <header class="header-bloc">
                     <h1>Colophon</h1>
 <!--  -->
@@ -61,5 +63,6 @@
                 <p>Créé avec Pandoc et Make</p>
         <a href="/pages/colophon.html">Colophon</a>
     </div>
-</footer>    </body>
+</footer>        <script src="/js/script.js"></script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/cours.html b/docs/pages/cours.html
index 5ed2a79..0f92a32 100644
--- a/docs/pages/cours.html
+++ b/docs/pages/cours.html
@@ -26,7 +26,9 @@
                     <li><a href="/pages/presentations.html">Présentations</a></li>
                     <li class="right"><a href="/index-cache.html"></a></li>
                 </ul>
-            </nav></header>                    <div class="container">
+            </nav></header>        <div class="side-page" id="contentIframe">
+        </div>
+            <div class="container">
                 <header class="header-bloc">
                     <h1>Enseignements</h1>
 <!--  -->
@@ -69,5 +71,6 @@
                 <p>Créé avec Pandoc et Make</p>
         <a href="/pages/colophon.html">Colophon</a>
     </div>
-</footer>    </body>
+</footer>        <script src="/js/script.js"></script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/presentations.html b/docs/pages/presentations.html
index bfe84a8..6d895cb 100644
--- a/docs/pages/presentations.html
+++ b/docs/pages/presentations.html
@@ -26,7 +26,9 @@
                     <li><a href="/pages/presentations.html">Présentations</a></li>
                     <li class="right"><a href="/index-cache.html"></a></li>
                 </ul>
-            </nav></header>                    <div class="container">
+            </nav></header>        <div class="side-page" id="contentIframe">
+        </div>
+            <div class="container">
                 <header class="header-bloc">
                     <h1>Présentations</h1>
 <!--  -->
@@ -35,20 +37,10 @@
                 </header>
                 <div class="content">
 <ul>
-<li><a href="/presentations/doctoriales24.html">13 juin 2024 - <em>In-silicium</em> : Sur les traces de l’intimité du chercheur dans les publications scientifiques</a></li>
-</ul>
-
-<iframe src="/presentations/doctoriales24.html"></iframe>
-<ul>
-<li><a href="/presentations/cml_mai24.html">02 mai 2024 - Ce que les machines écrivent dans le texte</a></li>
+<li><a href="/presentations/doctoriales24.html" class="load-content">13 juin 2024 - <em>In-silicium</em> : Sur les traces de l’intimité du chercheur dans les publications scientifiques</a></li>
+<li><a href="/presentations/cml_mai24.html" class="load-content">02 mai 2024 - Ce que les machines écrivent dans le texte</a></li>
+<li><a href="/presentations/stylo_mtp3_24.html" class="load-content">26 janvier 2024 - Stylo, un éditeur pour les SHS</a></li>
 </ul>
-
-<iframe src="/presentations/cml_mai24.html"></iframe>
-<ul>
-<li><a href="/presentations/stylo_mtp3_24.html">26 janvier 2024 - Stylo, un éditeur pour les SHS</a></li>
-</ul>
-
-<iframe src="/presentations/stylo_mtp3_24.html"></iframe>
             </div>
         </div>
 <footer>
@@ -57,5 +49,6 @@
                 <p>Créé avec Pandoc et Make</p>
         <a href="/pages/colophon.html">Colophon</a>
     </div>
-</footer>    </body>
+</footer>        <script src="/js/script.js"></script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/publications.html b/docs/pages/publications.html
index 1034c0b..c508fee 100644
--- a/docs/pages/publications.html
+++ b/docs/pages/publications.html
@@ -26,7 +26,9 @@
                     <li><a href="/pages/presentations.html">Présentations</a></li>
                     <li class="right"><a href="/index-cache.html"></a></li>
                 </ul>
-            </nav></header>                    <div class="container">
+            </nav></header>        <div class="side-page" id="contentIframe">
+        </div>
+            <div class="container">
                 <header class="header-bloc">
                     <h1>Publications et communications</h1>
 <!--  -->
@@ -93,5 +95,6 @@
                 <p>Créé avec Pandoc et Make</p>
         <a href="/pages/colophon.html">Colophon</a>
     </div>
-</footer>    </body>
+</footer>        <script src="/js/script.js"></script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/src/pages/presentations.md b/src/pages/presentations.md
index 4bd43bf..6802f66 100644
--- a/src/pages/presentations.md
+++ b/src/pages/presentations.md
@@ -2,22 +2,6 @@
 title: Présentations
 ---
 
-- [13 juin 2024 - _In-silicium_ : Sur les traces de l'intimité du chercheur dans les publications scientifiques](/presentations/doctoriales24.html)
-
-```{=html}
-
-<iframe src="/presentations/doctoriales24.html"></iframe>
-```
-- [02 mai 2024 - Ce que les machines écrivent dans le texte](/presentations/cml_mai24.html)
-
-```{=html}
-
-<iframe src="/presentations/cml_mai24.html"></iframe>
-```
-
-- [26 janvier 2024 - Stylo, un éditeur pour les SHS](/presentations/stylo_mtp3_24.html)
-
-```{=html}
-
-<iframe src="/presentations/stylo_mtp3_24.html"></iframe>
-```
+- [13 juin 2024 - _In-silicium_ : Sur les traces de l'intimité du chercheur dans les publications scientifiques](/presentations/doctoriales24.html){.load-content}
+- [02 mai 2024 - Ce que les machines écrivent dans le texte](/presentations/cml_mai24.html){.load-content}
+- [26 janvier 2024 - Stylo, un éditeur pour les SHS](/presentations/stylo_mtp3_24.html){.load-content}
diff --git a/static/css/styles.css b/static/css/styles.css
index c18f08e..8ed60a7 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -33,6 +33,7 @@ img {
     grid-row: 2;
     background-color: rgb(255, 255, 255);
     border: 3px solid black;
+    height: fit-content;
 }
 
 .content {
@@ -149,6 +150,23 @@ footer a:hover, footer a:active {
     grid-row: 2;
 }
 
+.side-page.has-iframe {
+    position: -webkit-sticky;
+    position: sticky;
+    height: fit-content;
+    top: 0;
+    border: 3px solid black;
+    background-color: rgb(255, 255, 255);
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.side-page iframe {
+    width: 100%;
+    height: 350px;
+    border: 0;
+}
+
 .toc ul {
     list-style: none;
 }
diff --git a/static/js/script.js b/static/js/script.js
new file mode 100644
index 0000000..f388be4
--- /dev/null
+++ b/static/js/script.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Sélectionner tous les hyperliens avec la classe 'load-content'
+    const links = document.querySelectorAll('a.load-content');
+
+    // Ajouter un gestionnaire d'événements pour chaque lien
+    links.forEach(function(link) {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Empêcher le comportement par défaut du lien
+
+            const url = this.href; // Récupérer l'URL du lien
+
+            // Créer une nouvelle iframe
+            const iframe = document.createElement('iframe');
+            iframe.src = url;
+
+            // Vider la div 'contentDiv' et y ajouter la nouvelle iframe
+            const contentDiv = document.getElementById('contentIframe');
+            contentDiv.innerHTML = ''; // Effacer le contenu précédent
+            contentDiv.appendChild(iframe);
+            contentDiv.classList.add('has-iframe');
+        });
+    });
+});
\ No newline at end of file
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..a797545
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="${lang}" xml:lang="${lang}">
+    <head>
+        ${partials/head.html()}
+    </head>
+    <body>
+        ${partials/header.html()}
+        <div class="side-page" id="contentIframe">
+        </div>
+            <div class="container">
+${if(title)}
+                <header class="header-bloc">
+                    <h1>${title}</h1>
+<!-- ${if(subtitle)}
+                    <h2>${subtitle}</h2>
+${endif} -->
+${if(date)}
+                    <time>${date}</time>
+${endif}
+<!-- ${if(author)}
+                    <p>${author}</p>
+${endif} -->
+                </header>
+${endif}
+${if(body)}
+                <div class="content">
+${body}
+${if(refs)}
+                <h2>Références</h2>
+${refs}
+${endif}
+            </div>
+${endif}
+        </div>
+${partials/footer.html()}
+        <script src="/js/script.js"></script>
+    </body>
+</html>
\ No newline at end of file