Skip to content

Commit f1da124

Browse files
tschmtschm
authored
with a lean tailwind template, a corrected README and a demo.sh file to remember demonstrating how to use the tool (#10) (#14)
1 parent 5b48b43 commit f1da124

7 files changed

Lines changed: 94 additions & 138 deletions

File tree

‎.github/scripts/build.py‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,6 @@
2929

3030
from loguru import logger
3131

32-
# Configure logging
33-
# logging.basicConfig(
34-
# level=logging.INFO,
35-
# format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
36-
# datefmt='%Y-%m-%d %H:%M:%S'
37-
# )
38-
# logger = logging.getLogger("marimo-build")
39-
4032
def _export_html_wasm(notebook_path: Path, output_dir: Path, as_app: bool = False) -> bool:
4133
"""Export a single marimo notebook to HTML/WebAssembly format.
4234
@@ -185,7 +177,7 @@ def _export(folder: Path, output_dir: Path, as_app: bool=False) -> List[dict]:
185177

186178
def main(
187179
output_dir: Union[str, Path] = "_site",
188-
template: Union[str, Path] = "templates/index.html.j2",
180+
template: Union[str, Path] = "templates/tailwind.html.j2",
189181
) -> None:
190182
"""Main function to export marimo notebooks.
191183

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,22 @@ import polars as pl
3535
df = pl.read_csv(mo.notebook_location() / "public" / "penguins.csv")
3636
```
3737

38+
## 🎨 Templates
39+
40+
This repository includes several templates for the generated site:
41+
42+
1. `index.html.j2` (default): A template with styling and a footer
43+
2. `bare.html.j2`: A minimal template with basic styling
44+
3. `tailwind.html.j2`: A minimal and lean template using Tailwind CSS
45+
46+
To use a specific template, pass the `--template` parameter to the build script:
47+
48+
```bash
49+
uv run .github/scripts/build.py --template templates/tailwind.html.j2
50+
```
51+
52+
You can also create your own custom templates. See the [templates/README.md](templates/README.md) for more information.
53+
3854
## 🧪 Testing
3955

4056
To test the export process, run `.github/scripts/build.py` from the root directory.

‎build.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.github/scripts/build.py

‎demo.sh‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/bin/bash
2+
3+
# install uv/uvx
4+
curl -LsSf https://astral.sh/uv/install.sh | sh
5+
6+
# This is interesting as it works without installing
7+
# the dependencies before running this script
8+
uv run build.py \
9+
--output_dir '_site' \
10+
--template 'templates/tailwind.html.j2'

‎templates/README.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Templates receive the following variables from the build script:
3636
A complete template should include:
3737

3838
1. **Conditional Notebook Section**: Only display if notebooks exist
39-
39+
4040
```jinja
4141
{% if notebooks %}
4242
<h2>Notebooks</h2>
@@ -52,7 +52,7 @@ A complete template should include:
5252
```
5353

5454
2. **Conditional App Section**: Only display if apps exist
55-
55+
5656
```jinja
5757
{% if apps %}
5858
<h2>Apps</h2>
@@ -77,14 +77,16 @@ uv run .github/scripts/build.py --output-dir _site --template templates/your-cus
7777

7878
## Example Templates
7979

80-
This repository includes two example templates:
80+
This repository includes three example templates:
8181

82-
1. `bare.html.j2`: A minimal template with basic styling
83-
2. `index.html.j2`: The default template with more styling and a footer
82+
1. `index.html.j2`: A less lean template with more styling and a footer
83+
2. `tailwind.html.j2`: A minimal and lean template using Tailwind CSS
8484

8585
## Best Practices
8686

87-
1. **Styling**: Include CSS directly in the template using `<style>` tags for simplicity
87+
1. **Styling**:
88+
- Include CSS directly in the template using `<style>` tags for simplicity, or
89+
- Use Tailwind CSS via CDN for a utility-first approach without custom CSS
8890
2. **Responsive Design**: Ensure the template works well on different screen sizes
8991
3. **Conditional Sections**: Use `{% if %}` blocks to conditionally display sections based on data availability
9092
4. **Comments**: Include comments in your template to explain complex sections

‎templates/bare.html.j2‎

Lines changed: 0 additions & 123 deletions
This file was deleted.

‎templates/tailwind.html.j2‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>marimo WebAssembly + GitHub Pages Template</title>
7+
<!-- Include Tailwind CSS via CDN -->
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
</head>
10+
<body class="font-sans text-gray-800 bg-white p-5">
11+
<div class="max-w-4xl mx-auto">
12+
<!-- Header -->
13+
<header class="bg-gray-100 p-6 text-center rounded-lg mb-6">
14+
<img src="https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg" alt="marimo Logo" class="w-20 h-auto mx-auto mb-3">
15+
<h1 class="text-2xl font-bold mb-2">marimo WebAssembly + GitHub Pages Template</h1>
16+
<p class="text-sm">Interactive Python notebooks exported to WebAssembly and deployed to GitHub Pages</p>
17+
</header>
18+
19+
<main>
20+
{% if notebooks %}
21+
<h2 class="text-xl font-bold text-center my-4">Notebooks</h2>
22+
<p class="text-center mb-4">Interactive notebooks in edit mode - you can modify and experiment with the code</p>
23+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
24+
{% for notebook in notebooks %}
25+
<!-- {{ notebook.display_name }} Notebook -->
26+
<div class="bg-gray-50 border border-gray-200 rounded-lg overflow-hidden">
27+
<div class="bg-gray-200 p-3 font-semibold">{{ notebook.display_name }}</div>
28+
<div class="p-4">
29+
<a href="{{ notebook.html_path }}" class="inline-block bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded transition-colors">Open Notebook</a>
30+
</div>
31+
</div>
32+
{% endfor %}
33+
</div>
34+
{% endif %}
35+
36+
{% if apps %}
37+
<h2 class="text-xl font-bold text-center my-4">Apps</h2>
38+
<p class="text-center mb-4">Interactive applications in run mode - code is hidden for a clean user interface</p>
39+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
40+
{% for app in apps %}
41+
<!-- {{ app.display_name }} App -->
42+
<div class="bg-gray-50 border border-gray-200 rounded-lg overflow-hidden">
43+
<div class="bg-gray-100 p-3 font-semibold">{{ app.display_name }}</div>
44+
<div class="p-4">
45+
<a href="{{ app.html_path }}" class="inline-block bg-amber-500 hover:bg-amber-600 text-white py-1 px-3 rounded transition-colors">Open App</a>
46+
</div>
47+
</div>
48+
{% endfor %}
49+
</div>
50+
{% endif %}
51+
</main>
52+
53+
<footer class="mt-10 pt-6 border-t border-gray-200 text-center text-sm text-gray-600">
54+
<p class="mb-2">Built with <a href="https://marimo.io" target="_blank" class="text-blue-500 hover:underline">marimo</a> - Interactive Python notebooks</p>
55+
</footer>
56+
</div>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)