Quickstart

PrerequisitesCopy Anchor Link

• Node.js 22.18 or later. The packages declare >=22, and 22.18 runs render.ts directly.
• pnpm, in an empty directory.

StepsCopy Anchor Link

1. Install the package:

   Copy Text

   pnpm add @mdxui/site@7.0.0-alpha.0

   It pins @mdxui/themes at the same version, so name no second package.

2. Save this as render.ts:

   Copy Text

   import { writeFile } from 'node:fs/promises';
   import { PageSchema, renderPage } from '@mdxui/site';
   
   const brand = { href: '/', text: 'Harbor' };
   const result = PageSchema.safeParse({
     theme: 'quaypoint',
     title: 'Harbor tides',
     description: 'Tide tables for every berth, as one API.',
     frame: 'none',
     sections: [
       { kind: 'nav', shell: { inset: 'contained', density: 'none' }, block: { type: 'nav', menu: 'none', brand, links: [['/docs', 'Docs']] } },
       { kind: 'hero', shell: { inset: 'contained', density: 'hero' }, block: { type: 'hero', layout: 'centered', stack: 560,
           title: 'Every berth, every tide.',
           lede: 'One call returns the tide table for any berth in the harbor.', actions: [], fine: [] } },
       { kind: 'footer', shell: { inset: 'contained', density: 'footer' }, block: { type: 'footer', layout: 'row', brand, columns: [], note: ['Harbor tides', 'Made with mdxui'] } },
     ],
   });
   
   if (!result.success) {
     for (const { path, message } of result.error.issues) console.error(`${path.join('.')}: ${message}`);
     process.exit(1);
   }
   
   // One record, two Themes: the same page as two HTML files.
   await writeFile('harbor.html', renderPage(result.data));
   await writeFile('harbor-callboard.html', renderPage(result.data, { theme: 'callboard' }));

3. Run it:

   Copy Text

   node render.ts

4. To see a refusal, set the hero title to A truly stunning, beautiful and modern page for every brand you launch. and run it again. It prints the path and the bound, and writes nothing:

   Copy Text

   sections.1.block.title: Too big: expected string to have <=64 characters

   The fix is shorter content. Refusals holds every bound by path.

ResultCopy Anchor Link

harbor-callboard.html   112 KB
harbor.html             112 KB

2 documents, 0 of them with a script.

harbor.html, under quaypoint:

harbor-callboard.html, the same record under callboard:

Next stepsCopy Anchor Link

• Choose a Section type for each part of a real page.
• Write a Theme for your own Brand.
• Ship a Site to a live address.