mdx & docs

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Meta of syntax in MDX documentation

In MDX documentation files, the Meta block uses the 'of' attribute to import stories from a CSF file. The syntax is <Meta of={StoryName} /> where StoryName is the imported stories object. This connects the documentation page to the stories defined in the corresponding .stories file.

Canvas block in MDX documentation

The Canvas block is used in MDX documentation to render and display stories. The syntax is <Canvas of={StoriesName.StoryName} /> to embed a specific story variant in the documentation page.

Controls block in MDX documentation

The Controls block is used in MDX documentation to display interactive controls for story arguments. It allows users to modify component props directly in the documentation.

Source block in MDX documentation

The Source block is used in MDX documentation to display code examples. It accepts language and dark props to control syntax highlighting and appearance. The syntax is <Source language="tsx" dark={true} code={`...`} />.

Meta block attributes for standalone docs pages

In MDX documentation, the Meta block can use title and id attributes to create standalone docs pages. The title attribute sets the page title in Storybook's navigation. The id attribute provides a custom identifier for the page instead of auto-generating one from the file path.

Standalone docs page example with Meta

import { Meta } from '@storybook/addon-docs/blocks'; <Meta title="Standalone Page Title" id="custom-standalone-id" /> # Standalone docs with explicit id hello docs

Meta of syntax for linking MDX docs to stories

The Meta of syntax is used in MDX documentation files to link documentation to story files. The of prop takes a stories object imported with 'import * as' pattern and associates the entire documentation page with that story module. Example: import * as AStories from '../src/A.stories'; followed by <Meta of={AStories} />

Meta of syntax in MDX documentation

The Meta block in MDX documentation uses the of prop to reference a stories module. For example, <Meta of={BStories} name="Docs" /> imports stories from a file and creates documentation for those stories. The name prop can be used to specify a custom name for the documentation entry.

Meta name clashing with autodocs entry

When using Meta with the of prop in MDX, the name prop should not clash with the default autodocs entry name. If a name like 'Docs' is given to Meta and it matches the default documentation name, this creates a naming conflict.

Give your agent this brain