Hello World

This is my first blog post using MDX and Next.js.

What is MDX?

MDX lets you use JSX in your markdown content. You can import components and export metadata.

Here's some example code:

function greeting(name) {
  return `Hello, ${name}!`;
}

Syntax Highlighting Demo

Here are snippets in Python, TypeScript, and Rust:

def fibonacci(n: int) -> list[int]:
    """Generate the first n Fibonacci numbers."""
    if n <= 0:
        return []
    sequence = [0, 1]
    while len(sequence) < n:
        sequence.append(sequence[-1] + sequence[-2])
    return sequence[:n]
 
print(fibonacci(10))

interface User {
  id: string;
  name: string;
  email: string;
}
 
async function fetchUser(id: string): Promise<User | null> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) return null;
  return response.json();
}

fn main() {
    let numbers: Vec<i32> = (1..=10).collect();
    let squared: Vec<i32> = numbers.iter().map(|x| x * x).collect();
    println!("Squared: {:?}", squared);
}

You can also use React components directly in your MDX:

Interactive Components

MDX also supports interactive React components. Here's a counter to prove it works:

Custom MDX Components

This blog includes several custom components to enhance content.

Callout Boxes

Use callouts to highlight important information:

Collapsible Sections

Use collapsible sections for optional details:

const config = {
  theme: 'dark',
  language: 'en'
};

Code Copy Button

Hover over any code block to see the copy button appear in the top-right corner. Try it on the code blocks above!

Math with KaTeX

Write math inline like $E = mc^2$ or $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$, or use display mode for larger equations:

The quadratic formula:

Matrices work too:

Sidenotes

Sidenotes are great for tangential information that doesn't interrupt the main flow.*On large screens, I appear in the margin. On smaller screens, tap the asterisk to expand.* They're commonly used in academic writing and technical documentation to provide additional context without breaking the reader's focus.

Edward Tufte popularized this style in his books on data visualization.*Tufte's "The Visual Display of Quantitative Information" is a classic in the field.* The idea is that readers can choose to engage with supplementary material without losing their place in the main text.

Citations

For academic references, use the citation system. You can cite inline: Vaswani et al. (2017) introduced the transformer architecture. Or use parenthetical style: The transformer revolutionized NLP (Vaswani et al., 2017).

A references section automatically appears at the end of the post.

Footnotes

For more traditional references, use footnotes.^[1] They work well for citations, sources, and longer explanations that would be too disruptive as sidenotes.^[2]

You can reference the same source multiple times throughout your text, and readers can jump between the reference and the footnote section at the bottom.