observablehq/framework v1.8.0

on GitHub

Sidebar and pager improvements

Sidebar sections can now have header links, which is useful for sections with main pages. Clicking on the section will visit the section’s main page while opening the section in the sidebar to show related pages. To give a section a header link, set the path option for a given section. See the pages config option for more.

export default {
  pages: [
    {
      name: "Section 1",
      path: "/s01/",
      open: false,
      pages: [
        {name: "Page 1.1", path: "/s01/page1"}
      ]
    },
    {
      name: "Section 2",
      path: "/s02/",
      open: false,
      pages: [
        {name: "Page 2.1", path: "/s02/page1"},
        {name: "Page 2.2", path: "/s02/page2"}
      ]
    }
  ]
};

The sidebar now supports links to external pages; these are denoted by a northeast arrow ↗︎ and open in a new window. (We use this feature in the Framework docs to link to examples.) The sidebar now renders sections correctly when there are no top-level pages.

Sidebar pages and sections can now use the pager option to define separate sequences for the next & previous links in the footer, or to opt-out of the pager for specific pages or sections. (We use this feature in the Framework docs to have separate sequences for inputs, and to suppress the pager on library pages.) The pager option can also be defined in a page’s front matter. If a page sets the pager front matter option to false or null, the pager is hidden.

Other improvements

The head, header, and footer config options can now be specified as functions, allowing dynamic footers. These functions are passed an object with the page’s title, (front-matter) data, and path, and must return a string.

We’ve improved how data loaders are spawned, fixing a FATAL Error: fsync failed! error with DuckDB data loaders that output directly to stdout. We also fixed the normalization of plain HTML links such as <a href="/test.html">hello</a>; these are now correctly converted to relative links.

New examples! 🎉

We’ve been hard at work developing new examples.

• geotiff - Parsing GeoTIFF with geotiff.js, then visualizing with Observable Plot
• netcdf - Parsing NetCDF with netcdfjs, then visualizing with Observable Plot
• vega-dark - Responsive dark mode in Vega-Lite
• vega-responsive - Responsive width in Vega-Lite using ResizeObserver
• loader-arrow - Generating Apache Arrow IPC files
• loader-databricks - Loading data from Databricks
• loader-duckdb - Processing data with DuckDB
• loader-github - Loading data from GitHub
• loader-google-analytics - Loading data from Google Analytics
• loader-parquet - Generating Apache Parquet files
• loader-postgres - Loading data from PostgreSQL
• loader-snowflake - Loading data from Snowflake
• netcdf-contours - Converting NetCDF to GeoJSON with netcdfjs and d3-geo-voronoi
• custom-input-2d - A custom 2D input with bidirectional binding
• markdown-it-container - The markdown-it-container plugin
• markdown-it-footnote - The markdown-it-footnote plugin
• markdown-it-wikilinks - The markdown-it-wikilinks plugin
• custom-stylesheet - Defining a custom stylesheet (custom theme)
• intersection-observer - Scrollytelling with IntersectionObserver
• responsive-iframe - Adjust the height of an embedded iframe to fit its content

See all examples here: https://github.com/observablehq/framework/tree/main/examples

Please let us know which examples you’d like to see.

Full Changelog: v1.7.1...v1.8.0