Hey @jrus, observable-prerender might be a solution for this. Under the hood, observable-prerender uses Puppeteer to render notebooks, and Puppeteer can save webpages as PDFs. When trying this out, I added a new .pdf() method and fixed a few bugs (so thanks for the idea!), so here’s how you can do it with one of your notebooks, as of v0.2.0:
const { load } = require("@alex.garcia/observable-prerender");
(async function () {
const notebook = await load("@jrus/scpie");
await notebook.pdf("notebook.pdf");
await notebook.browser.close();
})();
You can see the ouput PDFs in this notebook!
However, it won’t be an exact match of what you see on observablehq.com. observable-prerender embeds the Observable Inspector stylesheet, but there’s more styling that exists on observablehq.com that doesn’t appear to be open-sourced. If you dig around in devtools network tab, you can find the custom stylesheets (which add things like fonts, styling, etc.), but it’s not easily available for non observablehq.com use.
One workaround is to copy-paste that custom stylesheets into the notebook itself. This won’t change anything for the observablehq.com notebook, but it will change the output of the observable-prerender notebook. I did this in this fork of your notebook.
Whipping out node and writing a custom script can be a hassle, though. There is a CSS @media print query that may be helpful, and you might be able to do some more magic with Puppeteer’s pdf() method to really carve out the PDF as you like.
