revealjs/demo-hugo: checkpoint

Signed-off-by: lucasew <[email protected]>

Author: lucasew

revealjs/demo-hugo/content/demo.md

@@ -1,5 +1,5 @@
 ---
-title: Teste
+title: Demonstração das funcionalidades
 logo:
     src: https://blog-do-lucao.vercel.app/apple-touch-icon.png
     alt: Lucão
@@ -14,6 +14,7 @@ logo:
 - Tem que ser num formato mais padrão tipo PNG ou JPG senão o hugo reclama que não sabe lidar
 
 ----
+%auto-animate%
 
 ## Funciona código
 
@@ -27,6 +28,7 @@ public class Main {
 ```
 
 ---
+%auto-animate%
 
 ## Funciona código
 
@@ -70,3 +72,25 @@ pkgs.mkShell {
 ## Animações
 
 <p color="red">AAAA</p>
+
+---
+<style>
+img.block {
+width: 100px; height: 100px;
+margin: auto;
+}
+</style>
+
+%auto-animate%
+
+# Animações
+
+<img class="block" style="background-color: red"></img>
+
+---
+%auto-animate%
+
+# Animações
+
+<img class="block" style="background-color: blue; margin-top: 100px"></img>
+

revealjs/demo-hugo/layouts/partials/reveal-katex.html

@@ -17,8 +17,10 @@
 
 <script>
     (function () {
-        function render() {
-            renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}]});
+        async function render(event) {
+            requestAnimationFrame(() => {
+                renderMathInElement(event.currentSlide, {delimiters: [{left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}]});
+            })
         }
         Reveal.on('slidechanged', render)
         Reveal.on('ready', render)

revealjs/demo-hugo/layouts/partials/reveal-mermaid.html

@@ -14,7 +14,9 @@
             let processed = mermaidElem.getAttribute('data-processed');
             if (!processed){
                 // https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344
-                mermaid.init(undefined, mermaidElem);
+                requestAnimationFrame(() {
+                    mermaid.init(undefined, mermaidElem);
+                })
             }
         });
     };