Skip to content

feat(site): draw code blocks as white cards with one header row and one fold - #640

Merged
aicayzer merged 1 commit into
mainfrom
ui/code-blocks
Oct 25, 2026
Merged

aicayzer merged 1 commit into
mainfrom
ui/code-blocks

Conversation

@aicayzer

Copy link
Copy Markdown
Contributor

Restyles code blocks, the Terminal block and the fold rule to the approved design. No page prose changes.

What changes for a reader

  • A code block is a white card with a hairline border and rounded corners.
  • Every block has one header row: a bold label (the block's title, or "Terminal") or, for code tabs, soft pill tabs, with a Copy button at the right. A block with no title and no tabs gets a header row with Copy only.
  • A Terminal shows one body: the command, then its output in muted text. Copy takes the command only. The separate "Output" fold is gone.
  • One fold rule: any block or terminal body over 24 lines shows its first lines with a fade and a "Show all N lines" button under a hairline.
  • Request and response blocks can add a lighter note (note="Server-sent events") or a status chip (status="200", drawn "200 OK"; green for 2xx, red for 4xx and 5xx) in the header.
  • A response body is highlighted in normal colour. A new sse language colours an event stream's field names and its data: JSON.
  • The generated API reference's request samples and response status tabs use the same look.

Fence syntax

```http title="Request"
```http title="Response" note="Server-sent events"
```json title="Response" status="200"

The Markdown copy prints the note or status above the block, such as "Response (Server-sent events):" and "Response (200 OK):".

Checked

  • Built-in browser, light and dark: Terminal, request and response blocks with note and status, code tabs, a 43-line fold open and closed, the API reference operation page (request samples and response status tabs).
  • Phone width (375px): no horizontal page scroll on /guides/keep-in-sync and /quickstart.
  • Markdown copy of /guides/keep-in-sync.md.
  • pnpm build, pnpm build:status, pnpm types:check, pnpm test (700 tests) pass.

Not checked

  • Existing pages do not use note, status or sse yet; the checks above used temporary edits to the guide that are not in this pull request.
  • Before and after screenshots for August's approval are not attached here.

STYLE.md is updated for the Terminal, fold, title, note and status rules and the Markdown copy.

@aicayzer aicayzer left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review: checks only

Styling change, looked at in the browser by the builder and again by the session; build, type check and tests pass.

@aicayzer
aicayzer marked this pull request as ready for review October 25, 2026 16:35
@aicayzer
aicayzer merged commit 492134a into main Oct 25, 2026
7 checks passed
@aicayzer
aicayzer deleted the ui/code-blocks branch October 25, 2026 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant