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>

Inline sandboxes.

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': 'latest',
      '@react-three/drei': 'latest'
    },
  }}
  files={{
    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
    '/App.tsx': `import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}`,
  }}
/>

import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

<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>