Eta tags in Stati templates

The three tags, the one variable, and the comment that breaks a template.

SNP 050 #B14 Filed stati eta

eta
<% /* Runs JavaScript, prints nothing */ %>
<% const title = stati.page.title ?? stati.site.title; %>

<% /* Prints the value, HTML-escaped */ %>
<h1><%= title %></h1>

<% /* Prints it as it is: rendered Markdown, partials, HTML you trust */ %>
<main><%~ stati.content %></main>

<% /* Loops and conditions are plain JavaScript */ %>
<% if (stati.page.tags?.length) { %>
  <ul>
    <% for (const tag of stati.page.tags) { %>
      <li><%= tag %></li>
    <% } %>
  </ul>
<% } %>
  • Everything comes from stati, not Eta's usual it: stati.page is the page's front matter plus its url and toc, stati.site the site block of the config, stati.content the rendered Markdown and stati.partials the partials.
  • It's JavaScript, not TypeScript, even in a TypeScript project. A type annotation or an as string in a template is a syntax error.
  • Write comments as /* */. When Eta looks for the %> that closes a tag, it skips strings and block comments but not // comments, so the apostrophe in // don't reads as an unclosed string, and a %> in one ends the tag.

Make a dynamic attribute one expression, which is the convention in Stati templates:

eta
<!-- Yes: the whole value is one expression -->
<article class="<%= `card card-${variant}` %>">

<!-- No: an expression in the middle of the text -->
<article class="card card-<%= variant %>">

Eta renders both. The convention keeps each value in one place, and lets stati.propValue() take over when the classes come with conditions.

In the Stati docs: Templates and layouts, Dynamic attribute values and Template settings.