New theme example

Mikroways · Dec 19, 2023 · 7bd2c41 · 7bd2c41
1 parent 270ce42
commit 7bd2c41
Show file tree

Hide file tree

Showing 5 changed files with 292 additions and 1 deletion.
diff --git a/example/demo.md b/example/demo.md
@@ -1,6 +1,12 @@
 ---
 title: Mikroways reveal.js theme demo
 highlightTheme: vs2015
+scripts:
+  - https://cdn.jsdelivr.net/gh/mikroways/[email protected]/plugin/mermaid/mermaid.min.js
+  - https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/asciinema-player.min.js
+  - example/js/script.js
+css:
+  - https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/asciinema-player.min.css
 revealOptions:
   transition: 'concave'
   transitionSpeed: 'slow'
@@ -90,7 +96,7 @@ with next column
 
 # Shadows
 
----
+----
 
 ## Text with shadow
 
@@ -117,3 +123,195 @@ Nice frog with shadow
 
 </div>
 </div>
+
+---
+<!-- .slide: class="dark-logo-center" -->
+
+# Asciinema
+
+----
+## Sample
+
+<asciinema
+  cast="images/sample.cast"
+  opts-autoplay="true"
+  opts-idle-time-limit="1"
+  opts-speed="3"
+  opts-rows="24"
+  opts-terminal-font-family="'Meslo Font', monospace"
+/>
+
+
+----
+
+## Asciinema integration
+
+Configure reveal-md to use scripts and css like this:
+
+<pre>
+<code class="yaml hljs" data-line-numbers="5,6,8" >
+title: Some title
+highlightTheme: vs2015
+scripts:
+  - https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/asciinema-player.min.js
+  - example/js/script.js
+css:
+  - https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle/asciinema-player.min.css
+...
+</code>
+</pre>
+
+> Note asciinema version  3.6.3 is used. But what is `js/script.js` ?
+
+----
+## What is js/script.js
+
+Loads asciinema on ready and when enter a slide, play asciinema if present:
+
+<pre>
+<code class="js hljs" >
+function snakeToCamel(str) {
+    return str.toLowerCase().replace(/([-_][a-z])/g, group =>
+          group
+            .toUpperCase()
+            .replace('-', '')
+            .replace('_', '')
+        );
+}
+
+function setAsciinema(event) {
+    const asciinemas = document.getElementsByTagName("asciinema");
+    for (let i=0; i < asciinemas.length; i++) {
+          let opts = {}
+          let attrs = asciinemas[i].getAttributeNames().filter(
+                  (n) => n.startsWith("opts-") );
+          for (let o=0; o < attrs.length; o++) {
+                  opts[snakeToCamel(attrs[o].replace(/^opts-/,''))] =
+                        asciinemas[i].getAttribute(attrs[o]);
+                }
+          asciinemas[i].playerObject = AsciinemaPlayer.create(
+                  asciinemas[i].getAttribute("cast"),
+                  asciinemas[i],
+                  opts
+                );
+        }
+};
+
+function playAscinema(event) {
+    const asciinemas = event.currentSlide.getElementsByTagName("asciinema");
+    for (let i=0; i < asciinemas.length; i++) {
+          if (asciinemas[i].playerObject) {
+                    asciinemas[i].playerObject.seek(0);
+                    asciinemas[i].playerObject.play();
+                }
+        }
+};
+
+
+Reveal.on('ready', setAsciinema);
+Reveal.on('slidechanged', playAscinema);
+
+</code>
+</pre>
+
+---
+<!-- .slide: class="dark-logo-center" -->
+
+# Mermaid support
+
+----
+
+## Git graphs
+
+<div class="mermaid">
+  <pre>
+    %%{init: { }}}%%
+    gitGraph
+      commit id: "Commit inicial"
+      branch develop
+      checkout develop
+      commit
+      commit
+      checkout main
+      merge develop id: "Merge"  tag: "0.1.0"
+      checkout develop
+      commit
+      commit
+  </pre>
+</div>
+
+----
+
+## Or mindmaps
+
+<div class="mermaid">
+  <pre>
+    %%{init: { }}}%%
+      mindmap
+        root((pod))
+          {{Container}}
+              Secret
+              ::icon(fa fa-key)
+              Configmap
+              ::icon(fa fa-file)
+              PersistentVolume
+              ::icon(fa fa-hdd)
+                  (PersistentVolumeClaim)
+          [Replicaset]
+            (Deployment)
+          (Statefulset)
+          (Daemonset)
+          (Job)
+            (Cronjob)
+          )Service(
+              )Ingress(
+  </pre>
+</div>
+
+----
+## Even timelines
+
+
+<div class="mermaid shadow">
+  <pre>
+    %%{init: { }}}%%
+    timeline
+      1979: chroot en Unix
+      2004: Solaris Containers
+      2005: Open VZ
+      2006: Process containers (cgroups)
+      2008: LXC
+  </pre>
+</div>
+
+> Note shadow is added
+
+----
+
+## Mermaid integration
+
+Configure reveal-md to use mermaid plugin
+
+<pre>
+<code class="yaml hljs" data-line-numbers="5,6" >
+title: Some title
+highlightTheme: vs2015
+scripts:
+  - https://cdn.jsdelivr.net/gh/mikroways/[email protected]/plugin/mermaid/mermaid.min.js
+  - example/js/script.js
+...
+</code>
+</pre>
+
+> Note mermaid-plugin version 2.1.0
+
+----
+## What is js/script.js
+
+As simple as
+
+<pre>
+<code class="js hljs">
+options.plugins.push(RevealMermaid);
+</code>
+</pre>
diff --git a/example/images/sample.cast b/example/images/sample.cast
@@ -0,0 +1,40 @@
+{"version": 2, "width": 95, "height": 47, "timestamp": 1703015997, "env": {"SHELL": "/bin/zsh", "TERM": "screen-256color"}}
+[0.204975, "o", "\u001b[0m\u001b[38;5;31m\u001b[49m\u001b[39m\u001b[23m\u001b[24m\u001b[1m\u001b[3m%\u001b[23m\u001b[1m\u001b[0m                                                                                              \r\u001b[0m\u001b[49m\u001b[39m\u001b[23m\u001b[24m\u001b[K"]
+[0.21005, "o", "\r\u001b[0m\u001b[23m\u001b[24m\u001b[J\u001b[0m\u001b[38;5;240m\u001b[49m\u001b[39m\r\n\u001bM\u001b[0m\u001b[49m\u001b[38;5;236m░▒▓\u001b[0m\u001b[38;5;236m\u001b[48;5;236m\u001b[38;5;180m car@latitude-car\u001b[0m\u001b[38;5;180m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;180m \u001b[0m\u001b[38;5;180m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;244m│\u001b[0m\u001b[38;5;244m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;255m  \u001b[0m\u001b[38;5;255m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;255m \u001b[0m\u001b[38;5;255m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;244m│\u001b[0m\u001b[38;5;244m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;31m   \u001b[1m\u001b[38;5;31m\u001b[48;5;236m\u001b[38;5;39mreveal.js-mikroways-theme\u001b[0m\u001b[38;5;39m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;31m\u001b[0m\u001b[38;5;31m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;31m \u001b[0m\u001b[38;5;31m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;244m│\u001b[0m\u001b[38;5;244m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;178m \u001b[0m\u001b[38;5;178m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;76m \u001b[0m\u001b[38;5;76m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;178m \u001b[38;5;76m main \u001b[38;5;178m!1 \u001b[38;5;39m?2\u001b[0m\u001b[38;5;39m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;178m \u001b[0m\u001b[38;5;178m\u001b[48;5;236m\u001b[49m\u001b[38;5;236m▓▒░\u001b[0m\u001b[38;5;236m\u001b[49m\u001b[39m\u001b[38;5;240m\r\n\u001b[0m\u001b[38;5;240m\u001b[49m\u001b[39m\u001b[0m\u001b[49m\u001b[38;5;76m❯\u001b[0m\u001b[38"]
+[0.21012, "o", ";5;76m\u001b[49m\u001b[38;5;76m\u001b[0m\u001b[38;5;76m\u001b[49m\u001b[30m\u001b[0m\u001b[30m\u001b[49m\u001b[39m \u001b[0m\u001b[49m\u001b[39m\u001b[K\u001b[90C\u001b[0m\u001b[49m\u001b[39m\u001b[38;5;240m─╯\u001b[39m\u001b[92D"]
+[0.211345, "o", "\u001b[?1h\u001b="]
+[0.211672, "o", "\u001b[34h\u001b[?25h"]
+[0.211827, "o", "\u001b[?2004h"]
+[0.910405, "o", "\u001b[4mn\u001b[24m"]
+[0.945146, "o", "\b\u001b[4mn\u001b[4mo\u001b[24m"]
+[1.015107, "o", "\b\b\u001b[4mn\u001b[4mo\u001b[4md\u001b[24m"]
+[1.064986, "o", "\b\b\b\u001b[24m\u001b[32mn\u001b[24m\u001b[32mo\u001b[24m\u001b[32md\u001b[32me\u001b[39m"]
+[1.454606, "o", "\b\b\b\b\u001b[1m\u001b[31mn\u001b[1m\u001b[31mo\u001b[1m\u001b[31md\u001b[1m\u001b[31me\u001b[1m\u001b[31m-\u001b[0m\u001b[39m"]
+[1.641905, "o", "\b\u001b[1m\u001b[31m-\u001b[1m\u001b[31ms\u001b[0m\u001b[39m"]
+[1.702749, "o", "\b\u001b[1m\u001b[31ms\u001b[1m\u001b[31ma\u001b[0m\u001b[39m"]
+[1.955771, "o", "\b\b\b\b\b\b\b\u001b[0m\u001b[39mn\u001b[0m\u001b[39mo\u001b[0m\u001b[39md\u001b[0m\u001b[39me\u001b[0m\u001b[39m-\u001b[0m\u001b[39ms\u001b[0m\u001b[39mass\u001b[1m \u001b[0m"]
+[3.18648, "o", "\u001b[10D\u001b[32mn\u001b[32mo\u001b[32md\u001b[32me\u001b[32m-\u001b[32ms\u001b[32ma\u001b[32ms\u001b[32ms\u001b[39m\u001b[0m \u001b[4mt\u001b[24m"]
+[3.330935, "o", "\b\u001b[4mt\u001b[4mh\u001b[24m"]
+[3.392222, "o", "\b\b\u001b[24mt\u001b[24mheme\u001b[1m/\u001b[0m"]
+[5.05699, "o", "\b\b\b\b\b\b\u001b[4mt\u001b[4mh\u001b[4me\u001b[4mm\u001b[4me\u001b[0m\u001b[4m/\u001b[4ms\u001b[24m"]
+[5.294396, "o", "\b\b\b\b\b\b\b\u001b[24mt\u001b[24mh\u001b[24me\u001b[24mm\u001b[24me\u001b[24m/\u001b[24msource\u001b[1m/\u001b[0m"]
+[5.6571, "o", "\u001b[13D\u001b[4mt\u001b[4mh\u001b[4me\u001b[4mm\u001b[4me\u001b[4m/\u001b[4ms\u001b[4mo\u001b[4mu\u001b[4mr\u001b[4mc\u001b[4me\u001b[0m\u001b[4m/\u001b[4mm\u001b[24m"]
+[5.702826, "o", "\b\u001b[4mm\u001b[4mi\u001b[24m"]
+[5.777857, "o", "\u001b[15D\u001b[24mt\u001b[24mh\u001b[24me\u001b[24mm\u001b[24me\u001b[24m/\u001b[24ms\u001b[24mo\u001b[24mu\u001b[24mr\u001b[24mc\u001b[24me\u001b[24m/\u001b[24mm\u001b[24mikroways.scss\u001b[1m \u001b[0m"]
+[6.914795, "o", "\u001b[28D\u001b[4mt\u001b[4mh\u001b[4me\u001b[4mm\u001b[4me\u001b[4m/\u001b[4ms\u001b[4mo\u001b[4mu\u001b[4mr\u001b[4mc\u001b[4me\u001b[4m/\u001b[4mm\u001b[4mi\u001b[4mk\u001b[4mr\u001b[4mo\u001b[4mw\u001b[4ma\u001b[4my\u001b[4ms\u001b[4m.\u001b[4ms\u001b[4mc\u001b[4ms\u001b[4ms\u001b[24m\u001b[0m \u001b[4mt\u001b[24m"]
+[7.064368, "o", "\b\u001b[4mt\u001b[4mh\u001b[24m"]
+[7.14336, "o", "\b\b\u001b[24mt\u001b[24mheme\u001b[1m/\u001b[0m"]
+[7.426419, "o", "\b\b\b\b\b\b\u001b[4mt\u001b[4mh\u001b[4me\u001b[4mm\u001b[4me\u001b[0m\u001b[4m/\u001b[4mm\u001b[24m"]
+[7.469623, "o", "\b\u001b[4mm\u001b[4mi\u001b[24m"]
+[7.596856, "o", "\u001b[8D\u001b[24mt\u001b[24mh\u001b[24me\u001b[24mm\u001b[24me\u001b[24m/\u001b[24mm\u001b[24mikroways.css\u001b[1m \u001b[0m"]
+[8.218918, "o", "\u001b[20D\u001b[4mt\u001b[4mh\u001b[4me\u001b[4mm\u001b[4me\u001b[4m/\u001b[4mm\u001b[4mi\u001b[4mk\u001b[4mr\u001b[4mo\u001b[4mw\u001b[4ma\u001b[4my\u001b[4ms\u001b[4m.\u001b[4mc\u001b[4ms\u001b[4ms\u001b[24m\u001b[0m \b\u001b[?1l\u001b>"]
+[8.220746, "o", "\u001b[?2004l\r\r\n"]
+[8.221339, "o", "\u001bknode-sass\u001b\\"]
+[8.561168, "o", "\u001b[32mRendering Complete, saving .css file...\u001b[39m\r\n"]
+[8.563755, "o", "\u001b[32mWrote CSS to /home/car/Trabajo/mikroways/cursos/themes/reveal.js-mikroways-theme/theme/mikroways.css\u001b[39m\r\n"]
+[8.57613, "o", "\u001b[1m\u001b[38;5;31m\u001b[48;5;236m\u001b[3m%\u001b[23m\u001b[1m\u001b[38;5;31m\u001b[48;5;236m\u001b[0m\u001b[38;5;31m\u001b[48;5;236m                                                                                              \r \r"]
+[8.579267, "o", "\u001bk..kroways-theme\u001b\\"]
+[8.58799, "o", "\r\u001b[0m\u001b[23m\u001b[24m\u001b[J\u001b[0m\u001b[38;5;240m\u001b[49m\u001b[39m\r\n\u001bM\u001b[0m\u001b[49m\u001b[38;5;236m░▒▓\u001b[0m\u001b[38;5;236m\u001b[48;5;236m\u001b[38;5;180m car@latitude-car\u001b[0m\u001b[38;5;180m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;180m \u001b[0m\u001b[38;5;180m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;244m│\u001b[0m\u001b[38;5;244m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;255m  \u001b[0m\u001b[38;5;255m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;255m \u001b[0m\u001b[38;5;255m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;244m│\u001b[0m\u001b[38;5;244m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;31m   \u001b[1m\u001b[38;5;31m\u001b[48;5;236m\u001b[38;5;39mreveal.js-mikroways-theme\u001b[0m\u001b[38;5;39m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;31m\u001b[0m\u001b[38;5;31m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;31m \u001b[0m\u001b[38;5;31m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;244m│\u001b[0m\u001b[38;5;244m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;178m \u001b[0m\u001b[38;5;178m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;76m \u001b[0m\u001b[38;5;76m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;178m \u001b[38;5;76m main \u001b[38;5;178m!1 \u001b[38;5;39m?2\u001b[0m\u001b[38;5;39m\u001b[48;5;236m\u001b[48;5;236m\u001b[38;5;178m \u001b[0m\u001b[38;5;178m\u001b[48;5;236m\u001b[49m\u001b[38;5;236m▓▒░\u001b[0m\u001b[38;5;236m\u001b[49m\u001b[39m\u001b[38;5;240m\r\n\u001b[0m\u001b[38;5;240m\u001b[49m\u001b[39m\u001b[0m\u001b[49m\u001b[38;5;76m❯\u001b[0m\u001b[38"]
+[8.588089, "o", ";5;76m\u001b[49m\u001b[38;5;76m\u001b[0m\u001b[38;5;76m\u001b[49m\u001b[30m\u001b[0m\u001b[30m\u001b[49m\u001b[39m \u001b[0m\u001b[49m\u001b[39m\u001b[K\u001b[90C\u001b[0m\u001b[49m\u001b[39m\u001b[38;5;240m─╯\u001b[39m\u001b[92D\u001b[?1h\u001b="]
+[8.588876, "o", "\u001b[?2004h"]
+[9.091937, "o", "\u001b[?2004l\r\r\n"]
diff --git a/example/js/script.js b/example/js/script.js
@@ -0,0 +1,42 @@
+function snakeToCamel(str) {
+    return str.toLowerCase().replace(/([-_][a-z])/g, group =>
+          group
+            .toUpperCase()
+            .replace('-', '')
+            .replace('_', '')
+        );
+}
+
+function setAsciinema(event) {
+    const asciinemas = document.getElementsByTagName("asciinema");
+    for (let i=0; i < asciinemas.length; i++) {
+          let opts = {}
+          let attrs = asciinemas[i].getAttributeNames().filter(
+                  (n) => n.startsWith("opts-") );
+          for (let o=0; o < attrs.length; o++) {
+                  opts[snakeToCamel(attrs[o].replace(/^opts-/,''))] =
+                        asciinemas[i].getAttribute(attrs[o]);
+                }
+          asciinemas[i].playerObject = AsciinemaPlayer.create(
+                  asciinemas[i].getAttribute("cast"),
+                  asciinemas[i],
+                  opts
+                );
+        }
+};
+
+function playAscinema(event) {
+    const asciinemas = event.currentSlide.getElementsByTagName("asciinema");
+    for (let i=0; i < asciinemas.length; i++) {
+          if (asciinemas[i].playerObject) {
+                    asciinemas[i].playerObject.seek(0);
+                    asciinemas[i].playerObject.play();
+                }
+        }
+};
+
+
+Reveal.on('ready', setAsciinema);
+Reveal.on('slidechanged', playAscinema);
+
+options.plugins.push(RevealMermaid);
diff --git a/theme/mikroways.css b/theme/mikroways.css
diff --git a/theme/source/mikroways.scss b/theme/source/mikroways.scss
@@ -228,4 +228,10 @@ $whiteLogo: 'iVBORw0KGgoAAAANSUhEUgAAAyAAAAEMCAMAAAALXyI+AAAA0GVYSWZJSSoACAAAAAo
   .small {
     font-size: 0.7em;
   }
+
+  pre code {
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
+  }
 }