chore(docs): document HTML custom templates (#357)

* chore(docs): document HTML custom templates Shows an example of custom template. TODO: - [ ] finish documentating; - [ ] add possibility to pass `-cargs` to Manim Slides' `convert` method when calling the Sphinx extension. Closes #356 * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * chore(docs): document changes and fix --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
jeertmans · Jan 23, 2024 · 7ba4772 · 7ba4772
1 parent 02a8173
commit 7ba4772
Show file tree

Hide file tree

Showing 8 changed files with 688 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   [#331](https://github.com/jeertmans/manim-slides/pull/331)
 - Created a Docker image, published on GitHub.
   [#355](https://github.com/jeertmans/manim-slides/pull/355)
+- Added `:template:` and `:config_options` options to
+  the Sphinx directive.
+  [#357](https://github.com/jeertmans/manim-slides/pull/357)
 
 (v5.1-modified)=
 ### Modified
@@ -49,6 +52,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   [#335](https://github.com/jeertmans/manim-slides/pull/335)
 - Changed build backend to PDM and reflected on docs.
   [#354](https://github.com/jeertmans/manim-slides/pull/354)
+- Documentated how to create and use a custom HTML template.
+  [#357](https://github.com/jeertmans/manim-slides/pull/357)
 
 ## [v5](https://github.com/jeertmans/manim-slides/compare/v4.16.0...v5.0.0)
 

diff --git a/docs/source/_static/template.diff b/docs/source/_static/template.diff
@@ -0,0 +1,101 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Head stuff -->
+  </head>
+
+  <body>
+    <!-- Slides stuff -->
+
+    <script>
+      <!-- RevealJS stuff -->
+    </script>
+
+    <!-- Add a clock to each section dynamically using JavaScript -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        var revealContainer = document.querySelector('.reveal');
+
+        // Append dynamic content to each section
+        var sections = revealContainer.querySelectorAll('.slides > section');
+        sections.forEach(function (section) {
+          // Create a new clock container
+          var clockContainer = document.createElement('div');
+          clockContainer.className = 'clock';
+
+          // Append the new clock container to the section
+          section.appendChild(clockContainer);
+        });
+
+        // Function to update the clock content
+        function updateClock() {
+          var now = new Date();
+          var hours = now.getHours();
+          var minutes = now.getMinutes();
+          var seconds = now.getSeconds();
+
+          // Format the time as HH:MM:SS
+          var timeString = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
+
+          // Update the content of all clock containers
+          var clockContainers = document.querySelectorAll('.clock');
+          clockContainers.forEach(function (container) {
+            container.innerText = timeString;
+          });
+        }
+
+        // Function to pad zero for single-digit numbers
+        function pad(number) {
+          return String(number).padStart(2, "0");
+        }
+
+        // Update the clock every second
+        setInterval(updateClock, 1000);
+
+        // Register a reveal.js event to update the clock on each slide change
+        Reveal.addEventListener('slidechanged', function (event) {
+          updateClock();
+        });
+
+        // Initial update
+        updateClock();
+      });
+    </script>
+
+    <!-- define the style of the clock -->
+    <style>
+      .clock {
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+        font-size: 24px;
+        font-family: "Arial", sans-serif;
+        color: #333;
+      }
+
+      /* control the relative position of the clock to the slides */
+      .reveal .slides > section.present, .reveal .slides > section > section.present {
+        min-height: 100% !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: center !important;
+        position: absolute !important;
+        top: 0 !important;
+      }
+      section > h1 {
+        position: absolute !important;
+        top: 0 !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        left: 0 !important;
+        right: 0 !important;
+      }
+
+      .print-pdf .reveal .slides > section.present, .print-pdf .reveal .slides > section > section.present {
+        min-height: 770px !important;
+        position: relative !important;
+      }
+    </style>
+
+  </body>
+</html>