2.3 KiB
| id | title | description | tags | lang | ||
|---|---|---|---|---|---|---|
| web-frontend | The web frontend | Routing, the proxy, internationalization, and styling with design tokens. |
|
en |
The web frontend
apps/web is a Next.js App Router application. Server Components are the
default; client islands are kept as small as the interaction requires
(theme toggle, search dialog, tree expansion are the reference examples).
The proxy
apps/web is not a client of the API in the usual sense — it proxies
several path prefixes straight through, configured in next.config.ts:
| Prefix | Destination |
|---|---|
/api/:path* |
apps/api |
/auth/:path* |
apps/api |
/admin/:path* |
apps/api |
/media/:path* |
apps/api |
/drawio/:path* |
the draw.io container |
/mcp |
the MCP service |
Because these are rewrites, not client-side fetches, requests to them carry
the API's own response headers (its onSend security hook, or the media
route's sandboxed CSP) rather than anything apps/web adds — headers()
in next.config.ts only applies to responses Next.js generates itself.
Internationalization
The interface is bilingual (German/English). UI strings live under
apps/web/lib/i18n/messages/{de,en}/. This is separate from page content
language: a page's own lang frontmatter field (as in this space, en)
describes the content, not the chrome around it.
Styling and design tokens
apps/web/app/globals.css contains no rules of its own — only the list of
imports from app/styles/*.css. That import order is the cascade; the
numeric prefixes in the filenames are not what determines it.
The token values themselves are generated, not hand-maintained: sync-tokens
runs automatically as predev/prebuild and produces the CSS variables
from packages/design-tokens. See markdown-and-editor for the
package's counterpart on the content side, and extending for the steps
to add a token.
Note
packages/design-tokens/src/catalog.tsseparates values (tokens.ts) from description (catalog.ts: which settings-page group a token belongs to, its role in plain language, and whether a user theme is allowed to override it). Tests pin the count of tokens per level and group, so adding one means updating those counts deliberately, not incidentally.