Loading…
TL;DR
This site (apps/webdocs) is Next.js 16 + MDX on Tailwind v4 and the shared
@matters/theme token system. It ships four docs design systems, full keyboard
control, content-indexed search, a set of authoring components, and an optional
free-inference AI assistant.
Pick a look from the palette button in the header, and toggle light/dark with
the Matters mark beside it. Four docs-tuned design systems live in
@matters/theme (scoped so they never appear in the workspace app):
| Variant | Feel |
|---|---|
| Docs | Clean neutral slate + indigo — the default. |
| Aurora | Airy, violet accent, generous spacing. |
| Carbon | Developer graphite + cyan; dark is the hero mode. |
| Sepia | Warm reading, serif headings, amber accent. |
Every surface resolves through ws-* tokens, so a variant re-skins the whole site
with no per-page work.
| Keys | Action |
|---|---|
⌘K / Ctrl K | Open the command palette (search + actions) |
/ | Open the palette focused on search |
⌘B / Ctrl B | Collapse / expand the sidebar |
[ · ] | Previous / next page |
g then h | Go to home |
t | Toggle light / dark |
c | Copy page link |
? | Show the shortcuts help |
↑ ↓ Enter | Move + open results in the palette |
Esc | Close the palette / drawer |
Press ? anywhere for this list. The palette (⌘K) also runs actions — toggle
theme, switch design system, copy this page as Markdown, and jump home.
The command palette searches a build-time content index (lib/search-index.json,
regenerated on every dev/build) covering each page's title, section, headings,
and body — not just nav labels. It also runs quick actions (toggle theme, switch
design system, jump home). Answers are cached for 30 days (TTL) when Upstash is configured.
Any .mdx page can use these directly — no import needed.
Note
Use callouts to set apart context. Types: note, tip, warning, danger.
Warning
<Callout type="warning">…</Callout> — the title defaults to the type label.
<Callout type="tip" title="Pro tip">
Keep callouts short — one idea each.
</Callout>
Wrap jargon in <Abbr> for a hover definition, e.g. RBAC or
deal registration. Definitions live in
lib/glossary.ts; unknown terms render as plain text.
Open a page with <TLDR>…</TLDR> for a one-paragraph summary (as above).
The Listen button (top of each page) reads the content via the browser's speech synthesis — free, no setup.
When provider keys are configured, an Ask AI button opens a slide-over that
answers questions grounded in the current page. It runs on free inference
(Groq → Cerebras failover) with a shared 30-day answer cache (TTL), and stays
hidden until enabled. Setup lives in PENDING_TASKS.md.
End every page with the git-aware footer:
import DocFooter from "@/components/DocFooter";
<DocFooter pagePath="apps/webdocs/app/<section>/<page>/page.mdx" />
It shows the last commit date, author, and short hash for that file, plus a
source link — no manual lastUpdated to maintain.