Dokumentasi Struktur Astro Erudite

Catatan panduan untuk kustomisasi dan pengembangan web blog Astro Erudite.

1. Root Directory (Jantung Konfigurasi)

Tempat pengaturan teknis agar website berjalan dengan benar.

• astro.config.ts: Konfigurasi utama Astro (Integrasi Tailwind, MDX, Sitemap, dll).

• package.json & bun.lock: Daftar library/dependencies. Proyek ini mendukung Bun untuk instalasi yang lebih cepat.

• Dockerfile & nginx.conf: Konfigurasi untuk membungkus aplikasi menjadi Container (Docker). Sangat berguna untuk self-hosting di infrastruktur seperti OCI (Oracle Cloud Infrastructure).

• .gitignore: Daftar file/folder yang tidak akan diunggah ke repositori Git (seperti node_modules).

2. Folder src/ (Area Kerja Utama)

Area tempat sebagian besar aktivitas koding dan pengeditan konten berlangsung.

A. Konten & Data (src/content/)

Menggunakan fitur Astro Content Collections dengan validasi data di content.config.ts.

• blog/: Folder postingan artikel (.md atau .mdx). Setiap artikel memiliki folder sendiri berisi index.md dan aset gambar seperti banner.png.

• authors/: Tempat mengedit profil penulis (nama, bio, foto) di file seperti enscribe.md.

• projects/: Koleksi data untuk menampilkan portofolio atau peralatan koding/trading.

B. Komponen (src/components/)

Elemen-elemen kecil pembentuk tampilan website.

• ui/: Komponen dasar berbasis React/shadcn (seperti button.tsx).

• header.astro & footer.astro: Tempat memodifikasi navigasi atas dan informasi bagian bawah web.

• toc-sidebar.astro: Fitur Table of Contents untuk navigasi cepat di artikel yang panjang.

C. Halaman & Layout (src/pages/ & src/layouts/)

• layouts/layout.astro: Kerangka utama situs. Tempat mengatur font global, meta tags, atau script analitik.

• pages/: Folder yang menentukan jalur URL (Routing). Contoh: about.astro akan menjadi halaman /about.

• [...id].astro: Halaman dinamis yang otomatis merender setiap postingan dari folder content.

3. Folder public/ (Aset Statis)

Aset yang dapat diakses langsung oleh browser tanpa proses build dari Astro.

• Favicons: Logo dan ikon website (favicon.ico, apple-touch-icon.png).

• fonts/: Menyimpan file font lokal (seperti GeistVF.woff2). Memungkinkan web tetap tampil cantik meski tanpa koneksi internet (bagus untuk performa).

4. Gaya Visual (src/styles/)

• global.css: Pengaturan warna tema dan utility Tailwind menggunakan @layer.

• typography.css: Pengaturan mendalam untuk tampilan teks, ukuran font, dan gaya link (cocok untuk yang menyukai estetika ala Obsidian).

📌 Ringkasan Ruang Lingkup Ngoprek