Partials with props in Stati

A card component that takes data, and the one line that keeps it from breaking every page.

SNP 053 #359 Filed stati eta

eta
<% /* site/_partials/card.eta */ %>
<% if (!stati.props) return; %>
<article class="card">
  <h2><a href="<%= stati.props.url %>"><%= stati.props.title %></a></h2>
  <% if (stati.props.description) { %>
    <p><%= stati.props.description %></p>
  <% } %>
</article>
eta
<%~ stati.partials.card({ title: 'Hello, Stati', url: '/blog/hello' }) %>

Before a page renders, Stati renders every partial the page can see once without props, so that <%~ stati.partials.header %> works without a call. In that pass stati.props is undefined, and without the first line the card fails with "Cannot read properties of undefined" on every page. The data you pass is only ever in stati.props; stati.page and stati.site are there as usual.

  • The name is the file name, wherever it sits in the folder: _partials/ui/card.eta is stati.partials.card, and _partials/post-meta.eta is stati.partials['post-meta'].
  • Any folder whose name starts with _ holds partials. A page sees the ones in its own folder and in the folders above it, and on a name clash the nearest one wins.
  • stati.partials.card({}) counts as no props: you get that first render, which with the guard above prints the word undefined.
  • To ask whether an optional partial exists, use 'sidebar' in stati.partials. In the dev server a missing partial is a warning box rather than undefined, so if (stati.partials.sidebar) is always true there.

In the Stati docs: Passing data to partials, Partial discovery rules and Partial templates.