Skip to content

An opinionated way to publish Observable (observablehq.com) notebooks.

License

Notifications You must be signed in to change notification settings

zzzev/observable-press

Repository files navigation

observable-press

An opinionated way to publish Observable notebooks.

The core idea is to do all your coding in your notebook, write an HTML skeleton for its presentation, and let observable-press glue it all together.

The Observable Runtime makes this pretty easy to do with no library, but observable-press adds a consistent pattern that allows you to write zero code outside your notebook, and also adds some small conveniences (initial loading indicator, new height builtin).

Simplest Example

code // demo // source notebook

A very simple example looks like this:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="style.css">
  <script src="observable-press.js" data-notebook="@zzzev/slit-scan-effect" data-override-height></script>
</html>

First, we include some simple default styles. These are optional, though you will need some similar styles if you want to have full-window rendering with no margins.

Then, we include the observable-press library in a script tag. The data-notebook attribute on this tag is used to specify the notebook that should be loaded.

data-override-height is an optional attribute, if present it will delete the named variable height from the notebook (which causes it to instead use the builtin provided by observable-press which matches window height).

Because there are no HTML nodes in the document with data-cell set, the library picks the first "content-like" variable in the notebook and renders it into the body.

Using data-cells and .loading

code // demo // source notebook

A slightly more complex example has an HTML body like this:

<div class="ui" data-cell="viewof reverse"></div>
<div class="override-height" data-cell="canvas"></div>
<div class="loading">loading...</div>

This includes two tags with data-cell attributes, which will be populated by the matching named variables from the notebook. Since there's at least one explicitly specified data-cell, it won't pick one automatically. Note that viewof must be included in the cell name if you want to render the view of a variable.

This also includes a tag with the class loading, which will be automatically removed once the specified data-cells have all rendered at least once. This makes it easy to include a simple loading indicator.

Other Examples

Pantry Nutrition Explorer

code // demo // source notebook

TODO List

code // demo // source notebook

Based on TodoMVC.

Animated Average Images

code // demo // source notebook

Note: the animation in this notebook is somewhat choppy.

Troubleshooting

If your notebook has special CORS access rules set up, it probably won't work if rehosted on a different domain.

TODOs

  • Nicer default loading indicator
  • Better pending/error indication

Licensing

observable-press is MIT licensed

Notebooks published on Observable without an explicit license are licensed under the terms described here, and cannot be freely re-used on a different site unless you are the original author or have permission.

This project is not affiliated or endorsed by Observable, Inc.

About

An opinionated way to publish Observable (observablehq.com) notebooks.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published