Merge pull request #3155 from perspective-dev/remove-docusaurus

Remove `docusaurus`

Author: texodus

docs/build.config.mjs

@@ -0,0 +1,176 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import * as esbuild from "esbuild";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { createRequire } from "module";
+import { bundleAsync as bundleCssAsync, composeVisitors } from "lightningcss";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DIST = path.join(__dirname, "dist");
+
+function copyRecursive(src, dest) {
+    if (!fs.existsSync(src)) return;
+    const stat = fs.statSync(src);
+    if (stat.isDirectory()) {
+        fs.mkdirSync(dest, { recursive: true });
+        for (const child of fs.readdirSync(src)) {
+            copyRecursive(path.join(src, child), path.join(dest, child));
+        }
+    } else {
+        fs.copyFileSync(src, dest);
+    }
+}
+
+// Inline url() asset references as data URIs.
+export function inlineUrlVisitor(fromFile) {
+    const dir = path.dirname(fromFile);
+    return composeVisitors([
+        {
+            Url(url) {
+                const ext = path.extname(url.url).toLowerCase();
+                if (![".svg", ".png", ".gif"].includes(ext)) {
+                    return;
+                }
+
+                const resolved = path.resolve(dir, url.url);
+                if (!fs.existsSync(resolved)) {
+                    throw new Error(`File not found ${url.url}`);
+                    // return;
+                }
+
+                const content = fs.readFileSync(resolved);
+                const mime =
+                    ext === ".svg"
+                        ? "image/svg+xml"
+                        : ext === ".png"
+                          ? "image/png"
+                          : "image/gif";
+
+                const new_content = content
+                    .toString("base64")
+                    .split("\n")
+                    .map((x) => x.trim())
+                    .join("");
+
+                return {
+                    url: `data:${mime};base64,${new_content}`,
+                    loc: url.loc,
+                };
+            },
+        },
+    ]);
+}
+
+export const resolveNPM = (url) => ({
+    read(filePath) {
+        if (filePath.startsWith("http")) {
+            return `@import url("${filePath}");`;
+        }
+
+        return fs.readFileSync(filePath, "utf8");
+    },
+    resolve(specifier, from) {
+        if (specifier.startsWith("http")) {
+            return { external: specifier };
+        }
+
+        const _require = createRequire(url);
+
+        if (specifier.startsWith(".") || specifier.startsWith("/")) {
+            return path.resolve(path.dirname(from), specifier);
+        }
+
+        return _require.resolve(specifier);
+    },
+});
+
+async function build() {
+    // Clean and create dist
+    fs.mkdirSync(DIST, { recursive: true });
+
+    // Bundle CSS
+    const { code: cssCode } = await bundleCssAsync({
+        filename: path.join(__dirname, "./src/css/style.css"),
+        minify: true,
+        resolver: resolveNPM(import.meta.url),
+        visitor: inlineUrlVisitor("./src/css/style.css"),
+    });
+
+    fs.mkdirSync(path.join(DIST, "css"), { recursive: true });
+    fs.writeFileSync(path.join(DIST, "style.css"), cssCode);
+
+    // Bundle JS entry points
+    await esbuild.build({
+        entryPoints: [
+            path.join(__dirname, "src/index.ts"),
+            path.join(__dirname, "src/examples.ts"),
+            path.join(__dirname, "src/block.ts"),
+        ],
+        bundle: true,
+        splitting: true,
+        format: "esm",
+        outdir: DIST,
+        minify: true,
+        sourcemap: true,
+        target: ["es2022"],
+        define: {
+            global: "window",
+        },
+        loader: {
+            ".wasm": "file",
+            ".arrow": "file",
+        },
+    });
+
+    // Copy HTML files
+    for (const html of ["index.html", "examples.html", "block.html"]) {
+        fs.copyFileSync(
+            path.join(__dirname, "src", html),
+            path.join(DIST, html),
+        );
+    }
+
+    // Copy static assets
+    copyRecursive(path.join(__dirname, "static"), DIST);
+
+    // Generate blocks manifest
+    const blocksDir = path.join(DIST, "blocks");
+    if (fs.existsSync(blocksDir)) {
+        const manifest = {};
+        for (const example of fs.readdirSync(blocksDir)) {
+            const exDir = path.join(blocksDir, example);
+            if (!fs.statSync(exDir).isDirectory()) continue;
+            manifest[example] = fs
+                .readdirSync(exDir)
+                .filter(
+                    (f) =>
+                        !f.startsWith(".") &&
+                        !f.endsWith(".png") &&
+                        !f.endsWith(".arrow"),
+                );
+        }
+        fs.writeFileSync(
+            path.join(blocksDir, "manifest.json"),
+            JSON.stringify(manifest),
+        );
+    }
+
+    console.log("Build complete: dist/");
+}
+
+build().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});

docs/build.js docs/build.mjsdocs/build.js renamed to docs/build.mjs

@@ -10,12 +10,18 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-const puppeteer = require("puppeteer");
-const fs = require("fs");
-const cp = require("child_process");
-const path = require("node:path");
-const mkdirp = require("mkdirp");
-const EXAMPLES = require("./src/components/ExampleGallery/features.js").default;
+import puppeteer from "puppeteer";
+import * as fs from "node:fs";
+import * as cp from "node:child_process";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import EXAMPLES from "./src/data/features.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// features.js uses CJS exports.default, import it dynamically
+// const EXAMPLES = (await import("./src/data/features.ts")).default;
 
 const perspective = import(
     "@perspective-dev/client/dist/esm/perspective.node.js"
@@ -26,27 +32,7 @@ const DEFAULT_VIEWPORT = {
     height: 300,
 };
 
-function shuffle(array) {
-    let currentIndex = array.length,
-        randomIndex;
-
-    // While there remain elements to shuffle.
-    while (currentIndex != 0) {
-        // Pick a remaining element.
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex--;
-
-        // And swap it with the current element.
-        [array[currentIndex], array[randomIndex]] = [
-            array[randomIndex],
-            array[currentIndex],
-        ];
-    }
-
-    return array;
-}
-
-async function run_with_theme(page, is_dark = false) {
+async function run_with_theme(page, is_dark = false, order) {
     await page.goto("http://localhost:8080/");
     await page.setContent(template(is_dark));
     await page.setViewport(DEFAULT_VIEWPORT);
@@ -55,16 +41,16 @@ async function run_with_theme(page, is_dark = false) {
             await new Promise((resolve) => setTimeout(resolve, 10));
         }
     });
+
     await page.evaluate(async function () {
         const viewer = document.querySelector("perspective-viewer");
         await viewer.flush();
         await viewer.toggleConfig();
     });
 
-    const files = [];
     for (const idx in EXAMPLES) {
         const { config, viewport } = EXAMPLES[idx];
-        await await page.setViewport(viewport || DEFAULT_VIEWPORT);
+        await page.setViewport(viewport || DEFAULT_VIEWPORT);
         const new_config = Object.assign(
             {
                 plugin: "Datagrid",
@@ -93,18 +79,20 @@ async function run_with_theme(page, is_dark = false) {
             is_dark ? "_dark" : ""
         }.png`;
 
-        files.push(name);
         fs.writeFileSync(name, screenshot);
         cp.execSync(`convert ${name} -resize 200x150 ${name}`);
     }
 
+    const suffix = is_dark ? "_dark" : "";
+    const montage_files = order.map(
+        (idx) => `static/features/feature_${idx}${suffix}.png`,
+    );
+
     cp.execSync(
-        `montage -mode concatenate -tile 5x ${shuffle(files).join(
+        `montage -mode concatenate -background none -tile 5x ${montage_files.join(
             " ",
         )} static/features/montage${is_dark ? "_dark" : "_light"}.png`,
     );
-
-    // fs.writeFileSync("features/index.html", `<html><style>img{width:200px;height:150px;</style><body>${html.join("")}</body></html>`);
 }
 
 async function run() {
@@ -116,6 +104,7 @@ async function run() {
         fs.mkdirSync(path.join(__dirname, "static/features"), {
             recursive: true,
         });
+
         const x = await perspective;
         const server = new x.WebSocketServer({
             assets: [
@@ -124,16 +113,31 @@ async function run() {
             ],
         });
 
+        const indices = Array.from({ length: EXAMPLES.length }, (_, i) => i);
+        for (let i = indices.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [indices[i], indices[j]] = [indices[j], indices[i]];
+        }
+
         const browser = await puppeteer.launch({ headless: true });
         const page = await browser.newPage();
-        await run_with_theme(page);
-        await run_with_theme(page, true);
+        await run_with_theme(page, false, indices);
+        await run_with_theme(page, true, indices);
         await page.close();
         await browser.close();
         await server.close();
+
+        fs.writeFileSync(
+            path.join(__dirname, "static/features/montage_map.json"),
+            JSON.stringify({
+                tile_width: 200,
+                tile_height: 150,
+                columns: 5,
+                order: indices,
+            }),
+        );
     }
 
-    // TODO There is a typescript module annoyingly called `blocks`.
     if (!fs.existsSync("static/blocks")) {
         fs.mkdirSync("static/blocks");
     }