Chapter 22: jev-ui — what the Jev sites' pages share

lmjtfy.fun and whiskers.lmjtfy.fun look alike on purpose: near-black on white, one pink band, ordered-dither dot fields and old operating system windows with a black title bar, after typesafe.ai. This crate is the one copy of that look, so the second site did not get a second copy of it.

It is the opposite of its neighbours in one way: nothing here talks to Jev. It is the page around whatever a site says.

What a site gets

A page, in whiskers' shape:

use jev_ui::components::{Link, Nav, band, nav, sheet, window};
use jev_ui::shell::{Assets, Attr, Head, document};

let head = Head { title: "Whiskers", meta: preview_tags, style: SITE_CSS, assets: Assets::Linked,
                  datastar: true, icon: Some("/favicon.svg"), extra: maud::html! {} };
let page = document(&head, &[Attr::new("data-signals", "{}")], body);

and in the Worker, every asset the crate owns in one route:

// as the router's fallback; `path` and `query` are the request's
if let Some(asset) = jev_ui::asset::find(path) {
    // content-type: asset.content_type, cache-control: asset.cache_control(query), body: asset.body
}

and the script Datastar needs, from the Aldebaran crate that owns it:

// a route for `jev_ui::shell::DATASTAR_PATH`
// content-type: text/javascript; charset=utf-8, body: aldebaran_datastar::SCRIPT

What is a parameter and what is not

Everything a site differs in is a field: the title, the tags, the site's own stylesheet (it comes after the shared one), the nav's links, what sits between the name and the links, the footer's words, a picture's query. The look is not a parameter: there is one palette, light only, as typesafe.ai's is. A site that wants another look is not a Jev site.

Fonts are served by the site itself, from this crate (Inter Tight, JetBrains Mono and VT323, see assets/). A Jev site makes no request to another site for them.

Try it

cargo test -p jev-ui
cargo build -p jev-ui --target wasm32-unknown-unknown

lmjtfy on it

lmjtfy (~/lmjtfy) wears this crate: its head and body come from shell::document with Assets::Inline (its pages set no content security policy), its nav, headline, windows, sheet, band, footer and copy line from components, its icons from components::icons, its JSON panels, a choice's rule and its Jev, LLM and tool call windows from wire, and its fonts from /fonts/*, one route per asset::ALL entry (/{repo}/{*path} would otherwise take them). page.css holds only lmjtfy's own rules, after the shared sheet, and page.js only its own behaviour. Datastar's script is aldebaran_datastar::SCRIPT, served by each site at shell::DATASTAR_PATH.

Outstanding

• lmjtfy's own Open Graph tags (view.rs's preview and view/code.rs's) are still its own: the home page's carries a canonical link and noindex that preview::Preview has no field for, and they should move onto it.
• A score's bars (a tag in the label) and the budget's (a figure of its own, not a percentage) are still lmjtfy's; wire::Bar has neither a tag nor a figure.
• packages/card draws lmjtfy's own card straight into a PNG with the same palette, dither and pixel text as card.rs; now that lmjtfy depends on this crate, one of the two should draw from the other.
• lmjtfy's .rete diagram is Rete-specific and stays its own, but its CSS box language is what flow borrows.
• Mermaid (lmjtfy's code pages) is still fetched from jsdelivr there; it is not part of this crate.

For the people who maintain it

In this folder

← Previous: Chapter 21½: inside jev-mock/src · Up: jevcrates · Next: Chapter 22½: inside jev-ui/src →