diff --git a/README.md b/README.md
index 1714680c21d88559f75507b95cf5004a00b9fda9..3fed9ec320a7ee4e8973add70636ee4f67e060f7 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,23 @@
1. `decktape reveal _output/quarto.html _output/quarto.pdf --screenshots-size=1280x720 --fragments=disable` or any other size in px. This takes awhile.
+## How to use Shiny
+
+1. Install `R`: <https://www.r-project.org/>
+1. Open RGui or use the R REPL at the terminal.
+1. `install.packages("rmarkdown")`
+1. `install.packages("reticulate")`
+1. `install.packages("shiny")`
+1. Any other packages you need for the code you're using. This example repo needs the following.
+ - `install.packages("ggplot2")`
+
+### VSCode Integration
+
+1. Install R extension `REditorSupport.r`
+1. Open RGui or use the R REPL at the terminal.
+1. `install.packages("languageserver")` for linting, formatting, etc.
+1. `install.packages("httpgd")` for plotting.
+
## TODO
- [ ] Finish syntax highlighting.
diff --git a/_quarto.yml b/_quarto.yml
index 4360d5518fabe8ed813b444bd76a082a3c8e20e7..a132635dec222faa3ea95787b301b7688dc2a92f 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -1,38 +1,44 @@
project:
output-dir: _output
render:
- - quarto.qmd
+ - index.qmd
execute:
echo: true
format:
revealjs:
- width: 1280
- height: 720
- revealjs-plugins:
- - rStackFix
- auto-stretch: false
+ # CREATION METADATA
author:
name: Research Computing
affilitation: UAB
- date: today
- date-format: YYYY-MM-DD
copyright: "© University of Alabama at Birmingham"
+ date: today # default date
+ date-format: YYYY-MM-DD
+ # OPTIONS - CONTROLS
+ controls: true
+ controls-layout: bottom-right
+ controls-back-arrows: faded
+ # OPTIONS - FEATURES
+ code-annotation: select
title-slide-attributes:
data-align: left
- highlight-style: theme/uab-rc.theme
+ #
+ # DEVELOPER ONLY
+ width: 1280
+ height: 720
+ auto-stretch: false
+ history: true
menu: false
progress: true
- history: true
- code-annotation: select
- controls: true
- controls-layout: bottom-right
- controls-back-arrows: faded
+ revealjs-plugins:
+ - rStackFix
+ # DEVELOPER ONLY - STYLE AND THEME
+ highlight-style: runtime/theme/uab-rc.theme # code highlighting
css:
- - theme/uab-rc.css
- - theme/fix-r-stack-hack.css
- include-after-body:
- - includes/footer.html
+ - runtime/theme/uab-rc.css # uab theming
+ - runtime/theme/fix-r-stack-hack.css # fixes r-stack div
include-in-header:
- - includes/head.html
+ - runtime/includes/head.html
+ include-after-body:
+ - runtime/includes/footer.html
diff --git a/environment.yml b/environment.yml
index 02b879cfa0da268e8ee57b4e33b3959ba81157cc..91b5a2f138315a62ed5e1c5abfa303e104997ce9 100644
--- a/environment.yml
+++ b/environment.yml
@@ -1,4 +1,4 @@
-name: quarto-experiment
+name: quarto
dependencies:
- conda-forge::jupyter=1.0.0
- conda-forge::pandas=2.2.2
diff --git a/img/README.md b/img/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..731b33b9c624e9e51bd6354c0bcf7b5bcda77776
--- /dev/null
+++ b/img/README.md
@@ -0,0 +1,13 @@
+Images are from <https://pexels.com>.
+
+Original license page of the website: <https://www.pexels.com/license/>
+
+Images used:
+
+| Short Name | Name | URL |
+| ---------- | ----------------------------------- | ------------------------------------------------------------------------- |
+| board | Green Circuit Board | <https://www.pexels.com/photo/green-circuit-board-343457> |
+| drive | Black Internal Hdd on Black Surface | <https://www.pexels.com/photo/black-internal-hdd-on-black-surface-117729> |
+| glasses | Data Codes through Eyeglasses | <https://www.pexels.com/photo/data-codes-through-eyeglasses-577585> |
+| network | Cables Connected to Ethernet Ports | <https://www.pexels.com/photo/cables-connected-to-ethernet-ports-2881232> |
+| rack | Close Up Photo of Mining Rig | <https://www.pexels.com/photo/close-up-photo-of-mining-rig-1148820> |
diff --git a/img/board.jpg b/img/board.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ff94e739260beea74c6383d09631206c2d980d57
Binary files /dev/null and b/img/board.jpg differ
diff --git a/img/drive.jpg b/img/drive.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3d855e3048fe26cdc3b52eb63aeacd8d224f833a
Binary files /dev/null and b/img/drive.jpg differ
diff --git a/img/glasses.jpg b/img/glasses.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1f56bcafe5658497b701f30d1349ddbf3bc58d28
Binary files /dev/null and b/img/glasses.jpg differ
diff --git a/img/network.jpg b/img/network.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0a5bfcc975695aad4bdbaabf01f3326052591419
Binary files /dev/null and b/img/network.jpg differ
diff --git a/img/rack.jpg b/img/rack.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..617626e803078d13dc57afbf7cae413e1f3e08c8
Binary files /dev/null and b/img/rack.jpg differ
diff --git a/index.qmd b/index.qmd
new file mode 100644
index 0000000000000000000000000000000000000000..cb63bc290cede30c1db5ed891a00eb8d00c9966e
--- /dev/null
+++ b/index.qmd
@@ -0,0 +1,208 @@
+---
+title: Example Slides
+date: today # override default "today" date by replacing with, e.g., 2024-10-08
+---
+
+## Headings
+
+### H3 Heading
+
+#### H4 Heading
+
+##### H5 Heading
+
+###### H6 Heading
+
+## Text
+
+Here is a paragraph.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi risus turpis, sodales ut rhoncus sed, tempor in urna. Nulla eget ligula malesuada, ultricies eros id, ultrices lectus. Cras aliquet massa vel dui euismod sodales. Fusce eu ullamcorper eros, nec ultricies justo. Maecenas vel nunc rhoncus, placerat ex et, accumsan metus. Donec a egestas lectus, et lacinia odio. Curabitur vestibulum risus eget urna elementum elementum. Vestibulum maximus ut nulla vitae viverra. Phasellus laoreet odio hendrerit, pellentesque elit non, dapibus ante.
+
+## Big Text
+
+::: {.r-fit-text}
+:::
+
+## Direct Code Example
+
+```{python}
+print("Hello World!")
+```
+
+## Included Code Example - Python
+
+```{python}
+{{< include src/code-example.py >}}
+```
+
+## Interative Iris Dataset - Plotly
+
+<!-- The following block must be included for presentations with interactive plotly code. This block only needs to be included once in the presentation, before the first time interactive code is used. The `#| echo: false` prevents the block from being rendered in the final output. -->
+
+```{python}
+#| echo: false
+import plotly.io as pio
+pio.renderers.default = "plotly_mimetype+notebook_connected"
+```
+
+<!-- Rendered interactive element -->
+
+```{python}
+#| code-fold: true
+{{< include src/plotly-example.py >}}
+```
+
+## Ordered List
+
+1. First item
+1. Second item
+1. Third item
+
+## Unordered List
+
+- An item
+- Another item
+- Yet another item
+
+## Table
+
+| Name | Count | Color |
+| :------- | ----: | :---: |
+| Physics | 2 | Red |
+| Oak Tree | 17 | Green |
+| Ideation | 5 | Blue |
+
+## Single Image
+
+{fig-alt="green circuit board"}
+
+## Single Image with Text
+
+Below is an image.
+
+{fig-alt="opened hard disk drive"}
+
+Above is an image.
+
+## Image Stack
+
+::: {.r-stack}
+:::: {.fragment .fade-in-then-out .preload}
+{fig-alt="green circuit board"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="opened hard disk drive"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="blue network cables plugged into rack mount router"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="rack mounted device controllers"}
+::::
+:::
+
+## Image Stack with Text
+
+Images below.
+
+::: {.r-stack}
+:::: {.fragment .fade-in-then-out .preload}
+{fig-alt="green circuit board"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="opened hard disk drive"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="blue network cables plugged into rack mount router"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="rack mounted device controllers"}
+::::
+:::
+
+Images above.
+
+## Two Column - Text - Text
+
+::: {.columns}
+:::: {.column width=50%}
+
+- Left item
+- Another left item
+- Final left item
+
+::::
+
+:::: {.column width=50%}
+
+- Right item
+- Another right item
+- Final right item
+
+::::
+:::
+
+## Two Column - Single Image - Text
+
+::: {.columns}
+:::: {.column width=50%}
+{fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.column width=50%}
+
+- Something related to the image
+- Something else related to the image
+- Another thing related to the image
+
+::::
+:::
+
+## Two Column - Image Stack - Text
+
+::: {.columns}
+:::: {.column width=50%}
+:::: {.fragment .fade-in-then-out .preload}
+{fig-alt="green circuit board"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="opened hard disk drive"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="blue network cables plugged into rack mount router"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+{fig-alt="rack mounted device controllers"}
+::::
+::::
+
+:::: {.column width=50%}
+
+- Something related to the image
+- Something else related to the image
+- Another thing related to the image
+
+::::
+:::
diff --git a/includes/footer.html b/runtime/includes/footer.html
similarity index 100%
rename from includes/footer.html
rename to runtime/includes/footer.html
diff --git a/includes/head.html b/runtime/includes/head.html
similarity index 100%
rename from includes/head.html
rename to runtime/includes/head.html
diff --git a/includes/title.html b/runtime/includes/title.html
similarity index 100%
rename from includes/title.html
rename to runtime/includes/title.html
diff --git a/theme/fix-r-stack-hack.css b/runtime/theme/fix-r-stack-hack.css
similarity index 100%
rename from theme/fix-r-stack-hack.css
rename to runtime/theme/fix-r-stack-hack.css
diff --git a/theme/uab-rc.css b/runtime/theme/uab-rc.css
similarity index 100%
rename from theme/uab-rc.css
rename to runtime/theme/uab-rc.css
diff --git a/theme/uab-rc.theme b/runtime/theme/uab-rc.theme
similarity index 100%
rename from theme/uab-rc.theme
rename to runtime/theme/uab-rc.theme