Skip to content

Add transformNotebook function to Vite Observable plugin #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 7, 2025

Conversation

rreusser
Copy link
Contributor

@rreusser rreusser commented Aug 7, 2025

Following #30, This PR adds a transformNotebook function to the Observable Vite plugin which allows you to transform the parsed notebook during build. A sample use case of this is to modify or remove the title heading, replacing it with something else.1 I'm sure there are many interesting and also some less reputable use-cases. It's niche, but when it's useful, it's seems useful.

No-op sample usage:

observable({
  transformNotebook: (notebook, context) => notebook
})

My usage here: https://github.com/rreusser/notebooks/blob/276dd592e5bb0eb6943931e5c3b072cad2c652e9/vite.config.js#L41-L52

I was hesitant to tack on a bunch of escape hatches to the lovely vite plugin, but perhaps the additions are reasonable because 1) they add no complexity, and 2) are reasonable accommodations for the realities of working notebooks into a website.

Footnotes

  1. The particular reason why removing the in-notebook title heading element was desirable for me is silly: I wanted the content to be 640px wide, but then the header was not full-bleed, and I didn't want to widen the main notebook element and then have to compensate by re-narrowing all cells except the header. I ended up using pseudo-elements transformed to make the header run off the page and look full-bleed, which worked, but it was a mess. I also wanted to add the author and date, which could have been accomplished by inserting it into the notebook, but it was easier to just move that to the page template and use transformNotebook to remove the heading.

@rreusser rreusser changed the title Transform notebook Add transformNotebook function to Vite Observable plugin Aug 7, 2025
@mbostock mbostock merged commit b3b9809 into observablehq:main Aug 7, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants