add fig captions, simplify demo image

_freeze/demo/execute-results/html.json

@@ -1,7 +1,7 @@
 {
-  "hash": "1088a745449606fcf8927a940f9e1516",
+  "hash": "2def162349f6d494141457688bd978df",
   "result": {
-    "markdown": "---\ntitle: \"`.qmd` file for practice\"\n---\n\n\nThis `demo.qmd` file has [Markdown](https://quarto.org/docs/authoring/markdown-basics.html)-formatted text, examples for adding headers, hyperlinks, and inserting images with alt-text, and a Python code chunk.\n\n-   Headers are powerful in Quarto because they let you organize on the side of the page. In a Quarto site, headers let you share a specific section of a page by clicking on a header and copying the URL.\n-   Hyperlinking lets us cite our sources and inspirations and give credit.\n-   Python code in a `.qmd` file will be executed automatically.\n\nWe can all practice Markdown in this Quarto file. Make an edit, preview how it will look in the site (`quarto preview`), edit, repeat.\n\nOnly make changes to the section below under *your* name header (to prevent conflicts with other people's edits)\n\n## Ideas for contributions\n\n#### Headers\n\nWe can make headers using `## Name`, `### Name`, etc. Headers are powerful in Quarto because they let you organize your content. You can share a specific subsection of a page by copying its URL.\n\n#### Hyperlinks\n\nWe can make hyperlinks using the `[]()` pattern: you name the hyperlink in `[]` and put the URL in `()`. For example, here's a link to [Markdown Basics](https://quarto.org/docs/authoring/markdown-basics.html). Hyperlinking lets us cite and give credit to our sources, like the NASA Earthdata Cloud Cookbook ([Barrett et al.](https://nasa-openscapes.github.io/earthdata-cloud-cookbook/)).\n\n#### Images\n\nWe can include an image with the same `[]()` pattern, by adding a preceding exclamation point: `![]()`. The `[]` contain the caption (optional) and `()` contain the path to the image file.\n\n![The Openscapes logo](/images/openscapes_hex.png){alt=\"The Openscapes logo\" width=\"150\"}\n\nAdditional attributes like image size, alt text, and linking the image to a URL, are set inside `{}` in this example:\n\n![The Openscapes logo](/images/openscapes_hex.png){alt=\"The Openscapes logo\" fig-alt=\"Openscapes logo. A hexagonal shape with orange border, yellow background, the word openscapes in orange above a cartoon evoking a landscape of data plots\" width=\"150\"}\n\n#### Code\n\nWhen you **Render**, a document will be generated that includes both content and the output of embedded code. You can embed code like this:\n\n*TODO: day before clinic, make this Python code (don't add screenshot - fewer files to for folks to get distracted with, lighter weight repo)*\n\n\n::: {.cell}\n\n```{.r .cell-code}\n2 * 2\n```\n\n::: {.cell-output .cell-output-stdout}\n```\n[1] 4\n```\n:::\n:::\n\n\nYou can add options to executable code. The `echo: false` option disables the printing of code (only output is displayed).\n\n## Stefanie\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Alexis\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Andy\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Eric\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Guoqing\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Ian\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Jessica\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Juan\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Julie\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Katherine\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Kytt\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Luis\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Michele\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Navaneeth\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Rhys \n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Ritika\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Rupesh\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Roosevelt\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Scott\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n",
+    "markdown": "---\ntitle: \"`.qmd` file for practice\"\n---\n\n\nThis `demo.qmd` file has [Markdown](https://quarto.org/docs/authoring/markdown-basics.html)-formatted text, examples for adding headers, hyperlinks, and inserting images with alt-text, and a Python code chunk.\n\n-   Headers are powerful in Quarto because they let you organize on the side of the page. In a Quarto site, headers let you share a specific section of a page by clicking on a header and copying the URL.\n-   Hyperlinking lets us cite our sources and inspirations and give credit.\n-   Python code in a `.qmd` file will be executed automatically.\n\nWe can all practice Markdown in this Quarto file. Make an edit, preview how it will look in the site (`quarto preview`), edit, repeat.\n\nOnly make changes to the section below under *your* name header (to prevent conflicts with other people's edits)\n\n## Ideas for contributions\n\n#### Headers\n\nWe can make headers using `## Name`, `### Name`, etc. Headers are powerful in Quarto because they let you organize your content. You can share a specific subsection of a page by copying its URL.\n\n#### Hyperlinks\n\nWe can make hyperlinks using the `[]()` pattern: you name the hyperlink in `[]` and put the URL in `()`. For example, here's a link to [Markdown Basics](https://quarto.org/docs/authoring/markdown-basics.html). Hyperlinking lets us cite and give credit to our sources, like the NASA Earthdata Cloud Cookbook ([Barrett et al.](https://nasa-openscapes.github.io/earthdata-cloud-cookbook/)).\n\n#### Images\n\nWe can include an image with the same `[]()` pattern, by adding a preceding exclamation point: `![]()`. The `[]` contain the caption (optional) and `()` contain the path to the image file.\n\nAdditional attributes like image size, alt text, and linking the image to a URL, are set inside `{}` in this example:\n\n`![The Openscapes logo](/images/openscapes_hex.png){fig-alt=\"Openscapes logo. A hexagonal shape with orange border, yellow background, the word openscapes in orange above a cartoon evoking a landscape of data plots\" width=\"35%\"}`\n\n![The Openscapes logo](/images/openscapes_hex.png){fig-alt=\"Openscapes logo. A hexagonal shape with orange border, yellow background, the word openscapes in orange above a cartoon evoking a landscape of data plots\" width=\"35%\"}\n\n#### Code\n\nWhen you **Render**, a document will be generated that includes both content and the output of embedded code. You can embed code like this:\n\n*TODO: day before clinic, make this Python code (don't add screenshot - fewer files to for folks to get distracted with, lighter weight repo)*\n\n\n::: {.cell}\n\n```{.r .cell-code}\n2 * 2\n```\n\n::: {.cell-output .cell-output-stdout}\n```\n[1] 4\n```\n:::\n:::\n\n\nYou can add options to executable code. The `echo: false` option disables the printing of code (only output is displayed).\n\n## Stefanie\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Alexis\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Andy\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Eric\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Guoqing\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Ian\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Jessica\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Juan\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Julie\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Katherine\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Kytt\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Luis\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Michele\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Navaneeth\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Rhys \n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Ritika\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Rupesh\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Roosevelt\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n\n## Scott\n\nFor your first edit, you could fix this tpyo and preview how it will look in the site.\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"

demo.qmd

@@ -26,11 +26,11 @@ We can make hyperlinks using the `[]()` pattern: you name the hyperlink in `[]`
 
 We can include an image with the same `[]()` pattern, by adding a preceding exclamation point: `![]()`. The `[]` contain the caption (optional) and `()` contain the path to the image file.
 
-![The Openscapes logo](/images/openscapes_hex.png){alt="The Openscapes logo" width="150"}
-
 Additional attributes like image size, alt text, and linking the image to a URL, are set inside `{}` in this example:
 
-![The Openscapes logo](/images/openscapes_hex.png){alt="The Openscapes logo" fig-alt="Openscapes logo. A hexagonal shape with orange border, yellow background, the word openscapes in orange above a cartoon evoking a landscape of data plots" width="150"}
+`![The Openscapes logo](/images/openscapes_hex.png){fig-alt="Openscapes logo. A hexagonal shape with orange border, yellow background, the word openscapes in orange above a cartoon evoking a landscape of data plots" width="35%"}`
+
+![The Openscapes logo](/images/openscapes_hex.png){fig-alt="Openscapes logo. A hexagonal shape with orange border, yellow background, the word openscapes in orange above a cartoon evoking a landscape of data plots" width="35%"}
 
 #### Code
 

index.qmd

@@ -9,14 +9,12 @@ This book is an example of a Quarto website that is published via GitHub — Qua
 
 Quarto enables us to collaborate on documentation and tutorials — across Python and R languages and varied levels of coding expertise. It lets us share output in many ways, including websites. Importantly, it lets us write and share documentation/tutorials using the same tools we teach research teams for reproducible science.
 
-![](images/horst_quarto_schematic.png){fig-alt="3 part illustration left-to-right that starts with R, Python, Julia, Observable and more pointing to Quarto and then pointing to html, pdf, and word documents" fig-align="center" width="70%"}
+![Quarto enables contributions in R, Python, Observable, Julia, and more for outputs as html, PDF, Word, and more! Illustration by Allison Horst.](images/horst_quarto_schematic.png){fig-alt="3 part illustration left-to-right that starts with R, Python, Julia, Observable and more pointing to Quarto and then pointing to html, pdf, and word documents" fig-align="center" width="70%"}
 
 Quarto lets us build websites as a collection of files (`.qmd`, `.ipynb`, `.rmd` and others). Today we'll focus on Quarto's `.qmd` files, which are plain-text files that work nicely with GitHub workflows.
 
 The ability for Quarto to streamline collaboration has been so cool and important for **NASA Openscapes**, so this tutorial will enable you to contribute to the main [NASA Openscapes website](https://nasa-openscapes.github.io/) as well as the [NASA Earthdata Cloud Cookbook](https://nasa-openscapes.github.io/earthdata-cloud-cookbook/) (both made with Quarto+GitHub.)
 
-
-
 ## Our Plan today
 
 We will learn workflows with Quarto + GitHub for contributing to open source documentation. We'll cover this in 2 parts:
@@ -30,4 +28,3 @@ This requires some setup. We'll do this first, and discuss more as we go.
 ## Prerequisites
 
 **To begin**, you should have a GitHub account with access to the 2i2c Openscapes JupyterHub.
-