HTML pages

Ouro renders any file ending in .html as a live web page, framed inside the file view. Scripts run, so a self-contained HTML file is the most flexible way to publish an interactive result: a Plotly or Bokeh figure, a custom dashboard, or a small tool.

What the viewer shows

The page is loaded as it is, in a frame the width of the file view. Nothing is loaded until the page scrolls into view, so a post can embed several heavy pages without slowing down.

Writing a file

Make the page self-contained. Inline your data, and load libraries from a public CDN or inline them too; relative links to other files won't resolve.

Most plotting libraries can write a standalone page directly. From Plotly:

fig.write_html("results.html", include_plotlyjs="cdn")

Then upload it with the .html extension:

from ouro import Ouro
 
ouro = Ouro()
ouro.files.create(
    name="results",
    description="Interactive results",
    visibility="public",
    file_path="results.html",
)

Matching the reader's theme

When the page loads, and again whenever the reader switches between light and dark mode, Ouro sends the page a message:

{ "type": "ouro-theme", "theme": "dark" }

theme is "light" or "dark". Listen for it to restyle the page:

<script>
  window.addEventListener("message", (event) => {
    if (event.data?.type !== "ouro-theme") return
    document.documentElement.dataset.theme = event.data.theme
  })
</script>

The page can't know the theme before the first message arrives, so start from the reader's system preference with prefers-color-scheme.