Demonstrasi Komponen MDX

Halo! Artikel ini menunjukkan cara menggunakan komponen baru yang telah kita buat. Komponen ini membuat artikel Anda jauh lebih menarik dan rapi.

💡 TL;DR: Mengapa Pakai MDX?
  • Memungkinkan interaktivitas di dalam tulisan Markdown.
  • Komponen bisa digunakan berulang kali (modular).
  • Performa tetap cepat karena berbasis Astro.

1. Attention Box

Gunakan ini untuk memberikan penekanan pada informasi tertentu. Ada 4 tipe: info, warning, success, dan danger.

ℹ️ Informasi Penting

Ini adalah contoh kotak informasi. Sangat bagus untuk tips atau catatan tambahan.

⚠️ Peringatan!

Hati-hati saat mengedit file konfigurasi inti.

✅ Berhasil

Integrasi MDX telah berhasil dikonfigurasi di blog Anda.

🚫 Kesalahan

Jangan hapus folder node_modules jika Anda sedang menjalankan server.

2. Collapse (Accordion)

Gunakan ini untuk menyembunyikan konten yang panjang atau opsional agar pembaca tidak kewalahan.

Klik untuk melihat detail teknis ▼

Di dalam sini Anda bisa menulis teks yang sangat panjang, gambar, atau bahkan komponen lain.

Setiap konten di sini hanya akan terlihat jika pengguna mengklik judul di atas.

Contoh Kode ▼ 
console.log("Halo dari dalam collapse!");

3. Divider

Pemisah visual untuk memberikan jeda antar bagian.

Tipe line (default):

Tipe dots:

Tipe gradient:

Cara Menggunakan di Artikel Baru

Setiap kali Anda membuat file .mdx baru, pastikan untuk menambahkan import di bagian atas (setelah frontmatter):

import Collapse from '../../components/mdx/Collapse.astro';
import AttentionBox from '../../components/mdx/AttentionBox.astro';
import Divider from '../../components/mdx/Divider.astro';

Lalu panggil seperti tag HTML biasa!