Sitemas menyediakan berbagai komponen MDX untuk memperkaya konten artikel Anda. Artikel ini adalah referensi lengkap semua komponen yang tersedia.
Cara Import Komponen
Di awal file MDX (setelah frontmatter), import komponen yang akan digunakan:
---
title: "Judul Artikel"
# ... frontmatter lainnya
---
import InfoBox from '@/components/mdx/InfoBox.astro';
import Terminal from '@/components/mdx/Terminal.astro';
import Steps from '@/components/mdx/Steps.astro';
import Step from '@/components/mdx/Step.astro';
Konten artikel dimulai di sini...InfoBox
Menampilkan informasi penting dengan visual berbeda berdasarkan tipe.
Props
| Prop | Type | Required | Default | Deskripsi |
|---|---|---|---|---|
type | string | No | "note" | Tipe: note, tip, warning, danger |
title | string | No | - | Judul box |
Contoh Penggunaan
<InfoBox type="note" title="Catatan">
Ini adalah catatan informasi umum.
</InfoBox>
<InfoBox type="tip" title="Tips">
Ini adalah tips berguna.
</InfoBox>
<InfoBox type="warning" title="Peringatan">
Hati-hati dengan langkah ini.
</InfoBox>
<InfoBox type="danger" title="Bahaya">
Jangan lakukan ini di production!
</InfoBox>Hasil
Ini adalah catatan informasi umum.
Ini adalah tips berguna.
Hati-hati dengan langkah ini.
Jangan lakukan ini di production!
Terminal
Menampilkan perintah terminal dengan tombol copy.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
title | string | No | Judul terminal |
content | string | Yes | Perintah yang ditampilkan |
Contoh
<Terminal
title="Install dependencies"
content="npm install"
/>
<Terminal
title="Multi-line commands"
content="git add .
git commit -m 'Initial commit'
git push origin main"
/>Hasil
CodeBlock
Code block dengan syntax highlighting dan tombol copy.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
title | string | No | Nama file atau deskripsi |
lang | string | No | Bahasa untuk highlighting |
Contoh
Gunakan CodeBlock untuk menampilkan kode dengan syntax highlighting:
<CodeBlock title="app.js" lang="javascript">
// Your code here
const greeting = 'Hello World';
console.log(greeting);
</CodeBlock>Steps dan Step
Menampilkan langkah-langkah tutorial secara terstruktur.
Props Steps
Tidak ada props khusus (wrapper component).
Props Step
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
title | string | Yes | Judul langkah |
Contoh
<Steps>
<Step title="Download Project">
Download atau clone repository dari GitHub.
</Step>
<Step title="Install Dependencies">
Jalankan `npm install` untuk install semua dependencies.
</Step>
<Step title="Run Development Server">
Jalankan `npm run dev` dan buka browser.
</Step>
</Steps>Hasil
Download Project
Download atau clone repository dari GitHub.
Install Dependencies
Jalankan npm install untuk install semua dependencies.
Run Development Server
Jalankan npm run dev dan buka browser.
Accordion
Content yang bisa di-expand/collapse.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
title | string | Yes | Judul accordion |
Contoh
<Accordion title="Klik untuk melihat detail">
Ini adalah konten yang tersembunyi.
Bisa berisi **markdown** dan panjang sekali.
</Accordion>Hasil
Klik untuk melihat detail
Ini adalah konten yang tersembunyi. Bisa berisi markdown dan panjang sekali.
Tabs dan TabPanel
Tab navigation untuk konten berbeda.
Props Tabs
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
tabs | string[] | Yes | Array nama tab |
defaultTab | number | No | Index tab default (0-indexed) |
Props TabPanel
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
index | number | Yes | Index panel (0-indexed) |
Contoh
<Tabs tabs={["Windows", "macOS", "Linux"]}>
<TabPanel index={0}>
Instruksi untuk Windows...
</TabPanel>
<TabPanel index={1}>
Instruksi untuk macOS...
</TabPanel>
<TabPanel index={2}>
Instruksi untuk Linux...
</TabPanel>
</Tabs>Hasil
Windows: Download installer dari website resmi dan jalankan setup wizard.
macOS: Install via Homebrew dengan brew install node.
Linux: Gunakan package manager distro Anda atau nvm.
Badge
Label visual untuk status atau kategori.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
variant | string | No | Variant: default, success, warning, danger, info |
Contoh
<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>Hasil
Default Success Warning Danger InfoHighlight
Highlight teks dengan warna accent.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
color | string | No | Warna: accent, success, warning, danger |
Contoh
<Highlight>Teks penting yang di-highlight</Highlight>
<Highlight color="success">Berhasil!</Highlight>Hasil
Teks penting yang di-highlightSpoiler
Konten tersembunyi yang perlu diklik untuk dilihat.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
label | string | No | Label tombol reveal |
Contoh
<Spoiler label="Lihat Jawaban">
Jawabannya adalah 42.
</Spoiler>Hasil
Jawabannya adalah 42 — jawaban untuk pertanyaan ultimate tentang kehidupan, alam semesta, dan segalanya.
Figure
Gambar dengan caption dan optional tag.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
src | ImageMetadata | Yes | Import gambar |
alt | string | Yes | Alt text |
caption | string | No | Caption gambar |
tag | string | No | Tag overlay (e.g., “Screenshot”) |
Contoh
import myImage from './screenshot.png';
<Figure
src={myImage}
alt="Dashboard aplikasi"
caption="Tampilan dashboard setelah login"
tag="Screenshot"
/>CompareTable
Tabel perbandingan dua kolom.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
headers | string[] | Yes | Header kolom [left, right] |
rows | string[][] | Yes | Array rows [[left, right], …] |
Contoh
<CompareTable
headers={["Vercel", "Netlify"]}
rows={[
["100GB bandwidth", "100GB bandwidth"],
["6000 build mins", "300 build mins"],
["No forms", "Built-in forms"],
]}
/>Hasil
| Vercel | Netlify |
|---|---|
| 100GB bandwidth | 100GB bandwidth |
| 6000 build mins | 300 build mins |
| No forms | Built-in forms |
CallToAction
Banner CTA dengan tombol action.
Props
| Prop | Type | Required | Deskripsi |
|---|---|---|---|
title | string | Yes | Judul CTA |
description | string | Yes | Deskripsi |
buttonText | string | Yes | Text tombol |
buttonLink | string | Yes | URL tujuan |
type | string | No | Variant: accent, primary |
Contoh
<CallToAction
title="Mulai Sekarang"
description="Pelajari lebih lanjut tentang Sitemas."
buttonText="Lihat Dokumentasi"
buttonLink="/blog/pengenalan-sitemas"
type="accent"
/>Hasil
Mulai Sekarang
Pelajari lebih lanjut tentang Sitemas.
Tips Penggunaan
1. Import Hanya yang Dipakai
// ✅ Bagus - import specific
import InfoBox from '@/components/mdx/InfoBox.astro';
// ❌ Jangan - tidak ada barrel export
import { InfoBox, Terminal } from '@/components/mdx';2. Baris Kosong Penting
// ✅ Benar
Teks sebelum.
<InfoBox>
Konten box
</InfoBox>
Teks sesudah.
// ❌ Salah - bisa menyebabkan error
Teks sebelum.
<InfoBox>
Konten box
</InfoBox>
Teks sesudah.3. Self-Closing vs Children
// Komponen dengan children
<InfoBox>
Konten di sini
</InfoBox>
// Komponen tanpa children (self-closing)
<Terminal title="Test" content="npm run dev" />Langkah Selanjutnya
Pelajari SEO otomatis di Sitemas:
SEO Otomatis
Pahami bagaimana Sitemas mengoptimasi SEO secara otomatis.
Kesimpulan
Komponen MDX membuat artikel Anda lebih interaktif dan informatif. Gunakan kombinasi komponen yang tepat untuk:
- InfoBox: Highlight informasi penting
- Steps: Tutorial terstruktur
- Tabs: Konten platform-specific
- CodeBlock: Code dengan highlighting
- CallToAction: Engage pembaca
Eksperimen dengan berbagai komponen untuk menemukan kombinasi terbaik untuk konten Anda!