Writing Content

Pages

Every .mdx file under content/docs/ is a page. The file path is the URL:

File	URL
`content/docs/hello.mdx`	`/hello`
`content/docs/hello.zh.mdx`	`/zh/hello`
`content/docs/guide/setup.mdx`	`/guide/setup`

Never leave a page in only one language — always create the .zh.mdx twin (or the .mdx original) so both locales stay complete.

Frontmatter

---
title: Page Title          # required — sidebar label and <h1>
description: One-liner     # shown under the title and in search results
icon: Rocket               # optional — any lucide icon name
---

Each folder's meta.json controls the order of its entries:

{
  "pages": ["index", "getting-started", "guide"]
}

Useful entries beyond plain slugs:

{
  "pages": [
    "index",
    "---Section Label---",
    "guide",
    "[External Link](https://example.com)"
  ]
}

---Label--- renders a section separator
[Text](url) renders an external link

Grouping pages in folders

Put related pages in a folder with its own meta.json:

content/docs/guide/
├── meta.json        # { "title": "Guide", "icon": "Sparkles", "pages": ["setup", "usage"] }
├── meta.zh.json     # { "title": "使用指南", ... } — Chinese sidebar labels
├── setup.mdx
├── setup.zh.mdx
├── usage.mdx
└── usage.zh.mdx

meta.zh.json localizes the folder title for the Chinese sidebar.

Links and images

Internal links are absolute paths matching the URL scheme — unprefixed in English pages, /zh-prefixed in Chinese pages:

[Getting Started](/getting-started)        <!-- in page.mdx -->
[快速开始](/zh/getting-started)             <!-- in page.zh.mdx -->

Images can be remote URLs or files served from public/:

![](https://cdn.example.com/screenshot.png)
![](/diagram.png)

Components

These MDX components are available in every page without imports:

Steps

<Steps>
<Step>First step</Step>

Details of the first step.

<Step>Second step</Step>

Details of the second step.

</Steps>

(See Getting Started for a live example.)

Accordions

<Accordions type="single">
  <Accordion title="Question?">
    Answer.
  </Accordion>
</Accordions>

(See the FAQ for a live example.)

Video

<Video src="https://cdn.example.com/demo.mp4" />

Code blocks

Fenced code blocks get syntax highlighting (shiki, light/dark themes):

```ts
export const answer = 42;
```