lazyslides 0.2.0 → 0.2.2

package/README.md

@@ -10,7 +10,7 @@ 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/)
+[Live demo](https://chrisissorry.github.io/lazyslides/presentations/)
 
 ## Why
 
@@ -148,10 +148,31 @@ Supporting files (outlines, notes, PDFs, images) go alongside `index.md` in the
 | `table` | Data table |
 | `code` | Code snippet with syntax highlighting |
 | `image-overlay` | Full image with positioned text box |
-| `agenda` | Clickable table of contents |
+| `agenda` | Clickable table of contents (supports `auto_generate: true`) |
 
 See `CLAUDE.md` for the full field reference for each template.
 
+## Footer
+
+Every slide (except `title`) includes a footer bar with slide numbers, a logo, a brand name, and optional source references.
+
+**Visibility** — the footer is shown by default on most templates. Hero and section slides hide it by default.
+
+| Level | Field | Effect |
+|-------|-------|--------|
+| Presentation | `show_footer: false` | Hides the footer on all slides |
+| Per slide | `hide_footer: true` | Hides footer on that slide |
+| Per slide (hero/section) | `show_footer: true` | Shows footer on that slide |
+
+**Branding** — customize the logo and name via CSS custom properties in a theme file:
+
+```css
+:root {
+  --footer-brand-name: 'Your Brand';
+  --footer-logo-url: url('/path/to/logo.svg');
+}
+```
+
 ## Slash commands (Claude Code)
 
 The scaffolded project includes Claude Code slash commands for the full workflow:
@@ -164,6 +185,8 @@ The scaffolded project includes Claude Code slash commands for the full workflow
 | `/create-outline` | Plan structure before writing YAML |
 | `/refine-slides` | Improve an existing presentation |
 | `/validate` | Check YAML and fix issues |
+| `/add-template` | Create a custom slide template |
+| `/add-theme` | Create a custom CSS theme |
 
 The project ships a `CLAUDE.md` with the complete template schema, so Claude Code knows every field of every template.
 
@@ -184,7 +207,6 @@ Drop a CSS file into `themes/` to override design tokens:
 ```css
 :root {
   --color-primary-500: #your-brand-color;
-  --footer-brand-name: 'Your Brand';
 }
 ```
 

package/_includes/slides/_nested-list.njk

@@ -1,22 +1,38 @@
-{# Reusable macro for rendering nested lists (map syntax + legacy object syntax) #}
-{% macro renderItems(items, ordered) %}
+{# Reusable macro for rendering nested lists (map syntax + legacy object syntax).
+   Supports fragment animations and auto-animate data-id attributes.
+
+   Parameters:
+     items     — the list items array
+     ordered   — true for <ol>, false for <ul> (default: false)
+     fragment_type — slide-level fragment class applied to all items (e.g. "fade-up")
+#}
+{% macro renderItems(items, ordered, fragment_type) %}
 <{{ "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 %}
+  <li
+    {%- if item is mapping and item.text is defined %}
+      {%- set frag = item.fragment or fragment_type %}
+      {%- if frag %} class="fragment {{ frag }}"{% endif %}
+      {%- if item.data_id %} data-id="{{ item.data_id }}"{% endif %}
+    {%- elif item is mapping %}
+      {%- if fragment_type %} class="fragment {{ fragment_type }}"{% endif %}
+    {%- else %}
+      {%- if fragment_type %} class="fragment {{ fragment_type }}"{% endif %}
+    {%- endif %}>
+    {% if item is mapping and item.text is defined %}
       {{ item.text }}
       {% if item.sub_items %}
       <ul>
-        {% for sub in item.sub_items %}<li>{{ sub }}</li>{% endfor %}
+        {% for sub in item.sub_items %}<li{% if frag %} class="fragment {{ frag }}"{% endif %}>{{ sub }}</li>{% endfor %}
       </ul>
       {% endif %}
+    {% elif item is mapping %}
+      {% for key, children in item %}
+        {{ key }}
+        <ul>
+          {% for sub in children %}<li{% if fragment_type %} class="fragment {{ fragment_type }}"{% endif %}>{{ sub }}</li>{% endfor %}
+        </ul>
+      {% endfor %}
     {% else %}
       {{ item }}
     {% endif %}

package/_includes/slides/_section-attrs.njk

@@ -0,0 +1,15 @@
+{# Reusable macro for emitting data-* attributes on <section> tags.
+   Handles transitions, auto-animate, backgrounds (color, gradient, image, video). #}
+{% macro sectionAttrs(slide) %}
+{%- if slide.transition %} data-transition="{{ slide.transition }}"{% endif %}
+{%- if slide.transition_speed %} data-transition-speed="{{ slide.transition_speed }}"{% endif %}
+{%- if slide.auto_animate %} data-auto-animate{% endif %}
+{%- if slide.auto_animate_easing %} data-auto-animate-easing="{{ slide.auto_animate_easing }}"{% endif %}
+{%- if slide.auto_animate_duration %} data-auto-animate-duration="{{ slide.auto_animate_duration }}"{% endif %}
+{%- if slide.background_color %} data-background-color="{{ slide.background_color }}"{% endif %}
+{%- if slide.background_gradient %} data-background="{{ slide.background_gradient }}"{% endif %}
+{%- if slide.background_image %} data-background-image="{{ slide.background_image }}"{% endif %}
+{%- if slide.background_video %} data-background-video="{{ slide.background_video }}"{% endif %}
+{%- if slide.background_video_loop %} data-background-video-loop{% endif %}
+{%- if slide.background_video_muted %} data-background-video-muted{% endif %}
+{%- endmacro %}

package/_includes/slides/agenda.njk

@@ -1,17 +1,30 @@
-{# TEMPLATE: agenda — Clickable table of contents for presentation sections. #}
-<section class="slide-agenda">
+{# TEMPLATE: agenda — Clickable table of contents for presentation sections.
+   Set auto_generate: true to build the agenda automatically from section slides.
+   Manual mode: provide sections array with title and slide (0-based index). #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-agenda"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title | default("Agenda") }}</h2>
     </div>
     <ol class="agenda-list">
-      {% for item in slide.sections %}
+      {% if slide.auto_generate %}
+        {% for s in slides %}
+          {% if s.template == "section" %}
+      <li><a href="#/{{ loop.index0 }}">{{ s.title }}</a></li>
+          {% endif %}
+        {% endfor %}
+      {% else %}
+        {% for item in slide.sections %}
       <li><a href="#/{{ item.slide }}">{{ item.title }}</a></li>
-      {% endfor %}
+        {% endfor %}
+      {% endif %}
     </ol>
   </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/_includes/slides/center.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: center — Centered statement, image, or both. Image has lightbox on click. #}
-<section class="slide-center">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-center"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     {% if slide.title %}<h2>{{ slide.title }}</h2>{% endif %}
     {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
@@ -9,8 +10,10 @@
     {% 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/_includes/slides/code.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: code — Code snippet display with syntax highlighting. #}
-<section class="slide-code">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-code"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -8,8 +9,10 @@
     {% if slide.caption %}<p class="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/_includes/slides/columns.njk

@@ -1,11 +1,12 @@
 {# TEMPLATE: columns — Two-column layout for side-by-side content. #}
-<section class="slide-columns">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-columns"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
     </div>
     <div class="columns">
-      <div class="column">
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
         {% if slide.left_title %}<h3>{{ slide.left_title }}</h3>{% endif %}
         {% if slide.left_text %}<p>{{ slide.left_text }}</p>{% endif %}
         {% if slide.left_items %}
@@ -15,7 +16,7 @@
         </ul>
         {% endif %}
       </div>
-      <div class="column">
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
         {% if slide.right_title %}<h3>{{ slide.right_title }}</h3>{% endif %}
         {% if slide.right_text %}<p>{{ slide.right_text }}</p>{% endif %}
         {% if slide.right_items %}
@@ -28,8 +29,10 @@
     </div>
     {% 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/_includes/slides/comparison.njk

@@ -1,5 +1,6 @@
 {# 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 %}">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-comparison{% if slide.highlight == 'left' %} highlight-left{% elif slide.highlight == 'none' %} highlight-none{% endif %}"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -13,7 +14,7 @@
       </thead>
       <tbody>
         {% for row in slide.rows %}
-        <tr>
+        <tr{% if slide.fragment %} class="fragment {{ slide.fragment }}"{% endif %}>
           <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>
@@ -22,8 +23,10 @@
     </table>
     {% 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/_includes/slides/content.njk

@@ -1,6 +1,7 @@
 {# TEMPLATE: content — Standard slide with headline and bullet points. #}
 {% from "slides/_nested-list.njk" import renderItems %}
-<section class="slide-content">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-content"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -8,15 +9,17 @@
     </div>
     {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
     {% if slide.items %}
-    {{ renderItems(slide.items) }}
+    {{ renderItems(slide.items, false, slide.fragment) }}
     {% endif %}
     {% if slide.ordered_items %}
-    {{ renderItems(slide.ordered_items, true) }}
+    {{ renderItems(slide.ordered_items, true, slide.fragment) }}
     {% 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/_includes/slides/funnel.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: funnel — Progressive narrowing funnel with stage labels and annotations. #}
-<section class="slide-funnel">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-funnel"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -7,7 +8,7 @@
     <div class="funnel-wrapper">
       <div class="funnel-grid">
         {% for stage in slide.stages %}
-        <div class="funnel-row">
+        <div class="funnel-row{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
           <div class="funnel-stage-wrapper">
             <div class="funnel-stage stage-{{ loop.index }}">
               <span class="stage-label">{{ stage.label }}</span>
@@ -23,8 +24,10 @@
     </div>
     {% 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/_includes/slides/hero.njk

@@ -1,6 +1,7 @@
 {# TEMPLATE: hero — Full-bleed background image with dark overlay and optional text box. #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
 {% 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 %}>
+<section class="slide-hero"{% if slide.image %} data-background-image="{{ img_src }}" data-background-size="cover" data-background-position="center"{% elif slide.color %} data-background-color="{{ slide.color }}"{% endif %}{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <h1>{{ slide.title }}</h1>
     {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
@@ -18,7 +19,7 @@
     {% endif %}
     {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
   </div>
-  {% if not slide.hide_footer %}
+  {% if global_footer and slide.show_footer %}
   {% set reference = slide.reference %}
   {% set reference_link = slide.reference_link %}
   {% set references = slide.references %}

package/_includes/slides/image-overlay.njk

@@ -1,9 +1,7 @@
-{# TEMPLATE: image-overlay — Full background image with positioned text box overlay.
-   NOTE: Use inline style for background-image, NOT data-background-image.
-   Reveal.js data-background-* renders in the full viewport (including theater margins),
-   while inline style keeps the image within the 960×540 slide bounds. #}
+{# TEMPLATE: image-overlay — Full background image with positioned text box overlay. #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
 {% set img_src = slide.image | resolveImage %}
-<section class="slide-image-overlay" style="background-image: url('{{ img_src }}'); background-size: cover; background-position: center;">
+<section class="slide-image-overlay" data-background-image="{{ img_src }}" data-background-size="cover" data-background-position="center"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="overlay-box {{ slide.position | default('bottom-left') }}">
       {% if slide.title %}<h3>{{ slide.title }}</h3>{% endif %}
@@ -17,8 +15,10 @@
     </div>
     {% 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/_includes/slides/metrics.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: metrics — Key statistics display with 2-4 metric cards. #}
-<section class="slide-metrics">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-metrics"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -11,7 +12,7 @@
     {% else %}{% set cols_class = "cols-3" %}{% endif %}
     <div class="metrics-grid {{ cols_class }}">
       {% for metric in slide.metrics %}
-      <div class="metric-card">
+      <div class="metric-card{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
         <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 %}
@@ -20,8 +21,10 @@
     </div>
     {% 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/_includes/slides/quote.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: quote — Testimonial or statement with attribution. #}
-<section class="slide-quote">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-quote"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="quote-mark">"</div>
     <blockquote>{{ slide.quote }}</blockquote>
@@ -10,8 +11,10 @@
     {% 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/_includes/slides/section.njk

@@ -1,6 +1,13 @@
 {# TEMPLATE: section — Chapter divider slide for separating presentation sections. #}
-<section class="slide-section">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-section"{{ sectionAttrs(slide) }}>
   <h2>{{ slide.title }}</h2>
   {% if slide.subtitle %}<p class="subtitle">{{ slide.subtitle }}</p>{% endif %}
   {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
+  {% if global_footer and slide.show_footer %}
+  {% set reference = slide.reference %}
+  {% set reference_link = slide.reference_link %}
+  {% set references = slide.references %}
+  {% include "slides/footer.njk" %}
+  {% endif %}
 </section>

package/_includes/slides/split-wide.njk

@@ -1,6 +1,7 @@
 {# 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">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-split-wide"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="split-wide-container">
       <div class="split-wide-content">
@@ -9,11 +10,11 @@
         </div>
         {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
         {% if slide.items %}
-        {{ renderItems(slide.items) }}
+        {{ renderItems(slide.items, false, slide.fragment) }}
         {% endif %}
         {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
       </div>
-      <div class="split-wide-image">
+      <div class="split-wide-image{% if slide.image_fit == 'contain' %} image-contain{% endif %}">
         {% if slide.image %}
         {% set img_src = slide.image | resolveImage %}
         <a href="{{ img_src }}" class="glightbox">
@@ -23,8 +24,10 @@
       </div>
     </div>
   </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/_includes/slides/split.njk

@@ -1,9 +1,10 @@
 {# 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">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-split"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="split-container">
-      <div class="split-image">
+      <div class="split-image{% if slide.image_fit == 'contain' %} image-contain{% endif %}">
         {% if slide.image %}
         {% set img_src = slide.image | resolveImage %}
         <a href="{{ img_src }}" class="glightbox">
@@ -17,14 +18,16 @@
         </div>
         {% if slide.text %}<p>{{ slide.text }}</p>{% endif %}
         {% if slide.items %}
-        {{ renderItems(slide.items) }}
+        {{ renderItems(slide.items, false, slide.fragment) }}
         {% endif %}
         {% if slide.notes %}<aside class="notes">{{ slide.notes }}</aside>{% endif %}
       </div>
     </div>
   </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/_includes/slides/table.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: table — Multi-column data table with neutral styling and zebra striping. #}
-<section class="slide-table">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-table"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -24,8 +25,10 @@
     </table>
     {% 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/_includes/slides/three-columns.njk

@@ -0,0 +1,48 @@
+{# TEMPLATE: three-columns — Three equal-width columns for side-by-side content. #}
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-three-columns"{{ sectionAttrs(slide) }}>
+  <div class="slide-body">
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    <div class="three-columns">
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
+        {% if slide.col1_title %}<h3>{{ slide.col1_title }}</h3>{% endif %}
+        {% if slide.col1_text %}<p>{{ slide.col1_text }}</p>{% endif %}
+        {% if slide.col1_items %}
+        <ul>
+          {% for item in slide.col1_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
+        {% if slide.col2_title %}<h3>{{ slide.col2_title }}</h3>{% endif %}
+        {% if slide.col2_text %}<p>{{ slide.col2_text }}</p>{% endif %}
+        {% if slide.col2_items %}
+        <ul>
+          {% for item in slide.col2_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+      <div class="column{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
+        {% if slide.col3_title %}<h3>{{ slide.col3_title }}</h3>{% endif %}
+        {% if slide.col3_text %}<p>{{ slide.col3_text }}</p>{% endif %}
+        {% if slide.col3_items %}
+        <ul>
+          {% for item in slide.col3_items %}<li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+    </div>
+    {% 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/_includes/slides/timeline.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: timeline — Horizontal timeline with alternating above/below event cards. #}
-<section class="slide-timeline">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-timeline"{{ sectionAttrs(slide) }}>
   <div class="slide-body">
     <div class="slide-header">
       <h2>{{ slide.title }}</h2>
@@ -9,7 +10,7 @@
       <div class="timeline-events">
         {% for event in slide.events %}
         {% set remainder = loop.index % 2 %}
-        <div class="timeline-event {% if remainder == 1 %}above{% else %}below{% endif %}">
+        <div class="timeline-event {% if remainder == 1 %}above{% else %}below{% endif %}{% if slide.fragment %} fragment {{ slide.fragment }}{% endif %}">
           <div class="event-dot"></div>
           <div class="event-connector"></div>
           <div class="event-card">
@@ -23,8 +24,10 @@
     </div>
     {% 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/_includes/slides/title.njk

@@ -1,5 +1,6 @@
 {# TEMPLATE: title — Opening slide with logo, title, subtitle, and author. #}
-<section class="slide-title">
+{% from "slides/_section-attrs.njk" import sectionAttrs %}
+<section class="slide-title"{{ sectionAttrs(slide) }}>
   {% if slide.logo != false %}
   <div class="logo">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">