Blog ini menggunakan Markdown standar (GitHub Flavored Markdown) yang diparse secara otomatis menggunakan ReactMarkdown dan Tailwind CSS. Panduan ini menjelaskan cara menulis konten, menyisipkan elemen visual, tabel, kode program, hingga metadata postingan.

1. Struktur Heading & Daftar Isi (ToC)#

Setiap heading level 2 (##) dan level 3 (###) akan otomatis diekstraksi ke dalam Table of Contents (ToC) di sidebar dan diberi link anchor (#).

Heading Level 2 (H2)#

Gunakan ## Judul Bagian untuk membagi artikel menjadi bagian-bagian utama.

## **1. Pengumpulan Data**
## **2. Analisis Sentimen**

Heading Level 3 (H3)#

Gunakan ### Sub-Judul untuk sub-bagian di bawah H2.

### **A. Analisis Positif**
### **B. Analisis Negatif**

💡 Tips ToC: Hindari menggunakan # (H1) di dalam isi artikel, karena H1 sudah dialokasikan otomatis untuk judul utama artikel.

2. Format Teks & Tipografi#

Anda dapat menggunakan penekanan teks untuk mempertegas kata atau istilah penting:

3. Blok Kode & Syntax Highlighting#

Blog ini dilengkapi komponen Code Block interaktif dengan nomor baris, tombol copy, dan syntax highlighting otomatis. Cukup tambahkan nama bahasa setelah tiga backtick (```):

Contoh Kode Python#

import requests
from bs4 import BeautifulSoup

def scrape_data(url: str) -> dict:
    response = requests.get(url, headers={"User-Agent": "OSINT-Bot/1.0"})
    soup = BeautifulSoup(response.text, "html.parser")
    title = soup.find("h1").get_text(strip=True)
    return {"status": response.status_code, "title": title}

if __name__ == "__main__":
    result = scrape_data("https://example.com")
    print(f"[+] Scraped: {result}")

Contoh Perintah Terminal (Bash)#

# Kloning repositori dan jalankan aplikasi
git clone https://github.com/dika-maulidal/aerotrack.git
cd aerotrack
pip install -r requirements.txt
python main.py

Contoh Format JSON#

{
  "project": "AeroTrack",
  "status": "active",
  "version": "1.0.0",
  "features": ["ADS-B Tracking", "ICAO Lookup", "Flight History"]
}

4. Tabel Data (GFM Table)#

Tabel sangat berguna untuk menyajikan dataset, ringkasan perbandingan, atau hasil scraping. Buat tabel menggunakan baris vertikal (|) dan garis pemisah (---):

| No | Parameter | Tipe Data | Keterangan |
| :--- | :--- | :---: | ---: |
| 1 | ICAO Code | String | Kode unik 24-bit pesawat |
| 2 | Registration | String | Nomor registrasi resmi (Tail Number) |
| 3 | Flight Count | Number | Total histori penerbangan tercatat |

Tampilan Tabel Hasil Render:

📌 Perataan Kolom:

• :--- = Rata Kiri
• :---: = Rata Tengah
• ---: = Rata Kanan

5. Gambar & Caption Otomatis#

Setiap gambar yang disisipkan menggunakan syntax markdown standar akan otomatis dibungkus dengan container ber-border melengkung, shadow halus, dan teks caption di bagian bawah.

![Deskripsi Gambar atau Caption](https://i.imgur.com/lrm01x2.png)

Demonstrasi Gambar:#

🔒 Domain Gambar Eksternal: Jika menggunakan hosting gambar pihak ketiga (seperti Imgur atau GitHub), pastikan domain sudah terdaftar di remotePatterns file next.config.ts.

6. Kutipan (Blockquote) & Callouts#

Gunakan karakter > di awal baris untuk membuat blok kutipan atau catatan penting:

> **Catatan Penting**: Pastikan selalu mematuhi etika pengumpulan data terbuka (OSINT) dan tidak melanggar batasan hukum dalam publikasi informasi.

Tampilan Blockquote:

Catatan Penting: Pastikan selalu mematuhi etika pengumpulan data terbuka (OSINT) dan tidak melanggar batasan hukum dalam publikasi informasi.

7. Format Daftar (Lists)#

Unordered List (Poin-Poin)#

Gunakan tanda minus (-) atau bintang (*):

• Data extraction dari feed publik
• Integrasi ke database BigQuery
• Visualisasi metrik interaktif

Ordered List (Bernomor)#

Gunakan angka diikuti titik:

1. Pengumpulan data mentah (Data Collection)
2. Pembersihan dan pra-pemrosesan (Preprocessing)
3. Pemodelan topik (Topic Modelling)
4. Visualisasi dan penarikan kesimpulan (Reporting)

Checklist (Task List)#

• Konfigurasi environment Python
• Implementasi parser HTML BeautifulSoup
• Deployment visualisasi dashboard

8. Struktur Data Postingan di Kode Sumber#

Untuk menambahkan postingan baru ke dalam website, buka file src/features/blog/data/posts.ts dan tambahkan objek baru ke array BLOG_POSTS:

{
  slug: "judul-artikel-kebab-case",
  title: "Judul Artikel Blog yang Lengkap",
  description: "Ringkasan singkat 1-2 kalimat untuk preview kartu dan SEO meta.",
  date: "2026-08-30",
  image: "https://i.imgur.com/gambar-cover.png",
  readTime: "5 min read",
  category: "Data Science",
  tags: ["OSINT", "Python", "NLP", "Tutorial"],
  author: {
    name: "Dika Maulidal",
    role: "Digital Forensics & OSINT Analyst",
  },
  content: `Isi artikel lengkap dalam format Markdown di sini...`,
}

Dengan mengikuti panduan dan format di atas, semua artikel akan otomatis terintegrasi rapi dengan sistem tema gelap/terang, navigasi daftar isi, dan tampilan responsif di semua perangkat.