Statum/example/home.html

<pstm-uri>/</pstm-uri>
<pstm-template>main</pstm-template>

<!--
  Server-side variant (pstm-*).

  The branch is chosen by statum-mkpstm at request time from the X-Statum-Slot
  headers the client carries. A normal browser navigation sends no such headers,
  so the default ("guest") branch is what is first painted; the client then takes
  over the live UI below. To see the authenticated variant directly, replay the
  request with the stored frame:

      curl http://localhost:8080/ -H "X-Statum-Slot: <base64-frame>"
-->
<p pstm-if="auth != null">Server-rendered: signed in.</p>
<p pstm-else>Server-rendered: browsing as a guest.</p>

<hr>

<p>Counter (set by the entrypoint): <span stm-text="counter.value">…</span></p>

<!--
  Client-side variant (stm-*).

  Evaluated live against the held slots after the entrypoint hydrates the page.
-->
<div stm-if="auth != null">
    <p>Welcome back, <strong stm-text="auth.name">user</strong>.</p>
    <form stm-action="{uri: '/logout', method: 'POST'}">
        <button type="submit">Log out</button>
    </form>
</div>
<div stm-else>
    <p>Sign in to personalise this page.</p>
    <form stm-action="{uri: '/login', method: 'POST'}">
        <label>Name <input name="name" placeholder='try "admin"'></label>
        <button type="submit">Log in</button>
    </form>
</div>