Authoring

In your MDX folder, create any path/to/my-document.mdx:

---
title: My Document
description: Lorem ipsum...
nav: 0
image: dog.png
---

MARKDOWN

Any key is optional.

• title: if not provided, last part of the path is used: my document
• image:
  • relative (to the md file) or absolute path, eg: dog.png, ./dog.png, ../../dog.png, /dog.png or https://animals.com/dog.png
  • will be used as metadata image if provided
• nav: order in the navigation (on the same level)

All exported components/mdx/index.tsx React components will have MDX treatment.

Responsive grid.

<Grid cols={2}>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  ...
</Grid>

<Codesandbox id="3rjsl" />

Result

Cell fracture

Aka. "GitHub alerts"

<Gha keyword="NOTE">Highlights information that users should take into account, even when skimming.</Gha>

or better:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

<Hint>
  I'm a deprecated hint. Use `Gha` instead.
</Hint>