self-hosted documentation with framework

.github/workflows/node.js.yml

@@ -18,9 +18,9 @@ jobs:
         node-version: [20]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - run: yarn --frozen-lockfile

docs/.gitignore

@@ -0,0 +1 @@
+/.observablehq/

docs/index.md.sh

@@ -0,0 +1,6 @@
+echo "---
+theme: alt
+---
+"
+
+cat README.md

docs/snapshots/[snapshot].png.js

@@ -0,0 +1,25 @@
+import * as snapshots from "../../test/snapshots.js";
+import {parseArgs} from "node:util";
+import sharp from "sharp";
+
+const {
+  values: {snapshot}
+} = parseArgs({
+  options: {snapshot: {type: "string"}}
+});
+
+const {projection, dark} = snapshot.match(/^(?<projection>.*?)(-(?<dark>dark))?$/).groups;
+
+snapshots[projection]()
+  .then(async(canvas) => {
+    if (dark) {
+      const context = canvas.getContext("2d");
+      const im = context.getImageData(0, 0, canvas.width, canvas.height);
+      const {data} = im
+      for (let i = 0; i < data.length; ++i) {
+        if ((i % 4) < 3) data[i] = 30 + 225 * (1 - data[i] / 255);
+      }
+      context.putImageData(im, 0, 0);
+    }
+    process.stdout.write(await sharp(canvas.toBuffer()).png({quality: 60}).toBuffer())
+  });

observablehq.config.ts

@@ -0,0 +1,13 @@
+import * as snapshots from "./test/snapshots.js";
+
+export default {
+  title: "d3-geo-polygon",
+  src: "docs",
+  output: "dist/docs",
+  async *dynamicPaths() {
+    for (const snapshot of Object.keys(snapshots)) {
+      yield `/snapshots/${snapshot}.png`;
+      yield `/snapshots/${snapshot}-dark.png`;
+    }
+  },
+};

package.json

@@ -57,21 +57,28 @@
     "d3-geo-projection": "4"
   },
   "devDependencies": {
+    "@observablehq/framework": "^1.12.0",
     "@rollup/plugin-terser": "0.4",
     "canvas": "2",
     "eslint": "8",
     "mocha": "10",
     "pixelmatch": "5",
     "pngjs": "6",
     "rollup": "3",
+    "sharp": "^0.33.5",
     "topojson-client": "3",
-    "world-atlas": "1"
+    "world-atlas": "2"
   },
   "scripts": {
+    "docs:dev": "observable preview",
+    "docs:build": "observable build",
+    "docs:deploy": "observable deploy",
+    "build": "yarn docs:build",
+    "deploy": "yarn docs:deploy",
     "test": "mocha 'test/**/*-test.js' && eslint src test",
     "prepublishOnly": "rm -rf dist && rollup -c"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=18"
   }
 }

test/snapshots.js

@@ -42,13 +42,15 @@ async function renderWorld(projection, { points, extent, clip = false } = {}) {
       ? { type: "Sphere" }
       : graticule.extent(extent).outline();
   const world = JSON.parse(
-    await readFile("./node_modules/world-atlas/world/50m.json")
+    await readFile("./node_modules/world-atlas/land-50m.json")
   );
   const canvas = new Canvas(width, height);
   const context = canvas.getContext("2d");
   const path = geoPath(projection, context);
   context.fillStyle = "#fff";
-  context.fillRect(0, 0, width, height);
+  context.beginPath();
+  path(outline);
+  context.fill();
   context.save();
   if (clip) {
     context.beginPath();