howdy/ui/page
Whole HTML documents from Lustre elements, with the theme applied before first paint.
import howdy/cookie
import howdy/ui
import howdy/ui/page
controller.get("/", fn(ctx) {
use theme <- cookie.string_or(ctx, "theme", default: "system")
page.new("Orders")
|> page.theme(theme)
|> page.body([ui.h1("Orders"), ui.p([element.text("Nothing yet.")])])
|> page.respond(ctx)
})
The head carries the theme variables, base styles and the CSS for every
howdy/ui component used in the body. By default that CSS is embedded
in the page. To serve it as a file instead, mount ui.stylesheet in
development or write one with howdy/ui/export for publishing, and
link it with stylesheet. Use live to add the Lustre client runtime
when the body mounts a server component.
Every page includes howdy/ui/behaviour, the small script behind menus,
tabs, selects and tooltips, in the page and in its live views.
Types
Values
pub fn body(
page: Page(msg),
elements: List(element.Element(msg)),
) -> Page(msg)Add elements to the <body>.
pub fn direction(
page: Page(msg),
direction: direction.Direction,
) -> Page(msg)Which way the page’s text runs. See howdy/ui/direction.
pub fn head(
page: Page(msg),
elements: List(element.Element(msg)),
) -> Page(msg)Add elements to the <head>, after the title and styles.
pub fn live(page: Page(msg)) -> Page(msg)Include the Lustre client runtime so live.mount elements connect, and
the script that lets live.link swap a live.outlet.
pub fn new(title: String) -> Page(msg)A page with the given title, English as its language and the default light and dark themes.
pub fn render(page: Page(msg)) -> element.Element(msg)The finished document as an element.
pub fn respond(
page: Page(msg),
ctx: context.Context(guarded),
) -> response.Response(content.Content)Answer the request with the document as text/html.
pub fn stylesheet(page: Page(msg), at path: String) -> Page(msg)Link a stylesheet instead of embedding the CSS: the route mounted with
ui.stylesheet in development, or the file written by
howdy/ui/export when published. The path is used as given.
pub fn theme(page: Page(msg), name: String) -> Page(msg)Select a theme by name for this render, usually from a cookie. A name
that is not in the page’s themes is ignored, so a default such as
"system" leaves the choice to the browser’s colour scheme preference.
pub fn themes(page: Page(msg), themes: theme.Themes) -> Page(msg)The themes this page offers. See howdy/ui/theme.