Add docs

README.md

@@ -4,14 +4,23 @@ Embed [Observable Notebooks](https://observablehq.com/) in [Shiny for Python](ht
 
 Shinyobservable makes it a breeze to integrate libraries such as [D3](https://d3js.org/).
 
-Create any kind of JavaScript visualizations and let Shiny handle the interactivity. 
+Create any kind of JavaScript visualizations and let Shiny handle your data and interactivity. 
 
 ## Features
 
 * Embed entire notebooks
 * Embed selected cells only
 * Update data cells to update visualizations
 
+## Installation
+
+```bash
+pip install shinyobservable
+
+# Dev
+pip install git+https://github.com/eodaGmbH/py-shiny-shinyobservable
+```
+
 ## Quickstart
 
 ```python
@@ -39,6 +48,6 @@ def render_cells():
 
 Enjoy your Observable Notebook in Shiny!
 
-![](docs/images/complete-notebook.png)
+![](docs/images/chart-cell.png)
 
 See [docs/examples/getting_started/playground.py](docs/examples/getting_started/playground.py) for a detailed example.

docs/api.md

@@ -0,0 +1,9 @@
+# API Docs
+
+::: shinyobservable.Observable
+
+::: shinyobservable.ObservableRenderer
+
+::: shinyobservable.output_observable
+
+::: shinyobservable.ObservableContext

docs/examples/getting_started/basic_usage.py

@@ -3,19 +3,19 @@
 from shinyobservable import Observable, ObservableRenderer
 
 NOTEBOOK = "https://observablehq.com/@d3/zoomable-sunburst"
-# NOTEBOOK = "https://observablehq.com/d/31ab0068a4664578"
 
 ui.h1("Observable Notebook in Shiny")
 ui.div(a(NOTEBOOK, href=NOTEBOOK, target="_blank"))
 ui.hr()
 
 
+# Embed selected cells
 @ObservableRenderer
 def render_cells():
     return Observable(NOTEBOOK, cells=["chart"])
-    # return Observable(NOTEBOOK, cells=["mapView", "viewof mapView", "viewof h3Res"])
 
 
+# Include entire notebook
 # @ObservableRenderer
 def render_notebook():
     return Observable(NOTEBOOK)

docs/examples/getting_started/interactivity.py

@@ -0,0 +1,48 @@
+import random
+import string
+
+from htmltools import a
+from shiny import reactive
+from shiny.express import input, ui
+from shinyobservable import Observable, ObservableContext, ObservableRenderer
+
+NOTEBOOK = "https://observablehq.com/@d3/bar-chart-transitions/2"
+
+ui.h1("Observable Notebook in Shiny")
+ui.div(a(NOTEBOOK, href=NOTEBOOK, target="_blank"))
+ui.hr()
+
+
+def create_data():
+    return [
+        dict(letter=letter, frequency=random.uniform(0, 1))
+        for letter in string.ascii_uppercase[
+            random.randint(0, 3) : random.randint(20, 25)
+        ]
+    ]
+
+
+cells = ["viewof order", "chart", "data"]
+
+
+@ObservableRenderer
+def render_notebook():
+    return Observable(NOTEBOOK, cells=cells).redefine(
+        # data=create_data(),
+        data=[
+            dict(letter="A", frequency=0.1),
+            dict(letter="B", frequency=0.8),
+            dict(letter="C", frequency=0.6),
+        ],
+    )
+
+
+with ui.div(style="padding-top: 10px;"):
+    ui.input_action_button("update_data", "Update data")
+
+
+@reactive.Effect
+@reactive.event(input.update_data)
+async def update_data():
+    async with ObservableContext("render_notebook") as nb:
+        nb.redefine(data=create_data())

docs/examples/getting_started/redefine_data.py

@@ -0,0 +1,22 @@
+import requests
+from htmltools import a
+from shiny.express import ui
+from shinyobservable import Observable, ObservableRenderer
+
+NOTEBOOK = "https://observablehq.com/@d3/zoomable-sunburst"
+
+data = requests.get(
+    "https://raw.githubusercontent.com/observablehq/examples/main/custom-data/population.json"
+).json()
+
+print(data)
+
+ui.h1("Observable Notebook in Shiny")
+ui.div(a(NOTEBOOK, href=NOTEBOOK, target="_blank"))
+ui.hr()
+
+
+@ObservableRenderer
+def render_cells():
+    # Update the 'data' cell with the data downloaded above
+    return Observable(NOTEBOOK, cells=["chart"]).redefine(data=data)

docs/getting_started/interactivity.md

@@ -0,0 +1,3 @@
+```python
+-8<-- "getting_started/interactivity.py"
+```

docs/getting_started/redefine_data.md

@@ -0,0 +1,3 @@
+```python
+-8<-- "getting_started/redefine_data.py"
+```

docs/index.md

@@ -0,0 +1,32 @@
+# Welcome to Shinyobservable
+
+Embed [Observable Notebooks](https://observablehq.com/) in [Shiny for Python](https://shiny.posit.co/py/).
+
+[Shinyobservable](https://github.com/eodaGmbH/py-shiny-observable) makes it a breeze to integrate libraries such as [D3](https://d3js.org/).
+
+Create any kind of JavaScript visualizations and let Shiny handle your data and interactivity. 
+
+## Features
+
+* Embed entire notebooks
+* Embed selected cells only
+* Update data cells to update visualizations
+
+## Installation
+
+```bash
+pip install shinyobservable
+
+# Dev
+pip install git+https://github.com/eodaGmbH/py-shiny-shinyobservable
+```
+
+## Quickstart
+
+```python
+-8<-- "getting_started/basic_usage.py"
+```
+
+Enjoy your notebook!
+
+![](images/chart-cell.png)

mkdocs.yml

@@ -0,0 +1,43 @@
+site_name: Shinyobservable
+
+theme:
+  name: material
+  palette:
+    primary: "green"
+  features:
+    - navigation.tabs
+    - navigation.tabs.sticky
+
+nav:
+  - Getting Started:
+      - Welcome to Shinyobservable: index.md
+      - Redefine data cells: getting_started/redefine_data.md
+      - Interactivity: getting_started/interactivity.md
+  - API Documentation: api.md
+
+markdown_extensions:
+  - attr_list
+  - md_in_html
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite:
+  - pymdownx.superfences:
+  - pymdownx.snippets:
+      check_paths: true
+      base_path: [docs/examples, "."]
+
+plugins:
+  - search:
+  - mkdocstrings:
+      handlers:
+        python:
+          options:
+            docstring_style: google
+            docstring_section_style: table
+            show_root_heading: true
+            show_source: true
+
+watch:
+  - shinyobservable