Merge pull request #14 from Openscapes/part2

Add initial Part 2 text and screenshots

_freeze/lessons/demo/execute-results/html.json

@@ -1,8 +1,8 @@
 {
-  "hash": "e2b8dc7268110cabdbda0c461f5e0d75",
+  "hash": "8e025b84a8a826d468ca12847c41dce8",
   "result": {
     "engine": "knitr",
-    "markdown": "---\ntitle: \"`demo.qmd` aka Quarto Practice\"\n---\n\n\nQuarto enables you to weave together content and executable code into a finished document.\n\nThis `demo.qmd` file has an Python code chunks, Markdown-formatted text, and examples for adding images and hyperlinks.\n\nTODO: edit this file to contain the content listed below\n\n### Edit and preview a demo.qmd file\n\n1.  Edit a .qmd page (uses demo.qmd file that has markdown for text, add hyperlink, add image, run Python code)\n\n    1.   Headers\n\n        1.  Headers are powerful in Quarto because they let you organize on the side of the page. They let you share a specific section of a page by copying the URL\n\n    2.  hyperlink something (cite the Cookbook and hyperlink it)\n\n        1.  Hyperlinking is done like this; lets you cite and give credit\n\n    3.  inspect this image with alt-txt\n\n    4.  Python code\n\n        1.  manage echo, run\n\n## Task: Edit a `.qmd` page\n\nTODO: Edit down to what we need.\n\nNow let's practice Markdown and commit an edit to this file.\n\nThis file is written in Markdown, which formats text on the web. To see the Markdown that results in the following formatting, click the pencil icon to edit, or click 'Raw' to inspect it. For example, with Markdown:\n\nWe can make words **bold** or *italic*.\n\n### We can make headers.\n\nWe can make lists – *note that lists need an empty line before list items!*\n\n1.  bananas\n2.  tamales\n3.  cakes\n\nWe can make hyperlinks in [Markdown](https://quarto.org/docs/authoring/markdown-basics.html) using the `[]()` pattern: you put words to hyperlink in `[]` and the URL in `()`. For example:\n\n> [This twitter thread](https://twitter.com/allison_horst/status/1287772985630191617) describes the palmerpenguins R package. Learn more on the [palmerpenguins webpage](https://allisonhorst.github.io/palmerpenguins).\n\nWe can make an indented quote block with the `>` symbol, as in the example above.\n\nWe can include an image with the same `[]()` pattern, by adding a preceding exclamation point: `![]()`. For 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=\"250\"}](https://openscapes.org/)\n\n*Note how we can add alt text for the image, manage the image size, and link the image to a URL*\n\n:::{.callout-note}\nexample callout notes and their different types are so valuable\n:::\n\n\n\n## Running Code\n\nWhen you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:\n\nYou can add options to executable code like this\n\nTODO: 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::: {.cell-output .cell-output-stdout}\n\n```\n[1] 4\n```\n\n\n:::\n:::\n\n\nThe `echo: false` option disables the printing of code (only output is displayed).\n\n\nYour turn! Change or add something in Markdown and commit and push to GitHub.\n",
+    "markdown": "---\ntitle: \"`demo.qmd` aka Quarto Practice\"\n---\n\n\nQuarto enables you to weave together content and executable code into a finished document.\n\nThis `demo.qmd` file has Markdown-formatted text, examples for adding hyperlinks and inserting images with alt-text, and a Python code chunk.\n\n## Edit and preview a demo.qmd file\n\n-   Headers. Headers are powerful in Quarto because they let you organize on the side of the page. They let you share a specific section of a page by copying the URL\n-   hyperlink something (cite the Cookbook and hyperlink it). Hyperlinking is done like this; lets you cite and give credit\n-   inspect this image with alt-txt\n-   Python code. manage echo, run\n\n## Task 1a: Edit a `.qmd` page\n\n*TODO: Edit down to what we need, duplicated under each name header*\n\n::: callout-note\nOnly make changes to the section under your name header (to prevent conflicts at a later stage)\n:::\n\nNow let's practice Markdown in this Quarto file and commit an edit to this file.\n\n### Stefanie\n\nYour first edit? Fix this tpyo.\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 and `()` contain the path to the image file. Other attributes like image size, alt text, and a hyperlink, are also set 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=\"150\"}](https://openscapes.org/)\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::: {.cell-output .cell-output-stdout}\n\n```\n[1] 4\n```\n\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### Julie\n\nFix this tpyo.\n\n### Andy\n\nFix this tpyo.\n\n## Your turn!\n\nChange or add something to this file under your Name header and save the file.\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"

lessons/demo.qmd

@@ -4,78 +4,64 @@ title: "`demo.qmd` aka Quarto Practice"
 
 Quarto enables you to weave together content and executable code into a finished document.
 
-This `demo.qmd` file has an Python code chunks, Markdown-formatted text, and examples for adding images and hyperlinks.
+This `demo.qmd` file has Markdown-formatted text, examples for adding hyperlinks and inserting images with alt-text, and a Python code chunk.
 
-TODO: edit this file to contain the content listed below
+## Edit and preview a demo.qmd file
 
-### Edit and preview a demo.qmd file
+-   Headers. Headers are powerful in Quarto because they let you organize on the side of the page. They let you share a specific section of a page by copying the URL
+-   hyperlink something (cite the Cookbook and hyperlink it). Hyperlinking is done like this; lets you cite and give credit
+-   inspect this image with alt-txt
+-   Python code. manage echo, run
 
-1.  Edit a .qmd page (uses demo.qmd file that has markdown for text, add hyperlink, add image, run Python code)
+## Task 1a: Edit a `.qmd` page
 
-    1.   Headers
+*TODO: Edit down to what we need, duplicated under each name header*
 
-        1.  Headers are powerful in Quarto because they let you organize on the side of the page. They let you share a specific section of a page by copying the URL
-
-    2.  hyperlink something (cite the Cookbook and hyperlink it)
-
-        1.  Hyperlinking is done like this; lets you cite and give credit
-
-    3.  inspect this image with alt-txt
-
-    4.  Python code
-
-        1.  manage echo, run
-
-## Task: Edit a `.qmd` page
-
-TODO: Edit down to what we need.
-
-Now let's practice Markdown and commit an edit to this file.
-
-This file is written in Markdown, which formats text on the web. To see the Markdown that results in the following formatting, click the pencil icon to edit, or click 'Raw' to inspect it. For example, with Markdown:
-
-We can make words **bold** or *italic*.
-
-### We can make headers.
-
-We can make lists – *note that lists need an empty line before list items!*
-
-1.  bananas
-2.  tamales
-3.  cakes
+::: callout-note
+Only make changes to the section under your name header (to prevent conflicts at a later stage)
+:::
 
-We can make hyperlinks in [Markdown](https://quarto.org/docs/authoring/markdown-basics.html) using the `[]()` pattern: you put words to hyperlink in `[]` and the URL in `()`. For example:
+Now let's practice Markdown in this Quarto file and commit an edit to this file.
 
-> [This twitter thread](https://twitter.com/allison_horst/status/1287772985630191617) describes the palmerpenguins R package. Learn more on the [palmerpenguins webpage](https://allisonhorst.github.io/palmerpenguins).
+### Stefanie
 
-We can make an indented quote block with the `>` symbol, as in the example above.
+Your first edit? Fix this tpyo.
 
-We can include an image with the same `[]()` pattern, by adding a preceding exclamation point: `![]()`. For example:
+#### **Headers**
 
-[![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="250"}](https://openscapes.org/)
+We 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.
 
-*Note how we can add alt text for the image, manage the image size, and link the image to a URL*
+#### **Hyperlinks**
 
-:::{.callout-note}
-example callout notes and their different types are so valuable
-:::
+We 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/)).
 
+#### **Images**
 
+We can include an image with the same `[]()` pattern, by adding a preceding exclamation point: `![]()`. The `[]` contain the caption and `()` contain the path to the image file. Other attributes like image size, alt text, and a hyperlink, are also set in this example:
 
-## Running Code
+[![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="150"}](https://openscapes.org/)
 
-When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:
+#### **Code**
 
-You can add options to executable code like this
+When you **Render**, a document will be generated that includes both content and the output of embedded code. You can embed code like this:
 
-TODO: day before clinic, make this Python code (don't add screenshot - fewer files to for folks to get distracted with, lighter weight repo)
+*TODO: day before clinic, make this Python code (don't add screenshot - fewer files to for folks to get distracted with, lighter weight repo)*
 
 ```{r}
 #| echo: false
 2 * 2
 ```
 
-The `echo: false` option disables the printing of code (only output is displayed).
+You can add options to executable code. The `echo: false` option disables the printing of code (only output is displayed).
+
+### Julie
+
+Fix this tpyo.
+
+### Andy
+
+Fix this tpyo.
 
+## Your turn!
 
-Your turn! Change or add something in Markdown and commit and push to GitHub.
+Change or add something to this file under your Name header and save the file.

lessons/part1-quarto.qmd

@@ -10,9 +10,9 @@ We will work through this Quarto Clinic site in the NASA Openscapes 2i2c Jupyter
 
 Let's start off by previewing our quarto site locally.
 
-quarto render does X
+quarto preview does X
 
-quarto preview does Y
+quarto render does Y
 
 In Terminal, type `quarto preview`, which will provide a URL with a preview of our site!
 
@@ -23,49 +23,29 @@ quarto preview
 # Browse at https://openscapes.2i2c.cloud/user/jules32/proxy/4593/
 ```
 
-Copy this URL into another browser window; and arrange them so you can see them both. I make a bit more space in Jupyter by collapsing the left file menu by clicking on the file icon at the top of the left sidebar.
+Click or copy this URL into a browser window; and arrange them so you can see them both. I make a bit more space in Jupyter by collapsing the left file menu by clicking on the file icon at the top of the left sidebar.
 
-TODO: add new screenshots
+TODO: note to open index.qmd add new screenshots
 
 ![](images/jupyter-side-by-side.png){fig-align="center"}
 
-Now that we have each set up our own GitHub clone of this Quarto Clinic website in the Openscapes 2i2c JupyterHub, we can practice editing and rendering `.qmd` and `ipynb` files. These are the workflows we use to contribute to the NASA Earthdata Cloud Cookbook and other Quarto websites and books.
+Now that we have each set up our own GitHub clone of this Quarto Clinic website in the Hub, we can practice editing and rendering `.qmd` and `.ipynb` files. These are the workflows we use to contribute to the NASA Earthdata Cloud Cookbook and other Quarto websites and books.
 
 ## Choose Task 1a or 1b to do in breakouts
 
-*TODO: fill out Task 1a*
-
-*TODO: edit demo.md file to have only what we need*
-
 ### Task 1a: Edit and preview a demo.qmd file
 
-Open [demo.qmd](demo.qmd) file.
-
-1.  Edit a .qmd page (uses demo.qmd file that has markdown for text, add hyperlink, add image, run Python code)
-
-    1.  Headers
-
-    ```         
-    1.  Headers are powerful in Quarto because they let you organize on the side of the page. They let you share a specific section of a page by copying the URL
-    ```
-
-    2.  hyperlink something (cite the Cookbook and hyperlink it)
-
-        1.  Hyperlinking is done like this; lets you cite and give credit
-
-    3.  inspect this image with alt-txt
+Open [`lessons/demo.qmd`](demo.qmd) file. The suggestions / how-to are in the file.
 
-    4.  Python code
-
-        1.  manage echo, run
+*TODO: finesse opening demo.qmd; Markdown only shows when going to Raw then Markdown*
 
 *TODO: screenshot*
 
-*TODO: edit the text below re: "make a small change"; fix a typo*
-
 #### Make a small change and preview it
 
-Now we'll be able to see live changes in the preview as we edit in our `.qmd` files. Let's try it: Change the date in `index.qmd` by opening it from the file directory. Change to today's date, and save. Your preview window will refresh automatically! If it does not, you can also refresh the page manually. The refreshed previewed site will now display your changes!
+Now we'll be able to see live changes in the preview as we edit in our `.qmd` files. Let's try it: Fix the typo, etc. Your preview window will refresh automatically! If it does not, you can also refresh the page manually. The refreshed previewed site will now display your changes!
+
+Save your changes
 
 ### Task 1b: Create a new `.ipynb` page
 
@@ -139,7 +119,7 @@ Save your document - I'll call mine `python-example.ipynb` in the main repositor
 
 ### Update `_quarto.yml`
 
-*TODO: not Basic Workflows, where to put it new files?*
+*TODO: don't call it Basic Workflows below, where to put it new files?*
 
 Now we'll add `python-example.ipynb` or `your_demo_file.qmd` to our `_quarto.yml` file; this is where we register of all files to include in our site. Let's add it after the section called "Basic Workflows".
 
@@ -171,6 +151,8 @@ By default, Quarto render does not execute code in a Jupyter notebook. It will n
 
 ### Render whole notebook
 
+*TODO: incorporate/ link to [Cookbook Quarto render](https://nasa-openscapes.github.io/earthdata-cloud-cookbook/contributing/workflow.html#quarto-render)*
+
 If you would like it to specifically execute code in a Jupyter notebook, you can do so in Terminal.
 
 Our Terminal is still busy previewing our website, so let's open a new Terminal.
@@ -182,12 +164,6 @@ cd quarto-website-tutorial
 quarto render python-example.ipynb --execute
 ```
 
-*TODO: move the below sections elsewhere. Here commit and push, then move to Part 2: Share via GitHub. I think the transition/ section break is when moving from JupyterHub to GitHub*
-
-## Commit and push to GitHub
-
-*TODO: do we need to create a GitHub Action or is it already there?*
-
-Committing and pushing will make the changes you see locally live on your website (using the [GitHub Action we set up earlier](/explore.qmd#setup-github-action)).
+## Onward
 
-Now we can move to [Part 2](part2-share-via-github.qmd) to Contribute your updates via PR, review, etc
+Now we can move to [Part 2](part2-github.qmd) to Contribute your proposed updates using Git and GitHub.