Print View

Features Demo

Ben Houston · 2026-03-18 · 20 slides

Use the browser print dialog to print or save this deck as a PDF.

  1. Slide 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.

  2. Slide 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.
  3. Slide 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.
  4. Slide 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
  5. Slide 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.
  6. Slide 6
  7. Slide 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
  8. Slide 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.
  9. Slide 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.
  10. Slide 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.
  11. Slide 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
  12. Slide 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.

  13. Slide 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.

  14. Slide 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.
  15. Slide 15

    Auto Advance Slide

    • Set autoAdvance to a positive number of seconds.
    • Useful for kiosk displays, looping demo setups, or unattended showcases.
  16. 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',
};
  17. Slide 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.
  18. Slide 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."

  19. Slide 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.
  20. Slide 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.