reorganization and sample slides

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.

_quarto.yml

 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

environment.yml

-name: quarto-experiment
+name: quarto
 dependencies:
   - conda-forge::jupyter=1.0.0
   - conda-forge::pandas=2.2.2

img/README.md

+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>       |

index.qmd

+---
+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
+
+![](img/board.jpg){fig-alt="green circuit board"}
+
+## Single Image with Text
+
+Below is an image.
+
+![](img/drive.jpg){fig-alt="opened hard disk drive"}
+
+Above is an image.
+
+## Image Stack
+
+::: {.r-stack}
+:::: {.fragment .fade-in-then-out .preload}
+![](img/board.jpg){fig-alt="green circuit board"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/drive.jpg){fig-alt="opened hard disk drive"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/glasses.jpg){fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/network.jpg){fig-alt="blue network cables plugged into rack mount router"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/rack.jpg){fig-alt="rack mounted device controllers"}
+::::
+:::
+
+## Image Stack with Text
+
+Images below.
+
+::: {.r-stack}
+:::: {.fragment .fade-in-then-out .preload}
+![](img/board.jpg){fig-alt="green circuit board"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/drive.jpg){fig-alt="opened hard disk drive"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/glasses.jpg){fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/network.jpg){fig-alt="blue network cables plugged into rack mount router"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/rack.jpg){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%}
+![](img/glasses.jpg){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}
+![](img/board.jpg){fig-alt="green circuit board"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/drive.jpg){fig-alt="opened hard disk drive"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/glasses.jpg){fig-alt="blurred computer displays seen clearly through glasses on table"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/network.jpg){fig-alt="blue network cables plugged into rack mount router"}
+::::
+
+:::: {.fragment .fade-in-then-out}
+![](img/rack.jpg){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
+
+::::
+:::