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.
- 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.
Ini adalah contoh kotak informasi. Sangat bagus untuk tips atau catatan tambahan.
Hati-hati saat mengedit file konfigurasi inti.
Integrasi MDX telah berhasil dikonfigurasi di blog Anda.
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.
3. Divider
Pemisah visual untuk memberikan jeda antar bagian.
4. Quote Component
Komponen kutipan dengan 3 variasi unik.
â Napoleon HillJangan menunggu. Waktunya tidak akan pernah tepat.
Founder BisnixBisnis bukan tentang uang, tapi tentang memberikan nilai kepada orang lain.
â Winston ChurchillKesuksesan adalah kemampuan untuk beralih dari satu kegagalan ke kegagalan lain tanpa kehilangan antusiasme.
5. Embed Social Media
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.
Siap Memulai Bisnis Affiliate?
Klik tombol di bawah untuk mendapatkan akses panduan gratis mulai dari nol.
Mulai Sekarang →Ebook: Cuan dari Tiktok Affiliate
Dapatkan strategi 7 langkah menghasilkan komisi pertama dalam 30 hari.
Ambil Ebook Sekarang →Ingin Belajar Berjualan Tanpa Stok?
Gabung di komunitas Affiliate Studio Malang dan dapatkan bimbingan langsung setiap minggunya.
Daftar Waiting List →Template Konten Viral
Salin dan tempel 50+ hook tiktok yang sudah terbukti menghasilkan jutaan view.
Download Template →8. Column System
Layout fleksibel untuk menaruh konten berdampingan. (Default: Bersih tanpa garis).
Konten Kiri
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Konten Kanan
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fitur 1
Deskripsi fitur satu.
Fitur 2
Deskripsi fitur dua.
Fitur 3
Deskripsi fitur tiga.
Main Content (70%)
Area besar untuk konten utama artikel.
Side (30%)
Area kecil untuk CTA atau ringkasan.
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!