Komponen Kustom

Ikhtisar semua komponen kustom berbasis Sätteri yang tersedia di website ini.

Komponen kustom adalah fitur yang memungkinkan kamu menulis konten Markdown dengan sintaks sederhana yang otomatis berubah menjadi elemen HTML yang kaya dan interaktif.

Apa Itu Custom Directives?

Custom directives adalah ekstensi sintaks Markdown yang dimulai dengan:

Block directives: ::: atau :: (di baris sendiri)
Inline directives: : (di dalam paragraf)

Saat konten di-render, Sätteri akan mengubah directive tersebut menjadi komponen HTML yang sudah dilengkapi dengan styling dan fungsionalitas.

Kelebihan

Markdown murni — tidak perlu HTML atau JSX
Tanpa import — tidak perlu import komponen di setiap file
Konsisten — semua komponen memiliki tampilan yang seragam
Cepat — diproses di build time, tidak ada JavaScript di sisi klien
Fleksibel — bisa digunakan di file .md dan .mdx

Daftar Komponen

Block Components (`:::` / `::`)

Komponen yang berdiri sendiri di level blok.

Komponen	Sintaks	Fungsi	Halaman
Callout	`> [!NOTE]`	Menyorot informasi penting	Callout
Steps	`:::steps`	Panduan langkah-demi-langkah	Steps
Tabs	`::::tabs`	Konten dalam tab	Tabs
Filetree	`:::filetree`	Struktur folder dan file	Filetree
Accordion	`:::details`	Konten yang bisa dilipat	Accordion
Video	`::video[...]`	Embed video	Video
Card	`:::card`	Kotak informasi dengan ikon dan link	Card

Inline Components (`:`)

Komponen yang bisa digunakan di dalam paragraf atau teks.

Komponen	Sintaks	Fungsi	Halaman
User	`:user[...]`	Profil pengguna dengan avatar	User
Badge	`:badge[...]`	Label kecil dengan warna	Badge
Button	`:button[...]`	Tombol dengan ikon	Button
Icon	`:icon[...]`	Ikon SVG dengan berbagai ukuran	Icon