lazyslides 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LazySlides Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,207 @@
+# LazySlides
+
+[![npm version](https://img.shields.io/npm/v/lazyslides)](https://www.npmjs.com/package/lazyslides)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Node.js](https://img.shields.io/badge/node-%3E%3D22-brightgreen)](https://nodejs.org)
+
+Build things, not slides. For people who are too lazy to build Powerpoints and still have to... somehow. 
+
+Leverage your favorite AI agent to build simple, yet meaningful slide decks. 
+
+Built on [Eleventy](https://www.11ty.dev/), [Reveal.js](https://revealjs.com), and [Tailwind CSS](https://tailwindcss.com).
+
+[Live demo](https://chrisissorry.github.io/lazyslides/)
+
+## Why
+
+AI tools like ChatGPT, Gamma, and Manus generate entire slide decks — but the output is generic, you can't edit one slide without regenerating the whole thing, and exports to PowerPoint break layouts. The underlying problem hasn't changed: content and design are still tangled together.
+
+LazySlides separates them. You write slides as structured YAML — the format AI models read and write natively. The engine handles all rendering and styling. This means:
+
+- **Edit one slide without touching the rest** — each slide is an independent YAML block
+- **You control every word** — no AI-generated filler text, no walls of bullets
+- **Clean git diffs** — review slide changes line by line in pull requests
+- **Validation catches errors before your audience does** — schema checks run on every build
+- **Composable** — copy slides between decks, merge presentations, build libraries
+
+## Features
+
+- **17 slide templates** — title, content, metrics, comparison, 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
+- **Image lightbox** — click any image to view fullscreen via GLightbox
+- **Syntax highlighting** — code slides with language-aware highlighting
+- **PDF export** — one command via DeckTape at 1920x1080
+- **Themeable** — swap colors, fonts, and branding with a single CSS file
+- **Extensible** — add custom slide templates to your project as needed
+- **Validation** — schema checks catch YAML errors before your audience does
+- **Keyboard navigation** — arrow keys, Escape for overview, F for fullscreen
+
+## Workflow
+
+Research a topic, outline the structure, generate YAML, iterate. Any AI tool can handle steps 1-3 — LazySlides ships with slash commands for Claude Code to handle it, but the outline format is plain markdown that works in Claude Desktop, ChatGPT, or any other tool.
+
+1. **Research** — gather data, quotes, and examples
+2. **Outline** — structure sections and slides in `outline.md`
+3. **Draft** — convert the outline into YAML slides (AI does this in seconds)
+4. **Iterate** — preview, refine content, re-validate
+
+You focus on what your presentation content. The engine ties it to themed slides. 
+
+## Setup
+
+Requires Node.js 22+ and pnpm.
+
+```bash
+pnpm dlx lazyslides init my-deck
+cd my-deck
+pnpm install
+pnpm run dev
+```
+
+Open [localhost:8080/presentations/my-first-deck/](http://localhost:8080/presentations/my-first-deck/) — the starter deck created by `init`. Edit `presentations/my-first-deck/index.md` to make it yours.
+
+## Outline format
+
+Each project includes `presentations/_template/outline.md`:
+
+```markdown
+# Introducing LazySlides
+
+## Metadata
+- **Audience:** Developers, technical founders, presentation-heavy professionals
+- **Purpose:** Show how YAML + AI replaces manual slide design
+- **Speaker:** Chrisissorry, creator of LazySlides
+- **Duration:** 20 minutes
+
+## Key Messages
+1. Presentations are broken — manual layout and proprietary formats waste hours
+2. YAML + templates = separation of concerns
+3. AI writes structured YAML natively, enabling fast generation
+
+## Outline
+
+### Section 1: The Problem
+Purpose: Establish that current tools (including AI ones) don't fix the core issue
+
+#### Slide 1.1: Death by PowerPoint
+- **Key point:** AI tools moved the pain, didn't remove it
+- **Template:** content
+- **Notes:** Generic output, all-or-nothing generation, broken exports
+
+#### Slide 1.2: What if slides were just data?
+- **Key point:** Pure YAML in, professional slides out
+- **Template:** center
+```
+
+The scaffold includes a blank version at `presentations/_template/outline.md`. Feed it to any AI tool along with your source material (meeting notes, research, a brief) and it produces a structured outline ready for YAML generation.
+
+## Writing slides
+
+Each presentation is a single `index.md` with YAML frontmatter. No HTML, no Markdown body — just structured data:
+
+```yaml
+---
+title: My Presentation
+slides:
+  - template: title
+    title: Hello World
+    subtitle: My first deck
+
+  - template: content
+    title: Key Points
+    items:
+      - First point
+      - Second point
+
+  - template: metrics
+    title: Results
+    metrics:
+      - value: "42%"
+        label: Growth
+        color: mint
+---
+```
+
+Supporting files (outlines, notes, PDFs, images) go alongside `index.md` in the same folder — only `index.md` is processed as a presentation.
+
+## Templates
+
+17 built-in templates cover common slide patterns:
+
+| Template | Description |
+|----------|-------------|
+| `title` | Opening slide with logo, title, subtitle, author |
+| `section` | Chapter divider |
+| `content` | Bullet points, supports nested lists |
+| `center` | Centered statement or image |
+| `hero` | Full-bleed background image with text overlay |
+| `metrics` | Key statistics with colored cards |
+| `comparison` | Two-column comparison table |
+| `columns` | Side-by-side content |
+| `split` | 1/3 image + 2/3 content |
+| `split-wide` | 1/3 content + 2/3 image |
+| `quote` | Quotation with attribution |
+| `timeline` | Horizontal timeline |
+| `funnel` | Progressive narrowing stages |
+| `table` | Data table |
+| `code` | Code snippet with syntax highlighting |
+| `image-overlay` | Full image with positioned text box |
+| `agenda` | Clickable table of contents |
+
+See `CLAUDE.md` for the full field reference for each template.
+
+## Slash commands (Claude Code)
+
+The scaffolded project includes Claude Code slash commands for the full workflow:
+
+| Command | What it does |
+|---------|-------------|
+| `/new-presentation` | Create a presentation from scratch |
+| `/add-slide` | Add a slide to an existing deck |
+| `/research-topic` | Research a topic for data-driven slides |
+| `/create-outline` | Plan structure before writing YAML |
+| `/refine-slides` | Improve an existing presentation |
+| `/validate` | Check YAML and fix issues |
+
+The project ships a `CLAUDE.md` with the complete template schema, so Claude Code knows every field of every template.
+
+## Commands
+
+```bash
+pnpm run dev          # Dev server with hot reload
+pnpm run build        # Production build to _site/
+pnpm run validate     # Validate presentation YAML
+pnpm run renumber     # Renumber slide comments
+pnpm run pdf          # Export to PDF via DeckTape
+```
+
+## Theming
+
+Drop a CSS file into `themes/` to override design tokens:
+
+```css
+:root {
+  --color-primary-500: #your-brand-color;
+  --footer-brand-name: 'Your Brand';
+}
+```
+
+Set `theme: your-theme-name` in presentation frontmatter.
+
+## Updating
+
+```bash
+pnpm update lazyslides
+```
+
+Content stays untouched — only the engine updates.
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md). AI-assisted contributions welcome — see [AGENTS.md](AGENTS.md).
+
+## License
+
+MIT

package/_includes/slides/_nested-list.njk

@@ -0,0 +1,26 @@
+{# Reusable macro for rendering nested lists (map syntax + legacy object syntax) #}
+{% macro renderItems(items, ordered) %}
+<{{ "ol" if ordered else "ul" }}>
+  {% for item in items %}
+  <li>
+    {% if item is mapping %}
+      {% for key, children in item %}
+        {{ key }}
+        <ul>
+          {% for sub in children %}<li>{{ sub }}</li>{% endfor %}
+        </ul>
+      {% endfor %}
+    {% elif item.text %}
+      {{ item.text }}
+      {% if item.sub_items %}
+      <ul>
+        {% for sub in item.sub_items %}<li>{{ sub }}</li>{% endfor %}
+      </ul>
+      {% endif %}
+    {% else %}
+      {{ item }}
+    {% endif %}
+  </li>
+  {% endfor %}
+</{{ "ol" if ordered else "ul" }}>
+{% endmacro %}

package/_includes/slides/agenda.njk

@@ -0,0 +1,17 @@
+{# TEMPLATE: agenda — Clickable table of contents for presentation sections. #}
+<section class="slide-agenda">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title | default("Agenda") }}</h2>
+    </div>
+    <ol class="agenda-list">
+      {% for item in slide.sections %}
+      <li><a href="#/{{ item.slide }}">{{ item.title }}</a></li>
+      {% endfor %}
+    </ol>
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/center.njk

@@ -0,0 +1,16 @@
+{# TEMPLATE: center — Centered statement, image, or both. Image has lightbox on click. #}
+<section class="slide-center">
+  <div class="slide-body">
+    {% if slide.title %}<h2>{{ slide.title }}</h2>{% endif %}
+    {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
+    {% if slide.image %}
+    {% set img_src = slide.image | resolveImage %}
+    <a href="{{ img_src }}" class="glightbox"><img src="{{ img_src }}" alt="{{ slide.image_alt | default('') }}"></a>
+    {% endif %}
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/code.njk

@@ -0,0 +1,15 @@
+{# TEMPLATE: code — Code snippet display with syntax highlighting. #}
+<section class="slide-code">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <pre><code class="language-{{ slide.language | default('javascript') }}" data-trim data-noescape>{{ slide.code }}</code></pre>
+    {% if slide.caption %}<p class="caption">{{ slide.caption }}</p>{% endif %}
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/columns.njk

@@ -0,0 +1,35 @@
+{# TEMPLATE: columns — Two-column layout for side-by-side content. #}
+<section class="slide-columns">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <div class="columns">
+      <div class="column">
+        {% if slide.left_title %}<h3>{{ slide.left_title }}</h3>{% endif %}
+        {% if slide.left_text %}<p>{{ slide.left_text }}</p>{% endif %}
+        {% if slide.left_items %}
+        <ul>
+          {% for item in slide.left_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="column">
+        {% if slide.right_title %}<h3>{{ slide.right_title }}</h3>{% endif %}
+        {% if slide.right_text %}<p>{{ slide.right_text }}</p>{% endif %}
+        {% if slide.right_items %}
+        <ul>
+          {% for item in slide.right_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+    </div>
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/comparison.njk

@@ -0,0 +1,29 @@
+{# TEMPLATE: comparison — Before/after two-column table with optional highlight styling. #}
+<section class="slide-comparison{% if slide.highlight == 'left' %} highlight-left{% elif slide.highlight == 'none' %} highlight-none{% endif %}">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>{{ slide.left_header | default("Before") }}</th>
+          <th>{{ slide.right_header | default("After") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in slide.rows %}
+        <tr>
+          <td>{% if row.left_icon == "bad" %}<span class="icon-bad">✗</span>{% endif %}{{ row.left }}</td>
+          <td>{% if row.right_icon == "good" %}<span class="icon-good">✓</span>{% endif %}{{ row.right }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/content.njk

@@ -0,0 +1,22 @@
+{# TEMPLATE: content — Standard slide with headline and bullet points. #}
+{% from "slides/_nested-list.njk" import renderItems %}
+<section class="slide-content">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+      {% if slide.lead %}<p class="lead">{{ slide.lead }}</p>{% endif %}
+    </div>
+    {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
+    {% if slide.items %}
+    {{ renderItems(slide.items) }}
+    {% endif %}
+    {% if slide.ordered_items %}
+    {{ renderItems(slide.ordered_items, true) }}
+    {% endif %}
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/footer.njk

@@ -0,0 +1,58 @@
+<div class="slide-footer">
+  <div class="footer-left">
+    <span class="current">{{ slide_index }}</span>
+    <span class="separator">/</span>
+    <span class="total">{{ total_slides }}</span>
+  </div>
+
+  <div class="footer-center">
+    <div class="logo-small">
+      <!-- Default logo SVG, hidden when theme provides --footer-logo-url -->
+      <svg class="default-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+        <path d="M2 17l10 5 10-5"/>
+        <path d="M2 12l10 5 10-5"/>
+      </svg>
+    </div>
+    <span class="footer-brand-name"></span>
+  </div>
+
+  <div class="footer-right">
+    {% if references or reference %}
+    <div class="sources-flyout">
+      <!-- Flyout panel (hidden by default) -->
+      <div class="sources-panel">
+        <div class="sources-header">Sources</div>
+        <ul class="sources-list">
+          {% if references %}
+            {% for ref in references %}
+            <li>
+              <span class="source-number">{{ loop.index }}.</span>
+              {% if ref.link %}
+              <a href="{{ ref.link }}" target="_blank" rel="noopener">{{ ref.name }}</a>
+              {% else %}
+              <span>{{ ref.name }}</span>
+              {% endif %}
+            </li>
+            {% endfor %}
+          {% elif reference %}
+            <li>
+              <span class="source-number">1.</span>
+              {% if reference_link %}
+              <a href="{{ reference_link }}" target="_blank" rel="noopener">{{ reference }}</a>
+              {% else %}
+              <span>{{ reference }}</span>
+              {% endif %}
+            </li>
+          {% endif %}
+        </ul>
+      </div>
+      <!-- Trigger button -->
+      <button class="sources-trigger" onclick="this.parentElement.classList.toggle('open')">
+        <span class="source-count">{% if references %}{{ references | length }}{% else %}1{% endif %}</span>
+        Sources
+      </button>
+    </div>
+    {% endif %}
+  </div>
+</div>

package/_includes/slides/funnel.njk

@@ -0,0 +1,30 @@
+{# TEMPLATE: funnel — Progressive narrowing funnel with stage labels and annotations. #}
+<section class="slide-funnel">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <div class="funnel-wrapper">
+      <div class="funnel-grid">
+        {% for stage in slide.stages %}
+        <div class="funnel-row">
+          <div class="funnel-stage-wrapper">
+            <div class="funnel-stage stage-{{ loop.index }}">
+              <span class="stage-label">{{ stage.label }}</span>
+            </div>
+          </div>
+          <div class="funnel-annotation">
+            <span class="annotation-arrow">→</span>
+            <span class="annotation-text">{{ stage.text }}</span>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/hero.njk

@@ -0,0 +1,27 @@
+{# TEMPLATE: hero — Full-bleed background image with dark overlay and optional text box. #}
+{% if slide.image %}{% set img_src = slide.image | resolveImage %}{% endif %}
+<section class="slide-hero"{% if slide.image %} style="background-image: url('{{ img_src }}'); background-size: cover; background-position: center;"{% elif slide.color %} style="background-color: {{ slide.color }};"{% endif %}>
+  <div class="slide-body">
+    <h1>{{ slide.title }}</h1>
+    {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
+    {% if slide.box_title or slide.box_text or slide.box_items %}
+    <div class="text-box">
+      {% if slide.box_title %}<h3>{{ slide.box_title }}</h3>{% endif %}
+      {% if slide.box_text %}<p>{{ slide.box_text }}</p>{% endif %}
+      {% if slide.box_items %}
+      <ul>
+        {% for item in slide.box_items %}<li>{{ item }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </div>
+    {% endif %}
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% if 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/_includes/slides/image-overlay.njk

@@ -0,0 +1,21 @@
+{# TEMPLATE: image-overlay — Full background image with positioned text box overlay. #}
+{% set img_src = slide.image | resolveImage %}
+<section class="slide-image-overlay" data-background-image="{{ img_src }}" data-background-size="cover">
+  <div class="slide-body">
+    <div class="overlay-box {{ slide.position | default('bottom-left') }}">
+      {% if slide.title %}<h3>{{ slide.title }}</h3>{% endif %}
+      {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
+      {% if slide.items %}
+      <ul>
+        {% for item in slide.items %}<li>{{ item }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </div>
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/metrics.njk

@@ -0,0 +1,27 @@
+{# TEMPLATE: metrics — Key statistics display with 2-4 metric cards. #}
+<section class="slide-metrics">
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+      {% if slide.subtitle %}<p class="subtitle">{{ slide.subtitle }}</p>{% endif %}
+    </div>
+    {% set metric_count = slide.metrics | length %}
+    {% if metric_count == 2 %}{% set cols_class = "cols-2" %}
+    {% elif metric_count == 4 %}{% set cols_class = "cols-4" %}
+    {% else %}{% set cols_class = "cols-3" %}{% endif %}
+    <div class="metrics-grid {{ cols_class }}">
+      {% for metric in slide.metrics %}
+      <div class="metric-card">
+        <div class="value{% if metric.color %} {{ metric.color }}{% endif %}">{{ metric.value }}</div>
+        <div class="label">{{ metric.label }}</div>
+        {% if metric.context %}<div class="context">{{ metric.context }}</div>{% endif %}
+      </div>
+      {% endfor %}
+    </div>
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/quote.njk

@@ -0,0 +1,17 @@
+{# TEMPLATE: quote — Testimonial or statement with attribution. #}
+<section class="slide-quote">
+  <div class="slide-body">
+    <div class="quote-mark">"</div>
+    <blockquote>{{ slide.quote }}</blockquote>
+    {% if slide.author %}
+    <div class="attribution">
+      {% if slide.author_title %}<strong>{{ slide.author }}</strong>{{ slide.author_title }}{% else %}— {{ slide.author }}{% endif %}
+    </div>
+    {% endif %}
+    {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/section.njk

@@ -0,0 +1,6 @@
+{# TEMPLATE: section — Chapter divider slide for separating presentation sections. #}
+<section class="slide-section">
+  <h2>{{ slide.title }}</h2>
+  {% if slide.subtitle %}<p class="subtitle">{{ slide.subtitle }}</p>{% endif %}
+  {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+</section>

package/_includes/slides/split-wide.njk

@@ -0,0 +1,30 @@
+{# TEMPLATE: split-wide — 1/3 content + 2/3 image layout (inverse of split). #}
+{% from "slides/_nested-list.njk" import renderItems %}
+<section class="slide-split-wide">
+  <div class="slide-body">
+    <div class="split-wide-container">
+      <div class="split-wide-content">
+        <div class="slide-header">
+          <h2>{{ slide.title }}</h2>
+        </div>
+        {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
+        {% if slide.items %}
+        {{ renderItems(slide.items) }}
+        {% endif %}
+        {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+      </div>
+      <div class="split-wide-image">
+        {% if slide.image %}
+        {% set img_src = slide.image | resolveImage %}
+        <a href="{{ img_src }}" class="glightbox">
+          <img src="{{ img_src }}" alt="{{ slide.image_alt | default('') }}">
+        </a>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>

package/_includes/slides/split.njk

@@ -0,0 +1,30 @@
+{# TEMPLATE: split — 1/3 image + 2/3 content layout. Image has lightbox on click. #}
+{% from "slides/_nested-list.njk" import renderItems %}
+<section class="slide-split">
+  <div class="slide-body">
+    <div class="split-container">
+      <div class="split-image">
+        {% if slide.image %}
+        {% set img_src = slide.image | resolveImage %}
+        <a href="{{ img_src }}" class="glightbox">
+          <img src="{{ img_src }}" alt="{{ slide.image_alt | default('') }}">
+        </a>
+        {% endif %}
+      </div>
+      <div class="split-content">
+        <div class="slide-header">
+          <h2>{{ slide.title }}</h2>
+        </div>
+        {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
+        {% if slide.items %}
+        {{ renderItems(slide.items) }}
+        {% endif %}
+        {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+      </div>
+    </div>
+  </div>
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+</section>