Dynamically define pages on observablehq.config.js

Community Help
1

I’ve used observable framework to build visualisations for a couple of projects. These visualisations sit in different pages and most of these are common across projects. At the moment, I specify the pages and sections statically in observablehq.config.js. Is there a way to dynamically choose which pages show up depending on the project? Is there a way to have dynamic paths on the pages based on a parameter?

2

Hi dh810,

You can use Parameterized routes.

Or you can generate the pages[], e.g. like so.

In observable.config.js, import pages[] and include it in the export default {}:

import { pages } from "./src/zones/zones.js"`
…
export default {
  …
  pages,
  …
}

In zones.js, import any and all sections and subsections you may need:

import { aardbron, geld, money } from "./aardbron.js";
import { dna } from "./dna.js";
export const pages = [
  dna,
  aardbron,
  money,
  geld,
].map(pager)

Each of these is a pages[] type. pager() converts all links to clean hrefs.

See it live at http://aarde.aardrock.nl.

Source: GitHub - Martien/Aarde: The Works from Martien