@farberg/reveal-template 1.1.19 → 1.1.21

package/css/dhbw-print.css

@@ -12,5 +12,10 @@ credits {
 }
 
 .reveal .slides {
-	pointer-events: initial !important;	
+	pointer-events: initial !important;
+}
+
+/* In print, drop the Simplemenu bar entirely. */
+.menubar {
+  display: none !important;
 }

package/css/dhbw.css

@@ -509,61 +509,154 @@ tr>tr:first-of-type {
   border-top: 1px solid black !important;
 }
 
-.reveal .slide-number {
-  color: #4e565c;
-  z-index: 100;
-}
+/* ---------------------------------------------------------------------- */
+/* Bottom strip: Simplemenu menubar (left), attribution (right of it),    */
+/* slide number (far right) — share one thin lane, same grey baseline.    */
+/* ---------------------------------------------------------------------- */
 
-.attribution {
-  position: fixed !important;
-  bottom: 0 !important;
-  left: 0px !important;
-  font-size: 12px !important;
+:root {
+  --dhbw-strip-color: #4e565c;
+  --dhbw-strip-font-size: 12px;
+  --dhbw-strip-height: 20px;
+  --dhbw-strip-bottom: 6px;
 }
 
-.has-dark-background>.attribution {
-  color: #4e565c;
+.reveal .slide-number {
+  color: var(--dhbw-strip-color) !important;
+  background: none !important;
+  font-family: inherit !important;
+  font-size: var(--dhbw-strip-font-size) !important;
+  right: 8px !important;
+  bottom: var(--dhbw-strip-bottom) !important;
+  height: var(--dhbw-strip-height) !important;
+  line-height: var(--dhbw-strip-height) !important;
+  padding: 0 !important;
+  z-index: 100;
 }
 
-.has-dark-background>.attribution>a {
-  color: #4e565c !important;
+.reveal .slide-number a {
+  color: var(--dhbw-strip-color) !important;
+  opacity: 1 !important;
+  /* override Simplemenu's 0.33 dimming */
+  padding: 0 !important;
+  line-height: var(--dhbw-strip-height) !important;
 }
 
 credits {
   visibility: hidden;
 }
 
-/* Credits Dennis */
-
 attribution {
-  position: absolute !important;
-  /* display: block; */
-  display: table-cell !important;
-  vertical-align: middle !important;
-  right: 35px;
-  bottom: 8px;
-  height: 22px;
+  position: fixed !important;
+  display: block !important;
+  left: auto;
+  right: 70px;
+  /* leaves room for the slide-number on its right */
+  bottom: var(--dhbw-strip-bottom) !important;
+  height: var(--dhbw-strip-height) !important;
+  line-height: var(--dhbw-strip-height) !important;
   z-index: 200;
-  font-size: 12px;
+  font-size: var(--dhbw-strip-font-size) !important;
   text-align: right;
-  color: #4e565c;
-  background-color: rgba(0, 0, 0, 0.4);
+  color: var(--dhbw-strip-color) !important;
+  background-color: transparent !important;
+  padding: 0 !important;
 }
 
 attribution>span {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-  line-height: 22px !important;
+  padding: 0 !important;
+  line-height: var(--dhbw-strip-height) !important;
 }
 
-attribution a {
-  font-size: 12px;
-  color: #4e565c;
+attribution a,
+attribution a:visited {
+  font-size: var(--dhbw-strip-font-size);
+  color: var(--dhbw-strip-color);
+  line-height: var(--dhbw-strip-height);
 }
 
-attribution a:visited {
-  font-size: 12px;
-  color: #4e565c;
+.has-dark-background>.attribution,
+.has-dark-background>.attribution>a {
+  color: var(--dhbw-strip-color) !important;
+}
+
+/* Simplemenu's CSS is injected at plugin load (after dhbw.css), so we
+   need !important here to win specificity on layout props. */
+.menubar {
+  color: var(--dhbw-strip-color) !important;
+  background: transparent !important;
+  font-size: var(--dhbw-strip-font-size) !important;
+  height: var(--dhbw-strip-height) !important;
+  line-height: var(--dhbw-strip-height) !important;
+  bottom: var(--dhbw-strip-bottom) !important;
+  padding: 0 8px 0 15px !important;
+  /* left gutter for the menu */
+  justify-content: flex-start !important;
+  align-items: center !important;
+}
+
+.menubar:before,
+.menubar:after {
+  display: none !important;
+}
+
+.menubar>ul {
+  gap: 1.5em !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  justify-content: flex-start !important;
+  align-items: center !important;
+  height: var(--dhbw-strip-height) !important;
+  line-height: var(--dhbw-strip-height) !important;
+}
+
+.menubar>ul li {
+  display: inline-flex !important;
+  flex: 0 0 auto !important;
+  align-items: center !important;
+  height: var(--dhbw-strip-height) !important;
+  line-height: var(--dhbw-strip-height) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Every menu link state — active, inactive, hover, visited — uses the same
+   color, size, weight, padding and rendering, so nothing can shift the
+   baseline between states. Hover is the only visual change. */
+.menubar a,
+.menubar a:visited,
+.menubar a:active,
+.menubar>ul a,
+.menubar>ul li a.active,
+.menubar>ul li.active a {
+  display: inline-block !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
+  text-decoration: none !important;
+  font-size: var(--dhbw-strip-font-size) !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  color: var(--dhbw-strip-color) !important;
+  opacity: 1 !important;
+  height: var(--dhbw-strip-height) !important;
+  line-height: var(--dhbw-strip-height) !important;
+  vertical-align: baseline !important;
+  transform: none !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.menubar>ul a:hover {
+  color: #1a1a1a !important;
+}
+
+/* Active item: fake-bold via text-stroke so the glyph width stays identical
+   to the inactive state (font-weight changes would shift neighbour items). */
+.menubar>ul li.active>a,
+.menubar>ul li>a.active {
+  color: #1a1a1a !important;
+  -webkit-text-stroke: 0.4px currentColor !important;
 }
 
 .source-code-link {

package/docs/00 - Introduction.md

@@ -1,7 +1,14 @@
+<!-- .slide: data-state="hide-menubar" -->
 <div class="lecturetitle">Introduction</div>
 
 ---
-## Some Heading
+## Table of Contents
+<!-- .slide: data-state="hide-menubar" -->
+
+<ul class="menu"><ul>
+
+---
+## Mermaid Example
 
 ```mermaid
 graph LR
@@ -15,13 +22,16 @@ Some text
 - This is an example presentation
 - This is an example presentation
 
-Some text
-- This is an example presentation
-- This is an example presentation
-- This is an example presentation
+---
+## Asciinema Example
+
+<asciinema data-conf='{ "cols": 120, "rows": 25, "theme":"monokai", "autoPlay": true, "idleTimeLimit": 2, "terminalFontSize": "16px"}'
+        src="k8s-deployment.cast" />
+
 
 ---
-## Next Heading
+## Some Heading
+<!-- .slide: data-name="Some Heading" -->
 
 Some text
 - This is an example presentation
@@ -33,9 +43,11 @@ Some text
 - This is an example presentation
 - This is an example presentation
 
+<credits>This is a test for the credits section.</credits>
 
 ---
 ## Next Heading
+<!-- .slide: data-name="next-heading" -->
 
 Some text
 - This is an example presentation

package/docs/k8s-deployment.cast

@@ -0,0 +1,94 @@
+{"version": 2, "width": 130, "height": 26, "timestamp": 1584010118, "idle_time_limit": 2.0, "env": {"SHELL": "/usr/local/bin/bash", "TERM": "xterm-256color"}}
+[0.015142, "o", "\u001b[?1049h\u001b[22;0;0t\u001b[?1h\u001b=\u001b[H\u001b[2J\u001b[?12l\u001b[?25h\u001b[?1000l\u001b[?1002l\u001b[?1006l\u001b[?1005l\u001b[c\u001b(B\u001b[m\u001b[?12;25h\u001b[?12l\u001b[?25h\u001b[?1003l\u001b[?1006l\u001b[?2004l\u001b[1;1H\u001b[1;26r\u001b]112\u0007\u001b[21;17H\u001b[?1006h\u001b[?1002h"]
+[0.016013, "o", "\u001b[20;1H──────────────────────────────────────────────────────────────────\u001b[32m────────────────────────────────────────────────────────────────\u001b[?25l\u001b(B\u001b[m\u001b[1;1Hdennis@dppro:~$ \u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\u001b[2Bdennis@dppro:~$ \u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\u001b[21;17H\u001b[?12l\u001b[?25h"]
+[0.016133, "o", "\u001b(B\u001b[m\u001b[?12;25h\u001b[?12l\u001b[?25h\u001b[?1003l\u001b[?1006l\u001b[?2004l\u001b[1;1H\u001b[1;26r\u001b[21;17H\u001b[?1006h\u001b[?1002h\u001b[20;1H──────────────────────────────────────────────────────────────────\u001b[32m────────────────────────────────────────────────────────────────\u001b[?25l\u001b(B\u001b[m\u001b[1;1Hdennis@dppro:~$ \u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\u001b[2Bdennis@dppro:~$ \u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\u001b[21;17H\u001b[?12l\u001b[?25h"]
+[4.901951, "o", "watch -t kubectl get deployment"]
+[5.428202, "o", "\r\n"]
+[5.503769, "o", "\u001b[?25l\u001b[ANo resources found in default namespace.\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\u001b[129C\u001b[?12l\u001b[?25h"]
+[11.899887, "o", "\u001b[32m\u001b[20;1H──────────────────────────────────────────────────────────────────\u001b[39m────────────────────────────────────────────────────────────────\u001b(B\u001b[m\u001b[1;17H"]
+[12.619999, "o", "kubectl apply -f https://k8s.io/examples/controllers/nginx-deployment.yaml"]
+[13.263125, "o", "\r\n"]
+[13.772043, "o", "deployment.apps/nginx-deployment created\r\n"]
+[13.788565, "o", "\u001b[21dNAME               READY   UP-TO-DATE   AVAILABLE   AGE\r\nnginx-deployment   0/3     0\u001b[12C0\u001b[3;1H\u001b[22;53H0s\u001b[3;1H"]
+[13.801261, "o", "dennis@dppro:~$ "]
+[15.855941, "o", "\u001b[22;20H3\u001b[7C3\u001b[12C3\u001b[11C2\u001b[3;17H"]
+[17.924864, "o", "\u001b[22;53H4\u001b[3;17H"]
+[19.101477, "o", "kubectl get replicaset"]
+[19.886126, "o", "\r\n"]
+[19.956142, "o", "NAME                          DESIRED   CURRENT   READY   AGE\r\nnginx-deployment-54f57cf6bf   3         3         3       6s\r\n"]
+[19.976361, "o", "dennis@dppro:~$ "]
+[19.99448, "o", "\u001b[22;53H6\u001b[6;17H"]
+[22.068487, "o", "\u001b[22;53H8\u001b[6;17H"]
+[24.14261, "o", "\u001b[22;53H10s\u001b[6;17H"]
+[24.420512, "o", "kubectl get pods"]
+[24.992778, "o", "\r\n"]
+[25.265619, "o", "NAME                                READY   STATUS    RESTARTS   AGE\r\nnginx-deployment-54f57cf6bf-566ql   1/1     Running   0          11s\r\nnginx-deployment-54f57cf6bf-ch68t   1/1     Running   0          11s\r\nnginx-deployment-54f57cf6bf-skf22   1/1     Running   0          11s"]
+[25.265954, "o", "\r\n"]
+[25.289406, "o", "dennis@dppro:~$ "]
+[26.209228, "o", "\u001b[22;54H2\u001b[11;17H"]
+[28.278645, "o", "\u001b[22;54H4\u001b[11;17H"]
+[30.345443, "o", "\u001b[22;54H6\u001b[11;17H"]
+[32.411563, "o", "\u001b[22;54H8\u001b[11;17H"]
+[33.955998, "o", "kubectl set image deployment/nginx-deployment nginx=nginx:1.9.1 --record"]
+[34.481068, "o", "\u001b[22;53H20\u001b[11;89H"]
+[35.908815, "o", "\r\n"]
+[35.974804, "o", "deployment.apps/nginx-deployment image updated\r\n"]
+[35.998725, "o", "dennis@dppro:~$ "]
+[36.253922, "o", "kubectl set image deployment/nginx-deployment nginx=nginx:1.9.1 --record"]
+[36.447497, "o", "\u001b[25Gget pods\u001b[K"]
+[36.554676, "o", "\u001b[22;28H1\u001b[25C2\u001b[13;33H"]
+[37.3226, "o", "\r\n"]
+[37.386231, "o", "NAME                                READY   STATUS              RESTARTS   AGE\r\nnginx-deployment-54f57cf6bf-566ql   1/1     Running             0          23s\r\nnginx-deployment-54f57cf6bf-ch68t   1/1     Terminating         0          23s"]
+[37.386427, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[3Anginx-deployment-54f57cf6bf-skf22   1/1     Running             0          23s\r\nnginx-deployment-56f8998dbc-6s8xb   0/1     ContainerCreating   0          0s\r\nnginx-deployment-56f8998dbc-qctt9   1/1     Running             0          1s\u001b[1;26r\u001b[19;1H"]
+[37.405538, "o", "dennis@dppro:~$ "]
+[38.615804, "o", "\u001b[22;28H3\u001b[25C4\u001b[19;17H"]
+[40.048096, "o", "kubectl get pods"]
+[40.229233, "o", "\u001b[8Dset image deployment/nginx-deployment nginx=nginx:1.9.1 --record"]
+[40.608258, "o", "\u001b[25Gget pods\u001b[K"]
+[40.679253, "o", "\u001b[22;54H6\u001b[19;33H"]
+[41.059858, "o", "\u001b[4Dreplicaset"]
+[41.665878, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[41.729691, "o", "\u001b[1;19r\u001b[2S\u001b[17dNAME                          DESIRED   CURRENT   READY   AGE\r\nnginx-deployment-54f57cf6bf   0         0         0       28s\r\nnginx-deployment-56f8998dbc   3         3         \u001b[1;26r\u001b[19;51H\u001b[1;19r\u001b[19;1H\n\u001b[18;51H3       6s\u001b[1;26r\u001b[19;1H"]
+[41.747295, "o", "dennis@dppro:~$ "]
+[42.747218, "o", "\u001b[22;54H9\u001b[19;17H"]
+[44.812612, "o", "\u001b[22;53H31\u001b[19;17H"]
+[46.880279, "o", "\u001b[22;54H3\u001b[19;17H"]
+[48.954986, "o", "\u001b[22;54H5\u001b[19;17H"]
+[50.65087, "o", "kubectl scale deployment.v1.apps/nginx-deployment --replicas=2"]
+[51.028781, "o", "\u001b[22;54H7\u001b[19;79H"]
+[51.330372, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[51.405333, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[Adeployment.apps/nginx-deployment scaled\u001b[1;26r\u001b[19;1H"]
+[51.437681, "o", "dennis@dppro:~$ "]
+[51.712471, "o", "kubectl scale deployment.v1.apps/nginx-deployment --replicas=2"]
+[51.872287, "o", "\u001b[25Gget replicaset\u001b[K"]
+[52.297278, "o", "\u001b[10D\u001b[6Ppods"]
+[52.758532, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[52.822498, "o", "\u001b[1;19r\u001b[2S\u001b[17dNAME                                READY   STATUS        RESTARTS   AGE\r\nnginx-deployment-56f8998dbc-6s8xb   1/1     Running       0          16s\r\nnginx-deployment-56f8998dbc-gbkvj   0/1     Terminating   0\u001b[1;26r\u001b[19;60H\u001b[1;19r\u001b[2S\u001b[17;60H          15s\r\nnginx-deployment-56f8998dbc-qctt9   1/1     Running       0          17s\u001b[1;26r\u001b[19;1H"]
+[52.839425, "o", "dennis@dppro:~$ "]
+[53.102219, "o", "\u001b[22;20H2/2     2\u001b[12C2\u001b[12C9\u001b[19;17H"]
+[55.167659, "o", "\u001b[22;53H41\u001b[19;17H"]
+[57.230776, "o", "\u001b[22;54H3\u001b[19;17H"]
+[57.765264, "o", "kubectl get pods"]
+[58.10153, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[58.171476, "o", "\u001b[1;19r\u001b[2S\u001b[17dNAME                                READY   STATUS    RESTARTS   AGE\r\nnginx-deployment-56f8998dbc-6s8xb   1/1     Running   0          21s\r\nnginx-deployment-56f8998dbc-qctt9   1/1     Running   0          22s\u001b[1;26r\u001b[19;69H\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[58.192559, "o", "dennis@dppro:~$ "]
+[59.301196, "o", "\u001b[22;54H5\u001b[19;17H"]
+[59.880721, "o", "kubectl get pods"]
+[60.419891, "o", "\u001b[8Dscale deployment.v1.apps/nginx-deployment --replicas=2"]
+[60.850326, "o", "\u001b[25Gget replicaset\u001b[K"]
+[61.369231, "o", "\u001b[22;54H7\u001b[19;39H"]
+[61.409873, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[61.482126, "o", "\u001b[1;19r\u001b[3S\u001b[16dNAME                          DESIRED   CURRENT   READY   AGE\r\nnginx-deployment-54f57cf6bf   0         0         0       47s\r\nnginx-deployment-56f8998dbc   2         2         2       25s\u001b[1;26r\u001b[19;1H"]
+[61.482302, "o", "\u001b[32m\r\n──────────────────────────────────────────────────────────────────\u001b[39m────────────────────────────────────────────────────────────────\u001b[?25l\u001b(B\u001b[m\u001b[1;1HNAME                          DESIRED   CURRENT   READY   AGE\u001b[K\r\nnginx-deployment-54f57cf6bf   0         0         0       28s\u001b[K\r\nnginx-deployment-56f8998dbc   3         3         3       6s\u001b[K\r\ndennis@dppro:~$ kubectl scale deployment.v1.apps/nginx-deployment --replicas=2\u001b[K\r\ndeployment.apps/nginx-deployment scaled\u001b[K\r\ndennis@dppro:~$ kubectl get pods\u001b[K\r\nNAME                                READY   STATUS        RESTARTS   AGE\u001b[K\r\nnginx-deployment-56f8998dbc-6s8xb   1/1     Running       0          16s\u001b[K\r\nnginx-deployment-56f8998dbc-gbkvj   0/1     Terminating   0          15s\u001b[K\r\nnginx-deploy"]
+[61.482398, "o", "ment-56f8998dbc-qctt9   1/1     Running       0          17s\u001b[K\r\ndennis@dppro:~$ kubectl get pods\u001b[K\r\nNAME                                READY   STATUS    RESTARTS   AGE\u001b[K\r\nnginx-deployment-56f8998dbc-6s8xb   1/1     Running   0          21s\u001b[K\r\nnginx-deployment-56f8998dbc-qctt9   1/1     Running   0          22s\u001b[K\r\ndennis@dppro:~$ kubectl get replicaset\u001b[K\r\nNAME                          DESIRED   CURRENT   READY   AGE\u001b[K\r\nnginx-deployment-54f57cf6bf   0         0         0       47s\u001b[K\r\nnginx-deployment-56f8998dbc   2         2         2       25s\u001b[K\r\n\u001b[K\u001b[2BNAME               READY   UP-TO-DATE   AVAILABLE   AGE\u001b[K\r\nnginx-deployment   2/2     2\u001b[12X\u001b[12C2\u001b[11X\u001b[11C47s\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\r\n\u001b[K\u001b[7A\u001b[?12l\u001b[?25h"]
+[61.503534, "o", "dennis@dppro:~$ "]
+[62.726195, "o", "kubectl get replicaset"]
+[62.997892, "o", "\u001b[10D\u001b[6Ppods"]
+[63.438894, "o", "\u001b[22;54H9\u001b[19;33H"]
+[64.144609, "o", "\u001b[1;19r\u001b[19;1H\n\u001b[1;26r\u001b[19;1H"]
+[64.205435, "o", "\u001b[1;19r\u001b[2S\u001b[17dNAME                                READY   STATUS    RESTARTS   AGE\r\nnginx-deployment-56f8998dbc-6s8xb   1/1     Running   0          27s\r\nnginx-deployment-56f8998dbc-qctt9   1/1     Running   0          \u001b[1;26r\u001b[19;66H\u001b[1;19r\u001b[19;1H\n\u001b[18;66H28s"]
+[64.205618, "o", "\u001b[1;26r\u001b[19;1H"]
+[64.225166, "o", "dennis@dppro:~$ "]
+[65.503262, "o", "\u001b[22;53H51\u001b[19;17H"]
+[67.57642, "o", "\u001b[22;54H3\u001b[19;17H"]
+[67.845157, "o", "\u001b[1;26r\u001b(B\u001b[m\u001b[?1l\u001b>\u001b[H\u001b[2J\u001b]112\u0007\u001b[?12l\u001b[?25h\u001b[?1000l\u001b[?1002l\u001b[?1006l\u001b[?1005l\u001b[?1049l\u001b[23;0;0t"]

package/docs/local-dev.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -8,13 +9,27 @@
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, minimal-ui">
 
+	<!--
+		Local-dev variant using an import map so the JS imports the package by its
+		bare specifier ("@farberg/reveal-template/init-reveal.js") rather than a
+		relative path. This mirrors how a bundler (Vite, Rollup) resolves it, and
+		makes migration to a bundler a no-op for this file.
+
+		The import map remaps the bare prefix to "../" (the repo root, since
+		this HTML lives in docs/). basePath stays "../" because that's where
+		node_modules lives relative to this document.
+	-->
+	<script type="importmap">
+	{
+		"imports": {
+			"@farberg/reveal-template/": "../"
+		}
+	}
+	</script>
 	<script type="module">
-		import { initReveal } from '../init-reveal.js'
+		import { initReveal } from '@farberg/reveal-template/init-reveal.js'
 		initReveal({
-			jsPrefixPath: "../",
-			cssPrefixPath: "../",
-			cssThemePrefixPath: "../",
-			revealPath: "../node_modules/reveal.js/",
+			basePath: "../",
 			verbose: true
 		});
 	</script>
@@ -23,10 +38,6 @@
 <body>
 	<div class="reveal">
 		<div class="slides">
-			<section data-markdown>
-				<textarea data-template>
-				</textarea>
-			</section>
 		</div>
 	</div>
 </body>

package/docs/npm.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -7,17 +8,23 @@
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, minimal-ui">
 
-	<link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
-	<link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/zenburn.css">
-	<link rel="stylesheet" href="node_modules/@farberg/reveal-template/css/dhbw.css" id="theme">
+	<!--
+		In a real slides project that installs @farberg/reveal-template via npm,
+		your HTML sits next to node_modules/ and the boilerplate is just:
 
+			<script type="module">
+				import { initReveal } from './node_modules/@farberg/reveal-template/init-reveal.js'
+				initReveal()
+			</script>
+
+		The example below mirrors that, but inside this repo: init-reveal.js is
+		one directory up (../init-reveal.js) and so is node_modules (basePath: "../").
+		Stylesheets are added by init-reveal.js; no <link> tags needed here.
+	-->
 	<script type="module">
 		import { initReveal } from '../init-reveal.js'
 		initReveal({
-			jsPrefixPath: "../",
-			cssPrefixPath: "../",
-			cssThemePrefixPath: "../",
-			revealPath: "../node_modules/reveal.js/",
+			basePath: "../",
 			verbose: true
 		});
 	</script>

package/init-reveal.js

@@ -11,47 +11,75 @@ import DirTreePlugin from './plugins/reveal-plugin-dir-tree.js';
 import PrefixUrlPlugin from './plugins/reveal-plugin-prefix-with-base-url.js';
 import AsciinemaPlugin from './plugins/reveal-plugin-asciinema.js';
 
-const defaultOptions = {
-	revealOptions: {},
-	revealPath: "../../reveal.js/",
-	jsPrefixPath: "",
-	cssPrefixPath: "",
-	cssThemePrefixPath: "node_modules/@farberg/reveal-template/",
-	slidesDestinationElement: document.querySelector("body div.reveal div.slides"),
-	indexDocument: "00 - Introduction.md",
-	verbose: false
+// All third-party paths below are written as bare-package specifiers
+// (e.g. "reveal.js/dist/reveal.mjs"). At runtime they are resolved to
+// `${basePath}node_modules/${pkgPath}`. When migrating to a bundler
+// (Vite, etc.), these same strings can be used directly as import
+// specifiers — drop the toUrl() prefixing and they Just Work.
+
+const revealEsmModules = [
+	'reveal.js/dist/reveal.mjs', // must be first
+	'reveal.js/dist/plugin/markdown.mjs',
+	'reveal.js/dist/plugin/highlight.mjs',
+	'reveal.js/dist/plugin/search.mjs',
+	'reveal.js/dist/plugin/notes.mjs',
+	'reveal.js/dist/plugin/math.mjs',
+	'reveal.js/dist/plugin/zoom.mjs'
+]
+
+// Third-party ESM deps loaded dynamically via import(). Awaited in parallel.
+// `isPlugin: true` means the module's default export is a Reveal plugin and
+// gets registered automatically; otherwise it's a library injected into a
+// Dennis-plugin factory (see buildDennisPlugins).
+const esmDeps = {
+	qrCreator: { path: 'qr-creator/dist/qr-creator.es6.min.js' },
+	fflate: { path: 'fflate/esm/browser.js' },
+	asciinemaPlayer: { path: 'asciinema-player/dist/index.js' },
+	revealMermaid: { path: 'reveal.js-mermaid-plugin/plugin/mermaid/mermaid.esm.js', isPlugin: true },
+	simplemenu: { path: 'reveal.js-simplemenu/plugin/simplemenu/simplemenu.esm.js', isPlugin: true }
 }
 
+// Classic-script deps that publish themselves on `window` and have no ESM build.
+// These are awaited via the script `load` event so their globals are defined
+// before Reveal.initialize is called.
 const externalJsLibs = [
-	'node_modules/easyqrcodejs/dist/easy.qrcode.min.js',
-	'node_modules/file-saver/dist/FileSaver.min.js',
-	'node_modules/jszip/dist/jszip.min.js',
-	'node_modules/asciinema-player/dist/bundle/asciinema-player.min.js',
-	'node_modules/reveal.js-plugins/customcontrols/plugin.js',
-	'node_modules/reveal.js-plugins/chalkboard/plugin.js',
-	'node_modules/@fortawesome/fontawesome-free/js/all.min.js',
-	'node_modules/reveal.js-mermaid-plugin/plugin/mermaid/mermaid.js'
+	'reveal.js-plugins/customcontrols/plugin.js', // → window.RevealCustomControls
+	'reveal.js-plugins/chalkboard/plugin.js'      // → window.RevealChalkboard
 ]
 
 const extraStylesheets = [
-	{ href: 'node_modules/reveal.js/dist/reveal.css' },
-	{ href: 'node_modules/reveal.js/dist/plugin/highlight/zenburn.css' },
-	{ href: 'node_modules/asciinema-player/dist/bundle/asciinema-player.css' },
-	{ href: 'node_modules/reveal.js-plugins/customcontrols/style.css' },
-	{ href: 'node_modules/reveal.js-plugins/chalkboard/style.css' },
-	{ href: 'node_modules/@fortawesome/fontawesome-free/css/all.min.css' },
+	{ href: 'reveal.js/dist/reveal.css' },
+	{ href: 'reveal.js/dist/plugin/highlight/zenburn.css' },
+	{ href: 'asciinema-player/dist/bundle/asciinema-player.css' },
+	{ href: 'reveal.js-plugins/customcontrols/style.css' },
+	{ href: 'reveal.js-plugins/chalkboard/style.css' },
+	{ href: '@fortawesome/fontawesome-free/css/all.min.css' }
 ]
 
-const extraThemeCssStylesheets = [
-	{ href: 'css/dhbw.css', id: 'theme' }
-
+// Package-owned assets (theme + print CSS) live inside this package, NOT under
+// node_modules. They're always co-located with init-reveal.js — in local dev
+// that's the repo root, in an npm install it's node_modules/@farberg/reveal-template/.
+// Resolving against import.meta.url handles both cases identically and is the
+// standard bundler-friendly pattern for package assets.
+const defaultThemeCss = [
+	{ href: new URL('./css/dhbw.css', import.meta.url).href, id: 'theme' }
 ]
 
-const defaultDennisPlugins = [
-	ShowCodeSnippets, ShowToc, ShowAttribution, ShowQrCode, ShowTitle,
-	ModifyFontSize, ShowHTMLExample, ToggleSolutionsPlugin, DirTreePlugin,
-	PrefixUrlPlugin, AsciinemaPlugin
-]
+const printStylesheet = new URL('./css/dhbw-print.css', import.meta.url).href
+
+const defaultOptions = {
+	revealOptions: {},
+	// Path prefix to the directory containing node_modules/, relative to the HTML.
+	// Examples: "" (HTML next to node_modules), "../" (HTML one level down).
+	basePath: "",
+	// Theme stylesheets. Defaults to this package's dhbw.css (resolved against
+	// import.meta.url so it works in both local-dev and npm-install layouts).
+	// Override with absolute or document-relative URLs to swap themes.
+	themeCss: defaultThemeCss,
+	slidesDestinationElement: document.querySelector("body div.reveal div.slides"),
+	indexDocument: "00 - Introduction.md",
+	verbose: false
+}
 
 const defaultRevealOptions = {
 	embedded: false,
@@ -60,7 +88,7 @@ const defaultRevealOptions = {
 	// Display a presentation progress bar
 	progress: true,
 	// Display the page number of the current slide
-	slideNumber: true,
+	slideNumber: "c/t",
 	// Push each slide change to the browser history
 	history: true,
 	// none/fade/slide/convex/concave/zoom
@@ -92,6 +120,13 @@ const defaultRevealOptions = {
 			{ color: 'rgba(100,100,100,0.6)' },
 		]
 	},
+	simplemenu: {
+		flat: true,
+		barhtml: {
+			header: "",
+			footer: "<div class='menubar bottom'><ul class='menu'></ul></div>"
+		}
+	},
 	keyboard: {
 		33: function () { Reveal.left(); }, // Don't go up using the presenter
 		34: function () { Reveal.right(); }, // Don't go down using the presenter
@@ -119,81 +154,108 @@ const defaultRevealOptions = {
 			secondaryColor: '#5c6971',
 			secondaryTextColor: '#000'
 		},
-		sequence: { mirrorActors: false, useMaxWidth: true },
-		flowchart: { useMaxWidth: true, padding: 6 }
+		sequence: {
+			mirrorActors: false,
+			useMaxWidth: true,
+			boxMargin: 15,
+			actorMargin: 60,
+			messageMargin: 45,
+			noteMargin: 15
+		},
+		flowchart: {
+			useMaxWidth: true,
+			htmlLabels: true,
+			curve: 'basis',
+			padding: 20,
+			nodeSpacing: 70,
+			rankSpacing: 90,
+			subGraphTitleMargin: { top: 8, bottom: 8 }
+		}
 	},
 
 	// Leave here
 	plugins: []
 }
 
-async function addPrintStylesheetIfUrlContainsPrintPdf() {
-	// If the query includes 'print-pdf', include the PDF print sheet
-	if (window.location.search.match(/print-pdf/gi)) {
-		console.log("Print version requested");
+// Resolve a bare-package path against the configured basePath, and
+// absolutize against document.baseURI so the result works identically
+// for DOM tag URLs (resolved vs document) and dynamic import()
+// (resolved vs the importing module URL).
+function toUrl(basePath, pkgPath) {
+	return new URL(`${basePath}node_modules/${pkgPath}`, document.baseURI).href
+}
 
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.type = 'text/css';
-		link.href = 'node_modules/@farberg/reveal-template/css/dhbw-print.css';
-		document.getElementsByTagName('head')[0].appendChild(link);
-	}
+async function addPrintStylesheetIfUrlContainsPrintPdf(options) {
+	if (!window.location.search.match(/print-pdf/gi)) return
+
+	console.log("Print version requested")
+	const link = document.createElement('link')
+	link.rel = 'stylesheet'
+	link.type = 'text/css'
+	link.href = printStylesheet
+	document.head.appendChild(link)
 }
 
 // Resolve when window has finished loading
 function windowOnLoadPromise() {
-	return new Promise((resolve, reject) => {
-		window.addEventListener('load', () => resolve())
-	})
+	return new Promise(resolve => window.addEventListener('load', () => resolve()))
 }
 
-// Load reveal and its plugins
+// Load reveal core + bundled plugins
 function loadRevealAndPlugins(options) {
-	const imports = [
-		"dist/reveal.mjs" /*must be the first one*/,
-		"dist/plugin/markdown.mjs",
-		"dist/plugin/highlight.mjs",
-		"dist/plugin/search.mjs",
-		"dist/plugin/notes.mjs",
-		"dist/plugin/math.mjs",
-		"dist/plugin/zoom.mjs"
-	]
-
 	if (options.verbose)
-		console.log("Importing the following plugins: ", imports)
+		console.log("Importing reveal modules: ", revealEsmModules)
 
-	return Promise.all(imports.map(i => import(options.revealPath + i)))
+	return Promise.all(revealEsmModules.map(p => import(toUrl(options.basePath, p))))
 }
 
-// Add js tags to the header and resolve
-async function addJsDependencies(options, externalJsLibs) {
-	for (let file of externalJsLibs) {
-		const script = document.createElement('script');
-		script.src = options.jsPrefixPath + file;
-		document.head.appendChild(script);
+// Dynamically import each third-party ESM dep. Returns an object keyed by the
+// same names as `esmDeps`, mapped to the imported module namespace.
+// Dynamically import each esmDep in parallel. Returns:
+//   { deps: { [name]: module }, plugins: [defaultExports of isPlugin entries] }
+async function loadEsmDeps(options) {
+	const loaded = await Promise.all(
+		Object.entries(esmDeps).map(async ([key, meta]) => {
+			const mod = await import(toUrl(options.basePath, meta.path))
+			return { key, mod, meta }
+		})
+	)
+	return {
+		deps: Object.fromEntries(loaded.map(({ key, mod }) => [key, mod])),
+		plugins: loaded.filter(({ meta }) => meta.isPlugin).map(({ mod }) => mod.default)
 	}
 }
 
-// Add CSSs tags to the header and resolve
-async function addCssDependencies(options, cssFiles, themeCssFiles) {
+// Inject classic <script> tags and await each one's load event so dependent
+// globals (window.RevealChalkboard, etc.) are defined before Reveal init.
+function addJsDependencies(options) {
+	return Promise.all(externalJsLibs.map(pkgPath => new Promise((resolve, reject) => {
+		const script = document.createElement('script')
+		script.src = toUrl(options.basePath, pkgPath)
+		script.onload = () => resolve()
+		script.onerror = () => reject(new Error(`Failed to load ${script.src}`))
+		document.head.appendChild(script)
+	})))
+}
+
+// Add <link rel="stylesheet"> tags for each CSS file
+function addCssDependencies(options) {
 	function addCssElement(href, id) {
-		const cssEl = document.createElement('link');
+		const cssEl = document.createElement('link')
 		cssEl.rel = "stylesheet"
 		cssEl.href = href
-		if (id)
-			cssEl.id = id
-
-		document.head.appendChild(cssEl);
+		if (id) cssEl.id = id
+		document.head.appendChild(cssEl)
 	}
 
-	for (let css of cssFiles) {
-		addCssElement(options.cssPrefixPath + css.href, css.id)
-	}
-
-	for (let css of themeCssFiles) {
-		addCssElement(options.cssThemePrefixPath + css.href, css.id)
-	}
+	for (const css of extraStylesheets)
+		addCssElement(toUrl(options.basePath, css.href), css.id)
 
+	// Theme CSS hrefs are used as-is. Defaults are absolute URLs (resolved via
+	// import.meta.url so they work in both local-dev and npm-install layouts).
+	// User overrides pass document-relative or absolute URLs directly.
+	for (const css of options.themeCss)
+		addCssElement(css.href, css.id)
 }
 
 function getDocumentToLoadOrRedirectToIndexDocument(options) {
@@ -221,6 +283,24 @@ function addMarkdownSectionToPresentation(doc, options) {
 	options.slidesDestinationElement.appendChild(mdel)
 }
 
+// Build the Dennis-plugins array, injecting ESM deps into the factories that
+// need them. Plugins that take no deps stay as static factory imports.
+function buildDennisPlugins(deps) {
+	return [
+		ShowCodeSnippets,
+		ShowToc,
+		ShowAttribution,
+		ShowQrCode(deps.qrCreator.default),
+		ShowTitle,
+		ModifyFontSize,
+		ShowHTMLExample,
+		ToggleSolutionsPlugin,
+		DirTreePlugin(deps.fflate),
+		PrefixUrlPlugin,
+		AsciinemaPlugin(deps.asciinemaPlayer.create)
+	]
+}
+
 export function initReveal(opts) {
 	// Generate options and include defaults (later sources' properties overwrite earlier ones)
 	const options = Object.assign({}, defaultOptions, opts)
@@ -228,19 +308,22 @@ export function initReveal(opts) {
 	// Load dependencies and then initialize Reveal
 	Promise.all([
 		loadRevealAndPlugins(options),
-		addJsDependencies(options, externalJsLibs),
-		addCssDependencies(options, extraStylesheets, extraThemeCssStylesheets),
-		addPrintStylesheetIfUrlContainsPrintPdf(),
+		loadEsmDeps(options),
+		addJsDependencies(options),
+		addCssDependencies(options),
+		addPrintStylesheetIfUrlContainsPrintPdf(options),
 		windowOnLoadPromise()
 	]).then(async values => {
-		//Get the first element from the array, this is the Reveal module
-		const modules = values[0].map(m => m.default)
-		const Reveal = modules.shift();
+		const [revealModules, { deps, plugins: esmPlugins }] = values
+
+		// First entry from reveal modules is Reveal itself
+		const modules = revealModules.map(m => m.default)
+		const Reveal = modules.shift()
 
-		//Make it globally available
+		// Make it globally available
 		window.Reveal = Reveal
 
-		//Add markdown doc to presentation
+		// Add markdown doc to presentation
 		const doc = getDocumentToLoadOrRedirectToIndexDocument(options)
 
 		if (doc) {
@@ -252,11 +335,11 @@ export function initReveal(opts) {
 			//Add plugins
 			finalOptions.plugins = [
 				...modules,
-				...defaultDennisPlugins,
+				...buildDennisPlugins(deps),
+				...esmPlugins,
 				...finalOptions.plugins,
-				RevealMermaid,
-				RevealChalkboard,
-				RevealCustomControls
+				window.RevealChalkboard,
+				window.RevealCustomControls
 			]
 
 			if (options.verbose)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farberg/reveal-template",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "homepage": "https://github.com/pfisterer/reveal-template",
   "description": "Reveal.js template for Dennis' lectures",
   "main": "index.js",
@@ -18,15 +18,15 @@
     "@fortawesome/fontawesome-free": "^7.2.0",
     "asciinema-player": "^3.15.1",
     "connect": "^3.7.0",
-    "easyqrcodejs": "^4.6.2",
-    "file-saver": "^2.0.5",
-    "jszip": "^3.10.1",
-    "mermaid": "^11.14.0",
+    "fflate": "^0.8.3",
+    "mermaid": "^11.15.0",
     "pdf-merger-js": "^5.1.2",
-    "puppeteer": "^24.42.0",
+    "puppeteer": "^25.0.2",
+    "qr-creator": "^1.0.0",
     "reveal.js": "^6.0.1",
     "reveal.js-mermaid-plugin": "^11.12.3",
     "reveal.js-plugins": "^4.6.0",
+    "reveal.js-simplemenu": "^2.0.3",
     "serve-static": "^2.2.1"
   }
 }

package/plugins/reveal-plugin-asciinema.js

@@ -1,11 +1,9 @@
-function initSlide(slide) {
+function initSlide(asciinemaCreate, slide) {
 	let players = []
 
 	let asciinemaElements = slide.getElementsByTagName("asciinema")
 
 	for (let el of asciinemaElements) {
-		//console.log("Found asciinema element: ", el)
-
 		//Make element invisible
 		el.style.display = "none"
 
@@ -16,8 +14,7 @@ function initSlide(slide) {
 
 		div.setAttribute('data-farberg-asciinema', 'true')
 
-		//console.log("Playing", source, "with options", conf)
-		players.push(AsciinemaPlayer.create(source, div, JSON.parse(conf)))
+		players.push(asciinemaCreate(source, div, JSON.parse(conf)))
 
 		el.parentNode.insertBefore(div, el.nextSibling)
 	}
@@ -38,7 +35,7 @@ function destroyPlayer(slide, players) {
 	players.forEach(player => player.dispose())
 }
 
-export default () => {
+export default (asciinemaCreate) => {
 
 	return {
 		id: 'asciinema',
@@ -46,13 +43,13 @@ export default () => {
 			deck.on('ready', () => {
 				let currentPlayers = undefined
 
-				currentPlayers = initSlide(deck.getCurrentSlide())
+				currentPlayers = initSlide(asciinemaCreate, deck.getCurrentSlide())
 
 				deck.addEventListener('slidechanged', function (event) {
 					if (event.previousSlide)
 						destroyPlayer(event.previousSlide, currentPlayers)
 
-					currentPlayers = initSlide(event.currentSlide)
+					currentPlayers = initSlide(asciinemaCreate, event.currentSlide)
 				})
 			})
 		}

package/plugins/reveal-plugin-dir-tree.js

@@ -14,7 +14,7 @@ code/k8s-demo-app/package.json
 </pre>
 */
 
-const dir_tree = {
+const dirTreeFactory = ({ zip, strToU8 }) => ({
 	id: 'dir_tree',
 	init: (deck) => {
 
@@ -244,6 +244,17 @@ const dir_tree = {
 			return tree;
 		}
 
+		function downloadBlob(blob, filename) {
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = filename;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
+		}
+
 		function download(files, zipName) {
 			Promise.all(files.map(f => fetch(f, { credentials: 'include' })))
 				.then(responses => {
@@ -252,9 +263,12 @@ const dir_tree = {
 						return;
 					}
 					return Promise.all(responses.map(r => r.text())).then(values => {
-						const zip = new JSZip();
-						values.forEach((text, i) => zip.file(files[i], text));
-						zip.generateAsync({ type: 'blob' }).then(blob => saveAs(blob, zipName));
+						const entries = {};
+						values.forEach((text, i) => { entries[files[i]] = strToU8(text); });
+						zip(entries, (err, data) => {
+							if (err) { console.error('zip failed', err); return; }
+							downloadBlob(new Blob([data], { type: 'application/zip' }), zipName);
+						});
 					});
 				});
 		}
@@ -378,6 +392,6 @@ const dir_tree = {
 			}
 		});
 	}
-}
+})
 
-export default dir_tree;
+export default dirTreeFactory;

package/plugins/reveal-plugin-show-qr-code.js

@@ -19,20 +19,19 @@
 */
 
 
-function showLinkToSlidesAndQrCode(deck, url) {
+function showLinkToSlidesAndQrCode(QrCreator, deck, url) {
 	if (url === undefined)
 		return
 
 	let qrElements = deck.getSlidesElement().getElementsByClassName('qrcodeforslides')
 	for (let qrel of qrElements) {
 
-		new QRCode(qrel, {
+		QrCreator.render({
 			text: url,
-			width: 500,
-			height: 500,
-		});
+			size: 500,
+		}, qrel);
 
-		console.log("QR Code for slides generated", qrel, url)
+		//console.log("QR Code for slides generated", qrel, url)
 	}
 
 	let urlElements = deck.getSlidesElement().getElementsByClassName('urlforslides')
@@ -43,7 +42,7 @@ function showLinkToSlidesAndQrCode(deck, url) {
 
 }
 
-export default () => {
+export default (QrCreator) => {
 	return {
 		id: 'show_qr_code',
 		init: (deck) => {
@@ -60,7 +59,7 @@ export default () => {
 							return res.json();
 						})
 						.then(json => {
-							if (json) showLinkToSlidesAndQrCode(deck, json.homepage)
+							if (json) showLinkToSlidesAndQrCode(QrCreator, deck, json.homepage)
 						})
 						.catch(err => console.log("Error fetching info json", err))
 				else

package/scripts/generate_toc.js

@@ -17,6 +17,7 @@ let md_files = fs.readdirSync(".")
 	.filter(file => path.extname(file).toLowerCase() === ".md")
 	.filter(file => !path.basename(file, ".md").startsWith("__"))
 	.filter(file => path.basename(file, ".md") !== "README")
+	.filter(file => path.basename(file, ".md") !== "CLAUDE")
 
 let generateTable = md_files.map(file => file.match(structuredNameRegexp)).reduce((a, b) => a && b, true)