Shared header / footer

<birkly-region collection="site_elements" entry="header"></birkly-region>

<main>…</main>

<birkly-region collection="site_elements" entry="footer"></birkly-region>

<script src="/birkly-client.js"></script>

Or with custom markup:

<birkly-region collection="site_elements" entry="header">
  <header class="site-header">{'content'}</header>
</birkly-region>

List region

<birkly-region collection="blog" list ordered="newest">
  <article>
    <h2><a href="post.html?collection=blog&slug={slug}">{title}</a></h2>
    <p>{'excerpt'}</p>
  </article>
</birkly-region>

Ordering words (same as loops): newest, oldest, last-updated, order. Do not write ordered="date:desc".

Explicit root

<main data-birkly-region>
  {from 'blog' get entry 'welcome'}
    <h1>{title}</h1>
    <div>{'content'}</div>
  {endget}
</main>

Enhance only (good)

<script src="/birkly-client.js"></script>
<script src="/birkly-components.js"></script>
<script>
  document.addEventListener('birkly:templates-processed', function () {
    BirklyComponents.setActiveNav(document);
  });
</script>

Wipe after render (bad)

class MyHeader extends HTMLElement {
  connectedCallback() {
    // BAD — deletes CMS-rendered content
    this.innerHTML = '<header></header>';
  }
}