Extending Observable to the backend with a custom serverless runtime.
Innovative live-coding workflows against production traffic.
params = ({
title: "Hello!",
description: "An example of a simple custom embedding",
image:
"https://static.observableusercontent.com/files/e317bdba3a086d0dd589c78ebd8f96068b6c2991ff1e90370339bbdbd3bd71f2c446fb16e6542264a9b187e2d8778dcfcf722e91561539c03921aff20b8ce46b",
url:
"https://webcode.run/observablehq.com/@tomlarkworthy/example-custom-embed"
})
webserver = deploy(
"default",
async (req, res, ctx) => {
res.header("cache-control", "public, max-age: 3600, s-maxage: 3600");
res.send(page(params));
},
{
hostNotebook: "@tomlarkworthy/example-custom-embed"
}
)
page = ({
title,
description,
type = "article",
image,
url,
twitter_card = "summary_large_image",
notebook = "@tomlarkworthy/example-custom-embed"
} = {}) => `<!DOCTYPE html>
<meta property="og:title" content="${title}">
<meta property="og:description" content="${description}">
<meta property="og:type" content="${type}" />
<meta property="og:image" content="${image}">
<meta property="og:url" content="${url}">
<meta name="twitter:card" content="${twitter_card}">
<body style="background-color:yellow;">
<div id="display"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/${notebook}.js?v=3";
new Runtime().module(notebook, name => {
if (name === "display") {
return new Inspector(document.querySelector("#display"));
}
});
</script>
<script defer data-domain="example.com" src="https://plausible.io/js/plausible.js"></script>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
