interactive examples (#3418)

* interactive examples

* words

* remove log

docs/custom_theme/main.html

@@ -30,4 +30,23 @@
 
 </style>
 
+<script lang="js">
+window.onload = async (event) => {
+  const demos = document.querySelectorAll(".textual-web-demo");
+
+  if (demos.length){
+    await fetch("https://textual-web-demos.fly.dev/health-check/", {
+      method: 'GET',
+      mode: 'no-cors'
+    });
+    demos.forEach((element)=>{
+      const app = element.dataset.app;
+      const iframe_html = `<div class="textual-web-demo"><iframe width="100%" onload="this.parentElement.classList.add('-loaded');" src="https://textual-web.io/textualize/${app}?delay=y&fontsize=12&ping=https://textual-web-demos.fly.dev/health-check/"></iframe></div>`;
+      element.outerHTML = iframe_html;
+    });
+  }
+}
+
+</script>
+
 {% endblock %}

docs/guide/widgets.md

@@ -535,6 +535,10 @@ Here's a sketch of what the app should ultimately look like:
 
 There are three types of built-in widget in the sketch, namely ([Input](../widgets/input.md), [Label](../widgets/label.md), and [Switch](../widgets/switch.md)). Rather than manage these as a single collection of widgets, we can arrange them in to logical groups with compound widgets. This will make our app easier to work with.
 
+??? textualize "Try in Textual-web"
+
+    <div class="textual-web-demo" data-app="byte03"></div>
+
 ###  Identifying components
 
 We will divide this UI into three compound widgets:

docs/how-to/design-a-layout.md

@@ -27,6 +27,11 @@ Here's our sketch:
 It's rough, but it's all we need.
 
 
+??? textualize "Try in Textual-web"
+
+    <div class="textual-web-demo" data-app="layout06"></div>
+
+
 ## Tip 2. Work outside in
 
 Like a sculpture with a block of marble, it is best to work from the outside towards the center.

docs/index.md

@@ -24,7 +24,7 @@ Welcome to the [Textual](https://github.com/Textualize/textual) framework docume
 Textual is a *Rapid Application Development* framework for Python, built by [Textualize.io](https://www.textualize.io).
 
 
-Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal *or* a web browser (with [textual-web](https://github.com/Textualize/textual-web))!
+Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal *or* a [web browser](https://github.com/Textualize/textual-web)!
 
 
 

docs/stylesheets/custom.css

@@ -72,3 +72,45 @@ td code {
   opacity: 0.85;
 
 }
+
+.textual-web-demo iframe {
+  border: none;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  margin: 0;
+}
+
+
+.textual-web-demo {
+  display: flex;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  transition: 0.3s opacity;
+}
+
+.textual-web-demo.-loaded {
+  opacity: 1.0;
+  transition: 0.3s opacity;
+}
+
+:root {
+  --md-admonition-icon--textualize: url('/images/icons/textualize-logo.svg')
+}
+.md-typeset .admonition.textualize,
+.md-typeset details.textualize {
+  border-color: rgb(43, 155, 70);
+}
+.md-typeset .textualize > .admonition-title,
+.md-typeset .textualize > summary {
+  background-color: rgba(43, 155, 70, 0.1);
+}
+.md-typeset .textualize > .admonition-title::before,
+.md-typeset .textualize > summary::before {
+  background-color: rgb(43, 155, 70);
+  -webkit-mask-image: var(--md-admonition-icon--textualize);
+          mask-image: var(--md-admonition-icon--textualize);
+}

docs/tutorial.md

@@ -31,6 +31,18 @@ Here's what the finished app will look like:
 ```{.textual path="docs/examples/tutorial/stopwatch.py" title="stopwatch.py" press="tab,enter,tab,enter,tab,enter,tab,enter"}
 ```
 
+### Try it out!
+
+The following is *not* a screenshot, but a fully interactive Textual app running in your browser.
+
+
+!!! textualize "Try in Textual-web"
+
+    <div class="textual-web-demo" data-app="tutorial"></div>
+
+See [textual-web](https://github.com/Textualize/textual-web) if you are interested in publishing your apps on the web.
+
+
 ### Get the code
 
 If you want to try the finished Stopwatch app and follow along with the code, first make sure you have [Textual installed](getting_started.md) then check out the [Textual](https://github.com/Textualize/textual) repository:

mkdocs-common.yml

@@ -34,6 +34,7 @@ markdown_extensions:
       alternate_style: true
   - pymdownx.snippets
   - markdown.extensions.attr_list
+  - pymdownx.details
 
 theme:
   name: material