create-slide-deck 0.1.0

package/template-full/src/reveal/tools/dev.mjs

@@ -0,0 +1,120 @@
+import { spawn } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import chokidar from "chokidar";
+
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var revealDir = path.join(__dirname, "..");
+var rootDir = path.resolve(revealDir, "..", "..");
+var decksDir = path.join(revealDir, "decks");
+var PORT = 8766;
+
+var log = function (tag, msg) { console.log("[" + tag + "] " + msg); };
+
+// --- Discover decks ---
+var targetDeck = process.argv[2] || null;
+var decks = [];
+
+fs.readdirSync(decksDir).forEach(function (name) {
+  var dir = path.join(decksDir, name);
+  if (!fs.statSync(dir).isDirectory()) return;
+  var buildScript = path.join(dir, "build.mjs");
+  var bundleScript = path.join(dir, "bundle.mjs");
+  if (!fs.existsSync(buildScript)) return;
+  if (targetDeck && name !== targetDeck) return;
+  decks.push({
+    name: name,
+    dir: dir,
+    buildScript: buildScript,
+    bundleScript: fs.existsSync(bundleScript) ? bundleScript : null,
+  });
+});
+
+if (decks.length === 0) {
+  console.error("No decks found" + (targetDeck ? " matching '" + targetDeck + "'" : "") + " in " + decksDir);
+  process.exit(1);
+}
+
+log("dev", "Found " + decks.length + " deck(s): " + decks.map(function (d) { return d.name; }).join(", "));
+
+// --- Debounced runner per deck ---
+var runners = {};
+
+function runScript(deck, scriptPath, label) {
+  var key = deck.name + ":" + label;
+  if (runners[key]) {
+    runners[key].pending = true;
+    return;
+  }
+  runners[key] = { pending: false };
+  log(deck.name, label + " building...");
+  var proc = spawn("node", [scriptPath], { cwd: rootDir, stdio: "inherit" });
+  proc.on("exit", function (code) {
+    var wasPending = runners[key].pending;
+    delete runners[key];
+    if (code === 0) {
+      log(deck.name, label + " done");
+    } else {
+      log(deck.name, label + " failed (exit " + code + ")");
+    }
+    if (wasPending) runScript(deck, scriptPath, label);
+  });
+}
+
+function buildAll(deck, reason) {
+  if (deck.bundleScript) runScript(deck, deck.bundleScript, "bundle");
+  runScript(deck, deck.buildScript, "html");
+}
+
+// --- Watch: components, core, data → rebuild all decks ---
+var sharedPaths = [
+  path.join(revealDir, "components"),
+  path.join(revealDir, "core"),
+  path.join(revealDir, "data"),
+];
+
+var sharedWatcher = chokidar.watch(sharedPaths, {
+  ignoreInitial: true,
+  ignored: /\.tmp\.[^/]*$/,
+});
+sharedWatcher.on("all", function (event, file) {
+  var rel = path.relative(rootDir, file);
+  log("watch", event + " " + rel);
+  decks.forEach(function (deck) { buildAll(deck, rel); });
+});
+log("dev", "watching components/, core/, data/");
+
+// --- Watch: each deck's own directory → rebuild that deck ---
+decks.forEach(function (deck) {
+  var deckWatcher = chokidar.watch(deck.dir, {
+    ignoreInitial: true,
+    ignored: /\.tmp\.[^/]*$/,
+  });
+  deckWatcher.on("all", function (event, file) {
+    var rel = path.relative(rootDir, file);
+    log("watch", event + " " + rel);
+    runScript(deck, deck.buildScript, "html");
+  });
+});
+log("dev", "watching deck directories");
+
+// --- Initial build ---
+decks.forEach(function (deck) { buildAll(deck, "startup"); });
+
+// --- Static server ---
+var server = spawn("npx", ["serve", "-l", String(PORT), "."], {
+  cwd: rootDir,
+  stdio: "inherit",
+});
+log("dev", "serving on http://localhost:" + PORT + "/");
+
+// --- Shutdown ---
+async function shutdown() {
+  log("dev", "shutting down");
+  try { await sharedWatcher.close(); } catch (e) {}
+  try { server.kill(); } catch (e) {}
+  process.exit(0);
+}
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/template-full/src/reveal/tools/export-pdf.mjs

@@ -0,0 +1,86 @@
+import { chromium } from "playwright";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+var SLIDE_W = 1280;
+var SLIDE_H = 720;
+var URL = process.argv[2] || "http://localhost:8766/dist/fse26-rca/";
+var OUT = process.argv[3] || "dist/fse26-rca/deck.pdf";
+
+async function main() {
+  console.log("Launching browser...");
+  var browser = await chromium.launch({ headless: true });
+  var page = await browser.newPage({
+    viewport: { width: SLIDE_W, height: SLIDE_H },
+  });
+
+  var printUrl = URL + (URL.includes("?") ? "&" : "?") + "print-pdf";
+  console.log("Loading " + printUrl);
+  await page.goto(printUrl, { waitUntil: "networkidle" });
+
+  await page.waitForFunction(function () {
+    return window.Reveal && document.querySelector(".reveal.ready");
+  }, { timeout: 15000 });
+  console.log("Reveal ready");
+
+  // Disable all transitions/animations so content renders instantly
+  await page.addStyleTag({ content: [
+    "*, *::before, *::after { transition: none !important; animation: none !important; }",
+    ".reveal .controls, .reveal .slide-number, .reveal .progress, .page-no { display: none !important; }",
+  ].join("\n") });
+
+  // Force-hydrate all React mounts with per-section mock Reveal
+  var mountCount = await page.evaluate(function () {
+    var sections = document.querySelectorAll("section");
+    var count = 0;
+    sections.forEach(function (section) {
+      var mounts = section.querySelectorAll(".block-mount[data-mount-library]");
+      if (!mounts.length) return;
+
+      // Create a mock Reveal scoped to this section so useRevealStep
+      // reads fragment state from the correct section, not the global current slide
+      var mockReveal = {
+        getCurrentSlide: function () { return section; },
+        on: function () {},
+        off: function () {},
+        getIndices: function () { return { h: 0, v: 0, f: 0 }; },
+      };
+      if (window.MountRegistry) {
+        window.MountRegistry.hydrate(section, {
+          anime: window.anime,
+          Reveal: mockReveal,
+        });
+        count += mounts.length;
+      }
+    });
+    return count;
+  });
+  console.log("Hydrated " + mountCount + " mount(s)");
+
+  // Wait for React to render all components
+  await page.waitForTimeout(3000);
+
+  var sectionCount = await page.evaluate(function () {
+    return document.querySelectorAll(".reveal .slides section").length;
+  });
+  console.log("Sections (pages): " + sectionCount);
+
+  // Generate vector PDF
+  console.log("Generating PDF...");
+  await page.emulateMedia({ media: "print" });
+  var pdfBytes = await page.pdf({
+    width: SLIDE_W + "px",
+    height: SLIDE_H + "px",
+    printBackground: true,
+    preferCSSPageSize: true,
+    margin: { top: "0", right: "0", bottom: "0", left: "0" },
+  });
+
+  await fs.mkdir(path.dirname(OUT), { recursive: true });
+  await fs.writeFile(OUT, pdfBytes);
+  console.log("Wrote " + OUT + " (" + Math.round(pdfBytes.length / 1024) + " KB)");
+
+  await browser.close();
+}
+
+main().catch(function (err) { console.error(err); process.exit(1); });

package/template-full/src/reveal/tools/preview.mjs

@@ -0,0 +1,132 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const outDir = path.join(__dirname, "..", "..", "..", "examples", "microservice-rca", "fse26-paper-talk", "reveal-summary");
+
+const componentName = process.argv[2];
+const maxSteps = parseInt(process.argv[3] || "20", 10);
+
+if (!componentName) {
+  console.error("usage: node src/reveal/tools/preview.mjs <ComponentName> [maxSteps]");
+  console.error("example: node src/reveal/tools/preview.mjs FaultHeatmap");
+  process.exit(1);
+}
+
+// Relative path from reveal-summary/ up to project root node_modules + src.
+const REL = "../../../../";
+
+const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Preview: ${componentName}</title>
+<style>
+  html, body { margin: 0; height: 100%; background: #fff; font-family: Arial, sans-serif; }
+  #stage {
+    position: absolute; inset: 0 0 56px 0;
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden;
+  }
+  /* Mock reveal DOM so getStep()/getCurrentSlide() work. */
+  .reveal .slides section.present { width: 100%; height: 100%; }
+  .block-mount { width: 100%; height: 100%; }
+  #controls {
+    position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
+    display: flex; align-items: center; gap: 16px;
+    padding: 0 20px; box-sizing: border-box;
+    background: #1e1e1e; color: #eee;
+  }
+  #controls input[type=range] { flex: 1; }
+  #controls .label { font-size: 14px; white-space: nowrap; }
+  #controls .name { font-weight: 700; color: #7fd; }
+  /* Hidden fragment markers — getStep reads these. */
+  #fragments { display: none; }
+</style>
+</head>
+<body>
+<div id="stage">
+  <div class="reveal"><div class="slides">
+    <section class="present">
+      <div class="block-mount" data-mount-library="react" data-mount-export="${componentName}"></div>
+      <div id="fragments"></div>
+    </section>
+  </div></div>
+</div>
+
+<div id="controls">
+  <span class="label">component: <span class="name">${componentName}</span></span>
+  <input id="slider" type="range" min="-1" max="${maxSteps}" value="-1" step="1">
+  <span class="label">step: <span id="stepval">-1</span> / ${maxSteps}</span>
+</div>
+
+<script src="${REL}node_modules/animejs/dist/bundles/anime.umd.min.js"></script>
+<script src="${REL}src/reveal/core/mount-registry.js"></script>
+<script src="${REL}src/reveal/mounts/react-mount.js"></script>
+<script src="components.js"></script>
+<script>
+(function () {
+  var MAX = ${maxSteps};
+  var slide = document.querySelector("section.present");
+  var fragHost = document.getElementById("fragments");
+
+  // Build one fragment marker per step so getStep() can read data-fragment-index.
+  var frags = [];
+  for (var i = 0; i <= MAX; i++) {
+    var f = document.createElement("span");
+    f.className = "fragment";
+    f.setAttribute("data-fragment-index", String(i));
+    fragHost.appendChild(f);
+    frags.push(f);
+  }
+
+  // Minimal mock Reveal compatible with useRevealStep()/getStep().
+  var listeners = {};
+  var MockReveal = {
+    on: function (evt, cb) { (listeners[evt] = listeners[evt] || []).push(cb); },
+    off: function (evt, cb) {
+      var arr = listeners[evt]; if (!arr) return;
+      var k = arr.indexOf(cb); if (k >= 0) arr.splice(k, 1);
+    },
+    getCurrentSlide: function () { return slide; },
+    fire: function (evt, payload) {
+      (listeners[evt] || []).slice().forEach(function (cb) { cb(payload || {}); });
+    },
+  };
+  window.Reveal = MockReveal;
+
+  function setStep(step) {
+    for (var i = 0; i <= MAX; i++) {
+      frags[i].classList.toggle("visible", i <= step);
+    }
+    document.getElementById("stepval").textContent = String(step);
+    // fragmentshown clears "instant" and re-syncs; covers both directions.
+    MockReveal.fire("fragmentshown", {});
+  }
+
+  var slider = document.getElementById("slider");
+  slider.addEventListener("input", function () { setStep(parseInt(slider.value, 10)); });
+
+  // Hydrate the mount, then push the initial step.
+  var ctx = { anime: window.anime, Reveal: MockReveal };
+  if (window.MountRegistry) window.MountRegistry.hydrate(slide, ctx);
+  setStep(-1);
+
+  // Keyboard: left/right arrows step through.
+  document.addEventListener("keydown", function (e) {
+    var v = parseInt(slider.value, 10);
+    if (e.key === "ArrowRight") { slider.value = Math.min(MAX, v + 1); setStep(parseInt(slider.value, 10)); }
+    if (e.key === "ArrowLeft") { slider.value = Math.max(-1, v - 1); setStep(parseInt(slider.value, 10)); }
+  });
+})();
+</script>
+</body>
+</html>
+`;
+
+const outPath = path.join(outDir, "preview.html");
+fs.writeFileSync(outPath, html);
+console.log(`Wrote ${outPath}`);
+console.log(`Open http://localhost:8766/examples/microservice-rca/fse26-paper-talk/reveal-summary/preview.html`);
+console.log(`(start the server with: node src/reveal/tools/dev.mjs  — or  npx serve -l 8766 .)`);

package/template-full/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "vite.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/template-full/vite.config.ts

@@ -0,0 +1,95 @@
+import { defineConfig, type Plugin, type ViteDevServer } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const decksDir = path.resolve(__dirname, "src/reveal/decks");
+
+function findDecks(): string[] {
+  return fs.readdirSync(decksDir).filter(function (name) {
+    return fs.existsSync(path.join(decksDir, name, "index.html"));
+  });
+}
+
+function selfContainDecks(): Plugin {
+  return {
+    name: "self-contain-decks",
+    closeBundle: function () {
+      const outDir = path.resolve(__dirname, "dist");
+      const sharedAssets = path.join(outDir, "assets");
+      if (!fs.existsSync(sharedAssets)) return;
+
+      findDecks().forEach(function (deck) {
+        const deckDir = path.join(outDir, deck);
+        if (!fs.existsSync(deckDir)) return;
+
+        const srcImages = path.join(decksDir, deck, "images");
+        if (fs.existsSync(srcImages)) {
+          const dstImages = path.join(deckDir, "images");
+          fs.mkdirSync(dstImages, { recursive: true });
+          fs.readdirSync(srcImages).forEach(function (f) {
+            fs.copyFileSync(path.join(srcImages, f), path.join(dstImages, f));
+          });
+        }
+
+        const deckAssets = path.join(deckDir, "assets");
+        fs.mkdirSync(deckAssets, { recursive: true });
+        fs.readdirSync(sharedAssets).forEach(function (f) {
+          fs.copyFileSync(path.join(sharedAssets, f), path.join(deckAssets, f));
+        });
+
+        const htmlPath = path.join(deckDir, "index.html");
+        if (fs.existsSync(htmlPath)) {
+          let html = fs.readFileSync(htmlPath, "utf-8");
+          html = html.replace(/\.\.\/assets\//g, "./assets/");
+          fs.writeFileSync(htmlPath, html);
+        }
+      });
+    },
+  };
+}
+
+function deckIndex(): Plugin {
+  return {
+    name: "deck-index",
+    configureServer: function (server: ViteDevServer) {
+      server.middlewares.use(function (req, res, next) {
+        if (req.url === "/" || req.url === "/index.html") {
+          const links = findDecks().map(function (d) {
+            return '<li><a href="/' + d + '/">' + d + "</a></li>";
+          }).join("");
+          res.setHeader("Content-Type", "text/html");
+          res.end("<h2>Decks</h2><ul>" + links + "</ul>");
+          return;
+        }
+        next();
+      });
+    },
+  };
+}
+
+const input: Record<string, string> = {};
+findDecks().forEach(function (deck) {
+  input[deck] = path.join(decksDir, deck, "index.html");
+});
+
+export default defineConfig({
+  root: decksDir,
+  base: "./",
+  plugins: [react(), deckIndex(), selfContainDecks()],
+  build: {
+    outDir: path.resolve(__dirname, "dist"),
+    emptyOutDir: true,
+    rollupOptions: {
+      input: input,
+    },
+  },
+  server: {
+    port: 8766,
+    fs: {
+      allow: [path.resolve(__dirname)],
+    },
+  },
+});

package/template-minimal/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "animejs": "^4.4.1",
+    "d3-force": "^3.0.0",
+    "d3-hierarchy": "^3.1.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-sankey": "^0.12.3",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "framer-motion": "^12.40.0",
+    "katex": "^0.17.0",
+    "lucide-react": "^1.21.0",
+    "prismjs": "^1.30.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "reveal.js": "^6.0.1",
+    "roughjs": "^4.6.6"
+  },
+  "devDependencies": {
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-hierarchy": "^3.1.7",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-sankey": "^0.12.5",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
+}