Skip to content
Ember & Oat Café ← Back to the site

Walkthrough

How the owner edits this website

A fast, hand-coded site usually means calling a developer for every small change. Not here: texts, prices and photos are edited in a visual editor (TinaCMS). These screenshots were taken on this exact site.

Step by step

  1. The owner opens the editor

    Their real page on the right, simple labelled sections on the left: "Top banner", "Menu & prices", "Opening hours"… No code, no technical terms.

    TinaCMS editor with the list of menu items on the left and the live café page on the right

  2. Changes a price and sees it live

    Typing a new price for the Flat white updates the preview instantly, before anything is published.

    Editor with the Flat white price field changed to $4.60 and the preview already showing $4.60

  3. Swaps a photo

    Upload a new picture from a phone or computer, add a one-line description for accessibility, done.

    Editor photo field with a newly uploaded croissant photo, shown in the page preview

  4. Presses Save

    The change is saved to the website’s content. On the live site it goes online after an automatic rebuild, typically within a couple of minutes.

    The café website menu after saving, showing the new Flat white price of $4.60

What the owner can edit

  • Headlines, paragraphs and button texts
  • Menu items, descriptions and prices
  • Photos and their descriptions
  • Opening hours, address and contact details
  • Google title, description and social share image

How it is built

  • Hand-coded with Astro and Tailwind CSS: static HTML, almost no JavaScript
  • TinaCMS visual editor, content stored in the site’s own Git repository
  • Hosted on Cloudflare Pages’ global network
  • Accessible: keyboard friendly, checked with axe, alt text required for photos
  • Contact form with spam protection (on this demo: not connected)

Want a site like this for your business?

This is a portfolio demo by Ivan Litvin. Ember & Oat Café, its menu, prices and hours are fictional.

Back to the demo site