Components - Nemu

A reusable component is just a function that returns a Block or an array of Blocks. Because page.content flattens arrays, a component that returns Block[] can be spread inline alongside other blocks.

A callout component

This component returns a single note block.

const callout = (title: string, body: InlineContent): Block =>
  ({ type: "note", variant: "info", title, text: body });

A section component

This component returns an array of blocks, a heading followed by a paragraph.

const section = (title: string, body: InlineContent): Block[] => [
  { type: "heading", text: title, level: 2 },
  { type: "paragraph", text: body },
];

Using them in a page

Spread the array returning component, and pass the single block component directly.

doc.page().content(
  ...section("Overview", "What this document covers."),
  callout("Heads up", "This value is provisional."),
);

Spreading works because content flattens arrays. A Block[] component composes the same as a single Block.

The repository includes a full reference at examples/simplified that puts these patterns together in one document.

Headers and footers Overview

​A callout component

​A section component

​Using them in a page

A callout component

A section component

Using them in a page