4 ms·
Slightly off-topic, but I wanted to share what a joy it was to use VitePress to build this new documentation site. We already use Vite for Plot development: ins
by mbostock 3y ago
Slightly off-topic, but I wanted to share what a joy it was to use VitePress to build this new documentation site. We already use Vite for Plot development: instant hot module reloading is fantastic for iterating on tests as you can instantly see the visual effect of your code changes. VitePress brings the same experience to docs, and the default theme (which we use with minor adjustments) is beautiful out of the box.
For this site, we wrote a little Vue component to support server-side rendering for Plot (as part of static site generation at build time). There’s just a little adapter to convert Vue’s hyperscript to the standard DOM API here:
https://github.com/observablehq/plot/blob/main/docs/components/PlotRender.js https://github.com/observablehq/plot/blob/main/docs/componen...
The end result is that all the Plot examples are authored simply as fenced js code blocks, but we get server-side rendering so the plots are already rendered when the page loads with no reflow! You can see an example here:
https://github.com/observablehq/plot/blob/33c5560e24aee08cdb648c847a7a2c7b6ebd3241/docs/why-plot.md?plain=1#L32-L36 https://github.com/observablehq/plot/blob/33c5560e24aee08cdb...
(For plots that would be too expensive to serialize to inline SVG, we render them client-side-only, and use requestIdleCallback or an IntersectionObserver to defer rendering to avoid jank.)
Add to that, while we were writing the docs, the VitePress team incorporated minisearch for instant search with no dependencies on external services. Huge kudos to Evan You and the VitePress team for building such a great product! It’s a huge boon to the open-source community to make it easier to write beautiful and usable docs.
Oh. And be sure to try dark mode!