lazyslides 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,20 @@
1
- {# TEMPLATE: center — Centered statement, image, or both. Image has lightbox on click. #}
1
+ {#
2
+ TEMPLATE: center — Image or statement centered inside the slide. Correct choice for image-only slides.
3
+
4
+ When `image` is provided it renders as a constrained <img> element inside the slide boundaries
5
+ (object-fit: contain, never cropped). This is the right template when you want an image to
6
+ appear as slide content. Clicking the image opens it fullscreen via GLightbox.
7
+
8
+ Do NOT use hero or image-overlay for image-only slides — those templates use
9
+ data-background-image, which fills the entire browser window and bleeds outside the slide frame.
10
+
11
+ Fields:
12
+ title — optional heading above the content
13
+ text — centered statement paragraph
14
+ image — image path; rendered as <img> constrained within slide dimensions
15
+ image_alt — alt text for the image
16
+ notes — speaker notes
17
+ #}
2
18
  {% from "slides/_section-attrs.njk" import sectionAttrs %}
3
19
  <section class="slide-center"{{ sectionAttrs(slide) }}>
4
20
  <div class="slide-body">
@@ -1,4 +1,23 @@
1
- {# TEMPLATE: hero — Full-bleed background image with dark overlay and optional text box. #}
1
+ {#
2
+ TEMPLATE: hero — Full-browser-background image with headline text. NOT for image-only slides.
3
+
4
+ The image is placed via Reveal.js data-background-image on the <section> element, which fills
5
+ the entire browser window — not just the slide area. In windowed or embedded mode the image
6
+ bleeds outside the slide frame into surrounding white space. Use only when you want that
7
+ dramatic full-bleed effect. For an image displayed inside the slide, use `center` with `image:`
8
+ instead (renders as a constrained <img> element).
9
+
10
+ Fields:
11
+ title* — big headline rendered as <h1> over the background
12
+ text — supporting paragraph below the headline
13
+ image — path to background image (sets data-background-image; fills entire browser)
14
+ color — hex fallback/solid background color used when no image (e.g. "#1a1a2e")
15
+ box_title — heading inside an optional overlay text box
16
+ box_text — paragraph inside the overlay text box
17
+ box_items — bullet list inside the overlay text box
18
+ show_footer — show footer on this slide (default: hidden on hero slides)
19
+ notes — speaker notes
20
+ #}
2
21
  {% from "slides/_section-attrs.njk" import sectionAttrs %}
3
22
  {% if slide.image %}{% set img_src = slide.image | resolveImage %}{% endif %}
4
23
  <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) }}>
@@ -1,4 +1,20 @@
1
- {# TEMPLATE: image-overlay — Full background image with positioned text box overlay. #}
1
+ {#
2
+ TEMPLATE: image-overlay — Full-browser-background image with positioned text box. NOT for image-only slides.
3
+
4
+ The image is placed via Reveal.js data-background-image on the <section> element, which fills
5
+ the entire browser window — not just the slide area. In windowed or embedded mode the image
6
+ bleeds outside the slide frame into surrounding white space. Use only when you want that
7
+ dramatic full-bleed effect. For an image displayed inside the slide, use `center` with `image:`
8
+ instead (renders as a constrained <img> element).
9
+
10
+ Fields:
11
+ image* — path to background image (sets data-background-image; fills entire browser)
12
+ title — heading rendered inside the positioned overlay box
13
+ text — paragraph rendered inside the overlay box
14
+ items — bullet list rendered inside the overlay box
15
+ position — overlay box position: bottom-left (default), bottom-right, top-left, top-right
16
+ notes — speaker notes
17
+ #}
2
18
  {% from "slides/_section-attrs.njk" import sectionAttrs %}
3
19
  {% set img_src = slide.image | resolveImage %}
4
20
  <section class="slide-image-overlay" data-background-image="{{ img_src }}" data-background-size="cover" data-background-position="center"{{ sectionAttrs(slide) }}>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lazyslides",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Slide decks with native agentic AI integration",
5
5
  "license": "MIT",
6
6
  "author": "Chris Tietz",