https://github.com/radames/observablehq-viewer

Simple service to generate Observablehq notebooks previews outside Observablehq UI. It's also reproducing Observablehq UI styles
https://github.com/radames/observablehq-viewer

cloudflare-workers observable-notebook observablehq server-side service viewer

Last synced: 2 months ago
JSON representation

Simple service to generate Observablehq notebooks previews outside Observablehq UI. It's also reproducing Observablehq UI styles

• Host: GitHub
• URL: https://github.com/radames/observablehq-viewer
• Owner: radames
• Created: 2020-07-06T07:32:06.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-15T02:35:40.000Z (over 2 years ago)
• Last Synced: 2024-01-31T07:52:07.711Z (5 months ago)
• Topics: cloudflare-workers, observable-notebook, observablehq, server-side, service, viewer
• Language: CSS
• Homepage: https://observablehq-viewer.radamar.workers.dev
• Size: 8.08 MB
• Stars: 12
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - radames/observablehq-viewer - Simple service to generate Observablehq notebooks previews outside Observablehq UI. It's also reproducing Observablehq UI styles (CSS)

README

        
# ObservableHQ Viewer 

This project makes it simple to preview an [Observablehq](https://observablehq.com/) notebook outside Observablehq UI.

## Usage

1. #### `https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK`

1. #### `https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK?cells=cellname1,cellname2`

1. #### `https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK?cells=cellname1,cellname2&fullwidth=1`

#### Examples

### [`https://observablehq-viewer.radamar.workers.dev/@fil/synchronized-projections`](https://observablehq-viewer.radamar.workers.dev/@fil/synchronized-projections)

from [`@fil/synchronized-projections`](https://observablehq.com/@fil/synchronized-projections)

### [`https://observablehq-viewer.radamar.workers.dev/@mbostock/voronoi-stippling`](https://observablehq-viewer.radamar.workers.dev/@mbostock/voronoi-stippling)

from [`@mbostock/voronoi-stippling`](https://observablehq.com/@mbostock/voronoi-stippling)

### Named Cells

You can target only interesting cells and let code cells out of your preview. You will need named cells

```js

cellName = {

  

}

```

#### Example

Take this https://observablehq.com/@johnburnmurdoch/bar-chart-race

Here you can preview only the cell names `chart` 

### [`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?cells=chart`](https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?cells=chart)

or the whole notebook

### [`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race`](https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race)

### `https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK?cells=cellname1,cellname2`

or multiple cells

https://observablehq-viewer.radamar.workers.dev/@radames/hello-d3fc-webgl?cells=title,chartEl

### Full Width

Pass `fullwidth=1` param to render the cells on 100% of viewport, disabling `max-width: 64rem` that Observablehq UI defaults.

#### Example

### [`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?cells=chart&fullwidth=1`](https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?cells=chart&fullwidth=1)

or the whole notebook

### [`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?fullwidth=1`](https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?fullwidth=1)

#### TODOS

 - link back to original notebook on Observablehq

 - notebook author information on preview

 - change page title to notebook title (fetch title from observablehq api)