Create the Project Shell#

Start with a new Rocket project and one working page. This first checkpoint already uses Rocket's docs layout affordances, but the project data and content are owned by your Acme UI Docs site.

Create the package#

mkdir acme-ui-docs
cd acme-ui-docs
npm init -y
npm install @rocket/js
npx rocket init

rocket init creates the first Rocket files and adds local development and static build scripts when those script names are available:

{
  "type": "module",
  "scripts": {
    "start": "rocket start",
    "build": "rocket build"
  },
  "dependencies": {
    "@rocket/js": "^0.1.0"
  }
}

Add Rocket config#

Check rocket-config.js in the project root:

/** @type {import('@rocket/js/types.js').RocketConfig} */
export default {
  includeGlobs: ['docs/pages/**/*.rocket.{md,js}', 'src/**/*.rocket.{md,js}'],
};

Rocket discovers Pages from includeGlobs. The URL for each Page still comes from that Page's config.path, not from the file name. See Pages when you want the full routing model. General documentation Pages belong under docs/pages; component reference Pages can live near the component they document under src.

Add the first user-owned asset#

Create docs/assets/acme-mark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" role="img" aria-label="Acme UI">
  <rect width="48" height="48" rx="10" fill="#0f766e" />
  <path d="M14 33 24 12l10 21h-6l-2-5h-4l-2 5h-6Zm10-16-3 7h6l-3-7Z" fill="white" />
</svg>

This is user-owned branding. Rocket's docs layout can display it, but it does not come from Rocket's docs site.

Add site data#

Create docs/siteData.js:

import { resolve } from '@rocket/js/resolve.js';

export const siteData = {
  headerData: {
    logo: [resolve('./assets/acme-mark.svg', import.meta)],
    homeLink: '/',
    socials: [],
  },
  site: {
    name: 'Acme UI Docs',
    description: 'Guides and reference for Acme UI components.',
  },
};

The resolve helper turns a user-owned asset into a URL that works in development and in the static build. For more asset patterns, see Assets.

Wrap the docs layout#

Create docs/docsLayout.js:

import { atlasDocComponents, atlasDocLayout } from '@rocket/js/layouts/atlasDoc.js';
import { siteData } from './siteData.js';

export { atlasDocComponents };

export const components = atlasDocComponents;
export const layout = pageData => atlasDocLayout(pageData, siteData);

atlasDocLayout and atlasDocComponents are Rocket-owned layout affordances. The wrapper is user-owned, so your Pages import one local layout boundary instead of importing Rocket's own docs site data.

Create the home Page#

Replace the generated docs/pages/index.rocket.md with the Acme UI home 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

Acme UI is a small component system for product documentation.

## Start here

Use these docs to learn the design tokens, copy patterns, and component APIs that make Acme
interfaces consistent.

Checkpoint#

Run the static build:

npm run build

You now have a coherent Rocket site with one Page, a user-owned asset, user-owned site data, and a local wrapper around Rocket's docs layout.

Contents