Components
A static, accessible component library for serious documentation.
M-Press ships the complete component library in the main binary. Every component renders at build time; JavaScript only adds progressive enhancement.
One component grammar
Every block component starts with @name{attributes} and ends with @end.
Nested components use the same grammar at every level. Leaf components such as
buttons and images may use their compact single-line forms.
M-Press only treats a registered block component name at the start of a line as a directive. Compact buttons and images must match their complete signatures, so email addresses and ordinary mentions are unchanged.
Notes and details
Source
@note{type="tip" title="Plain Markdown inside"}
Use **Markdown**, links, lists, and code in a note. Types are `info`, `tip`,
`warning`, `caution`, `danger`, and `important`.
@endTabs
Run go test ./....
Run mpress build --strict.
Source
@tabs
[Go]
Run `go test ./...`.
[Shell]
Run `mpress build --strict`.
@endTabs use buttons, tab panels, and ARIA state. The first panel remains readable when scripts are unavailable.
Cards and links
Install one binary and generate a site.
Set navigation, languages, versions, and theme options.
Source
@cards{cols="2"}
[Start a project](/getting-started/)
Install one binary and generate a site.
---
[Configure M-Press](/configuration/)
Set navigation, languages, versions, and theme options.
@end
@linkcard{title="Read the authoring guide" href="/authoring/" description="Markdown, HTML, assets, and front matter." icon="→"}
@endSteps
Write
Add Markdown or HTML to docs/.
Preview
Run mpress dev and edit with live reload.
Ship
Run mpress build --strict and deploy site/.
Source
@steps
### Write
Add Markdown or HTML to `docs/`.
### Preview
Run `mpress dev` and edit with live reload.
### Ship
Run `mpress build --strict` and deploy `site/`.
@endFile trees, badges, and buttons
- docs
- index.mdHome page
- components.mdThis component catalogue
- mpress.yamlSite configuration
Use stable for a compact status, or Open the guide for a clear action inside prose.
Source
@filetree
docs/
index.md Home page
components.md This component catalogue
mpress.yaml Site configuration
@end
Use {badge.success:stable} for a compact status, or
@button[Open the guide](/getting-started/){secondary} for a clear
action inside prose.Layout containers
Containers add small, allow-listed layout rules without turning the Markdown file into a template language.
Source
@container{display=grid|columns=2|gap=1rem}
@tip[Static]
The complete layout exists in the generated HTML.
@end
@info[Responsive]
The default theme collapses dense layouts on small screens.
@end
@endLanding page layouts
Landing pages can use nested Markdown layout directives. Use section,
columns, and column to define the page structure. Use actions for a group
of buttons. Use headline when a large heading needs deliberate line breaks.
@section{variant=hero}
@columns{variant=hero}
@column{variant=hero-copy}
@headline
Modern docs.
Rich components.
Just Markdown.
@end
Write the supporting copy as ordinary Markdown.
@actions
@button[Start the tutorial](/tutorials/first-site/){primary}
@button[Read the guide](/authoring/){secondary}
@end
@end
@column
Add a product example, image, terminal, or another component here.
@end
@end
@endThe default theme supplies responsive styles for the named landing variants. All layout content is rendered at build time. The source does not require HTML, MDX, or a JavaScript framework.
Compatibility
Starlight-compatible Aside, Tabs, TabItem, CardGrid, Card, LinkCard,
Steps, FileTree, Badge, and Image syntax is understood for migrations.
New content should use the @ directives because they are portable and easy
to read.