lazyslides 0.2.2 → 0.3.1

package/README.md

@@ -26,7 +26,7 @@ LazySlides separates them. You write slides as structured YAML — the format AI
 
 ## Features
 
-- **17 slide templates** — title, content, metrics, comparison, timeline, funnel, code, and more
+- **19 slide templates** — title, content, metrics, comparison, diagram, timeline, funnel, code, and more
 - **Speaker view** — press S for notes, timer, and next-slide preview
 - **Section progress bar** — visual progress dots with section markers; click to jump between sections
 - **Source references** — attach citations to any slide, rendered as linked footnotes
@@ -128,7 +128,7 @@ Supporting files (outlines, notes, PDFs, images) go alongside `index.md` in the
 
 ## Templates
 
-17 built-in templates cover common slide patterns:
+19 built-in templates cover common slide patterns:
 
 | Template | Description |
 |----------|-------------|
@@ -149,6 +149,7 @@ Supporting files (outlines, notes, PDFs, images) go alongside `index.md` in the
 | `code` | Code snippet with syntax highlighting |
 | `image-overlay` | Full image with positioned text box |
 | `agenda` | Clickable table of contents (supports `auto_generate: true`) |
+| `diagram` | D2 diagram compiled to inline SVG at build time |
 
 See `CLAUDE.md` for the full field reference for each template.
 

package/_includes/slides/diagram.njk

@@ -0,0 +1,34 @@
+{# TEMPLATE: diagram — D2 diagram rendered to inline SVG at build time.
+   Fields:
+     title*     — slide title
+     d2         — inline D2 source (multiline with |)
+     d2_file    — path to .d2 file (alternative to inline d2)
+     caption    — optional description below diagram
+     notes      — speaker notes
+     reference / reference_link / references — source attribution
+#}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-diagram"{{ sectionAttrs(slide) }}>
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <div class="diagram-container">
+      {% if slide.d2 %}
+        {{ slide.d2 | compileD2 | safe }}
+      {% elif slide.d2_file %}
+        <div class="d2-error">d2_file is not yet supported. Use inline d2 instead.</div>
+      {% else %}
+        <div class="d2-error">No d2 source provided. Add a 'd2' or 'd2_file' field.</div>
+      {% endif %}
+    </div>
+    {% if slide.caption %}<p class="diagram-caption">{{ slide.caption }}</p>{% endif %}
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% if global_footer and not slide.hide_footer %}
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+  {% endif %}
+</section>

package/index.js

@@ -23,6 +23,97 @@ export default function lazyslides(eleventyConfig, options = {}) {
     return val !== null && typeof val === "object" && !Array.isArray(val);
   });
 
+  // ---------------------------------------------------------------
+  // 1b. D2 diagram compilation (async filter)
+  // ---------------------------------------------------------------
+  let d2Instance = null;
+  let d2Available = null; // null = unknown, true/false after check
+  async function getD2() {
+    if (d2Available === false) return null;
+    if (!d2Instance) {
+      try {
+        const { D2 } = await import("@terrastruct/d2");
+        d2Instance = new D2();
+        d2Available = true;
+      } catch {
+        d2Available = false;
+        return null;
+      }
+    }
+    return d2Instance;
+  }
+
+  // Pre-compile D2 diagrams before Nunjucks renders, because Nunjucks
+  // async filters/shortcodes are unreliable inside {% for %} loops.
+  // We store compiled SVGs in a map keyed by source hash, then look them
+  // up synchronously via a regular filter during template rendering.
+  const d2Cache = new Map();
+
+  eleventyConfig.addFilter("compileD2", (source) => {
+    if (!source) return "";
+    const cached = d2Cache.get(source);
+    if (cached) return cached;
+    return `<div class="d2-error">D2 diagram was not pre-compiled.</div>`;
+  });
+
+  eleventyConfig.on("eleventy.before", async ({ directories }) => {
+    // Scan all presentation files for D2 source blocks and pre-compile them
+    const presentationsDir = path.join(directories.input || ".", "presentations");
+    if (!fs.existsSync(presentationsDir)) return;
+
+    const { default: yaml } = await import("js-yaml");
+    const entries = fs.readdirSync(presentationsDir, { withFileTypes: true });
+    const d2Sources = [];
+
+    for (const entry of entries) {
+      if (!entry.isDirectory() || entry.name === "_template") continue;
+      const indexPath = path.join(presentationsDir, entry.name, "index.md");
+      if (!fs.existsSync(indexPath)) continue;
+
+      const content = fs.readFileSync(indexPath, "utf-8");
+      const fmMatch = content.match(/^---\s*\n([\s\S]*?)\n---/);
+      if (!fmMatch) continue;
+
+      try {
+        const data = yaml.load(fmMatch[1]);
+        if (!data?.slides) continue;
+        for (const slide of data.slides) {
+          if (slide.template === "diagram" && slide.d2) {
+            d2Sources.push(slide.d2);
+          }
+        }
+      } catch { /* skip invalid YAML */ }
+    }
+
+    if (d2Sources.length === 0) return;
+
+    const d2 = await getD2();
+    if (!d2) {
+      console.log("[LazySlides] @terrastruct/d2 not installed — diagram slides will show placeholders. Install it with: pnpm add @terrastruct/d2");
+      for (const source of d2Sources) {
+        d2Cache.set(source, `<div class="d2-error">@terrastruct/d2 is not installed. Run: pnpm add @terrastruct/d2</div>`);
+      }
+      return;
+    }
+    for (const source of d2Sources) {
+      try {
+        const result = await d2.compile(source);
+        const svg = await d2.render(result.diagram, {
+          ...result.renderOptions,
+          noXMLTag: true,
+          pad: 20,
+        });
+        d2Cache.set(source, svg);
+      } catch (err) {
+        const safeMsg = (err.message || String(err))
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;");
+        d2Cache.set(source, `<div class="d2-error">${safeMsg}</div>`);
+      }
+    }
+  });
+
   // ---------------------------------------------------------------
   // 2. Nunjucks search paths — makes {% include "slides/…" %} and
   //    layout: presentation.njk resolve to files inside the package.

package/lib/export-pdf.js

@@ -1,4 +1,4 @@
-import { execSync, spawn } from "node:child_process";
+import { spawn } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import http from "node:http";
@@ -6,14 +6,18 @@ import http from "node:http";
 const PORT = 4100;
 const BASE_URL = `http://127.0.0.1:${PORT}`;
 const OUTPUT_DIR = "_pdfs";
-const TIMEOUT_SECONDS = 30;
+const SERVER_TIMEOUT_SECONDS = 60;
+const BUILD_IDLE_TIMEOUT_MS = 15000;
+const BUILD_HARD_TIMEOUT_MS = 180000;
 
 let serverProcess = null;
 
 function cleanup() {
   if (serverProcess) {
     console.log("\n  Stopping server...");
-    serverProcess.kill();
+    try {
+      serverProcess.kill("SIGTERM");
+    } catch {}
     serverProcess = null;
   }
 }
@@ -29,9 +33,9 @@ function waitForServer() {
       });
       req.on("error", () => {
         elapsed++;
-        if (elapsed >= TIMEOUT_SECONDS) {
+        if (elapsed >= SERVER_TIMEOUT_SECONDS) {
           clearInterval(interval);
-          reject(new Error(`Server failed to start within ${TIMEOUT_SECONDS}s`));
+          reject(new Error(`Server failed to start within ${SERVER_TIMEOUT_SECONDS}s`));
         }
       });
       req.end();
@@ -39,29 +43,107 @@ function waitForServer() {
   });
 }
 
-function runDecktape(name) {
-  const url = `${BASE_URL}/presentations/${name}/?pdf`;
-  const output = path.join(OUTPUT_DIR, `${name}.pdf`);
+/**
+ * Run `pnpm run build`, but tolerate the eleventy child not exiting cleanly
+ * (known issue: d2 WASM / chokidar handles can keep the event loop alive after
+ * "Wrote N files"). We detect idle stdout and force-kill.
+ */
+function runBuild(cwd) {
+  return new Promise((resolve, reject) => {
+    // Pipe stdio so we can observe activity and reset the idle timer.
+    const child = spawn("pnpm", ["run", "build"], {
+      cwd,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    let idleTimer = null;
+    let hardTimer = null;
+    let resolved = false;
+
+    const done = (err) => {
+      if (resolved) return;
+      resolved = true;
+      clearTimeout(idleTimer);
+      clearTimeout(hardTimer);
+      try { child.kill("SIGKILL"); } catch {}
+      err ? reject(err) : resolve();
+    };
+
+    const bumpIdle = () => {
+      clearTimeout(idleTimer);
+      idleTimer = setTimeout(() => {
+        console.log(`\n  Build child idle for ${BUILD_IDLE_TIMEOUT_MS / 1000}s — assuming done and force-exiting.`);
+        done();
+      }, BUILD_IDLE_TIMEOUT_MS);
+    };
+
+    child.stdout.on("data", (chunk) => {
+      process.stdout.write(chunk);
+      bumpIdle();
+    });
+    child.stderr.on("data", (chunk) => {
+      process.stderr.write(chunk);
+      bumpIdle();
+    });
+
+    bumpIdle();
+
+    hardTimer = setTimeout(() => {
+      done(new Error(`Build exceeded hard timeout ${BUILD_HARD_TIMEOUT_MS / 1000}s`));
+    }, BUILD_HARD_TIMEOUT_MS);
+
+    child.on("exit", (code) => {
+      if (code === 0 || code === null) done();
+      else done(new Error(`Build failed with exit code ${code}`));
+    });
+    child.on("error", (err) => done(err));
+  });
+}
 
-  console.log(`  → Exporting: ${name}`);
-  try {
-    execSync(
-      `npx decktape reveal --size 1920x1080 --pause 1000 --load-pause 2000 "${url}" "${output}"`,
-      { stdio: ["ignore", "pipe", "pipe"] }
+function runDecktape(name, cwd) {
+  return new Promise((resolve) => {
+    const url = `${BASE_URL}/presentations/${name}/?pdf`;
+    const output = path.join(OUTPUT_DIR, `${name}.pdf`);
+
+    console.log(`  → Exporting: ${name}`);
+    console.log(`    URL:    ${url}`);
+    console.log(`    Output: ${output}\n`);
+
+    const child = spawn(
+      "npx",
+      [
+        "decktape",
+        "reveal",
+        "--size", "1920x1080",
+        "--pause", "1000",
+        "--load-pause", "2000",
+        url,
+        output,
+      ],
+      { cwd, stdio: ["ignore", "inherit", "inherit"] }
     );
-    console.log(`  \u2713 ${output}`);
-    return true;
-  } catch {
-    console.log(`  \u2717 Failed: ${name}`);
-    return false;
-  }
+
+    child.on("exit", (code) => {
+      if (code === 0) {
+        console.log(`\n  \u2713 ${output}`);
+        resolve(true);
+      } else {
+        console.log(`\n  \u2717 Failed: ${name} (decktape exit code ${code})`);
+        resolve(false);
+      }
+    });
+    child.on("error", (err) => {
+      console.log(`\n  \u2717 Failed: ${name} (${err.message})`);
+      resolve(false);
+    });
+  });
 }
 
-function getAvailablePresentations(cwd) {
+function getAvailablePresentations(cwd, { includeHidden = false } = {}) {
   const dir = path.join(cwd, "presentations");
   return fs
     .readdirSync(dir, { withFileTypes: true })
-    .filter((d) => d.isDirectory() && d.name !== "_template")
+    .filter((d) => d.isDirectory() && (includeHidden || !d.name.startsWith("_")))
     .map((d) => d.name);
 }
 
@@ -75,9 +157,10 @@ export async function run(opts = {}) {
   const cwd = opts.cwd || process.cwd();
   const requestedName = opts.name;
   const available = getAvailablePresentations(cwd);
+  const allForLookup = getAvailablePresentations(cwd, { includeHidden: true });
 
   if (requestedName) {
-    if (!available.includes(requestedName)) {
+    if (!allForLookup.includes(requestedName)) {
       console.error(`Presentation not found: ${requestedName}`);
       console.error("   Available presentations:");
       for (const name of available) {
@@ -89,16 +172,25 @@ export async function run(opts = {}) {
 
   const presentations = requestedName ? [requestedName] : available;
 
-  // Build the site
+  // Build the site (tolerate lingering child handles)
   console.log("Building site...");
-  execSync("pnpm run build", { stdio: "inherit", cwd });
+  try {
+    await runBuild(cwd);
+  } catch (err) {
+    console.error(`Build failed: ${err.message}`);
+    process.exit(1);
+  }
 
   // Start server
   console.log(`\nStarting server on port ${PORT}...`);
   serverProcess = spawn("npx", ["eleventy", "--serve", "--port", String(PORT)], {
-    stdio: "ignore",
+    stdio: ["ignore", "pipe", "pipe"],
     cwd,
   });
+  serverProcess.stdout.on("data", () => {}); // drain
+  serverProcess.stderr.on("data", (chunk) => {
+    process.stderr.write(`[server] ${chunk}`);
+  });
 
   process.on("exit", cleanup);
   process.on("SIGINT", () => { cleanup(); process.exit(1); });
@@ -106,7 +198,13 @@ export async function run(opts = {}) {
 
   // Wait for server
   console.log("Waiting for server...");
-  await waitForServer();
+  try {
+    await waitForServer();
+  } catch (err) {
+    console.error(`\n${err.message}`);
+    cleanup();
+    process.exit(1);
+  }
   console.log("Server ready");
 
   // Create output directory
@@ -118,7 +216,7 @@ export async function run(opts = {}) {
   console.log(`\nExporting ${presentations.length} presentation(s) to PDF...\n`);
 
   for (const name of presentations) {
-    if (runDecktape(name)) {
+    if (await runDecktape(name, cwd)) {
       success++;
     } else {
       failure++;

package/lib/validate.js

@@ -7,6 +7,7 @@ const VALID_TEMPLATES = [
   "title", "section", "content", "metrics", "comparison", "columns",
   "three-columns", "quote", "center", "hero", "image-overlay", "code",
   "timeline", "funnel", "split", "split-wide", "table", "agenda",
+  "diagram",
 ];
 const VALID_TRANSITIONS = [
   "none", "fade", "slide", "convex", "concave", "zoom",
@@ -128,6 +129,16 @@ export async function run(opts = {}) {
             }
           }
 
+          // Diagram template validation
+          if (slide.template === "diagram") {
+            if (!slide.d2 && !slide.d2_file) {
+              errors.push(`${file}: Slide ${slideNum} (diagram) missing 'd2' or 'd2_file' — one is required`);
+            }
+            if (slide.d2 && slide.d2_file) {
+              errors.push(`${file}: Slide ${slideNum} (diagram) has both 'd2' and 'd2_file' — use only one`);
+            }
+          }
+
           // Image path validation
           if (slide.image) {
             const imagePath = slide.image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazyslides",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Slide decks with native agentic AI integration",
   "license": "MIT",
   "author": "Chris Tietz",
@@ -50,15 +50,18 @@
     "@11ty/eleventy": "^3.0.0"
   },
   "dependencies": {
+    "decktape": "^3.14.0",
     "js-yaml": "^4.1.0"
   },
+  "optionalDependencies": {
+    "@terrastruct/d2": "^0.1.33"
+  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/cli": "4.1.18",
     "concurrently": "^9.0.0",
-    "decktape": "^3.14.0",
-    "tailwindcss": "^4.1.18",
-    "vitest": "^4.0.18"
+    "tailwindcss": "4.1.18",
+    "vitest": "^4.1.2"
   },
   "scripts": {
     "dev": "node cli.js validate && concurrently \"pnpm:watch:*\"",

package/scaffold/CLAUDE.md

@@ -190,6 +190,15 @@ Fields marked with `*` are required.
   - `slide`* — 0-based slide index to link to
 - `reference` / `reference_link` / `references`
 
+#### `diagram` — D2 diagram (compiled to inline SVG at build time)
+- `title`* — slide title
+- `d2` — inline D2 source string (use `|` for multiline YAML)
+- `d2_file` — path to a `.d2` file (alternative to inline `d2`; not yet supported)
+- `caption` — optional description below diagram
+- `reference` / `reference_link` / `references`
+
+Note: requires `@terrastruct/d2` npm dependency (included in the package). Exactly one of `d2` or `d2_file` must be provided.
+
 ## Common Patterns
 
 ### Nested lists

package/scaffold/claude-commands/add-slide.md

@@ -41,6 +41,7 @@ Ask the user which template to use. Show this reference:
 | `code` | Code snippet with syntax highlighting |
 | `image-overlay` | Full image with positioned text box |
 | `agenda` | Clickable table of contents |
+| `diagram` | D2 diagram compiled to inline SVG |
 
 ## Step 4: Gather Content
 

package/scaffold/claude-commands/add-template.md

@@ -11,7 +11,7 @@ Ask the user:
 
 ## Step 2: Choose a Name
 
-Help the user pick a kebab-case name for the template (e.g. `icon-grid`, `two-images`, `photo-grid`). The name must not conflict with the 17 built-in templates: `title`, `section`, `content`, `center`, `hero`, `metrics`, `comparison`, `columns`, `quote`, `image-overlay`, `code`, `timeline`, `funnel`, `split`, `split-wide`, `table`, `agenda`.
+Help the user pick a kebab-case name for the template (e.g. `icon-grid`, `two-images`, `photo-grid`). The name must not conflict with the 19 built-in templates: `title`, `section`, `content`, `center`, `hero`, `metrics`, `comparison`, `columns`, `quote`, `image-overlay`, `code`, `timeline`, `funnel`, `split`, `split-wide`, `table`, `agenda`, `diagram`.
 
 ## Step 3: Pick a Starting Point
 

package/scaffold/claude-commands/new-presentation.md

@@ -90,6 +90,7 @@ Review each slide in the outline and propose a template. The available templates
 | `table` | Data table with headers |
 | `code` | Code snippet with syntax highlighting |
 | `image-overlay` | Image with text overlay |
+| `diagram` | D2 diagram compiled to inline SVG |
 
 Read each template file's docblock comment for exact YAML structure and options.
 

package/scaffold/claude-commands/validate.md

@@ -19,7 +19,7 @@ Review the output and categorize issues:
 - **Wrong comparison format** — comparison slides must use `rows:` with `left`/`right` pairs
 
 ### Warnings (should fix)
-- **Unknown template** — template name doesn't match one of the 17 valid types
+- **Unknown template** — template name doesn't match one of the 19 valid types
 - **Missing title** — slide has no title (except `quote` which doesn't need one)
 - **Missing image** — image path in YAML doesn't exist on disk
 - **Hidden slide** — possible slide definition commented out

package/src/styles.css

@@ -2235,3 +2235,67 @@ html, body {
 .section-progress-dots .section-dot:hover::after {
   opacity: 1;
 }
+
+/* ============================================
+   SLIDE: DIAGRAM
+   D2 diagrams rendered to inline SVG
+   ============================================ */
+
+.reveal .slides section.slide-diagram {
+  display: flex !important;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  height: 100%;
+  padding: 0;
+}
+
+.reveal .slides section.slide-diagram .slide-body {
+  flex: 1;
+  padding: var(--slide-padding);
+  padding-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.reveal .slides section.slide-diagram .slide-header {
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid var(--color-primary-500);
+}
+
+.reveal .slides section.slide-diagram .diagram-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.reveal .slides section.slide-diagram .diagram-container svg {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  width: auto;
+}
+
+.reveal .slides section.slide-diagram .diagram-caption {
+  text-align: center;
+  font-size: 0.75em;
+  color: var(--color-text-muted);
+  margin-top: 0.5em;
+}
+
+.reveal .slides section.slide-diagram .d2-error {
+  color: #dc2626;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 1em;
+  font-family: var(--font-mono);
+  font-size: 0.7em;
+  white-space: pre-wrap;
+  text-align: left;
+}