Merge pull request #38 from shinydevseries/ep27

add episode 27 post!

.devcontainer/Dockerfile

@@ -59,9 +59,9 @@ RUN echo "RENV_PATHS_CACHE=/renv/cache" >> /usr/local/lib/R/etc/Renviron
 COPY library-scripts/.Rprofile-vscode /renv/.Rprofile-vscode
 
 # [Optional] Uncomment this section to add addtional system dependencies needed for project
-ADD https://github.com/gohugoio/hugo/releases/download/v0.67.0/hugo_0.67.0_Linux-64bit.tar.gz /hugo.tar.gz
-RUN tar -zxvf hugo.tar.gz
-RUN cp /hugo /usr/local/bin/hugo
+# [Optional] Uncomment this section to add addtional system dependencies needed for project
+RUN curl -L https://github.com/gohugoio/hugo/releases/download/v0.87.0/hugo_extended_0.87.0_Linux-64bit.deb -o /tmp/hugo.deb
+RUN apt-get -y install ./tmp/hugo.deb
 
 # [Optional] Set the default user. Omit if you want to keep the default as root.
 USER $USERNAME

R/timestamps_play.R

@@ -2,29 +2,24 @@ library(dplyr)
 library(lubridate)
 library(clock)
 
-youtube_id <- "SkFLHbHrPD4"
+youtube_id <- "8crXv5SBDLE"
 
 df <- tibble::tribble(
  ~timestamp, ~recalc_flag, ~description,
  "00:00:00", FALSE, "Episode Introduction",
- "00:01:00", FALSE, "Introduction to Herman Sontrop",
- "00:06:10", FALSE, "Introduction to Kenton Russell",
- "00:10:00", FALSE, "High-level walkthrough of Movie Vue R",
- "00:19:25", FALSE, "Diving into the code that drives Movie Vue R",
- "00:22:35", FALSE, "Overview and motivation behind Vue",
- "00:38:30", FALSE, "Vue instance example",
- "00:40:00", FALSE, "Vue reactivty examples",
- "00:46:10", FALSE, "Vue.js components are like Shiny modules",
- "00:49:50", FALSE, "Single file components",
- "00:54:16", FALSE, "Breaking down a Vue component into useful parts; props, data, methods, computed, and watch",
- "00:57:20", FALSE, "Vuetify, tap into many pre-built components, styles, and more",
- "01:10:00", FALSE, "Covid Globe Example in Shiny app",
- "01:12:40", FALSE, "Rendering a ggplot",
- "01:15:15", FALSE, "Summarizing parts of the Movie Vue R app",
- "01:19:10", FALSE, "A look at template.html. A detailed walk through the organization of the app's HTML and files",
- "01:26:30", FALSE, "Where R and Shiny are added to a Vue app. And how your app can send messages back to Shiny and R",
- "01:31:20", FALSE, "Loading images and ggplots",
- "01:38:00", FALSE, "Episode wrapup"
+ "00:01:00", FALSE, "The vueR package and introductory examples",
+ "00:06:55", FALSE, "Live coding example with vuetify",
+ "00:13:55", FALSE, "vueR example, adding a calendar date selector and other mint-ui elements to your Shiny app",
+ "00:21:00", FALSE, "htmlwidget leaflet map example",
+ "00:24:10", FALSE, "Example of a sunburst plot",
+ "00:33:15", FALSE, "Example of a checkbox selector for hierarchical element trees",
+ "00:36:00", FALSE, "JavaScript build steps with Vue CLI",
+ "00:59:30", FALSE, "vite vue 3 build example",
+ "01:09:30", FALSE, "A call to the community to help with vueR development goals",
+ "01:10:30", FALSE, "Integrating crosstalk",
+ "01:14:30", FALSE, "Using vuex as a store of state. Time travel through the state of your Shiny app",
+ "01:20:24", FALSE, "Example of valtio",
+ "01:27:08", FALSE, "Episode wrapup"
 )
 
 df2 <- df %>%

content/post/2022-01-03-episode-27-movievuer-part2.md

@@ -0,0 +1,44 @@
+---
+title: 'Episode 27: Peeling back the curtain of Movie Vue R (Part 2)'
+authors: ['hsontrop', 'krussell', 'admin', 'ckephart']
+date: '2022-01-03'
+slug: episode-27-movievuer2
+aliases: /ep27
+youtube: '8crXv5SBDLE' 
+summary: "Revealing the cast of R bindings to Vue.js powering Movie Vue R with Kent Russell and Herman Sontrap!"
+description: "After a terrific showing of the eye-opening Movie Vue R in episode 26, Kent Russell and Herman Sontrop reveal the fundamental cast of R packages and workflows bringing the app to life. Kent leads us through live demonstrations of his R packages binding to Vue.js, illustrating the seamless way you can link existing HTML widgets to the Vue framework, as well as the mechanics of incorporating Shiny into existing Vue templates to unlock immense potential. Later in the episode we learn revolutionary techniques for adapting the popular crosstalk package to Vue apps, as well as a unique way of tracking application state. Each of these demonstrations reveal many nuggets of development wisdom straight from a true pioneer in bridging the amazing worlds of JavaScript and R together!"
+categories:
+ - episode
+tags: []
+image:
+ caption: ''
+ focal_point: ''
+---
+
+## Resources mentioned in the episode
+
+* Kent's packages and examples used in the live coding demonstrations:
+ + vue.js for R - [github.com/vue-r/vueR](https://github.com/vue-r/vueR)
+ + vue-cli-r - [github.com/timelyportfolio/vue-cli-r](https://github.com/timelyportfolio/vue-cli-r)
+ + vite vue3 and Shiny - [github.com/timelyportfolio/vite-vue-r](https://github.com/timelyportfolio/vite-vue-r)
+ + valtio vanilla with utils as standalone using browserify - [github.com/timelyportfolio/valtio_standalone](https://github.com/timelyportfolio/valtio_standalone)
+* Kent's listviewer HTML widget for viewing lists: [cran.r-project.org/package=listviewer](https://cran.r-project.org/package=listviewer)
+* Linking vue to crosstalk - [github.com/vue-r/vueR/issues/12](https://github.com/vue-r/vueR/issues/12)
+
+
+## Episode Timestamps
+
+[00:00:00](https://youtube.com/watch?v=8crXv5SBDLE&t=0s) Episode Introduction <br> 
+[00:01:00](https://youtube.com/watch?v=8crXv5SBDLE&t=60s) The vueR package and introductory examples <br> 
+[00:06:55](https://youtube.com/watch?v=8crXv5SBDLE&t=415s) Live coding example with vuetify <br> 
+[00:13:55](https://youtube.com/watch?v=8crXv5SBDLE&t=835s) vueR example, adding a calendar date selector and other mint-ui elements to your Shiny app <br> 
+[00:21:00](https://youtube.com/watch?v=8crXv5SBDLE&t=1260s) htmlwidget leaflet map example <br> 
+[00:24:10](https://youtube.com/watch?v=8crXv5SBDLE&t=1450s) Example of a sunburst plot <br> 
+[00:33:15](https://youtube.com/watch?v=8crXv5SBDLE&t=1995s) Example of a checkbox selector for hierarchical element trees <br> 
+[00:36:00](https://youtube.com/watch?v=8crXv5SBDLE&t=2160s) JavaScript build steps with Vue CLI <br> 
+[00:59:30](https://youtube.com/watch?v=8crXv5SBDLE&t=3570s) vite vue 3 build example <br> 
+[01:09:30](https://youtube.com/watch?v=8crXv5SBDLE&t=4170s) A call to the community to help with vueR development goals <br> 
+[01:10:30](https://youtube.com/watch?v=8crXv5SBDLE&t=4230s) Integrating crosstalk <br> 
+[01:14:30](https://youtube.com/watch?v=8crXv5SBDLE&t=4470s) Using vuex as a store of state. Time travel through the state of your Shiny app <br> 
+[01:20:24](https://youtube.com/watch?v=8crXv5SBDLE&t=4824s) Example of valtio <br> 
+[01:27:08](https://youtube.com/watch?v=8crXv5SBDLE&t=5228s) Episode wrapup <br>

renv.lock

@@ -30,13 +30,34 @@
  "Repository": "RSPM",
  "Hash": "543776ae6848fde2f48ff3816d0628bc"
  },
+ "blogdown": {
+ "Package": "blogdown",
+ "Version": "1.7",
+ "Source": "Repository",
+ "Repository": "CRAN",
+ "Hash": "a59150d0098908724e1c0dc9d2a3ab5b"
+ },
+ "bookdown": {
+ "Package": "bookdown",
+ "Version": "0.24",
+ "Source": "Repository",
+ "Repository": "CRAN",
+ "Hash": "3837766a1e1b527af25fa3e2d12a2800"
+ },
  "cli": {
  "Package": "cli",
  "Version": "3.0.0",
  "Source": "Repository",
  "Repository": "RSPM",
  "Hash": "096829b701eec2d2b4538be63de97e75"
  },
+ "clock": {
+ "Package": "clock",
+ "Version": "0.3.1",
+ "Source": "Repository",
+ "Repository": "CRAN",
+ "Hash": "ce1e04e9826e3885571a2681d03e1ae3"
+ },
  "cpp11": {
  "Package": "cpp11",
  "Version": "0.3.1",
@@ -58,6 +79,13 @@
  "Repository": "RSPM",
  "Hash": "a0cbe758a531d054b537d16dff4d58a1"
  },
+ "dplyr": {
+ "Package": "dplyr",
+ "Version": "1.0.7",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "36f1ae62f026c8ba9f9b5c9a08c03297"
+ },
  "ellipsis": {
  "Package": "ellipsis",
  "Version": "0.3.2",
@@ -79,6 +107,13 @@
  "Repository": "RSPM",
  "Hash": "d447b40982c576a72b779f0a3b3da227"
  },
+ "generics": {
+ "Package": "generics",
+ "Version": "0.1.0",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "4d243a9c10b00589889fe32314ffd902"
+ },
  "glue": {
  "Package": "glue",
  "Version": "1.4.2",
@@ -100,6 +135,20 @@
  "Repository": "RSPM",
  "Hash": "af2c2531e55df5cf230c4b5444fc973c"
  },
+ "httpuv": {
+ "Package": "httpuv",
+ "Version": "1.6.3",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "65e865802fe6dd1bafef1dae5b80a844"
+ },
+ "jquerylib": {
+ "Package": "jquerylib",
+ "Version": "0.1.4",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "5aab57a3bd297eee1c1d862735972182"
+ },
  "jsonlite": {
  "Package": "jsonlite",
  "Version": "1.7.2",
@@ -128,6 +177,13 @@
  "Repository": "RSPM",
  "Hash": "3471fb65971f1a7b2d4ae7848cf2db8d"
  },
+ "lubridate": {
+ "Package": "lubridate",
+ "Version": "1.7.10",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "1ebfdc8a3cfe8fe19184f5481972b092"
+ },
  "magrittr": {
  "Package": "magrittr",
  "Version": "2.0.1",
@@ -163,6 +219,13 @@
  "Repository": "RSPM",
  "Hash": "01f28d4278f15c76cddbea05899c5d6f"
  },
+ "promises": {
+ "Package": "promises",
+ "Version": "1.2.0.1",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "4ab2c43adb4d4699cf3690acd378d75d"
+ },
  "purrr": {
  "Package": "purrr",
  "Version": "0.3.4",
@@ -191,6 +254,13 @@
  "Repository": "RSPM",
  "Hash": "912c09266d5470516df4df7a303cde92"
  },
+ "servr": {
+ "Package": "servr",
+ "Version": "0.23",
+ "Source": "Repository",
+ "Repository": "CRAN",
+ "Hash": "75a40cd4f8503fe175be6b213009767f"
+ },
  "stringi": {
  "Package": "stringi",
  "Version": "1.7.3",
@@ -212,13 +282,27 @@
  "Repository": "RSPM",
  "Hash": "349b40a9f144516d537c875e786ec8b8"
  },
+ "tidyselect": {
+ "Package": "tidyselect",
+ "Version": "1.1.1",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "7243004a708d06d4716717fa1ff5b2fe"
+ },
  "tinytex": {
  "Package": "tinytex",
  "Version": "0.32",
  "Source": "Repository",
  "Repository": "RSPM",
  "Hash": "db9a6f2cf147751322d22c9f6647c7bd"
  },
+ "tzdb": {
+ "Package": "tzdb",
+ "Version": "0.1.1",
+ "Source": "Repository",
+ "Repository": "RSPM",
+ "Hash": "d60ee49eac3f3aaead137af987c92ddb"
+ },
  "utf8": {
  "Package": "utf8",
  "Version": "1.2.1",
@@ -235,10 +319,10 @@
  },
  "xfun": {
  "Package": "xfun",
- "Version": "0.24",
+ "Version": "0.29",
  "Source": "Repository",
  "Repository": "RSPM",
- "Hash": "88cdb9779a657ad80ad942245fffba31"
+ "Hash": "e2e5fb1a74fbb68b27d6efc5372635dc"
  },
  "yaml": {
  "Package": "yaml",