Mar 23, 2026

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.

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.

3. Divider

Pemisah visual untuk memberikan jeda antar bagian.

4. Quote Component

Komponen kutipan dengan 3 variasi unik.

Pilih platform untuk melihat tampilannya.

6. Comparison Table

Komponen tabel fleksibel untuk perbandingan.

Gaya Bermain	Fokus Utama	Risiko Utama
Idealis	Kualitas & Brand	Lambat berkembang
Eksekutor	Volume & Data	Burnout

Layanan	Harga	Fitur
Basic	Gratis	Terbatas
Pro	Rp 99k	Lengkap

Perbandingan	Metrik A	Metrik B
Kecepatan	90%	40%
Efisiensi	95%	60%

7. Lead Magnet (Call to Action)

Pilih gaya penawaran favorit Anda.

8. Column System

Layout fleksibel untuk menaruh konten berdampingan. (Default: Bersih tanpa garis).

9. Code Blocks (Syntax Highlighting)

Astro mendukung penyorotan kode yang cerdas secara bawaan. Cukup tulis nama bahasa setelah tanda tiga backtick.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Web Bisnix</title>
</head>
<body>
  <h1 class="text-primary">Selamat Datang di Bisnix</h1>
  <p>Ini adalah artikel blog pertama Anda.</p>
</body>
</html>

<?php
namespace App\Controllers;

class BlogController extends Controller {
  public function index($slug) {
    $article = Blog::where('slug', $slug)->first();
    return view('post', ['content' => $article->body]);
  }
}
?>

import React, { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Anda mengklik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik Saya
      </button>
    </div>
  );
}

.card {
  @apply relative overflow-hidden rounded-xl border border-slate-200 bg-white p-6 shadow-sm;
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

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';
import Columns from '../../components/mdx/Columns.astro';
import Column from '../../components/mdx/Column.astro';

Lalu panggil seperti tag HTML biasa!

Penulis Utama

Tech Writer & Developer

Seorang penulis yang gemar mengeksplorasi teknologi web terbaru. Fokus pada pengembangan frontend, UI/UX, dan menulis tutorial yang mudah dipahami oleh pemula maupun profesional.

Demonstrasi Komponen MDX

1. Attention Box

2. Collapse (Accordion)

3. Divider

4. Quote Component

6. Comparison Table

7. Lead Magnet (Call to Action)

Siap Memulai Bisnis Affiliate?

Ebook: Cuan dari Tiktok Affiliate

Ingin Belajar Berjualan Tanpa Stok?

Template Konten Viral

8. Column System

Konten Kiri

Konten Kanan

Fitur 1

Fitur 2

Fitur 3

Main Content (70%)

Side (30%)

9. Code Blocks (Syntax Highlighting)

Cara Menggunakan di Artikel Baru

Penulis Utama

Demonstrasi Komponen MDX

1. Attention Box

2. Collapse (Accordion)

3. Divider

4. Quote Component

5. Embed Social Media

6. Comparison Table

7. Lead Magnet (Call to Action)

Siap Memulai Bisnis Affiliate?

Ebook: Cuan dari Tiktok Affiliate

Ingin Belajar Berjualan Tanpa Stok?

Template Konten Viral

8. Column System

Konten Kiri

Konten Kanan

Fitur 1

Fitur 2

Fitur 3

Main Content (70%)

Side (30%)

9. Code Blocks (Syntax Highlighting)

Cara Menggunakan di Artikel Baru

Penulis Utama