Demo Komponen MDX

Halaman ini adalah showcase untuk setiap komponen MDX yang tersedia di Dosen Programming. Ditujukan untuk penulis konten sebagai referensi visual. Tidak untuk diterbitkan ke publik — lihat content/CONTENT_GUIDE.md untuk dokumentasi lengkap.

1. Callout

2. Tabs

3. Collapsible

function greet(name: string): string {
  if (name.startsWith("Dosen")) {
    return `Selamat datang kembali, ${name}!`;
  }
  return `Halo, ${name}!`;
}

4. Code Block Statis

Hanya syntax highlighting, tidak ada tombol Run.

type User = {
  id: string;
  name: string;
  role: "admin" | "member";
};

const user: User = {
  id: "u_001",
  name: "Reza",
  role: "admin",
};

def fibonacci(n: int) -> list[int]:
    seq = [0, 1]
    for _ in range(n - 2):
        seq.append(seq[-1] + seq[-2])
    return seq[:n]

print(fibonacci(10))

5. CodeRunner (run-*)

Snippet pendek yang bisa langsung dijalankan:

const items = ["TypeScript", "JavaScript", "React", "Next.js"];
items.forEach((item, i) => console.log(`${i + 1}. Belajar ${item}`));
console.warn("Ini cuma peringatan");
console.info("Selesai!");

def greet(name):
    return f"Halo, {name}!"

for n in ["Reza", "Dosen", "Programming"]:
    print(greet(n))

6. CodePlayground (playground-*)

Snippet yang bisa diedit langsung dengan Monaco editor:

type Course = {
  title: string;
  lessons: number;
  tags: string[];
};

const courses: Course[] = [
  { title: "TypeScript untuk Pemula", lessons: 16, tags: ["ts"] },
  { title: "Belajar React Hooks", lessons: 12, tags: ["react"] },
];

const total = courses.reduce((sum, c) => sum + c.lessons, 0);
console.log(`Total pelajaran: ${total}`);
courses.forEach((c) => console.log(`- ${c.title} (${c.lessons} pelajaran)`));

def greet(name: str, *, excited: bool = False) -> str:
    return f"Halo, {name}{'!' if excited else '.'}"

names = ["Reza", "Dosen", "Programming"]
for i, name in enumerate(names, start=1):
    print(f"{i}. {greet(name, excited=(i == 1))}")

7. Quiz (Self-check)

8. Figure (gambar + zoom)

Klik untuk memperbesar

Rangkuman

| Komponen | Use case | | ----------------------- | ---------------------------------------------- | | Callout / :::tip | Sorotan, tips, peringatan | | Tabs | Konten dengan beberapa varian (OS, package manager) | | Collapsible | Pembahasan opsional, spoiler | | run-* | Snippet pendek yang bisa dijalankan | | playground-* | Latihan interaktif, snippet panjang | | Quiz | Self-check kuis dengan progress tersimpan | | Figure | Gambar dengan caption + zoom |

Lihat content/CONTENT_GUIDE.md untuk dokumentasi lengkap dan referensi API setiap komponen.