Komponen MDX Cheatsheet

Halaman ini menampilkan semua komponen MDX kustom dan elemen Markdown bawaan yang dapat digunakan dalam dokumentasi Piksel. Gunakan halaman ini sebagai referensi untuk memilih komponen yang tepat.

Headings

Semua level heading didukung. Gunakan heading secara hierarkis untuk struktur dokumen yang baik.

H1 — Judul Halaman

H2 — Bagian Utama

H3 — Sub Bagian

H4 — Detail

H5 — Catatan Kecil

H6 — Label

Teks Dasar

Paragraf biasa ditulis seperti biasa. Gunakan teks tebal untuk penekanan, teks miring untuk istilah, dan kode inline untuk nama teknis.

Garis horizontal digunakan untuk memisahkan bagian:

---

Daftar

Daftar Tidak Berurutan

• Item pertama dalam daftar
• Item kedua dengan penjelasan lebih panjang untuk menunjukkan bagaimana teks akan terlihat saat dibungkus ke beberapa baris
• Item ketiga
  • Sub-item pertama
  • Sub-item kedua

Daftar Berurutan

1. Langkah pertama dalam proses
2. Langkah kedua dalam proses
3. Langkah ketiga dalam proses
4. Langkah terakhir

Link

Link ke halaman lain dalam dokumentasi.

Gambar

Tabel

Properti	Tipe	Default	Deskripsi
title	string	—	Judul komponen
description	string	—	Deskripsi singkat
type	enum	'info'	Varian tampilan
children	ReactNode	—	Konten di dalam komponen

Kode

Kode Inline

Gunakan backtick tunggal untuk kode inline. Contoh: nama fungsi seperti handleClick() atau variabel seperti const count = 0.

Blok Kode

function processImageData(imageUrl, options = {}) {
  const { format = 'geotiff', resolution = 10 } = options;

  return fetch(imageUrl)
    .then((response) => response.arrayBuffer())
    .then((buffer) => processGeoTIFF(buffer, format, resolution));
}

from piksel import SatelliteImage, ProcessingPipeline

image = SatelliteImage.open("path/to/image.tif")
pipeline = ProcessingPipeline([
    "normalize",
    "classify",
    "vectorize"
])

result = pipeline.run(image)
print(f"Processed area: {result.area_km2} km²")

piksel-cli process \
  --input data/input.tif \
  --output data/output.tif \
  --algorithm ndvi \
  --resolution 10m

Blockquote

Ini adalah blockquote standar. Gunakan untuk kutipan atau informasi penting yang perlu ditonjolkan dari teks utama.

Blockquote dapat berisi beberapa paragraf dan bahkan teks tebal serta teks miring.

Admonitions

Admonition bawaan Docusaurus:

Catatan

Informasi tambahan yang membantu pembaca memahami konteks.

Tips

Saran praktis atau cara yang lebih efisien untuk melakukan sesuatu.

Informasi

Detail teknis atau konteks yang relevan dengan topik saat ini.

Peringatan

Hal-hal yang perlu diperhatikan untuk menghindari kesalahan.

Bahaya

Tindakan yang dapat menyebabkan masalah serius jika tidak dilakukan dengan benar.

Details / Collapsible

Klik untuk melihat detail teknis

Konten tersembunyi yang dapat diperluas. Berguna untuk informasi teknis mendalam yang tidak semua pembaca perlu lihat.

• Parameter konfigurasi lanjutan
• Detail implementasi internal
• Log debugging

Detail implementasi API

Konten kedua yang dapat diperluas, menunjukkan bahwa beberapa elemen details dapat digunakan bersamaan.

{
  "api_version": "v2",
  "endpoint": "/api/imagery/process",
  "method": "POST"
}

---

Komponen Kustom

DocSteps

Daftar langkah bernomor dengan garis vertikal. Setiap langkah menerima title dan konten MDX bebas — teks, gambar, blok kode, admonition, atau komponen lain.

import DocSteps, { DocStep } from '@site/src/components/Docs/DocSteps';

<DocSteps>
  <DocStep title="Buka Explorer dan Pilih Area">
    Buka halaman Explorer, lalu gunakan peta interaktif untuk memilih area yang
    ingin dianalisis.

    ![Tampilan Explorer](/img/services/explorer-1200.jpg)

    :::tip
    Gunakan layer Sentinel-2 untuk area berawan — resolusinya lebih baik pada
    kondisi atmosfer buruk.
    :::
  </DocStep>
  <DocStep title="Tentukan Parameter Analisis">
    Atur rentang waktu dan jenis citra satelit yang akan digunakan.

    ![Panel parameter](/img/services/maps-1200.jpg)

    :::warning
    Rentang waktu lebih dari 12 bulan dapat memperlambat proses.
    :::
  </DocStep>
  <DocStep title="Proses & Unduh Hasil">
    Klik **Proses** dan tunggu notifikasi. Hasil tersedia dalam format GeoTIFF,
    PNG, atau JSON.

    ```bash
    piksel-cli download --job-id abc123 --format geotiff --output ./hasil/
    ```
  </DocStep>
</DocSteps>

Hasil:

1. Buka Explorer dan Pilih Area

Buka halaman Explorer, lalu gunakan peta interaktif untuk memilih area yang ingin dianalisis.

tip

Gunakan layer Sentinel-2 untuk area berawan — resolusinya lebih baik pada kondisi atmosfer buruk.

2. Tentukan Parameter Analisis

Atur rentang waktu dan jenis citra satelit yang akan digunakan.

warning

Rentang waktu lebih dari 12 bulan dapat memperlambat proses secara signifikan.

3. Proses & Unduh Hasil

Klik Proses dan tunggu notifikasi. Hasil tersedia dalam format GeoTIFF, PNG, atau JSON.

piksel-cli download --job-id abc123 --format geotiff --output ./hasil/