Skip to content

Commit 7ba4772

Browse files
jeertmanspre-commit-ci[bot]
jeertmans
and
pre-commit-ci[bot]
authored
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>
1 parent 02a8173 commit 7ba4772

File tree

8 files changed

+688
-4
lines changed

8 files changed

+688
-4
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
3232
[#331](https://github.com/jeertmans/manim-slides/pull/331)
3333
- Created a Docker image, published on GitHub.
3434
[#355](https://github.com/jeertmans/manim-slides/pull/355)
35+
- Added `:template:` and `:config_options` options to
36+
the Sphinx directive.
37+
[#357](https://github.com/jeertmans/manim-slides/pull/357)
3538

3639
(v5.1-modified)=
3740
### Modified
@@ -49,6 +52,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
4952
[#335](https://github.com/jeertmans/manim-slides/pull/335)
5053
- Changed build backend to PDM and reflected on docs.
5154
[#354](https://github.com/jeertmans/manim-slides/pull/354)
55+
- Documentated how to create and use a custom HTML template.
56+
[#357](https://github.com/jeertmans/manim-slides/pull/357)
5257

5358
## [v5](https://github.com/jeertmans/manim-slides/compare/v4.16.0...v5.0.0)
5459

‎docs/source/_static/template.diff

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<!-- Head stuff -->
5+
</head>
6+
7+
<body>
8+
<!-- Slides stuff -->
9+
10+
<script>
11+
<!-- RevealJS stuff -->
12+
</script>
13+
14+
<!-- Add a clock to each section dynamically using JavaScript -->
15+
<script>
16+
document.addEventListener('DOMContentLoaded', function () {
17+
var revealContainer = document.querySelector('.reveal');
18+
19+
// Append dynamic content to each section
20+
var sections = revealContainer.querySelectorAll('.slides > section');
21+
sections.forEach(function (section) {
22+
// Create a new clock container
23+
var clockContainer = document.createElement('div');
24+
clockContainer.className = 'clock';
25+
26+
// Append the new clock container to the section
27+
section.appendChild(clockContainer);
28+
});
29+
30+
// Function to update the clock content
31+
function updateClock() {
32+
var now = new Date();
33+
var hours = now.getHours();
34+
var minutes = now.getMinutes();
35+
var seconds = now.getSeconds();
36+
37+
// Format the time as HH:MM:SS
38+
var timeString = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
39+
40+
// Update the content of all clock containers
41+
var clockContainers = document.querySelectorAll('.clock');
42+
clockContainers.forEach(function (container) {
43+
container.innerText = timeString;
44+
});
45+
}
46+
47+
// Function to pad zero for single-digit numbers
48+
function pad(number) {
49+
return String(number).padStart(2, "0");
50+
}
51+
52+
// Update the clock every second
53+
setInterval(updateClock, 1000);
54+
55+
// Register a reveal.js event to update the clock on each slide change
56+
Reveal.addEventListener('slidechanged', function (event) {
57+
updateClock();
58+
});
59+
60+
// Initial update
61+
updateClock();
62+
});
63+
</script>
64+
65+
<!-- define the style of the clock -->
66+
<style>
67+
.clock {
68+
position: fixed;
69+
bottom: 10px;
70+
left: 10px;
71+
font-size: 24px;
72+
font-family: "Arial", sans-serif;
73+
color: #333;
74+
}
75+
76+
/* control the relative position of the clock to the slides */
77+
.reveal .slides > section.present, .reveal .slides > section > section.present {
78+
min-height: 100% !important;
79+
display: flex !important;
80+
flex-direction: column !important;
81+
justify-content: center !important;
82+
position: absolute !important;
83+
top: 0 !important;
84+
}
85+
section > h1 {
86+
position: absolute !important;
87+
top: 0 !important;
88+
margin-left: auto !important;
89+
margin-right: auto !important;
90+
left: 0 !important;
91+
right: 0 !important;
92+
}
93+
94+
.print-pdf .reveal .slides > section.present, .print-pdf .reveal .slides > section > section.present {
95+
min-height: 770px !important;
96+
position: relative !important;
97+
}
98+
</style>
99+
100+
</body>
101+
</html>

0 commit comments

Comments
 (0)