Dokumentasi Lengkap

Halaman ini merupakan contoh postingan dokumentasi teknis lengkap yang mendemonstrasikan seluruh elemen kaya (komponen UI) seperti Button dengan Ikon, Tabel Parameter Responsif, Tab Interaktif, Callout Alerts, Accordion / FAQ, dan Stepper Timeline.

1. Callout & Alert Boxes

Gunakan callout untuk memberikan catatan penting, tips optimasi, atau peringatan kepada pembaca:

2. Showcase Model Tombol & Ikon

Pilihan model tombol modern lengkap dengan integrasi ikon dari Lucide dan Iconify:

A. Variasi Warna & Gaya Tombol

B. Tombol Khusus Brand (WhatsApp & GitHub)

C. Variasi Ukuran & Efek Pill / Glow

D. Tombol Kartu Download Spesial (Dua Baris)

3. Blok Kode & Snippet Dokumentasi

Berikut adalah beberapa model tampilan blok kode modern dengan header bahasa dan tombol salin:

A. Blok Kode Mandiri (cURL / Bash)

Format blok kode mandiri dengan header gelap dan tombol Salin fungsional:

curl -X POST "https://api.domainanda.com/api/send-message" \
  -H "Authorization: Bearer TOKEN_RAHASIA_ANDA" \
  -H "Content-Type: application/json" \
  -d '{
    "receiver": "628123456789",
    "message": "Halo! Pesan ini dikirim otomatis via API WhatsApp Gateway."
  }'

B. Contoh Menampilkan Kode HTML di Dalam <pre>

Untuk menampilkan sintaks kode HTML agar tidak dieksekusi oleh browser, ubah simbol < menjadi < dan > menjadi >:

<!-- Contoh Komponen Notifikasi Alert -->
<div class="callout callout-info">
  <div class="callout-icon">
    <iconify-icon icon="lucide:info"></iconify-icon>
  </div>
  <div class="callout-content">
    <strong>Informasi:</strong> Webhook berhasil terhubung.
  </div>
</div>

C. Tab Interaktif Multi-Bahasa (Code Tabs)

Tampilkan contoh kode dalam beberapa bahasa pemrograman sekaligus dengan tab yang dapat diklik:

curl -X POST "https://api.domainanda.com/api/send-message" \
  -H "Authorization: Bearer TOKEN_RAHASIA_ANDA" \
  -H "Content-Type: application/json" \
  -d '{
    "receiver": "628123456789",
    "message": "Halo! Pesan ini dikirim otomatis via API WhatsApp Gateway."
  }'

const axios = require('axios');

async function kirimPesan() {
  try {
    const response = await axios.post('https://api.domainanda.com/api/send-message', {
      receiver: '628123456789',
      message: 'Halo! Pesan otomatis via Node.js'
    }, {
      headers: {
        'Authorization': 'Bearer TOKEN_RAHASIA_ANDA',
        'Content-Type': 'application/json'
      }
    });
    console.log('Status Pengiriman:', response.data);
  } catch (error) {
    console.error('Gagal mengirim:', error.response ? error.response.data : error.message);
  }
}

kirimPesan();

import requests

url = "https://api.domainanda.com/api/send-message"
headers = {
    "Authorization": "Bearer TOKEN_RAHASIA_ANDA",
    "Content-Type": "application/json"
}
payload = {
    "receiver": "628123456789",
    "message": "Halo! Pesan otomatis via Python."
}

response = requests.post(url, json=payload, headers=headers)
print("Response:", response.json())

<?php
$curl = curl_init();

$payload = json_encode([
  "receiver" => "628123456789",
  "message" => "Halo! Pesan otomatis via PHP cURL."
]);

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.domainanda.com/api/send-message",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $payload,
  CURLOPT_HTTPHEADER => [
    "Authorization: Bearer TOKEN_RAHASIA_ANDA",
    "Content-Type: application/json"
  ],
]);

$response = curl_exec($curl);
curl_close($curl);
echo $response;

4. Endpoint API & Tabel Parameter

Format dokumentasi parameter request HTTP yang terstruktur rapi dan responsif:

Contoh HTTP Response Code:

🟢 200 OK 🟢 201 Created 🟡 400 Bad Request 🟠 401 Unauthorized 🔴 500 Internal Server Error

5. Tanya Jawab & Akordeon (FAQ)

Gunakan accordion untuk menyajikan informasi tambahan yang dapat dilipat agar halaman tetap ringkas:

6. Panduan Instalasi Langkah Demi Langkah

Sajikan tutorial teknis dengan urutan langkah yang jelas:

git clone https://github.com/username/wa-api-gateway.git
cd wa-api-gateway

npm install

npm start

7. Struktur Direktori Proyek

Gunakan komponen ini untuk menjelaskan struktur folder kode sumber proyek Anda:

8. Ringkasan Modul & Fitur Unggulan

9. Pilihan Paket & Harga (Pricing Cards)

Berikut adalah komponen kartu harga modern dengan status Featured / Paling Populer, daftar fitur centang, dan tombol aksi.

11. Sample Popup Modal Interaktif

Gunakan tombol pemicu dengan atribut data-modal-target="id-modal" untuk membuka popup modal modern dengan efek glassmorphism backdrop blur dan transisi halus:

12. Komponen Spoiler & Konten Tersembunyi

Gunakan komponen spoiler untuk menyembunyikan jawaban kuis, cuplikan kode rahasia, token penting, atau teks sensitif agar pembaca dapat membukanya hanya saat diperlukan:

A. Kotak Spoiler Interaktif (Spoiler Box)

Klik kotak spoiler di bawah untuk menampilkan isi konten yang tersembunyi:

{
  "status": true,
  "statusCode": 200,
  "message": "Pesan WhatsApp berhasil dikirim!",
  "data": {
    "messageId": "WA_MSG_99283741",
    "timestamp": 1726327200,
    "recipient": "628123456789"
  }
}

B. Spoiler Teks Samar / Blur (Inline Spoiler)

Arahkan kursor (*hover*) atau klik pada teks yang disamarkan di bawah ini untuk melihat isinya:

• Token Rahasia Pengujian: sk_live_98a7sd8f7a6sd5f4 (Klik / Hover untuk melihat)
• Kata Sandi Default Database: wa_gateway_2026!#

13. Video Tutorial & Embed YouTube Estetik

Tampilkan video YouTube dengan thumbnail cover beresolusi tinggi, tombol Play bernuansa modern, dan performa cepat (video baru dimuat saat diklik):

A. Video YouTube dengan Thumbnail Otomatis HD

Cukup masukkan data-video-id (contoh ID: dQw4w9WgXcQ), thumbnail dan judul akan tampil otomatis:

B. Video YouTube dengan Thumbnail Kustom

Anda juga bisa menyetel gambar thumbnail kustom sendiri menggunakan atribut data-thumb-url:

14. Galeri Gambar & Lightbox Interaktif

Setiap gambar di dalam artikel dokumentasi secara otomatis dilengkapi fitur Lightbox Estetik. Klik gambar manapun untuk memperbesar tampilan, melihat dalam mode layar penuh, memperbesar zoom, atau berpindah gambar dengan tombol panah:

📊 Klik untuk memperbesar Dashboard Monitoring

💻 Klik untuk memperbesar Source Code Architecture

Kombinasi keyboard: Tekan ⌘ + K untuk mencari topik cepat atau tekan Esc untuk menutup modal / menu.