--- slug: 41a-build-a-website title: Construí un sitio web description: Un sitio web completo y con estilo en Synsema — layout, componentes con props, CSS inline con transiciones, un formulario clásico, páginas de error propias y rutas en un módulo — sin framework, un binario. example_ids: [website] --- # Construí un sitio web Un sitio real — layout, componentes con estilo, un formulario de contacto, páginas de error como corresponde — **sin framework**: tu HTML, tu CSS, vanilla JS si querés. El servidor, los templates, el parseo de formularios y el pipeline de estáticos vienen incluidos. ## Los archivos ``` app.syn el bloque serve shop.syn rutas que viven en un módulo (opcional, para sitios grandes) layouts/base.html el chrome (head, nav, footer) partials/nav.html piezas compartidas partials/card.html un componente (recibe props) pages/home.html la página static/app.css tu stylesheet (se recarga en caliente por request) ``` ## El layout — `layouts/base.html` Un shell para todas las páginas: un `{ slot }` para el cuerpo y un **slot nombrado** para extras de `` por página. ```html { title } { slot "head_extra" } { include "partials/nav.html" } { slot } ``` ## Un componente — `partials/card.html` `include … with` pasa **props**; el partial ve solo eso (más tus tasks): ```html

{ n }. { name }

{ blurb }

``` ## La página — `pages/home.html` El CSS inline vive en un **bloque verbatim `{ raw }`** (las llaves quedan literales); la grilla loopea con índice y estado vacío: ```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 }

Muy pronto.

{ 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.")) ``` ## La 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 -- los agentes conservan el error JSON 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" -- un form post CLÁSICO — sin fetch, sin 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}) ``` Corrélo: `synsema serve app.syn --watch`. Templates y CSS **se recargan en caliente por request** — editás, refrescás, listo; `--watch` reinicia el server cuando cambia el `.syn`. Un typo en un path de `render("…")` falla **al arranque**, no como un 500. ## Lo que te llevás gratis - **Auto-escape en todos lados** (XSS-safe por defecto); `json_for_script` hace seguros también los datos de `