On Components and Slots

A theme system has to make a choice. Either every theme reimplements every widget — search, related posts, navigation, contact form — or there is a shared vocabulary, and themes only have to style the widgets they want.

The shape of a component

A TypeDock component is a Latte template that knows nothing about where it will appear. It emits semantic HTML and a stable class name, and that is roughly it.

{* themes/your-theme/components/related-posts.latte *}
<section class="related-posts">
  <h2>{_'Related posts'}</h2>
  <ul>
    {foreach $posts as $post}
      <li><a href="{$post->url}">{$post->title}</a></li>
    {/foreach}
  </ul>
</section>

Slots fill the gaps

A slot is a named region a theme declares — sidebar, after-content, footer-secondary — that operators populate from the admin UI, dragging components into place without touching code.

{
  "slots": {
    "after-content": {
      "label": "After post content",
      "context": "single"
    }
  }
}

Why this matters

Because the alternative — every theme bundling its own search bar, its own related-posts widget, its own contact form — produces a market of themes that all look slightly different and all behave slightly worse than they should. Components are the boring part. Themes are the part that should look interesting.