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

3

Thanks Martien! I had missed your reply in the holiday season!
In the end we ended up defining the pages, sections and subsections using html elements. It allowed us to be more dynamic and not have to hardcode any page names

1 Like