How MDX Works Here
This project renders MDX blog posts and course chapters and injects a shared set of React components.
The single source of truth for MDX components is:
components/mdx/registry.tsx
If a component is not in that registry, it will not be available in MDX.
DDefinition
Rule: Do Not Import Components in MDX
In this repo, MDX files should not use import statements. Write MDX using component tags directly (for example, <Callout ... />). The runtime injects the component mapping.
Where To Write
- Blog posts:
content/blog/<slug>.mdx - Course chapters:
content/courses/<course-id>/<order>-<slug>.mdx - Component documentation course:
content/courses/docs/*.mdx
Frontmatter
Blog posts:
---
title: "Post title"
date: "YYYY-MM-DD"
description: "1 sentence"
author: "Name"
---
Course chapters:
---
title: "Chapter title"
order: 1
description: "1 sentence"
---
Safe Patterns For Props
When passing arrays/objects to components in MDX, prefer literal JSON-style values:
<BarChart
title="Runtime"
unit="ms"
data={[
{ label: "A", value: 10 },
{ label: "B", value: 25 },
]}
/>
Avoid passing functions in MDX props.
Math Input Gotcha
If an equation uses curly braces (like ) or many backslashes, prefer the explicit content prop:
<Eq content="C_j = \\max(C_j, C_{msg}) + 1" />
<EquationBlock number="3.1" content="\\text{minimize } f(x)" />
For the full component catalog, continue to the next chapters or use BLOG_GUIDELINE.md.