PW Pathway

Slides and Templates

Overview of slide structure and template system in Pathway.

Slides are the core content units in Pathway. Templates define reusable layouts that slides can use.

Slides

Slides are defined in project JSON files under src/content/projects/. Each slide has:

  • id: Unique identifier (also used as URL slug)
  • title: Display title
  • template: Reference to a template ID
  • slots: Content organized by slot name

Example:

{
  "id": "intro",
  "title": "Welcome",
  "template": "basic",
  "slots": {
    "main": [
      { "id": "heading", "kind": "heading", "text": "Welcome" },
      { "id": "body", "kind": "text", "text": "Introduction content." }
    ]
  }
}

Templates

Templates are JSON files in src/content/templates/ that define reusable layouts with named slots.

  • id: Template identifier
  • theme: Optional theme CSS to apply (e.g., "avionics")
  • blocks: Layout structure using the same block types as slides

Templates can include:

  • Static blocks (e.g., navigation buttons)
  • Slot blocks (containers with a slot property that get filled with slide content)
  • Interpolation via {{title}} to insert slide data

Example:

{
  "id": "basic",
  "blocks": [
    { "id": "title", "kind": "heading", "text": "{{title}}" },
    { "id": "main", "kind": "stack", "slot": "main" },
    {
      "id": "next",
      "kind": "button",
      "text": "Next",
      "click": [{ "action": "core.next" }]
    }
  ]
}

Styling

Each template can have an associated CSS file (e.g., templates/avionics.css) for template-specific decorations.

Templates can declare a theme to apply token overrides from src/themes/. The theme is applied via data-theme attribute on the template container.

See Styling for the full CSS architecture.

  • See Blocks for available block types
  • See Actions for action definitions
  • See Events for how events trigger actions