Add first steps and incorporate the keyboard shortcut demo...

Author: coatless

docs/_quarto.yml

@@ -16,6 +16,9 @@ website:
         href: https://github.com/coatless-quarto/pyodide/
     contents:
       - section: "Getting Started"
+        contents:
+          - href: qpyodide-first-steps.qmd
+            text: "Your first Pyodide-powered Quarto document"
       - section: "Support"
         contents:
           - href: qpyodide-faq.qmd

docs/qpyodide-code-cell-demo.qmd

@@ -10,7 +10,6 @@ format:
 
 Welcome to the world of interactive code cells, unlocked by the `quarto-pyodide` extension. 
 These cells allow you to run Python code directly within your Quarto HTML documents, enabling real-time computations and more. Let's explore the impressive capabilities `pyodide` offers.
-
 pyodide-enabled code cell are established by using `{pyodide-python}` in a Quarto HTML document.
 
 # Creating pyodide-Enabled Code Cells
@@ -56,6 +55,33 @@ Checking string length
 len(greet)
 ```
 
+
+## Line-by-line Execution
+
+In this section, we'll explore the built-in keyboard shortcuts for executing code within the interactive code cell. You can run either the selected code or specific lines or the entire cell with the following keyboard shortcuts:
+
+- Run selected code:
+  - macOS: <kbd>⌘</kbd> + <kbd>↩/Return</kbd>
+  - Windows/Linux: <kbd>Ctrl</kbd> + <kbd>↩/Enter</kbd>
+
+- To run the entire code cell, you can simply click the "Run code" button, or use the keyboard shortcut:
+  - <kbd>Shift</kbd> + <kbd>↩</kbd>
+
+Feel free to try it out in the following code cell:
+
+```{pyodide-python}
+# Try running selected code at the start of the line
+print("Hello quarto-pyodide World!")
+
+# Try highlight only -3 or 5 and pressing the keys required
+# for the "selected code" approach
+-3 + 5
+
+# Finally, try running the entire code cell by using Shift + ↩
+```
+
+By using these shortcuts, you can run code conveniently and efficiently. This practice can also help you become familiar with keyboard shortcuts when transitioning to integrated development environments (IDEs) like [RStudio](https://posit.co/products/open-source/rstudio/) or [Visual Studio Code with Python](https://code.visualstudio.com/docs/languages/python).
+
 ## Define and Call Functions
 
 Functions can be defined in one cell and called. 

docs/qpyodide-first-steps.qmd

@@ -0,0 +1,79 @@
+---
+title: "Making your first Pyodide-powered Quarto document"
+author: "James Joseph Balamuta"
+date: "02-19-2024"
+date-modified: last-modified
+format: 
+  html:
+    toc: true
+filters:
+  - pyodide
+---
+
+## Installation 
+
+To use this extension in a [Quarto project](https://quarto.org/docs/projects/quarto-projects.html), install it from within the project's working directory by typing into **Terminal**:
+
+``` bash
+quarto add coatless-quarto/pyodide
+```
+
+:::callout-note
+Quarto extensions are project-specific installations and are not stored in a global library. This means that for every new Quarto project or directory where you create a Quarto Document, you'll need to install the extension again.
+:::
+
+## Usage
+
+Once the extension is successfully installed, you can begin utilizing it in your Quarto documents located within the same working directory as the `_extensions` folder. To activate the `Pyodide` functionality in those documents, follow these steps:
+
+1. **Add `pyodide` Filter**: In the header of your Quarto document, add the `pyodide` filter to the list of filters:
+
+```yaml
+filters:
+  - pyodide
+```
+
+2. **Use `{pyodide-python}` Code Blocks**: Write your Python code within code blocks marked with `{pyodide-python}`. Here's an example:
+
+````markdown
+---
+title: Pyodide in Quarto HTML Documents
+format: html
+filters:
+  - pyodide
+---
+
+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!')
+```
+````
+
+3. **Render Your Document**: You can now render your Quarto document by clicking on the **Preview** (or use the keyboard shortcut <kbd>⇧⌘K</kbd> on macOS or <kbd>Ctrl+Shift+K</kbd> on Windows/Linux). The document will execute under `engine: jupyter` by default, but you can specify a different engine if needed. 
+
+:::callout-note
+If an engine is not specified, Quarto will attempt to use the `jupyter` compute engine by default. This may cause an error if `jupyter` is not installed on your computer.
+:::
+
+4. **Explore interactivity**: Try out the rendered code cell by pressing the "Run Code" button or using a keyboard shortcut of <kbd>Shift</kbd> + <kbd>↩</kbd>.
+
+```{pyodide-python}
+n = 5
+while n > 0:
+  print(n)
+  n = n - 1
+
+print('Blastoff!')
+```
+
+# Fin
+
+In summary, this guide has provided an overview of how to incorporate the `quarto-pyodide` extension into your Quarto HTML documents using VS Code. We explored key workflow changes necessary for incorporating interactive Python code into your Quarto HTML documents, from installation to document rendering.
+
+For your next steps consider looking at different use cases for [interactive options](qpyodide-code-cell-demos.qmd).