59 lines
2.3 KiB
Markdown
59 lines
2.3 KiB
Markdown
---
|
|
id: web-frontend
|
|
title: The web frontend
|
|
description: Routing, the proxy, internationalization, and styling with design tokens.
|
|
tags: [frontend, architecture]
|
|
lang: 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.ts` separates *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.
|