Add a link into the video walkthrough

coatless · coatless · commit e8487ae90bf9 · 2023-09-21T19:19:58.000-07:00
diff --git a/R-shinylive-demo.qmd b/R-shinylive-demo.qmd
@@ -10,7 +10,7 @@ filters:
 
 This document contains just the [Shiny App source code](https://github.com/jcheng5/posit-conf-2023-shinylive/blob/d385ad18eb0d867f25cc4721d9e8c25aeb2dfb90/slides.qmd#L299) used in Joe Cheng's [posit::conf(2023) demo](https://jcheng5.github.io/posit-conf-2023-shinylive/#/option-3-include-1) (Warning: Large file size, don't open on mobile!)
 
-For a detailed breakdown, please see the <index.qmd> file.
+For a detailed breakdown, please see the [index.qmd](index.qmd) file.
 
 ```{shinylive-r}
 #| standalone: true
@@ -67,4 +67,76 @@ server <- function(input, output, session) {
 
 # Create Shiny app ----
 shinyApp(ui = ui, server = server)
-```
+```
+
+
+Document Source (minus links): 
+
+````md
+---
+title: "Joe Cheng's r-shinylive App in a Quarto document!"
+format:
+  html:
+    resources: 
+      - shinylive-sw.js
+filters:
+  - shinylive
+---
+
+```{shinylive-r}
+#| standalone: true
+#| viewerHeight: 600
+library(shiny)
+library(bslib)
+
+# Define UI for app that draws a histogram ----
+ui <- page_sidebar(
+  sidebar = sidebar(open = "open",
+    numericInput("n", "Sample count", 100),
+    checkboxInput("pause", "Pause", FALSE),
+  ),
+  plotOutput("plot", width=1100)
+)
+
+server <- function(input, output, session) {
+  data <- reactive({
+    input$resample
+    if (!isTRUE(input$pause)) {
+      invalidateLater(1000)
+    }
+    rnorm(input$n)
+  })
+  
+  output$plot <- renderPlot({
+    hist(data(),
+      breaks = 40,
+      xlim = c(-2, 2),
+      ylim = c(0, 1),
+      lty = "blank",
+      xlab = "value",
+      freq = FALSE,
+      main = ""
+    )
+    
+    x <- seq(from = -2, to = 2, length.out = 500)
+    y <- dnorm(x)
+    lines(x, y, lwd=1.5)
+    
+    lwd <- 5
+    abline(v=0, col="red", lwd=lwd, lty=2)
+    abline(v=mean(data()), col="blue", lwd=lwd, lty=1)
+
+    legend(legend = c("Normal", "Mean", "Sample mean"),
+      col = c("black", "red", "blue"),
+      lty = c(1, 2, 1),
+      lwd = c(1, lwd, lwd),
+      x = 1,
+      y = 0.9
+    )
+  }, res=140)
+}
+
+# Create Shiny app ----
+shinyApp(ui = ui, server = server)
+```
+````
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
 # r-shinylive-demo
 
-Interested in deploying a Shiny application for R within Quarto? This is the repository for you! Here's a summary of what you can find in the repository:
+Interested in deploying a serverless Shiny application for R within Quarto? This is the repository for you! Here's a summary of what you can find in the repository:
 
 - **[index.qmd](index.qmd):** This file contains a tutorial that provides step-by-step instructions and guidance on using `r-shinylive` to embed Shiny applications in Quarto documents.
 
 - **[R-shinylive-demo.qmd](R-shinylive-demo.qmd):** Inside this file, you can find a working example of the Shiny app that was used in Joe Cheng's [posit::conf(2023) demo](https://jcheng5.github.io/posit-conf-2023-shinylive/#/option-3-include-1). Please note that Joe's presentation contains files that are large in size and is not recommended for mobile devices. You can also refer to the [source code](https://github.com/jcheng5/posit-conf-2023-shinylive/blob/d385ad18eb0d867f25cc4721d9e8c25aeb2dfb90/slides.qmd#L299) of the demo.
 
 - **[template-r-shinylive.qmd](template-r-shinylive.qmd):** This file provides a skeleton template that you can use to populate your own Shiny apps. It serves as a starting point for creating your interactive Quarto documents with Shiny applications. Please note that you will still need to install the required software as mentioned in the tutorial.
 
-- **[_quarto.yml](_quarto.yml):** This configuration file is essential for Quarto and `shinylive` to work together effectively. 
+- **[_quarto.yml](_quarto-default.yml):** This configuration file is essential for Quarto and `shinylive` to work together effectively. 
 
 - **[.github/workflows/publish-demo.yml](.github/workflows/publish-demo.yml):** This file contains a sample workflow configuration for creating a website that embeds R Shiny applications using GitHub Actions and deploys it to GitHub Pages.
 
@@ -24,6 +24,14 @@ You can see the live version built from the repository here:
 
 <https://coatless-quarto.github.io/r-shinylive-demo/>
 
+## Video Tutorial
+
+Prefer a hands-on visual guide? Check out the following YouTube video:
+
+[![Creating a Serverless Shiny App using Quarto with R Shinylive](https://img.youtube.com/vi/6y2FnAugP8E/0.jpg)](https://www.youtube.com/watch?v=6y2FnAugP8E)
+
+We'll go through every step and provide some commentary along the way!
+
 # Using r-shinylive for Serverless Shiny Apps in Quarto Documents
 
 Are you interested in creating your own Quarto document with embedded static Shiny apps? This tutorial will guide you through the process of using the `r-shinylive` R package to achieve just that. Let's get started!
@@ -49,14 +57,24 @@ quarto create project default
 
 ![Screenshot showing the Terminal tab of RStudio with the command to create a Quarto project.](images/create-quarto-r-shiny-live-project.png)
 
-During project creation, you'll be prompted to provide a directory name. This name will also serve as the Quarto document filename. Please note that if you skip this step, a `_quarto.yml` file won't be generated, resulting in an error when you attempt to render the document.
+
+While creating the project, you'll be prompted to specify a directory name. This name will also serve as the filename for your Quarto document. It's crucial to note that skipping this step will result in the absence of a `_quarto.yml` file, leading to an error when you attempt to render the document. The error message will resemble the following:
 
 ```md
 ERROR:
 The shinylive extension must be used in a Quarto project directory
 (with a _quarto.yml file).
 ```
 
+Ensure that the contents of the `_quarto.yml` file match the following structure:
+
+```yaml
+project:
+  title: "R-shinylive-demo"
+```
+
+Here, the `title` field should contain the name of the Quarto file up to the extension.
+
 ## Installing the Quarto Extension for r-shinylive
 
 **Step 3:** Install the Quarto extension for `shinylive`. In the Terminal tab, run the following command:
diff --git a/_quarto-default.yml b/_quarto-default.yml
@@ -0,0 +1,2 @@
+project:
+  title: "R-shinylive-demo"
diff --git a/index.qmd b/index.qmd
@@ -77,6 +77,14 @@ server <- function(input, output, session) {
 shinyApp(ui = ui, server = server)
 ```
 
+## Video Tutorial
+
+Prefer a hands-on visual guide? Check out the following YouTube video:
+
+[![Creating a Serverless Shiny App using Quarto with R Shinylive](https://img.youtube.com/vi/6y2FnAugP8E/0.jpg)](https://www.youtube.com/watch?v=6y2FnAugP8E)
+
+We'll go through every step and provide some commentary along the way!
+
 # Using r-shinylive for Serverless Shiny Apps in Quarto Documents
 
 Are you interested in creating your own Quarto document with embedded static Shiny apps? This tutorial will guide you through the process of using the `r-shinylive` R package to achieve just that. Let's get started!
@@ -102,14 +110,23 @@ quarto create project default
 
 ![Screenshot showing the Terminal tab of RStudio with the command to create a Quarto project.](images/create-quarto-r-shiny-live-project.png)
 
-During project creation, you'll be prompted to provide a directory name. This name will also serve as the Quarto document filename. Please note that if you skip this step, a `_quarto.yml` file won't be generated, resulting in an error when you attempt to render the document.
+While creating the project, you'll be prompted to specify a directory name. This name will also serve as the filename for your Quarto document. It's crucial to note that skipping this step will result in the absence of a `_quarto.yml` file, leading to an error when you attempt to render the document. The error message will resemble the following:
 
 ```md
 ERROR:
 The shinylive extension must be used in a Quarto project directory
 (with a _quarto.yml file).
 ```
 
+Ensure that the contents of the `_quarto.yml` file match the following structure:
+
+```yaml
+project:
+  title: "R-shinylive-demo"
+```
+
+Here, the `title` field should contain the name of the Quarto file up to the extension.
+
 ## Installing the Quarto Extension for r-shinylive
 
 **Step 3:** Install the Quarto extension for `shinylive`. In the Terminal tab, run the following command:
diff --git a/template-r-shinylive.qmd b/template-r-shinylive.qmd
@@ -23,3 +23,29 @@ server <- function(input, output, session) {
 
 shinyApp(ui, server)
 ```
+
+Full Skeletal Document Source: 
+
+````md
+---
+title: "Template for r-shinylive Quarto document"
+format:
+  html:
+    resources: 
+      - shinylive-sw.js
+filters:
+  - shinylive
+---
+
+```{shinylive-r}
+#| standalone: true
+
+ui <- ...
+
+server <- function(input, output, session) {
+  ...
+}
+
+shinyApp(ui, server)
+```
+````

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+project:`
	`2`	`+ title: "R-shinylive-demo"`