--- slug: 41a-build-a-website title: Build a website description: A complete, styled website in Synsema — layout, components with props, inline CSS with transitions, a classic form, custom error pages, and routes split into a module — no framework, one binary. example_ids: [website] --- # Build a website A real website — layout, styled components, a contact form, proper error pages — with **no framework**: your HTML, your CSS, vanilla JS if you want it. The server, the templates, the form parsing and the static pipeline are built in. ## The files ``` app.syn the serve block shop.syn routes that live in a module (optional, for bigger sites) layouts/base.html the chrome (head, nav, footer) partials/nav.html shared pieces partials/card.html a component (takes props) pages/home.html the page static/app.css your stylesheet (hot-reloads per request) ``` ## The layout — `layouts/base.html` One shell for every page: a `{ slot }` for the body and a **named slot** for per-page `` extras. ```html { title } { slot "head_extra" } { include "partials/nav.html" } { slot } ``` ## A component — `partials/card.html` `include … with` passes **props**; the partial sees only them (plus your tasks): ```html

{ n }. { name }

{ blurb }

``` ## The page — `pages/home.html` Inline CSS lives in a **verbatim `{ raw }` block** (braces stay literal); the grid loops with an index and an empty state: ```html { layout "layouts/base.html" } { fill "head_extra" }{ end }

{ title }

{ each e in enumerate(services) } { include "partials/card.html" with {"n": e.index + 1, "name": e.item.name, "blurb": e.item.blurb} } { otherwise }

Coming soon.

{ end }
``` ```synsema -- Doc example: the composition core of "Build a website" — a base layout with a named -- slot, a nav partial, a card component with props, and a page that fills them all. -- Self-contained: writes the templates, renders the page, asserts the assembled HTML. intent: "doc example: website composition (layout + slots + components)" require file.write("_doctest_site_base.html") require file.read("_doctest_site_base.html") require file.write("_doctest_site_nav.html") require file.read("_doctest_site_nav.html") require file.write("_doctest_site_card.html") require file.read("_doctest_site_card.html") require file.write("_doctest_site_home.html") require file.read("_doctest_site_home.html") -- layouts/base.html — the chrome: with a named slot, nav, the page slot write_file("_doctest_site_base.html", "{ title }{ slot \"head_extra\" }{ include \"_doctest_site_nav.html\" }{ slot }") -- partials/nav.html write_file("_doctest_site_nav.html", "") -- partials/card.html — a COMPONENT: sees only its props write_file("_doctest_site_card.html", "

{ n }. { name }

") -- pages/home.html — inline CSS via the verbatim { raw } block + the grid of cards write_file("_doctest_site_home.html", "{ layout \"_doctest_site_base.html\" }{ fill \"head_extra\" }{ end }

{ title }

{ each e in enumerate(services) }{ include \"_doctest_site_card.html\" with {\"n\": e.index + 1, \"name\": e.item} }{ otherwise }

Coming soon.

{ end }
") let html be body of render("_doctest_site_home.html", {"title": "Studio", "services": ["Branding", "Web"]}) print(html) test "the page assembles: layout chrome + named slot + components with props" let html be body of render("_doctest_site_home.html", {"title": "Studio", "services": ["Branding", "Web"]}) assert(contains(html, "Studio")) assert(contains(html, ".card { border-radius: 12px")) -- verbatim CSS intact, in assert(contains(html, "")) -- partial assert(contains(html, "

1. Branding

")) -- component props + index assert(contains(html, "

2. Web

")) test "the empty state renders the { otherwise } branch" let html be body of render("_doctest_site_home.html", {"title": "Studio", "services": []}) assert(contains(html, "Coming soon.")) ``` ## The app — `app.syn` ```synsema require serve(8080) task services() give [{"name": "Branding", "blurb": "Identity systems"}, {"name": "Web", "blurb": "Sites that convert"}] task error_page(status, message, request) let accept be accept of (headers of request) when accept == nothing set accept to "" when contains(accept, "text/html") give render("pages/error.html", {"status": status, "message": message}) give nothing -- agents keep the JSON error serve on 8080 errors with error_page static "/assets" from "./static" cache "1h" route "GET /" give render("pages/home.html", {"title": "Studio", "services": services()}) route "POST /contact" -- a CLASSIC form post — no fetch, no JSON let f be form of request when not contains(keys(f), "email") give fail(422, "missing email") give render("pages/thanks.html", {"email": f.email}) ``` Run it: `synsema serve app.syn --watch`. Templates and CSS **hot-reload per request** — edit, refresh, done; `--watch` restarts the server when the `.syn` changes. A typo in a `render("…")` path fails **at startup**, not as a 500. ## What you got for free - **Auto-escaping everywhere** (XSS-safe by default); `json_for_script` makes `