Scenario

Small bakery site: menu items, a few news posts, contact form, shared header.

Step 1 — Content model

Collection	Purpose	Key fields
site_elements	Header / footer chrome	title, content
menu	Repeatable items	title, description, price, image, order
blog	News	title, excerpt, content
contact	Inbound messages	name, email, message — Public API

See Content model overview and Field types.

Step 2 — Publish sample entries

Create 2–3 menu items and 1 blog post with status published. Add site_elements entries header and footer.

Step 3 — Shared chrome

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

Step 4 — Menu list (menu.html)

<h1>Menu</h1>
{for each entry in 'menu' with status = published ordered by order}
  <article>
    <h2>{title}</h2>
    {if entry has 'description'}<p>{'description'}</p>{endif}
    {if entry has 'price'}<p>{'price'}</p>{endif}
  </article>
{endfor}
<script src="/birkly-client.js"></script>

Step 5 — Blog list + detail

List (blog.html):

{for each entry in 'blog' with status = published ordered by newest}
  <a href="post.html?collection=blog&slug={slug}">{title}</a>
{endfor}

Detail (post.html) — no collection loop:

<meta name="birkly-collection" content="blog">
<h1>{title}</h1>
<div>{'content'}</div>
<script src="/birkly-client.js"></script>

Step 6 — Contact form

{entry for 'contact'}
  <input name="{name}" required>
  <input type="email" name="{email}" required>
  <textarea name="{message}" required></textarea>
  <button type="submit">Send</button>
{endentry}
<script src="/birkly-client.js"></script>

Details: Public forms templating.

Step 7 — Verify

1. Menu shows CMS items (not hard-coded cards).
2. Blog link opens one post (not the full list again).
3. No raw {…} on the page.
4. Form submit creates an entry in admin.
5. Styles load under the correct site URL prefix.