Add a short documentation structure before you write deep reference content. Rocket's menu comes from Page config, so each new Page can join navigation as soon as it exists.
Replace the body of docs/pages/index.rocket.md with a clearer landing Page:
```js server
export const config = {
path: '/',
metadata: { title: 'Acme UI Docs' },
};
import { layout } from '../docsLayout.js';
export { components } from '../docsLayout.js';
```
# Acme UI Docs
Design system guidance for Acme product teams.
## What is here
- Getting started guidance for Site Authors
- Brand assets used in Acme UI documentation
- Component reference pages for reusable interface patterns
Create docs/pages/getting-started.rocket.md:
```js server
export const config = {
path: '/getting-started',
metadata: { title: 'Getting started' },
menu: {
order: 10,
},
};
import { layout } from '../docsLayout.js';
export { components } from '../docsLayout.js';
```
# Getting Started
Use Acme UI when you are documenting product workflows, setup steps, and interface components.
## Authoring rules
- Put one topic on each Page.
- Keep examples close to the component they explain.
- Prefer static content until a page needs client-side behavior.
Create docs/pages/components/index.rocket.md:
```js server
export const config = {
path: '/components',
metadata: { title: 'Components' },
menu: {
order: 20,
noLink: true,
},
};
import { layout } from '../../docsLayout.js';
export { components } from '../../docsLayout.js';
```
# Components
Component reference pages describe where a component fits, the variants it supports, and the
accessibility rules authors should preserve.
menu.noLink makes the section appear as a menu group while child Pages carry the useful links. See
Menus for every menu option.
Run the static build:
npm run build
The project now has multiple Pages, menu order, and a non-clickable component section. Each Page
still imports only the user-owned docs/docsLayout.js wrapper.