File: components/mdx/CodeBlock.tsx

Use this for ML snippets, algorithm implementations, or “proof-by-code”.

<CodeBlock
  title="Example"
  filename="train_step.py"
  language="python"
  highlightLines={[3, 7]}
  code={`def train_step(model, batch, opt, loss_fn):
    model.train()
    opt.zero_grad()
    x, y = batch
    logits = model(x)
    loss = loss_fn(logits, y)
    loss.backward()
    opt.step()
    return loss.item()`}
/>

File: components/mdx/AlgorithmBlock.tsx

<AlgorithmBlock
  title="Gradient Descent"
  input="f(x), x0, η"
  output="x*"
  steps={[
    { label: "Init", content: "Set x = x0." },
    { label: "Iterate", content: "x = x - η ∇f(x)." },
  ]}
/>

File: components/mdx/ExerciseBlock.tsx

<ExerciseBlock
  title="Overfitting"
  difficulty="medium"
  prompt="Why can validation loss rise while training loss falls?"
  hint="Generalization gap increases."
  solution="The model is overfitting; try early stopping and stronger regularization."
/>

File: components/mdx/TensorShapeBlock.tsx

<TensorShapeBlock
  steps={[
    { name: "Tokens", op: "Embed", shape: "[B, T, d_model]" },
    { name: "Scores", op: "QK^T", shape: "[B, H, T, T]", highlight: true },
    { name: "Context", op: "softmax(scores)V", shape: "[B, T, d_model]" },
  ]}
/>

File: components/mdx/SeriesNavigator.tsx

This is typically used by course pages, but it can also be embedded in MDX when you want explicit navigation inside a post.