Document and head

document() wraps a page body in its head and one stylesheet. Run the four steps of renderPage by hand and the result is the same string.

PrerequisitesCopy Anchor Link

• The quickstart runs in your project, with @mdxui/themes installed as on Packages and versions.

StepsCopy Anchor Link

1. Parse the record:

   Copy Text

   const page = PageSchema.parse({
     theme: 'callboard',
     title: 'Harbor tides',
     description: 'Tide tables for every berth.',
     frame: 'none',
     sections: [
       { 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.', actions: [], fine: [] } },
       { kind: 'band', shell: { inset: 'contained', density: 'section' }, block: { type: 'statement', text: 'A tide table is a *promise*.' } },
       { kind: 'section', shell: { inset: 'contained', density: 'section' }, block: { type: 'command-row', command: 'npm i @example/harbor-tides' } },
     ],
   });

2. Render each section under the record's Theme, then compose the body:

   Copy Text

   const { theme, css, head } = THEMES[page.theme];
   const sections = page.sections.map((s) => ({
     kind: s.kind,
     shell: s.shell,
     html: renderBlock(s.block, context(theme, s.shell.surface ?? 'paper', theme.icons)),
   }));
   const body = compose({ frame: page.frame, sections, dividers: theme.dividers });

3. Wrap the body. The Theme supplies the head lines and the tokens:

   Copy Text

   const html = document({
     title: page.title,
     description: page.description,
     colorScheme: theme.dark && theme.scheme !== 'light' ? 'light dark' : 'light',
     jsonLd: page.jsonLd ?? [],
     head,
     css: `${css()}${baseCss}${primitivesCss}${shellCss}${blocksCss}`,
     body,
   });

4. Compare it with renderPage:

   Copy Text

   if (html !== renderPage(page)) throw new Error('the document differs from renderPage');
   await writeFile('harbor.html', html);

ResultCopy Anchor Link

The document equals renderPage(page) byte for byte; pnpm check runs the example and fails otherwise. With a meta of a canonical address and a type, its head reads:

Then 1 <style> element: the Theme's tokens, the base, the primitives, the shell and every Section type.

RelatedCopy Anchor Link