How to expose cell as text similar to raw.githubusercontent ?

Community Help
1

Hi all,

I have a config file that I would like to edit in observablehq and make available (say as json) to a regular web page (not another notebook) similar to what raw.githubusercontent does.

The config notebook would have 2 cells: the first containing an object, the second JSON.stringify(first cell).

  • Is it possible ?
  • Alternatively, is there a way to commit the second cell to github directly (and simply) from observablehq (I login with my github ID) ?

Any thought on this use case, or better ideas ?

2

Hi @oscar6echo.

One option would be to click Download JSON next to your object cell, and then upload the resulting file to GitHub (or GitHub Gist) for hosting.

Another option would be to use our embed API to compute the live value from your notebook directly in your application. That would look something like this:

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/d/05bc09bc545945d6.js?v=3";

const main = new Runtime().module(define);

main.value("object").then(
  ({message}) => console.log(message),
  error => console.error(error)
);

Here’s a live example:

https://bl.ocks.org/mbostock/raw/a3e8530539c73282d051ac6f5734cb48/6bc6ae51e62f49b86eafc638c5b9ae97055a80bd/

2 Likes
3

Ok ! This embed API is powerful !!
Thx a lot @mbostock and team , not just for the tip, but for builing observablehq in such a flexible, composable way :clap:

For reference, some remarks I made myself:

  • For the embed API to work a notebook has to be ‘shared’ not necessarily ‘published’. A published notebook’s url contains its title (first cell markdown #mytitle). A shared notebook’s url contains a sequence after d/. Presumably ‘shared’ notebooks are not searchable, as opposed to ‘published’ notebooks.
  • No cors issue as https://api.observablehq.com/d/XXXXX.js?v=3 returns header access-control-allow-origin: *
  • A cell is evaluated at each request to https://api.observablehq.com/XXXX.js?v=3 so that dynamic values e.g. new Date() are updated

And a suggestion:

  • Apparently the embed API will not pass urlParams - for example I tried https://api.observablehq.com/d/XXXXX.js?v=3&foo=azerty. Such arguably small feature would add EVEN MORE flexibility. What do you think ?
4

@oscar6echo, even better than url params, you can actually redefine cell values live, even do so multiple times for the same embed! Try module.redefine("cellName", newValue), you can find more info in https://observablehq.com/@observablehq/downloading-and-embedding-notebooks.

5

@thomasballinger Yes. And even simpler, instead of urlParams, I can just import a function config(params) which returns the appropriate config. In the notebook params are urlParams. Via the embed API I pass the params directy to function config.

So on second thought, I drop my suggestion.