lazyslides 0.2.2 → 0.3.0

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/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.0",
   "description": "Slide decks with native agentic AI integration",
   "license": "MIT",
   "author": "Chris Tietz",
@@ -52,13 +52,16 @@
   "dependencies": {
     "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;
+}