Patterns

1 · Contact form

Submit-and-confirm flow on /contact/, rendered from src/contact.njk:127, styled in src/css/contact/contact.css, behaviour wired up in src/js/contact-form.js. Posts FormData to a Google Apps Script endpoint as application/x-www-form-urlencoded; the script queues the message in a Google Sheet. Three states drive the UI: idle (rest), sending (button disabled, label swapped to “Sending…”), and resolved (button label flips to “Sent” on success or restores on error, while .contact-form__status renders the inline message with data-state="success" or "error").

2 · API demo request panel

Live-query flow on /api-demo/, rendered from src/api-demo.njk:45, styled in src/css/api-demo/api-demo.css, behaviour in src/js/api-demo.js. Two near-identical panels (Edge — classify a URL, REST — classify raw text) sit behind a tab switcher; each panel is a single input plus two action buttons. The contract is different from the contact form: there is no submit-and-redirect, the result renders inline below the input, and a second Sample data button bypasses the network so the user can preview the response shape without waiting on a real request.

1 · Initial empty state

Renders inside both API-demo response panels on first load, before the user has clicked run or sample data. Two-line invitation centred in a tall placeholder zone — a heading-weight title and a sentence pointing at the two action buttons above. Replaced by the actual response (or by the error / loading states) once the user kicks off a request.

2 · Error state

Replaces the empty / response content when a request fails — network error, non-2xx status, or malformed JSON. Same panel position as the initial state, but with red-tinted chrome and a three-line hierarchy: title (label), message (what failed), hint (what to try next). The hint copy differs by mode: live runs suggest checking the URL or trying sample data; sample-data failures point at a likely build-pipeline issue.

3 · Coverage gaps

Surfaces that could render an empty state today but don’t. Documented here so they get a real treatment when production shows up rather than a blank container.

• Blog index — src/blog.njk renders {% for post in collections.blog | reverse %} with no {% else %} branch. With zero posts the page would render an empty .post-list and nothing else. Add a small “No posts yet” placeholder in the same shape as the API-demo empty state when the collection is empty.
• Search — the site has no search affordance today; if one ships, the zero-results state should follow the API-demo empty recipe rather than inventing a third one.
• Solution-page live demos — the bid-enrichment and contextual-audiences cards use skeleton placeholders while loading, then swap to populated content. They don’t have an explicit empty state because they’re hard-coded to populated data; if either becomes data-driven, reach for the API-demo empty recipe.

1 · Persistent dismissal — announcement bar

The announcement bar is initially hidden at the markup level. JS in src/js/announcement.js reads localStorage.getItem("neuwo-announcement-dismissed") on load: if a key is present, the bar stays hidden for the rest of the session — if not, the hidden attribute is removed and the bar appears. Two click targets dismiss it and write the key: the close button (explicit dismissal) and the announcement link (implicit dismissal — once the user has acted on the offer, there’s no value in showing it again).

// src/js/announcement.js
const STORAGE_KEY = "neuwo-announcement-dismissed";

if (localStorage.getItem(STORAGE_KEY)) return;       // never seen again
bar.hidden = false;

closeBtn.addEventListener("click", () => {
  localStorage.setItem(STORAGE_KEY, "1");
  bar.hidden = true;
});
linkBtn.addEventListener("click", () => {
  localStorage.setItem(STORAGE_KEY, "1");             // implicit dismissal
});

Cross-refs. Visual recipe for the bar itself — markup, layout, breakpoint behaviour, dismiss button — lives under Components › Navigation › Announcement bar. The link recipe inside the bar is documented under Components › Links.

2 · Coverage gaps

No other first-visit / onboarding surfaces ship today — no cookie banner, no product tour, no feature callouts, no “what’s new” modal. If any of these land later, document them here against the same persistence contract above so the keys are namespaced consistently.