Add startup CSS ID & clarify examples (#111)

coatless · web-flow · commit f81f1b51a3c6 · 2023-11-22T15:25:33.000-08:00
* Add IDs for startup message &amp; COOP/COEP header status

* Directly show the disable option

* Cut the amount of output on packages displayed.

* Update template

* Add documentation for the header classes

* Add release note

* Bump version

* Add test cases for disablign startup status in
HTML and RevealJS
diff --git a/_extensions/webr/_extension.yml b/_extensions/webr/_extension.yml
@@ -1,7 +1,7 @@
 name: webr
 title: Embedded webr code cells
 author: James Joseph Balamuta
-version: 0.4.0-dev.1
+version: 0.4.0-dev.2
 quarto-required: ">=1.2.198"
 contributes:
   filters:
diff --git a/_extensions/webr/monaco-editor-init.html b/_extensions/webr/monaco-editor-init.html
@@ -1,5 +1,5 @@
 <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs/loader.js"></script>
-<script type="module" id="webr-monaco-editor-init">
+<script type="module" id="qwebr-monaco-editor-init">
 
   // Configure the Monaco Editor's loader
   require.config({
diff --git a/_extensions/webr/template.qmd b/_extensions/webr/template.qmd
@@ -3,9 +3,11 @@ title: "WebR-enabled code cell"
 format: html
 engine: knitr
 #webr:
-#  show-startup-message: false      # Display status of webR initialization
-#  show-header-message: false      # Check to see if COOP&COEP headers are set for speed.
+#  show-startup-message: false    # Disable display of webR initialization state
+#  show-header-message: true      # Display whether COOP&COEP headers are set for speed.
 #  packages: ['ggplot2', 'dplyr'] # Pre-install dependencies
+#  autoload-packages: false       # Disable automatic library calls on R packages specified in packages.
+#  channel-type: 'post-message'   # Specify a specific communication channel type.
 #  home-dir: "/home/rstudio"      # Customize where the working directory is
 #  base-url: ''                   # Base URL used for downloading R WebAssembly binaries
 #  service-worker-url: ''         # URL from where to load JavaScript worker scripts when loading webR with the ServiceWorker communication channel.
diff --git a/_extensions/webr/webr-init.html b/_extensions/webr/webr-init.html
@@ -133,20 +133,23 @@
 
     // Create the first inner div element
     const firstInnerDiv = document.createElement("div");
+    firstInnerDiv.setAttribute("id", "qwebr-status-message-area");
 
     // Create the second inner div element for "WebR Status" heading and contents
     const secondInnerDiv = document.createElement("div");
+    secondInnerDiv.setAttribute("id", "qwebr-status-message-title");
     secondInnerDiv.classList.add("quarto-title-meta-heading");
     secondInnerDiv.innerText = "WebR Status";
 
     // Create another inner div for contents
     const secondInnerDivContents = document.createElement("div");
+    secondInnerDivContents.setAttribute("id", "qwebr-status-message-body");
     secondInnerDivContents.classList.add("quarto-title-meta-contents");
 
     // Describe the WebR state
     var startupMessageWebR = document.createElement("p");
     startupMessageWebR.innerText = "🟡 Loading...";
-    startupMessageWebR.setAttribute("id", "startup");
+    startupMessageWebR.setAttribute("id", "qwebr-status-message-text");
     // Add `aria-live` to auto-announce the startup status to screen readers
     startupMessageWebR.setAttribute("aria-live", "assertive");
 
@@ -157,7 +160,7 @@
     if (showHeaderMessage) {
       const crossOriginMessage = document.createElement("p");
       crossOriginMessage.innerText = `${crossOriginIsolated ? '🟢' : '🟡'} COOP & COEP Headers`;
-      crossOriginMessage.setAttribute("id", "coop-coep-header");
+      crossOriginMessage.setAttribute("id", "qwebr-coop-coep-header");
       secondInnerDivContents.appendChild(crossOriginMessage);
     }
 
@@ -175,7 +178,7 @@
       headerRevealJS.appendChild(firstInnerDiv);
     } else {
       // If neither headerHTML nor headerRevealJS is found, insert after "webr-monaco-editor-init" script
-      const monacoScript = document.getElementById("webr-monaco-editor-init");
+      const monacoScript = document.getElementById("qwebr-monaco-editor-init");
       const header = document.createElement("header");
       header.setAttribute("id", "title-block-header");
       header.appendChild(quartoTitleMeta);
diff --git a/docs/qwebr-meta-options.qmd b/docs/qwebr-meta-options.qmd
@@ -24,12 +24,12 @@ To fine-tune webR to the specific needs of a document, place inside your documen
 
 ```yaml
 ---
-title: WebR in Quarto HTML Documents
+title: webR in Quarto HTML Documents
 format: html
 engine: knitr
 webr: 
-  show-startup-message: false
-  packages: ['ggplot2', 'dplyr']
+  show-startup-message: false    # Disable displaying status of webR initialization
+  packages: ['ggplot2', 'dplyr'] # Install R packages on document open
 filters:
   - webr
 ---
@@ -49,7 +49,8 @@ book:
 
 # Set default options for every bookpage that may or may not include webR.
 webr: 
-  show-startup-message: false     # Display status of webR initialization
+  show-startup-message: false    # Disable displaying status of webR initialization
+  packages: ['ggplot2', 'dplyr'] # Install R packages on document open
 
 # Attach webR extension for the project
 filters:
diff --git a/docs/qwebr-release-notes.qmd b/docs/qwebr-release-notes.qmd
@@ -12,12 +12,18 @@ format:
 
 ## Features
 
+
+## Changes
+
+- Added new CSS IDs governing the webR initialization state. ([#110](https://github.com/coatless/quarto-webr/issues/110))
+
 ## Bugfixes
 
-- Fix text added after code cell in RevealJS appearing off the page ([#102](https://github.com/coatless/quarto-webr/issues/102), [#106](https://github.com/coatless/quarto-webr/issues/106))
+- Fixed display of text found after a code cell in RevealJS appearing off the page ([#102](https://github.com/coatless/quarto-webr/issues/102), [#106](https://github.com/coatless/quarto-webr/issues/106))
 
 ## Documentation 
 
+- Modified the RevealJS presentation YAML to include an option to disable the webR status message header ([#110](https://github.com/coatless/quarto-webr/issues/110))
 - Minor documentation tweaks.
 
 ## Deployment
diff --git a/docs/qwebr-theming.qmd b/docs/qwebr-theming.qmd
@@ -20,7 +20,18 @@ On this page, we delve into the world of web design to enhance the visual aesthe
 
 ## CSS Class and ID Identifiers
 
-To effectively style web-based documents created with the extension, you'll need to understand the unique `id` and `class` attributes associated with different content areas. There are two primary context types where content is displayed to users:
+To effectively style web-based documents created with the extension, you'll need to understand the unique `id` and `class` attributes associated with different content areas. There are two key areas to every Quarto document that uses the `quarto-webr` extension: header and code cells. The header is where status and debug information can be found whereas the code cell portion is where R code is actively run using webR.
+
+Let's turn our attention to the document's header. By default, the webR initialization state is displayed in the header. This can be turned off by setting the [`show-startup-message: false` meta option.](qwebr-meta-options.qmd). 
+
+- **Status Area**: This represents the area we dynamic add to the document using JavaScript and stores the **Status Title** and **Status Message**
+  - `id`: `#qwebr-status-message-area`
+- **Status Title**: This element contains the header of the status text.
+  - `id`: `#qwebr-status-message-title`
+- **Status Message**: This element is updated with the document status updates.
+  - `id`: `#qwebr-status-message-body`
+
+With this in mind, we next focus on improving how content is being displayed through **code cells**. There are two primary context types where code content is displayed to users:
 
 - **Interactive Area**: This area encompasses the **Code Editor**, **Code Output**, and the **Graph Output Area** under the `interactive` context.
    - `id`: `#qwebr-interactive-area-{{ID}}`
diff --git a/docs/qwebr-using-r-packages.qmd b/docs/qwebr-using-r-packages.qmd
@@ -36,7 +36,7 @@ cat("There are current", n_webr_pkgs,
     "available to use with webR!\n")
 
 # Only view the first 6, there's a lot available!
-head(webr_info)
+head(webr_info[, c("Version", "License")])
 ```
 
 Alternatively, you can navigate to the webR binary R repository [here](https://repo.r-wasm.org/) for package listings.
diff --git a/examples/revealjs/index.qmd b/examples/revealjs/index.qmd
@@ -2,7 +2,9 @@
 title: "quarto-webr Demo RevealJS Document"
 format: revealjs
 webr:
-  packages: ['ggplot2']
+  packages: ['ggplot2', 'dplyr'] # Install R packages on document open
+# autoload-packages: false       # Disable automatic loading of packages
+# show-startup-message: false    # Disable displaying status of webR initialization
 filters:
 - webr
 ---
diff --git a/tests/qwebr-test-status-header-suppressed-html copy.qmd b/tests/qwebr-test-status-header-suppressed-html copy.qmd
@@ -0,0 +1,15 @@
+---
+title: "Test: No Startup Status Present in HTML Documents"
+format: html
+engine: knitr
+webr: 
+  show-startup-message: false
+filters:
+  - webr
+---
+
+Ensure that the webR code cell initializes even if the webR status bar is disabled.
+
+```{webr-r}
+print("Hello hidden title world!")
+```
diff --git a/tests/qwebr-test-status-header-suppressed-revealjs.qmd b/tests/qwebr-test-status-header-suppressed-revealjs.qmd
@@ -0,0 +1,19 @@
+---
+title: "Test: No Startup Status Present in RevealJS Presentations"
+subtitle: "Examining State"
+authors: "Presentation Lead"
+format: revealjs
+engine: knitr
+webr: 
+  show-startup-message: false
+filters:
+  - webr
+---
+
+## webR in RevealJS 
+
+Ensure that the webR code cell initializes even if the webR status bar is disabled.
+
+```{webr-r}
+print("Hello hidden title world!")
+```
