diff options
| -rw-r--r-- | Makefile | 5 | ||||
| -rw-r--r-- | docs/css/styles.css | 18 | ||||
| -rw-r--r-- | docs/js/script.js | 23 | ||||
| -rw-r--r-- | docs/pages/colophon.html | 7 | ||||
| -rw-r--r-- | docs/pages/cours.html | 7 | ||||
| -rw-r--r-- | docs/pages/presentations.html | 23 | ||||
| -rw-r--r-- | docs/pages/publications.html | 7 | ||||
| -rw-r--r-- | src/pages/presentations.md | 22 | ||||
| -rw-r--r-- | static/css/styles.css | 18 | ||||
| -rw-r--r-- | static/js/script.js | 23 | ||||
| -rw-r--r-- | templates/page.html | 38 |
11 files changed, 149 insertions, 42 deletions
@@ -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 |