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>
2025-08-06 06:12:56 +08:00 · 2024-01-23 11:07:36 +01:00
parent 02a8173ed1
commit 7ba47728ff
8 changed files with 688 additions and 4 deletions
--- 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>