Change demo iframe src to absolute path

Author: wwwillchen

docs/components/audio.md

@@ -4,7 +4,7 @@ Audio is the equivalent of an [`<audio>` HTML element](https://developer.mozilla
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=audio" style="height: 80px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=audio" style="height: 80px"></iframe>
 
 ```python
 --8<-- "demo/audio.py"

docs/components/badge.md

@@ -4,7 +4,7 @@ Badge decorates a UI component and is oftentimes used for unread message count a
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=badge" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=badge" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/badge.py"

docs/components/box.md

@@ -4,7 +4,7 @@ Box is a [content component](../guides/components.md#content-components) which a
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=box" style="height: 160px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=box" style="height: 160px"></iframe>
 
 ```python
 --8<-- "demo/box.py"

docs/components/button.md

@@ -4,7 +4,7 @@ Button is based on the [Angular Material button component](https://material.angu
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=button" style="height: 200px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=button" style="height: 200px"></iframe>
 
 ```python
 --8<-- "demo/button.py"

docs/components/chat.md

@@ -4,7 +4,7 @@ Chat component is a quick way to create a simple chat interface. Chat is part of
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=chat"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=chat"></iframe>
 
 ```python
 --8<-- "demo/chat.py"

docs/components/checkbox.md

@@ -4,7 +4,7 @@ Checkbox is a multi-selection form control and is based on the [Angular Material
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=checkbox" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=checkbox" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/checkbox.py"

docs/components/code.md

@@ -4,7 +4,7 @@ Code is used to render code with syntax highlighting. `code` is a simple wrapper
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=code"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=code"></iframe>
 
 ```python
 --8<-- "demo/code.py"

docs/components/divider.md

@@ -4,7 +4,7 @@ Divider is used to provide visual separation and is based on the [Angular Materi
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=divider" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=divider" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/divider.py"

docs/components/embed.md

@@ -4,7 +4,7 @@ Embed allows you to embed/[iframe](https://developer.mozilla.org/en-US/docs/Web/
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=embed"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=embed"></iframe>
 
 ```python
 --8<-- "demo/embed.py"

docs/components/icon.md

@@ -4,7 +4,7 @@ Icon displays a Material icon/symbol and is based on the [Angular Material icon
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=icon" style="height: 60px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=icon" style="height: 60px"></iframe>
 
 ```python
 --8<-- "demo/icon.py"

docs/components/image.md

@@ -4,7 +4,7 @@ Image is the equivalent of an [`<img>` HTML element](https://developer.mozilla.o
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=image" style="height: 200px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=image" style="height: 200px"></iframe>
 
 ```python
 --8<-- "demo/image.py"

docs/components/input.md

@@ -6,7 +6,7 @@ For longer text inputs, also see [Textarea](./textarea.md)
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=input" style="height: 120px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=input" style="height: 120px"></iframe>
 
 ```python
 --8<-- "demo/input.py"

docs/components/markdown.md

@@ -4,7 +4,7 @@ Markdown is used to render markdown text.
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=markdown_demo"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=markdown_demo"></iframe>
 
 ```python
 --8<-- "demo/markdown_demo.py"

docs/components/plot.md

@@ -4,7 +4,7 @@ Plot provides a convenient way to render [Matplotlib](https://matplotlib.org/) f
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=plot"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=plot"></iframe>
 
 ```python
 --8<-- "demo/plot.py"

docs/components/progress_bar.md

@@ -4,7 +4,7 @@ Progress Bar is used to indicate something is in progress and is based on the [A
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=progress_bar" style="height: 60px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=progress_bar" style="height: 60px"></iframe>
 
 ```python
 --8<-- "demo/progress_bar.py"

docs/components/progress_spinner.md

@@ -5,7 +5,7 @@ Progress Spinner is used to indicate something is in progress and is based on th
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=progress_spinner" style="height: 70px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=progress_spinner" style="height: 70px"></iframe>
 
 ```python
 --8<-- "demo/progress_spinner.py"

docs/components/radio.md

@@ -4,7 +4,7 @@ Radio is a single selection form control based on the [Angular Material radio co
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=radio" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=radio" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/radio.py"

docs/components/select.md

@@ -4,7 +4,7 @@ Select allows the user to choose from a list of values and is based on the [Angu
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=select" style="height: 200px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=select" style="height: 200px"></iframe>
 
 ```python
 --8<-- "demo/select.py"

docs/components/sidenav.md

@@ -4,7 +4,7 @@ Sidenav is a sidebar typically used for navigation and is based on the [Angular
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=sidenav" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=sidenav" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/sidenav.py"

docs/components/slide_toggle.md

@@ -4,7 +4,7 @@ Slide Toggle allows the user to toggle on and off and is based on the [Angular M
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=slide_toggle" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=slide_toggle" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/slide_toggle.py"

docs/components/slider.md

@@ -4,7 +4,7 @@ Slider allows the user to select from a range of values and is based on the [Ang
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=slider" style="height: 120px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=slider" style="height: 120px"></iframe>
 
 ```python
 --8<-- "demo/slider.py"

docs/components/table.md

@@ -4,7 +4,7 @@ Table allows the user to render an [Angular Material table component](https://ma
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=table"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=table"></iframe>
 
 ```python
 --8<-- "demo/table.py"

docs/components/text.md

@@ -4,7 +4,7 @@ Text displays text as-is. If you have markdown text, use the [Markdown](./markdo
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=text"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=text"></iframe>
 
 ```python
 --8<-- "demo/text.py"

docs/components/text_to_image.md

@@ -4,7 +4,7 @@ Text To Image component is a quick and simple way of getting started with Mesop.
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=text_to_image"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=text_to_image"></iframe>
 
 ```python
 --8<-- "demo/text_to_image.py"

docs/components/text_to_text.md

@@ -4,7 +4,7 @@ Text to text component allows you to take in user inputted text and return a tra
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=text_to_text"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=text_to_text"></iframe>
 
 ```python
 --8<-- "demo/text_to_text.py"

docs/components/textarea.md

@@ -6,7 +6,7 @@ This is similar to [Input](./input.md), but Textarea is better suited for long t
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=textarea" style="height: 200px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=textarea" style="height: 200px"></iframe>
 
 ```python
 --8<-- "demo/textarea.py"

docs/components/tooltip.md

@@ -4,7 +4,7 @@ Tooltip is based on the [Angular Material tooltip component](https://material.an
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=tooltip" style="height: 100px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=tooltip" style="height: 100px"></iframe>
 
 ```python
 --8<-- "demo/tooltip.py"

docs/components/uploader.md

@@ -5,7 +5,7 @@ matches the look of Angular Material Components.
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=uploader" style="height: 200px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=uploader" style="height: 200px"></iframe>
 
 ```python
 --8<-- "demo/uploader.py"

docs/components/video.md

@@ -4,7 +4,7 @@ Video is the equivalent of an [`<video>` HTML element](https://developer.mozilla
 
 ## Examples
 
-<iframe class="component-demo" src="/mesop/demo/?demo=video" style="height: 300px"></iframe>
+<iframe class="component-demo" src="https://google.github.io/mesop/demo/?demo=video" style="height: 300px"></iframe>
 
 ```python
 --8<-- "demo/video.py"

docs/mesop/demo.md docs/demo.md

@@ -53,9 +53,9 @@ Mesop is a Python-based UI framework that allows you to rapidly build web apps l
 
 <h2 style="margin: 0.5rem"> See what you can build in less than 10 lines of code... </h2>
 
-<iframe class="immersive-demo" src="/mesop/demo/"></iframe>
+<iframe class="immersive-demo" src="https://google.github.io/mesop/demo/"></iframe>
 
-Check out how the above [demo gallery](./mesop/demo.md) was [built in pure Mesop](https://github.com/google/mesop/blob/main/demo/main.py)!
+Check out how the above [demo gallery](./demo.md) was [built in pure Mesop](https://github.com/google/mesop/blob/main/demo/main.py)!
 
 ## Try it
 

docs/index.md

@@ -51,7 +51,7 @@ nav:
       - Advanced:
           - Embed: components/embed.md
           - Plot: components/plot.md
-  - Demo Gallery 🔗: mesop/demo.md
+  - Demo Gallery 🔗: demo.md
   - Blog:
       - blog/index.md
   - Internal: