Blog example (#90)

coatless · web-flow · commit 4b3a112f88e2 · 2023-11-12T12:09:51.000-08:00
* Re-direct styling to new top-level document

* Bring online the blog template

* Add disclaimer on RevealJS usage.

* Add RevealJS Template

* Add blog example

* Add gitignores

* newline at the end of the file

* Add blog case

* Add blog render
diff --git a/.github/workflows/publish-demo.yml b/.github/workflows/publish-demo.yml
@@ -68,6 +68,11 @@ jobs:
         with:
           path: "examples/website"
 
+      - name: Render sample deployment blog template
+        uses: quarto-dev/quarto-actions/render@v2
+        with:
+          path: "examples/blog"
+
       - name: Render sample deployment book template
         uses: quarto-dev/quarto-actions/render@v2
         with:
@@ -86,6 +91,7 @@ jobs:
           cp -rp tests/_site/* staging/tests/ && \
           cp -rp examples/book/_book staging/examples/book && \
           cp -rp examples/website/_site staging/examples/website && \
+          cp -rp examples/blog/_site staging/examples/blog && \
           cp -rp examples/html-document/ staging/examples/html-document && \
           cp -rp examples/revealjs/ staging/examples/revealjs && \
           cp -rp examples/readme/ staging/examples/readme
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # webR Extension for Quarto
 
-This extension enables the [webR](https://docs.r-wasm.org/webr/latest/) code cell within various [Quarto](https://quarto.org/) formats, including [HTML](https://quarto.org/docs/output-formats/html-basics.html), [Websites](https://quarto.org/docs/websites/), and [Books](https://quarto.org/docs/books). 
+This extension enables the [webR](https://docs.r-wasm.org/webr/latest/) code cell within various [Quarto](https://quarto.org/) formats, including [HTML](https://quarto.org/docs/output-formats/html-basics.html), [Websites](https://quarto.org/docs/websites/), [Blogs](https://quarto.org/docs/websites/website-blog.html), and [Books](https://quarto.org/docs/books). 
 
 ![`quarto-webr` Filter in Action](https://i.imgur.com/NCTDwUk.gif)
 
@@ -68,6 +68,8 @@ During the execution, the filter adds two files to the working directory: `webr-
 
 There are many more customization options that are available. Please see the [customization documentation](https://quarto-webr.thecoatlessprofessor.com/qwebr-meta-options.html) for more examples.
 
+For specific deployment usage cases, please see [Templates](https://quarto-webr.thecoatlessprofessor.com/qwebr-deployment-templates.html). 
+
 ## Help
 
 For troubleshooting help, please see our [troubleshooting page](https://quarto-webr.thecoatlessprofessor.com/qwebr-troubleshooting.html).
diff --git a/docs/index.qmd b/docs/index.qmd
@@ -7,7 +7,7 @@ filters:
   - webr
 ---
 
-Welcome to the documentation portal for the [`quarto-webr`](https://github.com/coatless/quarto-webr) extension – your key to unlocking the endless possibilities of [webR](https://docs.r-wasm.org/webr/latest/) within various [Quarto](https://quarto.org/) formats, including [HTML](https://quarto.org/docs/output-formats/html-basics.html), [Websites](https://quarto.org/docs/websites/), and [Books](https://quarto.org/docs/books). 
+Welcome to the documentation portal for the [`quarto-webr`](https://github.com/coatless/quarto-webr) extension – your key to unlocking the endless possibilities of [webR](https://docs.r-wasm.org/webr/latest/) within various [Quarto](https://quarto.org/) formats, including [HTML](https://quarto.org/docs/output-formats/html-basics.html), [Websites](https://quarto.org/docs/websites/), [Blogs](https://quarto.org/docs/websites/website-blog.html), and [Books](https://quarto.org/docs/books). 
 
 Ready for an exciting journey into the world of webR's interactive code cells? Click the "Run Code" button below to experience it firsthand:
 
@@ -19,6 +19,6 @@ model = lm(mpg ~ wt, data = mtcars)
 summary(model)
 ```
 
-At its core, the [quarto-webr extension](https://github.com/coatless/quarto-webr) is designed to empower you to run R code directly in your web browser using familiar reporting tools, all without the need for an external R server.  Moreover, the extension abstracts away the need to know HTML or JavaScript to use webR. However, it's worth noting that you can also choose to unlock the full potential of webR and create more complex applications independently by directly using [webR's JavaScript API](https://docs.r-wasm.org/webr/latest/evaluating.html), granting you unparalleled freedom to harness the power of R in innovative ways.
+At its core, the [`quarto-webr` extension](https://github.com/coatless/quarto-webr) is designed to empower you to run R code directly in your web browser using familiar reporting tools, all without the need for an external R server.  Moreover, the extension abstracts away the need to know HTML or JavaScript to use webR. However, it's worth noting that you can also choose to unlock the full potential of webR and create more complex applications independently by directly using [webR's JavaScript API](https://docs.r-wasm.org/webr/latest/evaluating.html), granting you unparalleled freedom to harness the power of R in innovative ways.
 
 With this in mind, let's dive in and kickstart your journey with interactive code cells by [creating our very first webR-powered Quarto document](qwebr-first-steps.qmd) or [exploring some examples](qwebr-code-cell-demos.qmd)!
diff --git a/docs/qwebr-deployment-templates.qmd b/docs/qwebr-deployment-templates.qmd
@@ -11,20 +11,36 @@ Discover a range of sample deployment templates for the `quarto-webr` extension
 This template is designed for creating standalone HTML documents with interactive webR functionality. It's suitable for individual reports or interactive documents.
 
 - **Example**: You can find an example of an HTML document template [here](https://quarto-webr.thecoatlessprofessor.com/examples/html-document/).
-- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/docs/examples/html-document).
+- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/examples/html-document).
+
+# RevealJS Presentation Template
+
+This template is designed for creating standalone RevealJS presentations with interactive webR functionality. It's suitable for creating lecture slides.
+
+:::{.callout-important}
+This template requires a [**pre-release** version of Quarto](https://quarto.org/docs/download/prerelease) that contains an updated copy of `pandoc`. For more details, please see [Issue #14](https://github.com/coatless/quarto-webr/issues/14). 
+:::
+
+- **Example**: You can find an example of an HTML document template [here](https://quarto-webr.thecoatlessprofessor.com/examples/revealjs/).
+- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/examples/revealjs).
 
 # Website Template
 
-This template is meant for building interactive websites with multiple webR-powered pages. It's ideal for creating blog posts, educational platforms, or any web content that requires interactive data analysis.
+This template is meant for building interactive websites with multiple webR-powered pages. It's ideal for websites that have multiple piece of web content that requires interactive data analysis at the "top-level".
 
 - **Example**: Explore an example of a website template [here](https://quarto-webr.thecoatlessprofessor.com/examples/website/).
-- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/docs/examples/website).
+- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/examples/website).
 
+# Blog Template
+
+For users who want to periodically use webR on their Quarto blog, please use the following template. 
+
+- **Example**: Explore an example of a blog website template [here](https://quarto-webr.thecoatlessprofessor.com/examples/blog/).
+- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/examples/blog).
 
 # Book Template
 
 The book template is designed for creating interactive web-based books or documentation. It allows you to compile a collection of chapters, sections, and interactive content into a cohesive digital book.
 
 - **Example**: You can view an example of a book template [here](https://quarto-webr.thecoatlessprofessor.com/examples/book).
-- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/docs/examples/book).
-
+- **Source Code**: Access the source code for this template [here](https://github.com/coatless/quarto-webr/tree/main/examples/book).
diff --git a/docs/qwebr-faq.qmd b/docs/qwebr-faq.qmd
@@ -87,42 +87,4 @@ Error messages, warnings, and other diagnostic information are presented in the
 
 > Q. Is it possible to style the UI elements the quarto-webr extension add to your document? Do they get affected by styling/theme changes so things look coherent?
 
-Certainly! You have the flexibility to style the UI elements added by the `quarto-webr` extension to your document. These elements are categorized into three distinct areas, each of which can be styled individually. They are identifiable by their unique `id` and `class` attributes:
-
-1. **Interactive Code Editor**: This is where you input and edit your R code.
-   - `id`: `#webr-editor-{{ID}}`
-   - `class`: `.webr-editor`
-
-2. **Output Area**: This is where the results and output of your R code are displayed.
-   - `id`: `#webr-code-stdout-{{ID}}`
-   - `class`: `.webr-code-stdout`
-
-3. **Run Button**: The button that triggers the execution of your R code.
-   - `id`: `#webr-btn-run-{{ID}}`
-   - `class`: `.webr-btn-run`
-
-The `{{ID}}` in these identifiers represents the instance of the element on the page, such as the first, second, or nth occurrence. By targeting the specific `id` or `class` attributes in your document's CSS or by including a separate CSS file, you can control their appearance as per your design preferences. 
-
-For example, you can insert new CSS elements by using:
-
-````markdown
-```{=html}
-<style>
-.webr-code-stdout {background-color: powderblue;}
-.webr-btn-run   {color: blue;}
-</style>
-```
-````
-
-Additionally, if you are using a Quarto theme, you can leverage [theme-specific styling options](https://quarto.org/docs/output-formats/html-themes.html#basic-options) to ensure that these UI elements align with the overall theme of your document.
-
-````markdown
----
-title: My post
-format:
-  html: 
-    theme:
-      - cosmo
-      - custom.scss
----
-````
+Certainly! You have the flexibility to style the UI elements added by the `quarto-webr` extension to your document. For more details, please see [Theming Elements](qwebr-theming.qmd).
diff --git a/examples/blog/.gitignore b/examples/blog/.gitignore
@@ -0,0 +1,2 @@
+/.quarto/
+/_site/*
diff --git a/examples/blog/_extensions b/examples/blog/_extensions
@@ -0,0 +1 @@
+../../_extensions
diff --git a/examples/blog/_quarto.yml b/examples/blog/_quarto.yml
@@ -0,0 +1,22 @@
+project:
+  type: website
+
+website:
+  title: "blog"
+  navbar:
+    right:
+      - about.qmd
+      - icon: github
+        href: https://github.com/
+      - icon: twitter
+        href: https://twitter.com
+format:
+  html:
+    theme: cosmo
+    css: styles.css
+
+# Enable webR on all post pages
+webr:
+  channel-type: 'post-message'
+filters:
+  - webr
diff --git a/examples/blog/about.qmd b/examples/blog/about.qmd
@@ -0,0 +1,12 @@
+---
+title: "About"
+image: profile.jpg
+about:
+  template: jolla
+  links:
+    - icon: github
+      text: GitHub
+      href: https://github.com/coatless/quarto-webr
+---
+
+This blog is a demo showing how to use the `quarto-webr` extension.
diff --git a/examples/blog/index.qmd b/examples/blog/index.qmd
@@ -0,0 +1,14 @@
+---
+title: "blog"
+listing:
+  contents: posts
+  sort: "date desc"
+  type: default
+  categories: true
+  sort-ui: false
+  filter-ui: false
+page-layout: full
+title-block-banner: true
+---
+
+
diff --git a/examples/blog/posts/_metadata.yml b/examples/blog/posts/_metadata.yml
@@ -0,0 +1,8 @@
+# options specified here will apply to all posts in this folder
+
+# freeze computational output
+# (see https://quarto.org/docs/projects/code-execution.html#freeze)
+freeze: true
+
+# Enable banner style title blocks
+title-block-banner: true
diff --git a/examples/blog/posts/post-with-code/image.jpg b/examples/blog/posts/post-with-code/image.jpg
diff --git a/examples/blog/posts/post-with-code/index.qmd b/examples/blog/posts/post-with-code/index.qmd
@@ -0,0 +1,13 @@
+---
+title: "Post With Interactive Code"
+author: "James Balamuta"
+date: "2023-11-12"
+categories: [news, code, analysis]
+image: "image.jpg"
+---
+
+This is a post with interactive code on a [Quarto Blog](https://quarto.org/docs/websites/website-blog.html) through the [`quarto-webr`](https://github.com/coatless/quarto-webr) extension. The configuration setup for the `quarto-webr` extension is taken care of in the `_quarto.yml` file to avoid needing to re-specify options multiple times.
+
+```{webr-r}
+print("Hello blog Quarto world!")
+```
diff --git a/examples/blog/profile.jpg b/examples/blog/profile.jpg
diff --git a/examples/blog/styles.css b/examples/blog/styles.css
@@ -0,0 +1 @@
+/* css styles */
diff --git a/examples/book/slide-embed.qmd b/examples/book/slide-embed.qmd
@@ -6,6 +6,10 @@ On this page, we show how we can embed a RevealJS Presentation inside of a Quart
 
 ## Presentation
 
+:::{.callout-important}
+For `quarto-webr` to work within RevealJS, you must use a [**pre-release** version of Quarto](https://quarto.org/docs/download/prerelease) that contains an updated copy of `pandoc`. For more details, please see [Issue #14](https://github.com/coatless/quarto-webr/issues/14). 
+:::
+
 <div>
 ```{=html}
 <iframe class="slide-deck" src="../revealjs/"></iframe>
diff --git a/examples/html-document/.gitignore b/examples/html-document/.gitignore
@@ -0,0 +1 @@
+/.quarto/
diff --git a/examples/revealjs/index.qmd b/examples/revealjs/index.qmd
@@ -15,11 +15,11 @@ filters:
 
 Welcome to a demo RevealJS presentation that uses the [`quarto-webr`](https://github.com/coatless/quarto-webr) extension to generate interactive code cells with [Quarto](https://quarto.org) and [webR](https://docs.r-wasm.org/webr/latest/).
 
-```{webr-r}
-print("Hello there! Welcome to a quarto-webR powered revealjs presentation!")
-```
+:::{.callout-important}
+This template requires a [**pre-release** version of Quarto](https://quarto.org/docs/download/prerelease) that contains an updated copy of `pandoc`. For more details, please see [Issue #14](https://github.com/coatless/quarto-webr/issues/14). 
+:::
 
-Let's go back to the [documentation portal](../../)
+Not the right template? Let's go back to the [documentation portal](../../)
 
 ## webR in RevealJS 
 
diff --git a/examples/website/.gitignore b/examples/website/.gitignore
@@ -0,0 +1,2 @@
+/.quarto/
+/_site/*
diff --git a/examples/website/slide-embed.qmd b/examples/website/slide-embed.qmd
@@ -6,6 +6,10 @@ On this page, we show how we can embed a RevealJS Presentation inside of a Quart
 
 ## Presentation
 
+:::{.callout-important}
+For `quarto-webr` to work within RevealJS, you must use a [**pre-release** version of Quarto](https://quarto.org/docs/download/prerelease) that contains an updated copy of `pandoc`. For more details, please see [Issue #14](https://github.com/coatless/quarto-webr/issues/14). 
+:::
+
 <div>
 ```{=html}
 <iframe class="slide-deck" src="../revealjs/"></iframe>
