Acme UI Docs Site#

This tutorial track takes a Site Author from an empty project to a working static documentation site for a fictional design system called Acme UI.

You will build:

• a Rocket project with a static build script
• Site Head Metadata for titles, descriptions, canonical URLs, and language
• user-owned Atlas layout data for the header, socials, and navigation icon budget
• a public theme stylesheet for Atlas CSS variable overrides
• a small local wrapper around Rocket's current Atlas docs layout
• sequential Pages with menu order, menu icons, and a non-linking section group
• source brand assets resolved by Pages and layout data
• a public favicon referenced from Site Head Metadata
• the first colocated Acme UI component reference Page

Current Atlas boundary#

The Atlas docs layout currently renders:

• the header logo, header links, and social links from siteData.headerData
• project theme stylesheets from siteData.stylesheets
• the left documentation menu from Rocket's Page tree
• automatic menu icons with a configurable server-render budget
• the current Page content
• desktop and mobile table-of-contents regions
• optional page-level aside tips from metadata.custom.atlasDoc.asideTip
• previous and next links from the Page tree

The layout does not own your public site identity. Put launch-facing facts such as site name, default description, canonical origin, language, and favicon references in rocket-config.js under Site Head Metadata.

Track pages#

1. Create the project shell
2. Own the site data
3. Add pages and menus
4. Add brand assets
5. Document the first component
6. Build the static site

After the static site is working, continue with Component Loading and Request-time JavaScript Pages. Reference links are included at the point where they help, but the guided path stays complete on its own.