Add revealjs demo

.github/workflows/publish-docs.yml

@@ -24,6 +24,11 @@ jobs:
         with:
           version: "pre-release"
 
+      - name: Add countdown shortcode
+        working-directory: ./examples/revealjs
+        run: |        
+          quarto add --no-prompt gadenbuie/countdown/quarto
+
       # Generate the documentation website
       - name: Render Documentation website
         uses: quarto-dev/quarto-actions/render@v2
@@ -36,6 +41,11 @@ jobs:
         with:
           path: "examples/readme/index.qmd"
 
+      - name: Render sample deployment RevealJS presentation template 
+        uses: quarto-dev/quarto-actions/render@v2
+        with:
+          path: "examples/revealjs/index.qmd"
+
       - name: Render test suite
         uses: quarto-dev/quarto-actions/render@v2
         with:
@@ -47,7 +57,8 @@ jobs:
           mkdir -p staging/{examples,tests} && \
           cp -rp docs/_site/* staging/ && \
           cp -rp tests/_site/* staging/tests/ && \
-          cp -rp examples/readme/ staging/examples/readme
+          cp -rp examples/readme/ staging/examples/readme && \
+          cp -rp examples/revealjs/ staging/examples/revealjs
 
       # Remove symlinks
       - name: Delete symlinks

examples/revealjs/.gitignore

@@ -0,0 +1 @@
+/.quarto/

examples/revealjs/_extensions/pyodide

@@ -0,0 +1 @@
+../../../_extensions/pyodide/

examples/revealjs/_quarto.yml

@@ -0,0 +1,2 @@
+project:
+  title: "index"

examples/revealjs/index.qmd

@@ -0,0 +1,74 @@
+---
+title: "{quarto-pyodide} Demo RevealJS Document"
+format: revealjs
+filters:
+  - pyodide
+---
+
+## Welcome
+
+Welcome to a demo RevealJS presentation that uses the [`quarto-pyodide`](https://github.com/coatless-quarto/pyodide) extension to generate interactive code cells with [Quarto](https://quarto.org) and [Pyodide](https://pyodide.org/en/stable/).
+
+Not the right template? Let's go back to the [documentation portal](../../)
+
+## Pyodide in RevealJS 
+
+This is a Pyodide-enabled code cell in a Quarto HTML document.
+
+```{pyodide-python}
+n = 5
+while n > 0:
+  print(n)
+  n = n - 1
+
+print('Blastoff!')
+```
+
+## matplotlib Graphing with Pyodide
+
+```{pyodide-python}
+import matplotlib.pyplot as plt
+import numpy as np
+
+x = np.linspace(0, 2*np.pi, 100)
+y = np.sin(x)
+plt.plot(x, y)
+plt.title('Sine wave')
+plt.show()
+```
+
+## quarto-{pyodide + countdown} 
+
+Pair code cells with a [countdown timer](https://github.com/gadenbuie/countdown/tree/main/quarto) to allow for practice
+
+{{< countdown 00:05 top = 0 >}}
+
+Fill in the following function to say hi!
+
+```{pyodide-python}
+def say_hello(name):
+  _________(f"Hello there {name}!")
+
+say_hello("quarto-pyodide")
+```
+
+
+## Keyboard Shortcuts
+
+- Run selected code using either:
+  - macOS: <kbd>⌘</kbd> + <kbd>↩/Return</kbd>
+  - Windows/Linux: <kbd>Ctrl</kbd> + <kbd>↩/Enter</kbd>
+- Run the entire code by clicking the "Run code" button or pressing <kbd>Shift</kbd>+<kbd>↩</kbd>. 
+
+```{pyodide-python}
+print("Hello quarto-pyodide RevealJS world!")
+
+[x**2 for x in range(0, 5)]
+
+3 + 5
+```
+
+## Fin
+
+Thanks for checking out the demo! Let's head back to
+the [documentation portal](../../).