ui

Documentation

Overview

Package ui is the browser half of the application: one stylesheet and four controllers, served as static files beside the API.

The stylesheet is a Go value

There is no CSS build. ui/components declares every class list it renders with; ui/style resolves exactly those classes to rules; design supplies the tokens they are written in terms of. Stylesheet composes the three, once, at the first request, and the result is a byte slice.

That is the whole reason for the Go-side emission: a Tailwind build would need node, a config file, a content glob that scans Go source for strings that look like classes, and an artifact that is either committed (which the rules here forbid) or generated in CI (which means the repository does not build a working application on its own). None of that exists, and a component that is deleted takes its CSS with it because nothing declares its list any more.

There is no framework

htmx is vendored, minified, under its MIT licence, and it is the only third-party byte the browser runs. Everything else is four controllers of a few dozen lines each, in assets/js, and they are the ones listed in Controllers.

Index

• Variables
• func Assets(theme design.Pair) fs.FS
• func Fingerprint(theme design.Pair) string
• func GalleryFingerprint() string
• func GalleryStylesheet() []byte
• func Stylesheet(theme design.Pair) []byte

Variables

var Controllers = []string{
	"htmx.min.js",
	"htmx-config.js",
	"theme.js",
	"confirm.js",
	"session.js",
}

Controllers are the browser scripts a page loads, in order. The list is here rather than in the shell that writes the <script> tags, so that "how much JavaScript is there" is answered by reading one slice.

htmx is first because the others configure it. There are four of ours and they are the four interactions a server-rendered application cannot express: a theme that must survive a reload, a validation error that must not cost a page, a destructive action that must be confirmed, and a sign-in form that posts to a JSON route.

Functions

func Assets

func Assets(theme design.Pair) fs.FS

Assets is the tree served under the shell's asset prefix: the two stylesheets and the controllers at js/. It is built per call because it is called once, at mount.

func Fingerprint

func Fingerprint(theme design.Pair) string

Fingerprint is the first eight bytes of the stylesheet's SHA-256, as hex. The shell puts it in the asset's query string, so a deploy that changes a component — or a client that changes a colour — changes the URL and a browser that cached the old one asks again.

func GalleryFingerprint

func GalleryFingerprint() string

GalleryFingerprint is the same, for the second sheet.

func GalleryStylesheet

func GalleryStylesheet() []byte

GalleryStylesheet is the second sheet, linked by the gallery page alone.

func Stylesheet

func Stylesheet(theme design.Pair) []byte

Stylesheet is every page's stylesheet, in one palette: that palette's tokens, the role variables, the small base layer, and one rule per class an application's own pages declare. Only the first of those four depends on the argument.