lazyslides 0.2.0 → 0.2.1

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/example/)
 
 ## 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/agenda.njk

@@ -1,17 +1,29 @@
-{# TEMPLATE: agenda — Clickable table of contents for presentation sections. #}
+{# 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). #}
 <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 %}
+      {% 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

@@ -9,8 +9,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

@@ -8,8 +8,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

@@ -28,8 +28,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

@@ -22,8 +22,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

@@ -15,8 +15,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/funnel.njk

@@ -23,8 +23,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

@@ -18,7 +18,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

@@ -17,8 +17,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

@@ -20,8 +20,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

@@ -10,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/section.njk

@@ -3,4 +3,10 @@
   <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

@@ -23,8 +23,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

@@ -23,8 +23,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/table.njk

@@ -24,8 +24,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/timeline.njk

@@ -23,8 +23,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/_layouts/presentation.njk

@@ -43,6 +43,7 @@
         {% set slide_index = loop.index %}
         {% set total_slides = slides | length %}
         {% set presentation_title = title %}
+        {% set global_footer = show_footer if show_footer is defined else true %}
         {% include "slides/" + slide.template + ".njk" %}
       {% endfor %}
     </div>

package/index.js

@@ -134,7 +134,7 @@ eleventyExcludeFromCollections: true
 ---
 <!DOCTYPE html>
 <html>
-<head><meta http-equiv="refresh" content="0; url={{ '/presentations/example/' | url }}"></head>
+<head><meta http-equiv="refresh" content="0; url={{ '/presentations/' | url }}"></head>
 <body></body>
 </html>
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazyslides",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Slide decks with native agentic AI integration",
   "license": "MIT",
   "author": "Chris Tietz",

package/scaffold/CLAUDE.md

@@ -42,11 +42,12 @@ theme: default
 transition: slide
 progress: true
 slideNumber: true
-show_footer: true
+show_footer: true            # show footer on slides (default: true, set false to hide globally)
 slides:                      # required — array of slide objects
   - template: content        # required on every slide
     title: Slide Title
     # ... template-specific fields
+    hide_footer: true        # optional — hide footer on this slide (default: false)
     notes: |                 # optional speaker notes (all templates)
       What to say during this slide
 ---
@@ -67,6 +68,7 @@ Fields marked with `*` are required.
 #### `section` — Chapter divider
 - `title`* — section name
 - `subtitle` — section description
+- `show_footer` — show footer on this slide (default: hidden)
 
 #### `content` — Standard bullets
 - `title`* — slide title
@@ -92,7 +94,7 @@ Fields marked with `*` are required.
 - `box_title` — overlay box heading
 - `box_text` — overlay box content
 - `box_items` — overlay box bullet list
-- `hide_footer` — hide footer on this slide
+- `show_footer` — show footer on this slide (default: hidden)
 
 #### `metrics` — Key statistics
 - `title`* — slide title
@@ -182,9 +184,10 @@ Fields marked with `*` are required.
 
 #### `agenda` — Clickable table of contents
 - `title` — slide title (default: "Agenda")
-- `sections`* — array of section objects:
+- `auto_generate` — build agenda automatically from `section` slides (default: false)
+- `sections` — manual array of section objects (ignored when `auto_generate` is true):
   - `title`* — section name
-  - `slide`* — slide number to link to
+  - `slide`* — 0-based slide index to link to
 - `reference` / `reference_link` / `references`
 
 ## Common Patterns
@@ -269,6 +272,8 @@ Images in `center`, `split`, and `split-wide` templates automatically get lightb
 | `/research-topic` | Research a topic for data-driven slides |
 | `/create-outline` | Create a structured outline before generating YAML |
 | `/refine-slides` | Review and improve an existing presentation |
+| `/add-template` | Create a custom slide template |
+| `/add-theme` | Create a custom CSS theme |
 
 ## Build Commands
 

package/scaffold/README.md

@@ -27,3 +27,4 @@ Add a new folder under `presentations/` with an `index.md` file containing your
 
 - **Themes** — Drop CSS files into `themes/` to override the default theme
 - **Styles** — Add custom CSS to `src/styles.css`
+- **Templates** — Run `/add-template` in Claude Code to create custom slide templates

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

@@ -0,0 +1,74 @@
+# Add Template
+
+You are helping the user create a custom slide template for their LazySlides project.
+
+## Step 1: Gather Requirements
+
+Ask the user:
+- What should the template do? (purpose, layout idea)
+- What content fields does it need? (titles, text, images, lists, etc.)
+- Any specific layout or styling requirements?
+
+## 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`.
+
+## Step 3: Pick a Starting Point
+
+Read the existing templates in `_includes/slides/` and suggest the closest built-in template as a base to adapt from. Show the user the docblock and structure of the suggested template. They can also choose to start from scratch.
+
+## Step 4: Create the Template File
+
+Generate `_includes/slides/<name>.njk` following the standard pattern:
+
+```nunjucks
+{#
+  TEMPLATE: <name> — <short description>
+
+  Fields:
+    - field_name* — description (required)
+    - field_name — description (optional)
+
+  Usage:
+    - template: <name>
+      field_name: "value"
+#}
+
+<section class="slide-<name>">
+  <div class="slide-body">
+    {% if slide.title %}
+    <div class="slide-header">
+      <h2>{{ slide.title }}</h2>
+    </div>
+    {% endif %}
+
+    <div class="slide-content">
+      {# Template-specific content here #}
+    </div>
+  </div>
+
+  {% if slide.notes %}
+  <aside class="notes">{{ slide.notes }}</aside>
+  {% endif %}
+
+  {% include "slides/_footer.njk" %}
+</section>
+```
+
+Key conventions to follow:
+- Wrap everything in `<section class="slide-<name>">`
+- Use `slide-body` > `slide-header` + `slide-content` structure
+- Access slide data via `slide.fieldName`
+- Include speaker notes block and footer include
+- Use existing CSS utility classes from the design system where possible
+
+## Step 5: Add CSS
+
+If the template needs custom styles, add them to `src/styles.css`. Place them after the existing slide template styles. Use the `.slide-<name>` class as the scope. Follow the existing spacing, font, and color conventions from the design system.
+
+## Step 6: Test It
+
+1. Add a test slide to an existing presentation using `template: <name>` with sample data
+2. Run `pnpm run validate` — the validator will warn about an unknown template name (this is expected for custom templates)
+3. Run `pnpm run dev` to preview the result in the browser
+4. Iterate on the template and styles until it looks right

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

@@ -0,0 +1,50 @@
+# Add Theme
+
+You are helping the user create a custom CSS theme for their LazySlides project.
+
+## Step 1: Gather Brand Requirements
+
+Ask the user:
+- What brand or visual identity is this for?
+- Primary accent color (hex code or description like "dark teal")
+- Preferred fonts for headings and body text (or "keep defaults")
+- Footer brand name and optional logo image
+- Any other styling preferences (background gradient, etc.)
+
+## Step 2: Choose a Theme Name
+
+Help the user pick a kebab-case name (e.g. `acme-corp`, `dark-blue`, `conference-2026`). This becomes both the filename (`themes/<name>.css`) and the frontmatter value (`theme: <name>`).
+
+## Step 3: Create the Theme File
+
+Read `assets/css/themes/default.css` as the reference for all customizable properties. Create `themes/<name>.css` with the user's values. The theme can override any of these:
+
+**Typography:**
+- `--font-heading` — headings, quotes, metric values (default: Source Serif 4)
+- `--font-body` — paragraphs, lists, labels, footer (default: Plus Jakarta Sans)
+- Add `@import url(...)` at the top for Google Fonts if needed
+
+**Primary color scale:**
+- `--color-primary-50` through `--color-primary-700` — light tints to dark accents
+- Generate a harmonious 7-step scale from the user's chosen color
+
+**Footer branding:**
+- `--footer-brand-name` — text shown in footer center
+- `--footer-logo-url` — optional logo URL (e.g. `url('/assets/images/brands/logo.svg')`)
+
+**Theater background:**
+- `html, body { background: ... }` — gradient behind the slide cards
+
+Only include properties the user wants to change — omitted properties inherit from `src/styles.css` defaults.
+
+## Step 4: Apply the Theme
+
+Update the target presentation's `index.md` frontmatter to use the new theme:
+
+```yaml
+theme: <name>
+```
+
+## Step 5: Preview
+
+Run `pnpm run dev` and open the presentation in the browser to review. Iterate on colors, fonts, and spacing until the user is satisfied.

package/src/styles.css

@@ -171,6 +171,19 @@ html, body {
   overflow: hidden;
 }
 
+/* Overview mode (ESC key) — ensure all slides are visible as thumbnails.
+   Reveal.js sets the hidden attribute on non-present sections, and
+   Tailwind's @layer base includes [hidden] { display: none !important }.
+   With CSS layers, layered !important beats unlayered !important, so we
+   must place our override inside @layer base where specificity decides. */
+@layer base {
+  .reveal.overview .slides > section {
+    display: flex !important;
+    flex-direction: column;
+    opacity: 1 !important;
+  }
+}
+
 /* ============================================
    BASE TYPOGRAPHY
    ============================================ */
@@ -1555,7 +1568,8 @@ html, body {
 }
 
 /* Enlarge progress bar when hovering near bottom */
-.reveal:has(.section-progress-dots:hover) .progress {
+.reveal:has(.section-progress-dots:hover) .progress,
+.reveal:has(.progress:hover) .progress {
   height: 20px;  /* 5x the original 4px */
 }
 
@@ -2022,7 +2036,7 @@ html, body {
   right: 0;
   height: 40px;           /* Large hover zone for easier mouse targeting */
   z-index: 11;            /* Above progress bar (z-index: 10) */
-  pointer-events: auto;   /* Enable hover detection on container */
+  pointer-events: none;   /* Let clicks pass through to progress bar */
 }
 
 .section-progress-dots .section-dot {
@@ -2039,7 +2053,8 @@ html, body {
 }
 
 /* Enlarge dots when hovering near bottom */
-.section-progress-dots:hover .section-dot {
+.section-progress-dots:hover .section-dot,
+.reveal:has(.progress:hover) .section-progress-dots .section-dot {
   width: 20px;
   height: 20px;
 }