Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: convert gifs to webm for better performance #3478

Merged
merged 5 commits into from
Jan 17, 2025
Merged

docs: convert gifs to webm for better performance #3478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a4ba0b2
docs: convert gifs to webm for better performance
mscolnick Jan 17, 2025
c4e87d1
Migrate GIFs to HTML videos with autoplay and centered
devin-ai-integration[bot] Jan 17, 2025
3effeb4
Update video extensions from .mp4 to .webm
devin-ai-integration[bot] Jan 17, 2025
61cf49d
fixes
mscolnick Jan 17, 2025
7b3109b
fixes, hook
mscolnick Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/_static/docs-dataframe-table.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-dataframe-transform.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-delete-cell.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-df.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-disable-cell.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-enable-cell.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-intro-app.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-intro.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-markdown-toggle.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-model-comparison.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-state-counter.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-state-task-list.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/docs-state-tied.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/embedding.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/faq-marimo-ui.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/intro_condensed.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/intro_tutorial.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/outputs.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/reactive.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/readme-ui-form.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/readme-ui.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/readme.webm
View file
Open in desktop
Binary file not shown.
Binary file added docs/_static/share-wasm-link.webm
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion docs/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ synchronized with the Python kernel: no callbacks, no observers, no manually
re-running cells.

<p align="center">
<img src="/_static/faq-marimo-ui.gif" width="600px" />
<video autoplay muted loop width="600px" align="center" src="/_static/faq-marimo-ui.webm">
</video>
</p>

## Using marimo
Expand Down
9 changes: 6 additions & 3 deletions docs/getting_started/key_concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ variables defined by that cell._ This is reactive execution.

<div align="center">
<figure>
<img src="/_static/reactive.gif" width="600px"/>
<video autoplay muted loop width="600px" align="center" src="/_static/reactive.webm">
</video>
</figure>
</div>

Expand Down Expand Up @@ -106,7 +107,8 @@ other marimo elements to build rich composite outputs:

<div align="center">
<figure>
<img src="/_static/outputs.gif" width="600px"/>
<video autoplay muted loop width="600px" align="center" src="/_static/outputs.webm">
</video>
</figure>
</div>

Expand Down Expand Up @@ -137,7 +139,8 @@ that can wrap other UI elements.

<div align="center">
<figure>
<img src="/_static/readme-ui.gif" width="600px"/>
<video autoplay muted loop width="600px" align="center" src="/_static/readme-ui.webm">
</video>
</figure>
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/getting_started/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,6 @@ all marimo notebooks in your current directory.

<div align="center">
<figure>
<img src="/assets/vscode-marimo.png" alt="VS Code extension for marimo"/>
<img src="/_static/vscode-marimo.png" alt="VS Code extension for marimo"/>
</figure>
</div>
3 changes: 2 additions & 1 deletion docs/guides/editor_features/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@ Get a link to share your notebook via our [online playground](../wasm.md):

<div align="center">
<figure>
<img src="/_static/share-wasm-link.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/share-wasm-link.webm">
</video>
</figure>
</div>

Expand Down
6 changes: 4 additions & 2 deletions docs/guides/interactivity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ global variable automatically runs all cells that reference it.**

<div align="center">
<figure>
<img src="/_static/readme-ui.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/readme-ui.webm">
</video>
</figure>
</div>

Expand Down Expand Up @@ -74,7 +75,8 @@ value on form submission.

<div align="center">
<figure>
<img src="/_static/readme-ui-form.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/readme-ui-form.webm">
</video>
<figcaption>Use a form to gate value updates on submission</figcaption>
</figure>
</div>
Expand Down
6 changes: 4 additions & 2 deletions docs/guides/outputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ documented in the [API reference](../api/index.md).

<div align="center">
<figure>
<img src="/_static/outputs.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/outputs.webm">
</video>
</figure>
</div>

Expand Down Expand Up @@ -73,7 +74,8 @@ top right.

<div align="center">
<figure>
<img src="/_static/docs-markdown-toggle.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-markdown-toggle.webm">
</video>
<figcaption>marimo is pure Python, even when you're using markdown.</figcaption>
</figure>
</div>
Expand Down
3 changes: 2 additions & 1 deletion docs/guides/publishing/playground.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,8 @@ link` to get a `marimo.app/...` URL representing your notebook:

<div align="center">
<figure>
<img src="/_static/share-wasm-link.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/share-wasm-link.webm">
</video>
</figure>
</div>

Expand Down
9 changes: 6 additions & 3 deletions docs/guides/reactivity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ eliminates a common cause of bugs in traditional notebooks like Jupyter.

<!-- <div align="center">
<figure>
<img src="/_static/docs-delete-cell.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-delete-cell.webm">
</video>
<figcaption>No hidden state: deleting a cell deletes its variables.</figcaption>
</figure>
</div> -->
Expand Down Expand Up @@ -195,7 +196,8 @@ disabled, it and its dependents are blocked from running.

<div align="center">
<figure>
<img src="/_static/docs-disable-cell.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-disable-cell.webm">
</video>
<figcaption>Disabling a cell blocks it from running.</figcaption>
</figure>
</div>
Expand All @@ -205,7 +207,8 @@ disabled, marimo will automatically run it.

<div align="center">
<figure>
<img src="/_static/docs-enable-cell.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-enable-cell.webm">
</video>
<figcaption>Enable a cell through the context menu. Stale cells run
automatically.</figcaption>
</figure>
Expand Down
15 changes: 10 additions & 5 deletions docs/guides/state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ But sometimes, you might want interactions to mutate state:

<div align="center" style="margin-top:2rem; margin-bottom:2rem">
<figure>
<img src="/_static/docs-state-task-list.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.webm">
</video>
</figure>
<figcaption>A proof-of-concept TODO list made using state.</figcaption>
</div>
Expand All @@ -52,7 +53,8 @@ But sometimes, you might want interactions to mutate state:

<div align="center" style="margin-top:2rem; margin-bottom:2rem">
<figure>
<img src="/_static/docs-state-tied.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-tied.webm">
</video>
<figcaption>Use state to tie two elements together in a cycle.</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -153,7 +155,8 @@ implementation using state is simpler.

<div align="center">
<figure>
<img src="/_static/docs-state-counter.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-counter.webm">
</video>
</figure>
</div>

Expand Down Expand Up @@ -195,7 +198,8 @@ value depends on the other. This is impossible to do without `mo.state`.

<div align="center">
<figure>
<img src="/_static/docs-state-tied.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-tied.webm">
</video>
</figure>
</div>

Expand Down Expand Up @@ -249,7 +253,8 @@ The next few cells use state to create a todo list.

<div align="center">
<figure>
<img src="/_static/docs-state-task-list.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-state-task-list.webm">
</video>
</figure>
</div>

Expand Down
8 changes: 5 additions & 3 deletions docs/guides/working_with_data/dataframes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ marimo lets you page through, search, sort, and filter dataframes, making it
extremely easy to get a feel for your data.

<figure>
<video autoplay controls loop width="100%" height="100%" align="center" src="/_static/docs-df.mp4">
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-df.webm">
</video>
<figcaption>marimo brings dataframes to life.</figcaption>
</figure>
Expand Down Expand Up @@ -86,7 +86,8 @@ notebook.

<div align="center">
<figure>
<img src="/_static/docs-dataframe-transform.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-transform.webm">
</video>
<figcaption>Build transformations using a GUI</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -200,7 +201,8 @@ dataframe_.

<div align="center">
<figure>
<img src="/_static/docs-dataframe-table.gif"/>
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-dataframe-table.webm">
</video>
<figcaption>Select rows in a table, get them back as a dataframe</figcaption>
</figure>
</div>
Expand Down
3 changes: 2 additions & 1 deletion docs/guides/working_with_data/plotting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ automatically made available as Pandas dataframes in Python._

<div align="center">
<figure>
<img src="/_static/docs-intro.gif" width="600px"/>
<video autoplay muted loop width="600px" align="center" src="/_static/docs-intro.webm">
</video>
</figure>
</div>

Expand Down
26 changes: 26 additions & 0 deletions docs/hooks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import re
from pathlib import Path
from typing import Any


def on_page_markdown(markdown: str, **kwargs: Any) -> str:
del kwargs
static_dir = Path("docs/")
if not static_dir.exists():
return markdown

# Find all src="/" patterns
pattern = r'src="(/[^"]+)"'
matches = re.finditer(pattern, markdown)

for match in matches:
src_path = match.group(1)
# Remove leading slash and check if file exists in _static
relative_path = src_path.lstrip("/")
full_path = static_dir / relative_path

if not full_path.exists():
print(f"⚠️ Warning: Static asset not found: {src_path}")
print(f" Expected at: {full_path}")

return markdown
26 changes: 17 additions & 9 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ reference its variables, eliminating the error-prone task of manually
re-running cells. Delete a cell and marimo scrubs its variables from program
memory, eliminating hidden state.

<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/reactive.gif" width="700px" />
<video autoplay muted loop width="700px" align="center" src="/_static/reactive.webm">
</video>

<a name="expensive-notebooks"></a>

Expand All @@ -93,13 +94,14 @@ transformers](api/inputs/dataframe.md), and [chat
interfaces](api/inputs/chat.md), and the cells that
use them are automatically re-run with their latest values.

<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/readme-ui.gif" width="700px" />
<video autoplay muted loop width="700px" align="center" src="/_static/readme-ui.webm">
</video>

**Interactive dataframes.** [Page through, search, filter, and
sort](./guides/working_with_data/dataframes.md)
millions of rows blazingly fast, no code required.

<img src="_static/docs-df.gif">
<video autoplay muted loop width="100%" height="100%" align="center" src="/_static/docs-df.mp4">

**Performant runtime.** marimo runs only those cells that need to be run by
statically analyzing your code.
Expand Down Expand Up @@ -155,7 +157,8 @@ code hidden and uneditable:
marimo run your_notebook.py
```

<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/docs-model-comparison.gif" style="border-radius: 8px" width="450px" />
<video autoplay muted loop width="450px" align="center" src="/_static/docs-model-comparison.webm" style="border-radius: 8px">
</video>

**Execute as scripts.** Execute a notebook as a script at the
command line:
Expand Down Expand Up @@ -190,7 +193,8 @@ marimo is easy to get started with, with lots of room for power users.
For example, here's an embedding visualizer made in marimo
([video](https://marimo.io/videos/landing/full.mp4)):

<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/embedding.gif" width="700px" />
<video autoplay muted loop width="700px" align="center" src="/_static/embedding.webm">
</video>

Check out our [guides](guides/index.md), our [example
gallery](https://marimo.io/gallery), and our
Expand All @@ -201,22 +205,26 @@ GitHub to learn more.
<tr>
<td>
<a target="_blank" href="getting_started/key_concepts">
<img src="_static/reactive.gif" style="max-height: 150px; width: auto; display: block" />
<video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/reactive.webm">
</video>
</a>
</td>
<td>
<a target="_blank" href="api/inputs/">
<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/readme-ui.gif" style="max-height: 150px; width: auto; display: block" />
<video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/readme-ui.webm">
</video>
</a>
</td>
<td>
<a target="_blank" href="guides/working_with_data/plotting">
<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/docs-intro.gif" style="max-height: 150px; width: auto; display: block" />
<video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/docs-intro.webm">
</video>
</a>
</td>
<td>
<a target="_blank" href="api/layouts/">
<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/outputs.gif" style="max-height: 150px; width: auto; display: block" />
<video autoplay muted loop style="max-height: 150px; width: auto; display: block" src="/_static/outputs.webm">
</video>
</a>
</td>
</tr>
Expand Down
Loading
Loading