Own the Site Data#

The Acme UI Docs project should own its site data. Do not import Rocket's docs-site globalData.js; that file describes this documentation site, not yours.

It is fine to import Rocket package APIs such as atlasDocLayout, atlasDocComponents, and resolve. Those are reusable code affordances. The values you pass into the layout should come from your project.

Add a wordmark#

Create docs/assets/acme-wordmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 48" role="img" aria-label="Acme UI Docs">
  <text x="0" y="31" fill="#111827" font-family="Arial, sans-serif" font-size="24" font-weight="700">
    Acme UI
  </text>
  <text x="100" y="31" fill="#4b5563" font-family="Arial, sans-serif" font-size="18">Docs</text>
</svg>

Replace the site data#

Update docs/siteData.js:

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

export const siteData = {
  headerData: {
    logo: [
      resolve('./assets/acme-mark.svg', import.meta),
      resolve('./assets/acme-wordmark.svg', import.meta),
    ],
    homeLink: '/',
    socials: [
      {
        url: 'https://github.com/acme/acme-ui',
        name: 'GitHub',
        label: 'Open Source',
      },
    ],
  },
  site: {
    name: 'Acme UI Docs',
    description: 'Guides and reference for Acme UI components.',
    supportEmail: 'design-system@acme.example',
  },
};

The headerData shape is consumed by Rocket's atlas docs layout. Social entries can omit label for an icon-only link. The site object is your own project metadata and can be used later by Pages, a custom layout, or build-time content helpers.

Checkpoint#

Run the site again:

npm run start

The home Page still works, and the header now uses Acme-owned data and assets. Continue to Layouts later if you want to replace the atlas layout with a custom document shell.