Shared design tokens, base CSS, and nav / footer partials for the infodancer / matthewjhunter web portfolio. Hugo and Go html/template are equal first-class consumers; the same tokens style both worlds with no fork.
Maintained as a personal utility for sites and modules in the portfolio. Issues and PRs welcome but response times vary. See SECURITY.md for vulnerability reporting.
This repo is a small monorepo of three independently-tagged Go modules that share the portfolio's front-end concerns. They have no Go dependency on each other (only the mdedit example imports both siblings):
| Module | Path | What it is |
|---|---|---|
| ui (root) | github.com/infodancer/ui |
Design tokens, base CSS, and nav/footer/sidebar/meta partials (Hugo + Go variants), plus vendored htmx. Tokens are the public API. |
| markdown | github.com/infodancer/ui/markdown |
The one audited Markdown → sanitized-HTML pipeline (goldmark + bluemonday). See markdown/README.md. |
| mdedit | github.com/infodancer/ui/mdedit |
A Markdown display/edit component (Go partials + vendored editor JS behind an adapter seam) that renders through markdown. See mdedit/README.md. |
The rest of this README covers the root ui module.
A small CSS + template library:
- Design tokens — CSS custom properties under the
--app-*prefix covering color, typography, spacing, radii, and layout primitives. Tokens are the public API; everything else is implementation detail. - Base stylesheet — a minimal reset plus sensible defaults for typography, lists, links, code, basic form elements. ~150 lines.
nav,footer,sidebar, andmetapartials — chrome (nav strip, footer, collapsible sidebar) plus the SEO/social<head>tags (meta), shipped in parallel Hugo and Go variants producing identical output but each idiomatic to its host engine.
The root module deliberately is not: a component framework, a JS toolkit, an icon set, or a build pipeline. See DESIGN.md for scope rationale. (Client-side JavaScript does live in the repo — vendored htmx here and the vendored editor in mdedit — just not as part of the root token/CSS library.)
DESIGN.md is the source of truth for the token vocabulary, the two-consumer model, the partial data shapes, and the versioning policy.
Add infodancer/ui to your site's module imports:
# config/_default/module.toml
[[module.imports]]
path = "github.com/infodancer/ui"Pipe the CSS and render the partials from your base layout:
{{ $tokens := resources.Get "css/tokens.css" }}
{{ $base := resources.Get "css/base.css" }}
{{ $site := resources.Get "css/site.css" }}
{{ $bundle := slice $tokens $base $site | resources.Concat "css/bundle.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}">
{{ partial "nav" . }}
<main>{{ block "main" . }}{{ end }}</main>
{{ partial "footer" . }}Add htmx (optional) in your <head> — the partial fingerprints the vendored library and emits an SRI-pinned <script>:
<head>
...
{{ partial "htmx-head" . }}
</head>Provide your site's palette in assets/css/site.css:
:root {
--app-color-accent: #8c6520;
--app-font-display: "Cormorant", Georgia, serif;
}go get github.com/infodancer/uiMount the assets and parse the partials at startup:
import "github.com/infodancer/ui"
mux.Handle("/static/ui/", http.StripPrefix("/static/ui/", http.FileServer(http.FS(ui.AssetsFS()))))
tmpl, err := template.ParseFS(ui.PartialsFS(), "*.gohtml")Pass a ui.NavData (or any struct with matching fields) to the partial:
{{ template "ui/nav" .Nav }}
<main>{{ block "main" . }}{{ end }}</main>
{{ template "ui/footer" .Footer }}ui ships htmx as the stack's interactivity layer, vendored and served from the same AssetsFS() mount. Add it to your page <head> — it's opt-in, so a consumer that doesn't want it just omits this:
// in your view data: HTMXHead: ui.HeadTags("/static/ui")<head>
<link rel="stylesheet" href="/static/ui/css/tokens.css">
<link rel="stylesheet" href="/static/ui/css/base.css">
{{ .HTMXHead }}
</head>In handlers, the HX-* boundary helpers save you re-implementing them:
if ui.IsRequest(r) { // HX-Request: render a fragment, not the full page
return tmpl.ExecuteTemplate(w, "note/fragment", data)
}
ui.Redirect(w, "/campaign/x") // HX-Redirect (htmx ignores a 3xx Location)See DESIGN.md for the full helper list and the Layer 1 / Layer 2 independence contract.
v0.1 initial design (2026-05-19). Token vocabulary proposed but not yet locked; first real integration drives the lock. Not yet tagged.
See CONTRIBUTING.md for local dev commands and conventions.
Apache-2.0. See LICENSE.