Embed demo app on docs home page

Author: wwwillchen

docs/index.md

@@ -19,6 +19,12 @@ Learn more in [Getting Started](./getting_started.md)
 
 ## Example app
 
-```python
---8<-- "mesop/examples/text_io.py"
-```
+=== "Code"
+
+    ```python
+    --8<-- "mesop/examples/text_io.py"
+    ```
+
+=== "Demo"
+
+    <iframe class="demo" src="https://mesop-y677hytkra-uc.a.run.app/text_io"></iframe>

docs/stylesheets/extra.css

@@ -159,3 +159,12 @@
 [data-md-color-scheme='mesop-dark'] .md-logo {
   filter: invert(1);
 }
+
+.demo {
+  width: 100%;
+  height: 400px;
+  border: 0;
+  margin-top: -16px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}

mkdocs.yml

@@ -98,8 +98,8 @@ extra_css:
 markdown_extensions:
   - pymdownx.highlight:
       anchor_linenums: true
-      auto_title: true
-
+  - pymdownx.tabbed:
+      alternate_style: true
   - pymdownx.superfences
   - pymdownx.snippets