shinyMobile 2.0.0 blog post (#55)

* start

* expand input layout + add multi layout

* add note on breaking changes

* more about treeview

* update link

* add shinylive demos + few tweaks

* add shinylive to deps

* more logo

* including Mike's comments

* add conclusion

* edit conclusion

DESCRIPTION

@@ -11,4 +11,5 @@ Imports:
   knitr,
   downlit,
   xml2,
-  rmarkdown
+  rmarkdown,
+  shinylive

_extensions/quarto-ext/shinylive/README.md

@@ -0,0 +1,126 @@
+# Shinylive package methods
+
+## Methods
+
+### R
+
+Interaction:
+
+```
+Rscript -e 'shinylive:::quarto_ext()' [methods] [args]
+```
+
+### Python
+
+Interaction:
+
+```
+shinylive [methods] [args]
+```
+
+## CLI Methods
+
+* `extension info`
+  * Package, version, asset version, and script paths information
+* `extension base-htmldeps`
+  * Quarto html dependencies for the base shinylive integration
+* `extension language-resources`
+  * Language specific resource files for the quarto html dependency named `shinylive`
+* `extension app-resources`
+  * App specific resource files for the quarto html dependency named `shinylive`
+
+### CLI Interface
+* `extension info`
+  * Prints information about the extension including:
+    * `version`: The version of the R package
+    * `assets_version`: The version of the web assets
+    * `scripts`: A list of paths scripts that are used by the extension,
+     mainly `codeblock-to-json`
+  * Example
+    ```
+    {
+      "version": "0.1.0",
+      "assets_version": "0.2.0",
+      "scripts": {
+        "codeblock-to-json": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/scripts/codeblock-to-json.js"
+      }
+    }
+    ```
+* `extension base-htmldeps`
+  * Prints the language agnostic quarto html dependencies as a JSON array.
+    * The first html dependency is the `shinylive` service workers.
+    * The second html dependency is the `shinylive` base dependencies. This
+      dependency will contain the core `shinylive` asset scripts (JS files
+      automatically sourced), stylesheets (CSS files that are automatically
+      included), and resources (additional files that the JS and CSS files can
+      source).
+  * Example
+    ```
+    [
+      {
+        "name": "shinylive-serviceworker",
+        "version": "0.2.0",
+        "meta": { "shinylive:serviceworker_dir": "." },
+        "serviceworkers": [
+          {
+            "source": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive-sw.js",
+            "destination": "/shinylive-sw.js"
+          }
+        ]
+      },
+      {
+        "name": "shinylive",
+        "version": "0.2.0",
+        "scripts": [{
+          "name": "shinylive/load-shinylive-sw.js",
+          "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/load-shinylive-sw.js",
+            "attribs": { "type": "module" }
+        }],
+        "stylesheets": [{
+          "name": "shinylive/shinylive.css",
+          "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/shinylive.css"
+        }],
+        "resources": [
+          {
+            "name": "shinylive/shinylive.js",
+            "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/shinylive.js"
+          },
+          ... # [ truncated ]
+        ]
+      }
+    ]
+    ```
+* `extension language-resources`
+  * Prints the language-specific resource files as JSON that should be added to the quarto html dependency.
+    * For r-shinylive, this includes the webr resource files
+    * For py-shinylive, this includes the pyodide and pyright resource files.
+  * Example
+    ```
+    [
+      {
+        "name": "shinylive/webr/esbuild.d.ts",
+        "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/webr/esbuild.d.ts"
+      },
+      {
+        "name": "shinylive/webr/libRblas.so",
+        "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/webr/libRblas.so"
+      },
+      ... # [ truncated ]
+    ]
+* `extension app-resources`
+  * Prints app-specific resource files as JSON that should be added to the `"shinylive"` quarto html dependency.
+  * Currently, r-shinylive does not return any resource files.
+  * Example
+    ```
+    [
+      {
+        "name": "shinylive/pyodide/anyio-3.7.0-py3-none-any.whl",
+        "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/pyodide/anyio-3.7.0-py3-none-any.whl"
+      },
+      {
+        "name": "shinylive/pyodide/appdirs-1.4.4-py2.py3-none-any.whl",
+        "path": "/<ASSETS_CACHE_DIR>/shinylive-0.2.0/shinylive/pyodide/appdirs-1.4.4-py2.py3-none-any.whl"
+      },
+      ... # [ truncated ]
+    ]
+    ```

_extensions/quarto-ext/shinylive/_extension.yml

@@ -0,0 +1,8 @@
+name: shinylive
+title: Embedded Shinylive applications
+author: Winston Chang
+version: 0.2.0
+quarto-required: ">= 1.2.198"
+contributes:
+  filters:
+    - shinylive.lua

_extensions/quarto-ext/shinylive/resources/css/shinylive-quarto.css

@@ -0,0 +1,34 @@
+div.output-content,
+div.shinylive-wrapper {
+  background-color: rgba(250, 250, 250, 0.65);
+  border: 1px solid rgba(233, 236, 239, 0.65);
+  border-radius: 0.5rem;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 3px 7px rgba(0, 0, 0, 0.04),
+    0px 12px 30px rgba(0, 0, 0, 0.07);
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+div.shinylive-wrapper {
+  margin: 1em 0;
+  border-radius: 8px;
+}
+
+.shinylive-container {
+  background-color: #eeeff2;
+  min-height: auto;
+}
+
+.shinylive-container > div {
+  box-shadow: none;
+}
+
+.editor-container .cm-editor .cm-scroller {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+iframe.app-frame {
+  /* Override the default margin from Bootstrap */
+  margin-bottom: 0;
+}