docs: update "How it works" diagram with details of Android, iOS, and Pyodide builds (#2816)

* Update diagram with details of Android, iOS, and Pyodide builds

* Update diagram as well

* Simplify

Co-Authored-By: Malcolm Smith <smith@chaquo.com>

* Improve WCAG for some text elements

* Update diagram snapshot

* Modernise image generation script and rerun

---------

Co-authored-by: Malcolm Smith <smith@chaquo.com>
Co-authored-by: Joe Rickerby <joerick@mac.com>
This commit is contained in:
Agriya Khetarpal
2026-04-10 13:09:28 -04:00
committed by GitHub
co-authored by Malcolm Smith Joe Rickerby
parent a42e5d3563
commit 1d5d9be23f
4 changed files with 141 additions and 60 deletions
+38 -30
View File
@@ -1,49 +1,57 @@
#!/usr/bin/env python3
import subprocess
import sys
import tempfile
from pathlib import Path
try:
from html2image import Html2Image # type: ignore[import-not-found]
from playwright.sync_api import sync_playwright # type: ignore[import-not-found]
except ImportError:
sys.exit(
msg = """
playwright not found. Install it with:
pip install playwright
playwright install chromium
Or, run this script with:
nox -s update_how_it_works_image
"""
html2image not found. Ensure you have Chrome (on Mac/Windows) or
Chromium (on Linux) installed, and then do:
pip install html2image
"""
)
raise SystemExit(msg) from None
def main() -> None:
subprocess.run(["mkdocs", "build"], check=True)
with tempfile.TemporaryDirectory() as tmp_dir_str:
tmp_dir = Path(tmp_dir_str)
subprocess.run(["mkdocs", "build", "--site-dir", tmp_dir], check=True)
hti = Html2Image(custom_flags=["--force-device-scale-factor=2"])
html_str = Path("docs/diagram.html").read_text()
css_tags = f"""
<style>{(tmp_dir / "css/theme.css").read_text()}</style>
<style>{(tmp_dir / "css/theme_extra.css").read_text()}</style>
<style>{(tmp_dir / "extra.css").read_text()}</style>
<style>
body {{
background: white;
}}
</style>
"""
html_str = f"<html><head>{css_tags}</head><body>{html_str}</body></html>"
html_str = Path("docs/diagram.md").read_text()
css_tags = f"""
<style>{Path("site/css/theme.css").read_text()}</style>
<style>{Path("site/css/theme_extra.css").read_text()}</style>
<style>{Path("site/extra.css").read_text()}</style>
<style>
body {{
background: white;
}}
</style>
"""
html_str = css_tags + html_str
html_path = Path(tmp_dir) / "diagram_screenshot.html"
html_path.write_text(html_str)
[screenshot, *_] = hti.screenshot(
html_str=html_str,
size=(830, 405),
)
dest_path = Path("docs/data/how-it-works.png")
dest_path = Path("docs/data/how-it-works.png")
dest_path.unlink(missing_ok=True)
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(device_scale_factor=2, viewport={"width": 830, "height": 600})
page.goto(html_path.as_uri())
page.wait_for_load_state("networkidle")
Path(screenshot).rename(dest_path)
height = page.evaluate("document.body.scrollHeight")
page.set_viewport_size({"width": 830, "height": height})
page.screenshot(path=str(dest_path), full_page=True)
browser.close()
if __name__ == "__main__":