Markers
Four components that say what a page's Markdown keeps, drops, and says instead.
The converter finds a page's content on its own. Markers from @affordances/md/react make it exact. They're server components that render an <affordances-md> element with display: contents, so they don't change layout and ship no JavaScript.
| Marker | Effect on the Markdown |
|---|---|
<AgentMain> | When any are present, only these subtrees become the Markdown, in page order |
<AgentSkip> | Leaves its children out |
<AgentOnly> | Includes its children, hidden from people |
<AgentText md block?> | Replaces its children with md, verbatim; block makes it its own block |
import { AgentMain, AgentSkip, AgentText } from '@affordances/md/react'
;<AgentMain>
<h1>{product.name}</h1>
<AgentSkip>
<ShareMenu />
</AgentSkip>
<AgentText md={product.variants.map((v) => v.sku).join(', ')}>
<VariantSwatches variants={product.variants} />
</AgentText>
</AgentMain>- A
skipinside amainis respected, and amaininside anothermainis part of the outer one. data-affordances-md="skip"on any element works like<AgentSkip>, for components you can't wrap.<AgentOnly>must say what the page already shows people, in a form an agent can read. It's not for content people can't see.
This site wraps each docs article in <AgentMain>, and skips the page actions menu, the table of contents, and the previous and next links inside it.