Presentation Overview

Features Demo

Ben Houston · 2026-03-18 · 20 slides

PrintStart

  1. Presentation Tool

    Slide template and markdown rendering walkthrough

    Ben Houston · 2026-03-18

    This example deck exercises every built-in slide layout and the core markdown features used inside real talks.

    Slide 1Presentation Tool

  2. Deck Branding And Title Metadata

    • This example deck sets logo: "/brand/example-logo.svg" in the deck front matter.
    • The footer logo and background watermark are applied automatically across the whole deck.
    • On the title slide, the author and date are pulled from deck metadata without repeating them in the slide body.
    Slide 2Deck Branding And Title Metadata

  3. Features Demo Interpolation

    Open Features Demo Interpolation

    https://landofassets.com/demo
    • Deck title: Features Demo
    • Deck author: Ben Houston
    • Deck date: 2026-03-18
    • Slide title: Features Demo Interpolation
    • The URL label above this content is also interpolated at parse time.
    Slide 3Features Demo Interpolation

  4. URL / QR Overlay Below

    • Set url to render a QR code and link directly under the title area.
    • Use urlLabel to show friendlier text than the raw URL.
    • urlPosition: below places the block after the main content.

    Try the demo

    https://landofassets.com/demo
    Slide 4URL / QR Overlay Below

  5. URL / QR Overlay Above

    Scan or visit the demo

    https://landofassets.com/demo
    • urlPosition: above places the URL / QR block directly under the title area.
    • This works well when the link is part of the headline message for the slide.
    Slide 5URL / QR Overlay Above
  6. Slide 6Blank Layout

  7. Two Columns With Inline Markdown Images

    Inline image in the left column

    API screenshot

    • Column markdown still uses the shared renderer.
    • Relative images are rewritten through /api/images/....
    • This slide explicitly uses verticalAlign: center-independent.

    Ordered steps in the right column

    1. Author content/example/index.md
    2. Keep images beside the deck
    3. Open /example/2 to verify the column layout
    Slide 7Two Columns With Inline Markdown Images

  8. Three Columns Cover More Layouts

    Title

    • Centered hero slide
    • Great for opening and closing

    Image layouts

    • image-left
    • image-right
    • Shared image optimization path

    Markdown

    • Lists
    • Images
    • Code blocks
    • This slide uses verticalAlign: center and the faster crossfade transition.
    Slide 8Three Columns Cover More Layouts

  9. Fade Transition Example

    • crossfade overlaps the outgoing and incoming slides.
    • fade waits for the current slide to disappear before bringing in the next slide.
    • The result is a cleaner handoff when you want less visual overlap.
    Slide 9Fade Transition Example

  10. Image Left Layout

    Presentation asset pipeline
    • The image sits on the left side of the slide.
    • Text content remains markdown-rendered on the right.
    • This layout is useful for diagrams that need supporting narration.
    Slide 10Image Left Layout

  11. Image Right Layout

    • The mirrored template keeps the same image treatment.
    • It helps alternate visual rhythm across adjacent slides.
    • Both image templates should keep assets crisp and centered.
    Presentation asset pipeline
    Slide 11Image Right Layout
  12. Full-bleed pipeline illustration

    Image Full Layout

    Use image-full when the image should own the slide and the text only needs to reinforce the emotional takeaway.

    Slide 12Image Full Layout
  13. “Our 3D load times dropped 80%”

    Acme Corp

    Use quote for customer proof points, executive pull quotes, or outcome slides between denser product content.

    Slide 13Our 3D load times dropped 80%

  14. Embed Layout

    Live page inside the deck

    • embed renders a live iframe in the slide body area.
    • Relative URLs like / stay on the same origin.
    • Third-party sites may still block framing with CSP or X-Frame-Options.
    Slide 14Embed Layout

  15. Auto Advance Slide

    • Set autoAdvance to a positive number of seconds.
    • Useful for kiosk displays, looping demo setups, or unattended showcases.
    Slide 15Auto Advance Slide

  16. Markdown Features (Top Aligned)

    • Bullet lists should keep their spacing.
    • Inline code should stay monospaced.
    • Bold text and italic text should remain styled.
    1. Numbered lists should increment correctly.
    2. Local assets should still be available in other layouts.
    3. This slide demonstrates verticalAlign: top.
    const slide = {
  stub: 'example',
  layout: 'single',
  title: 'Markdown Features',
};
    Slide 16Markdown Features (Top Aligned)

  17. Build Transition Example

    • Start with the core story on screen.
    • Keep the title and layout identical on the next slide.
    • Add the next idea with a slide-level build transition.
    Slide 17Build Transition Example

  18. Build Transition Example

    • Start with the core story on screen.
    • Keep the title and layout identical on the next slide.
    • Add the next idea with a slide-level build transition.
    • Reveal one more supporting point without changing the overall slide frame.
    • Use this pattern for progressive diagrams or lists.

    title: "Slide Include With Snippet Image" notes: "Demonstrate ::include-slide using a reusable slide with its own image path."

    Slide 18Build Transition Example

  19. Fragment Include With Snippet Image

    • This slide keeps its own layout and metadata.
    • The body below is pulled in from a snippet under content/~snippets/.

    The content below comes from content/~snippets/fragments/reusable-image-fragment.md.

    API screenshot

    • The markdown image above stays relative to the included fragment file.
    • This lets snippet libraries keep their own nearby assets or shared references.
    Slide 19Fragment Include With Snippet Image

  20. Blackout Shortcut Demo

    • Press B or . to blank the screen and bring the audience's attention back to you.
    • Press the same shortcut again to return to the slide.
    • This works from any presentation slide, but this one is here as a dedicated demo stop.
    Slide 20Blackout Shortcut Demo