Testing MDX Features and Interactive Embeds

This post acts as a test bed for our newly implemented MDX content pipeline. It contains complex code blocks, deep heading structures, and custom embedded components to verify our layout, typography, and interactive components.

Testing headings and Table of Contents

We need to make sure that headings are parsed properly at build time so the Table of Contents on the right side maps correctly to the viewport scroll position.

H3 Heading Test (Nested)

This is a paragraph under a nested H3 heading. The navigation sidebar on the left and the scroll spy on the right should identify this hierarchy and apply the maroon accent (text-accent) when we scroll here.

High-Density Code Snippets

Let's test if Shiki parses syntax highlighting and our CSS counter logic successfully generates line numbers for different code blocks.

TypeScript / Next.js API Example

import { NextRequest, NextResponse } from "next/server"

interface User {
  id: string
  name: string
  role: "admin" | "user"
}

export async function GET(req: NextRequest) {
  try {
    const authHeader = req.headers.get("authorization")
    if (!authHeader?.startsWith("Bearer ")) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

    const mockUser: User = {
      id: "usr_99812",
      name: "Nirbhay Singh",
      role: "admin",
    }

    return NextResponse.json({ success: true, data: mockUser })
  } catch (error) {
    const message = error instanceof Error ? error.message : "Server Error"
    return NextResponse.json({ error: message }, { status: 500 })
  }
}

Rust Memory Allocation Example

Let's make sure it handles generic types, lifecycles, and standard library components in Rust:

#[derive(Debug)]
struct Container<'a, T> {
    name: &'a str,
    value: T,
}

impl<'a, T> Container<'a, T> {
    fn new(name: &'a str, value: T) -> Self {
        Container { name, value }
      }

    fn inspect(&self) -> &T {
        println!("Inspecting container: {}", self.name);
        &self.value
    }
}

fn main() {
    let container = Container::new("data_store", vec![1, 2, 3, 4, 5]);
    let numbers = container.inspect();
    assert_eq!(numbers.len(), 5);
}

Zoomable Media Test

Let's test an image embed. This image will automatically be wrapped in our Radix Dialog wrapper, allowing a click-to-zoom action that opens a modal view:

Lazy-Loading Interactive Embeds

Below is the <InteractiveEmbed /> component. Since it is in the viewport path, it uses the Intersection Observer to only request the heavy frame payload once it is scrolled close to the viewport:

Another aspect ratio test

We can test custom aspect ratios and titles:

If everything works properly, compiling this page with pnpm build should generate a fully static /blog/mdx-interactive-test route without any compilation errors.