Aither (Bahasa Indonesia)

Memulai dengan Astro-Theme-Aither

Sat, 14 Mar 2026 08:00:00 GMT

Panduan ini membawa Anda dari nol sampai blog multibahasa yang sudah ter-deploy. Baca dari awal sampai akhir atau langsung lompat ke bagian yang dibutuhkan. ## Prasyarat - [Node.js](https://nodejs.org/) 22 LTS atau lebih baru - [pnpm](https://pnpm.io/) 10 atau lebih baru - Akun GitHub - Akun [Cloudflare](https://cloudflare.com/) untuk deploy ## Instalasi ```bash git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git cd YOUR_REPO corepack enable pnpm install pnpm validate pnpm dev ``` Buka `http://localhost:4321` di browser Anda. ## Struktur proyek ```text src/ ├── components/ # Komponen Astro dan React ├── config/site.ts # Nama situs, navigasi, footer, dan tautan sosial ├── content/posts/ # Post yang diatur per locale ├── i18n/ # Terjemahan UI ├── layouts/ # Layout ├── lib/ # Utilitas ├── pages/ # Halaman dan rute └── styles/global.css # Token tema Tailwind v4 ``` ## Konfigurasi ### Site Config `src/config/site.ts` adalah sumber utama konfigurasi situs: ```typescript export const siteConfig = { name: 'Nama blog Anda', title: 'Tagline Anda', description: 'Deskripsi situs untuk SEO', author: { name: 'Nama Anda', avatar: '', }, }; ``` ### Variabel lingkungan ```bash cp .env.example .env ``` Biarkan nilai kosong jika ingin menonaktifkan layanan tertentu. ### URL situs Atur URL produksi di `astro.config.mjs`: ```javascript import { defineConfig } from 'astro/config'; import aither from '@aither/astro'; export default defineConfig({ site: 'https://your-domain.pages.dev', integrations: [aither()], }); ``` ## Menulis post Buat file `.mdx` baru di `src/content/posts/en/`: ```markdown --- title: Post pertama saya date: "2026-03-14T16:00:00+08:00" category: General description: Ringkasan singkat untuk SEO dan pratinjau sosial. tags: [Topic, Another] pinned: false --- Konten dimulai di sini. ``` ### Referensi frontmatter | Field | Tipe | Wajib | Deskripsi | |------|------|-------|-----------| | `title` | string | Ya | Judul post | | `date` | date | Ya | Waktu publikasi (mis. `2026-03-14T16:00:00+08:00`) | | `category` | string | Tidak | Kategori | | `description` | string | Tidak | Deskripsi SEO | | `tags` | string[] | Tidak | Daftar tag | | `pinned` | boolean | Tidak | Menaruh post di atas | | `image` | string | Tidak | Gambar cover | ### Komponen MDX Anda bisa mengimpor komponen langsung di dalam konten: ```mdx import MyChart from '@/components/MyChart' ``` ## Internasionalisasi Theme ini mendukung 11 locale. Untuk menambahkan versi terjemahan, buat file dengan nama yang sama di folder locale tujuan: ```text src/content/posts/en/my-post.mdx src/content/posts/id/my-post.mdx src/content/posts/zh-hans/my-post.mdx ``` Teks UI berada di `src/i18n/messages/`. ## Bagian konten kustom Anda dapat menambahkan koleksi seperti terjemahan, catatan, atau tutorial melalui `src/content.config.ts` dan `src/config/site.ts`. Halaman daftar dan detail akan dibuat otomatis. ## Theming Sistem theme memiliki dua lapisan: - mode warna: `light`, `dark`, `system` - style theme: `default` atau style bawaan seperti `evolution` ```typescript ui: { defaultMode: 'system', defaultStyle: 'default', showMoreThemesMenu: true, }, ``` Warna disimpan di `src/styles/global.css`. Secara default theme menggunakan font sans-serif sistem dan font monospace untuk kode. ## SEO dan AI Setiap halaman sudah menyediakan output berikut: - `/sitemap-index.xml` - `/rss.xml` - `/robots.txt` - `/llms.txt` - `/llms-full.txt` - `/posts/slug.md` - JSON-LD dan Open Graph ## Deploy ### Cloudflare Pages Praktik terbaik: buat proyek Pages terlebih dahulu. Alur ini memakai nama repositori secara default, atau `CLOUDFLARE_PAGES_PROJECT_NAME` jika Anda perlu menimpanya. Tambahkan secret GitHub berikut: - `CLOUDFLARE_API_TOKEN` - `CLOUDFLARE_ACCOUNT_ID` Lalu jalankan `pnpm validate` dan push ke `main`. ## Perintah yang berguna | Perintah | Deskripsi | |---------|-----------| | `pnpm dev` | Menjalankan server pengembangan | | `pnpm validate` | Menjalankan validasi penuh sebelum push | | `pnpm build` | Membuat build produksi | | `pnpm preview` | Meninjau build produksi secara lokal | ## Skema versi Tag release publik memakai nama bergaya CalVer, misalnya `v2026.04.08`.

Praktik terbaik agen AI untuk proyek nyata (Contoh)

Sat, 10 Jan 2026 08:00:00 GMT

Agen AI paling berguna ketika mereka berhenti terasa seperti sihir dan mulai terasa seperti alat kerja yang operasional. Tim yang mendapatkan hasil terbaik tidak meminta agen untuk "menangani semuanya". Mereka mendefinisikan tugasnya, memberi konteks yang tepat, dan memastikan hasilnya mudah diverifikasi. Kedengarannya sederhana, tetapi dampaknya besar. Agen yang dibekali arahan yang baik bisa bergerak cepat dan menghasilkan kerja yang sangat solid. Agen yang ruang lingkupnya kabur justru akan membuang konteks, mengambil jalan memutar yang tidak perlu, dan mengembalikan sesuatu yang terdengar percaya diri tetapi meleset dari tugas sebenarnya. ## Mulai dari tugas yang sempit Tugas terbaik untuk agen adalah tugas yang konkret dan terbatasi. Daripada mengatakan "tingkatkan aplikasi ini", katakan "perbaiki navigasi mobile yang bertumpuk di halaman blog" atau "tambahkan uji cepat untuk feed RSS". Tugas yang sempit memberi agen target yang stabil dan mengurangi kemungkinan ia mengubah bagian sistem yang tidak relevan. Hal ini juga memudahkan review. Jika tugasnya kecil, akan lebih jelas apa yang berubah, apa yang harus diuji, dan apakah hasilnya memang benar. ## Tulis konteks secara eksplisit Agen bekerja lebih baik ketika konteks penting dituliskan, bukan hanya diasumsikan. Brief tugas yang kuat biasanya berisi: - tujuan yang spesifik - file atau direktori yang relevan - batasan dan hal-hal yang tidak boleh berubah - output yang diharapkan atau definisi selesai - perintah validasi yang harus dijalankan di akhir Manusia bisa menyimpulkan banyak hal dari instruksi setengah jadi. Agen lebih literal. Jika suatu detail penting, tuliskan dengan jelas. ## Lebih baik memakai alat daripada menebak Sebelum mengusulkan perubahan, agen sebaiknya memeriksa sistem yang ada. Artinya membaca file yang relevan, memeriksa konfigurasi build, dan memahami konvensi yang sudah dipakai, bukan hanya mengandalkan pengetahuan umum. Aturan yang sama berlaku untuk sistem eksternal. Jika jawaban bergantung pada dokumentasi terbaru, pengaturan penerapan, atau perilaku aktual, agen sebaiknya menggunakan alat untuk memverifikasi kondisi nyata, bukan menebak dari ingatan. Inilah sebabnya antarmuka yang mudah dibaca mesin sangat penting. Struktur file yang jelas, skrip validasi, skema bertipe, dan konfigurasi yang eksplisit membuat agen lebih andal karena lingkungannya menjelaskan dirinya sendiri. ## Pastikan hasilnya mudah diverifikasi Alur kerja agen yang baik tidak berhenti pada "ini jawabannya". Alur kerja yang baik berakhir dengan bukti. Mintalah agen menjelaskan apa yang berubah, apa yang diuji, dan apa yang belum bisa diverifikasi. Utamakan hasil yang bisa diperiksa dengan cepat: - diff yang kecil - perintah validasi yang lolos - screenshot atau pratinjau yang bisa direproduksi - catatan singkat tentang risiko atau asumsi Verifikasi mengubah hasil yang sekadar masuk akal menjadi hasil yang benar-benar dapat diandalkan. ## Rancang supaya mudah pulih Bahkan agen yang kuat pun bisa mengambil langkah yang salah. Respons yang tepat bukan menghindari agen, melainkan membuat pemulihan menjadi murah. Gunakan tugas kecil, skrip yang stabil, dan checkpoint. Buat operasi idempoten jika memungkinkan. Hindari alur kerja yang membuat satu langkah salah berubah menjadi kekacauan besar. Jika tugas bisa dipecah menjadi baca, rencanakan, implementasikan, dan verifikasi, lakukan itu. Agen bekerja paling baik dalam sistem yang mudah diperiksa, mudah diuji, dan mudah dilanjutkan. ## Review manusia tetap penting Agen sangat bagus dalam kecepatan, cakupan, dan pengulangan. Manusia tetap bertanggung jawab atas penilaian. Kompromi produk, batas keamanan, nada, merek, dan kemudahan perawatan jangka panjang tetap harus ditinjau oleh orang yang memahami konteks yang lebih luas. Tujuannya bukan mengeluarkan manusia dari alur kerja. Tujuannya adalah agar manusia menghabiskan lebih sedikit waktu untuk pekerjaan mekanis dan lebih banyak waktu untuk keputusan yang memang membutuhkan pertimbangan dan akuntabilitas. ## Model mental yang praktis Bayangkan agen AI sebagai operator yang cakap, cepat, tahan lelah, dan literal. Berikan tugas yang jelas. Berikan alat yang tepat. Minta ia menunjukkan proses kerjanya. Lalu tinjau hasilnya dengan disiplin yang sama seperti saat Anda meninjau perubahan penting lainnya. Di situlah leverage yang sebenarnya muncul.

Agen AI dan Penggunaan Alat (Sampel)

Fri, 09 Jan 2026 08:00:00 GMT

Agen AI adalah model bahasa yang bisa mengambil tindakan — bukan sekadar menghasilkan teks. Ia bisa mencari di web, menjalankan kode, memanggil API, membaca file, dan memutuskan apa yang harus dilakukan selanjutnya. Pergeseran dari generasi teks pasif ke pemecahan masalah aktif ini merupakan salah satu perkembangan paling signifikan dalam AI terapan. ## Dari Chat ke Aksi Chatbot menjawab pertanyaan. Agen memecahkan masalah. Perbedaannya adalah otonomi: agen memutuskan alat mana yang digunakan, dalam urutan apa, dan bagaimana menangani error. Pertimbangkan perbedaannya dalam praktik. Anda bertanya ke chatbot: "Bagaimana cuaca di Tokyo?" Ia mungkin menjawab berdasarkan data pelatihannya — yang berumur berbulan-bulan atau bertahun-tahun dan hampir pasti salah. Anda bertanya hal yang sama ke agen, dan ia memanggil API cuaca, mengambil data terkini, dan mengembalikan jawaban yang akurat dan terbaru. Chatbot menghasilkan teks yang masuk akal. Agen berinteraksi dengan dunia. ### Spektrum Otonomi Tidak semua agen sama otonomnya. Ada spektrum: 1. **Chat berbantuan alat** — model bisa memanggil alat, tapi hanya sebagai respons langsung terhadap permintaan pengguna. Satu panggilan alat per giliran. 2. **Agen multi-langkah** — model bisa merangkai beberapa panggilan alat untuk menyelesaikan tugas, memutuskan urutannya sendiri. 3. **Agen sepenuhnya otonom** — model beroperasi secara independen dalam periode yang diperpanjang, membuat keputusan, menangani error, dan mengejar tujuan dengan pengawasan manusia minimal. Sebagian besar sistem produksi saat ini berada di level 1-2. Agen sepenuhnya otonom adalah area penelitian aktif dengan tantangan keamanan signifikan yang masih harus dipecahkan. ## Penggunaan Alat Tool use memungkinkan model AI memanggil fungsi eksternal. Model memutuskan kapan alat dibutuhkan, menghasilkan parameter yang tepat, dan menggabungkan hasilnya ke dalam responsnya. Ini mengubah generator teks menjadi asisten yang kapabel. ### Cara Kerja Tool Use Mekanikanya sederhana: 1. **Definisi alat** — Anda mendeskripsikan alat yang tersedia ke model, termasuk nama, parameter, dan fungsinya. Ini biasanya disediakan sebagai JSON terstruktur dalam system prompt atau melalui field API khusus. 2. **Keputusan** — saat memproses permintaan pengguna, model memutuskan apakah alat akan membantu. Jika ya, ia menghasilkan panggilan alat dengan parameter yang sesuai. 3. **Eksekusi** — aplikasi Anda mengeksekusi panggilan alat (model tidak mengeksekusinya langsung) dan mengembalikan hasilnya. 4. **Integrasi** — model menggabungkan hasil alat ke dalam responsnya kepada pengguna. ### Contoh Definisi Alat ```json { "name": "search_documentation", "description": "Search the product documentation for relevant articles", "parameters": { "type": "object", "properties": { "query": { "type": "string", "description": "The search query" }, "max_results": { "type": "integer", "description": "Maximum number of results to return", "default": 5 } }, "required": ["query"] } } ``` Model melihat definisi ini dan tahu ia bisa mencari dokumentasi. Ketika pengguna mengajukan pertanyaan produk, model menghasilkan panggilan seperti `search_documentation(query="how to reset password")`, sistem Anda mengeksekusi pencarian, dan model menggunakan hasilnya untuk menyusun jawaban yang akurat. ### Kategori Alat Umum Sistem agen produksi biasanya menawarkan alat dalam beberapa kategori: - **Pengambilan informasi** — pencarian web, kueri database, pembacaan file, panggilan API - **Eksekusi kode** — menjalankan Python, JavaScript, atau perintah shell dalam lingkungan sandbox - **Komunikasi** — mengirim email, memposting pesan, membuat tiket - **Manipulasi file** — membuat, mengedit, dan mengorganisasi file - **Operasi sistem** — mendeploy kode, mengelola infrastruktur, menjalankan pipeline CI Alat yang Anda sediakan mendefinisikan batas dari apa yang bisa dilakukan agen. Satu set alat yang dirancang dengan baik memberikan agen kemampuan yang cukup untuk berguna tanpa kekuatan yang cukup untuk berbahaya. ## Loop Agentik Pola paling kuat adalah loop agentik: model merencanakan langkah, mengeksekusinya, mengobservasi hasilnya, dan memutuskan langkah berikutnya. Loop ini berlanjut hingga tugas selesai atau model menentukan bahwa ia tidak bisa melanjutkan. ### Loop dalam Praktik Pertimbangkan agen yang ditugaskan mendebug test yang gagal: 1. **Rencanakan** — "Saya harus membaca file test terlebih dahulu untuk memahami apa yang ditest" 2. **Eksekusi** — memanggil `read_file("tests/auth.test.ts")` 3. **Observasi** — melihat test mengharapkan status 200 tapi mendapat 401 4. **Rencanakan** — "Saya harus memeriksa auth middleware untuk melihat apa yang mengembalikan 401" 5. **Eksekusi** — memanggil `read_file("src/middleware/auth.ts")` 6. **Observasi** — menemukan bug di logika pemeriksaan kedaluwarsa token 7. **Rencanakan** — "Saya harus memperbaiki perbandingan kedaluwarsa" 8. **Eksekusi** — memanggil `edit_file(...)` dengan perbaikan 9. **Observasi** — mengkonfirmasi bahwa perubahan telah dibuat 10. **Rencanakan** — "Saya harus menjalankan test untuk memverifikasi perbaikan" 11. **Eksekusi** — memanggil `run_command("pnpm test tests/auth.test.ts")` 12. **Observasi** — test lulus 13. **Selesai** — melaporkan perbaikan kepada pengguna Setiap langkah melibatkan model yang berpikir tentang keadaan saat ini, memutuskan apa yang harus dilakukan selanjutnya, dan beradaptasi berdasarkan apa yang ditemukannya. Ini secara fundamental berbeda dari skrip linear — agen menangani temuan tak terduga dan mengubah arah saat diperlukan. ### Menangani Error dalam Loop Agen yang robust harus menangani kegagalan dengan elegan. Alat mungkin mengembalikan error, file mungkin tidak ada, atau API mungkin dibatasi rate-nya. Desain agen yang baik mencakup: - **Logika retry** — coba ulang kegagalan transien dengan backoff - **Strategi alternatif** — jika satu pendekatan gagal, coba yang lain - **Degradasi graceful** — jika tugas tidak bisa diselesaikan sepenuhnya, selesaikan sebanyak mungkin dan jelaskan apa yang tersisa - **Batas loop** — tetapkan jumlah iterasi maksimum untuk mencegah loop tak terbatas saat agen terjebak ## Merancang Alat yang Efektif Kualitas sistem agen sangat bergantung pada kualitas alatnya. Alat yang dirancang buruk menghasilkan agen yang bingung dan hasil yang salah. ### Prinsip Desain Alat - **Nama jelas** — `search_users` lebih baik dari `query_db_1`. Model menggunakan nama untuk memutuskan kapan memanggil alat. - **Parameter deskriptif** — sertakan deskripsi untuk setiap parameter. Model membaca deskripsi ini untuk menentukan nilai apa yang harus dikirim. - **Fokus sempit** — setiap alat harus melakukan satu hal dengan baik. Alat `read_file` dan alat `write_file` lebih baik dari alat `file_operations` dengan parameter mode. - **Error berguna** — kembalikan pesan error yang jelas yang membantu model memahami apa yang salah dan apa yang harus dicoba selanjutnya. - **Idempoten bila mungkin** — alat yang bisa dicoba ulang dengan aman menyederhanakan penanganan error. ## Risiko Agen yang bisa mengambil tindakan bisa mengambil tindakan yang salah. Sandboxing, langkah konfirmasi, dan review manusia adalah langkah keamanan esensial untuk setiap sistem agen produksi. ### Kategori Risiko - **Aksi destruktif** — agen dengan akses sistem file bisa menghapus file penting. Agen dengan akses database bisa menghapus tabel. Lingkungan sandbox dan batas permission sangat penting. - **Eksfiltrasi data** — agen yang bisa membaca data sensitif dan membuat permintaan jaringan bisa secara tidak sengaja (atau melalui prompt injection) membocorkan informasi. - **Biaya tak terkendali** — agen dalam loop yang memanggil API mahal bisa menumpuk biaya signifikan dengan cepat. Batas anggaran dan rate limiting adalah kebutuhan praktis. - **Aksi salah yang dilakukan dengan percaya diri** — agen mungkin salah memahami permintaan dan mengambil aksi yang tidak bisa dibatalkan. Untuk operasi berisiko tinggi, selalu minta konfirmasi manusia. ### Pola Keamanan Sistem agen produksi harus mengimplementasikan beberapa pola keamanan: 1. **Privilege minimum** — berikan agen hanya alat yang dibutuhkan untuk tugas spesifiknya, tidak lebih 2. **Sandboxing** — eksekusi kode dan operasi file dalam lingkungan terisolasi 3. **Gerbang konfirmasi** — minta persetujuan manusia untuk aksi destruktif atau tidak bisa dibatalkan 4. **Audit logging** — catat setiap panggilan alat dan hasilnya untuk review 5. **Kill switch** — sediakan mekanisme untuk segera menghentikan agen yang sedang berjalan 6. **Batas anggaran** — tetapkan batas keras untuk panggilan API, penggunaan token, dan waktu komputasi Tujuannya bukan untuk mencegah agen menjadi berguna — tetapi untuk memastikan mereka berguna dalam batas-batas yang terdefinisi dengan baik.

✨ Mengapa Astro-Theme-Aither

Sat, 03 Jan 2026 08:00:00 GMT

Tema Astro yang dirancang untuk AI dan percaya teks itu sendiri sudah indah. Astro-Theme-Aither dibangun untuk pembaca yang datang demi kata-kata, bukan dekorasi. ## Filosofi Desain Kebanyakan tema blog berkompetisi untuk perhatian dengan gambar unggulan, animasi, panel samping, dan popup. Semua itu tidak membantu membaca — mereka membantu melihat, yang merupakan aktivitas berbeda. Astro-Theme-Aither mengambil pendekatan sebaliknya: desain minimal, bukan engineering minimal. Ketika tidak ada visual mencolok yang mengalihkan dari masalah, setiap cacat tipografi, setiap keterlambatan loading diperkuat. Desain minimal menuntut kualitas engineering yang lebih tinggi. ## Tipografi Tipografi adalah identitas visual. Setiap halaman menggunakan susunan font sistem sans-serif yang konsisten. Parameter tipografi mengikuti Apple Human Interface Guidelines: - **Ukuran font** — basis 17px - **Tinggi baris** — 1.47 - **Jarak huruf** — -0.022em - **Skala judul** — 31px → 22px → 19px → 17px - **Lebar baca** — dibatasi 65–75 karakter per baris ## Dibangun di Atas Astro Astro menghasilkan HTML statis secara default. Arsitektur pulau berarti komponen interaktif melakukan hidrasi secara independen sementara sisanya tetap statis. Pulau interaktif di Astro-Theme-Aither sangat minimal: - **Pemilih tema** — sakelar Light / Dark / System dengan animasi View Transitions API - **Pemilih bahasa** — perpindahan lokal mulus dengan penyimpanan `localStorage` - **Deteksi lokal** — deteksi otomatis bahasa browser - **Navigasi mobile** — menu hamburger responsif ## Fitur - **Tailwind CSS v4** — token desain `@theme` - **Tipografi Apple HIG** — parameter teks body 17px / 1.47 / -0.022em - **View Transitions API** — animasi circular reveal untuk switching tema - **i18n** — dukungan multi-bahasa - **Post pinning** — sematkan post penting ke atas - **Content Collections** — Markdown type-safe - **Mode gelap** — Light / Dark / System - **SEO** — Open Graph, URL kanonik - **RSS + Sitemap** — otomatis - **Google Analytics** — opsional, di Partytown Web Worker - **Testing** — Vitest + Playwright - **Cloudflare Pages** — alur deploy dengan pratinjau PR ## Untuk Siapa Ini - **Blogger personal** yang ingin tulisan mereka jadi pusat perhatian - **Penulis teknis** yang butuh rendering blok kode yang baik - **Penulis multibahasa** yang butuh i18n bawaan - **Developer** yang menghargai codebase yang rapi dan terstruktur Tulis tentang apa saja — tipografi akan membuatnya terlihat bagus.

📝 Panduan Gaya Markdown

Fri, 02 Jan 2026 08:00:00 GMT

Post ini mendemonstrasikan setiap fitur Markdown yang didukung oleh Astro-Theme-Aither. Gunakan sebagai referensi saat menulis post Anda sendiri. Bookmark halaman ini — panduan ini mencakup seluruh opsi pemformatan yang tersedia. ## Heading Gunakan `##` untuk heading seksi, `###` untuk subseksi, dan `####` untuk sub-subseksi. Hindari `#` dalam konten post — judul post sudah dirender sebagai heading level atas. ### Heading Level Ketiga Heading level ketiga ideal untuk memecah seksi menjadi topik-topik yang berbeda. Mereka menciptakan hierarki visual tanpa terlalu menonjol. #### Heading Level Keempat Heading level keempat cocok untuk subseksi yang lebih detail. Gunakan dengan hemat — jika outline Anda lebih dalam dari empat level, pertimbangkan untuk merestrukturisasi konten Anda. ### Praktik Terbaik Heading Beberapa panduan untuk penggunaan heading yang efektif: - **Jangan lewati level** — dari `##` ke `###`, jangan dari `##` langsung ke `####`. Melewati level merusak outline dokumen dan bisa membingungkan screen reader. - **Buat heading deskriptif** — "Konfigurasi" lebih baik dari "Hal-hal Setup". Pembaca memindai heading sebelum memutuskan apakah akan membaca suatu seksi. - **Gunakan sentence case** — hanya kapitalisasi kata pertama dan nama proper. ## Paragraf dan Line Break Teks paragraf mengalir secara natural. Sisakan baris kosong antar paragraf untuk memisahkannya. Ini adalah paragraf kedua. Jaga paragraf tetap fokus pada satu ide untuk pengalaman membaca terbaik. Saat menulis untuk web, paragraf yang lebih pendek cenderung bekerja lebih baik dari blok teks yang panjang. Paragraf tiga hingga lima kalimat adalah unit membaca yang nyaman di layar. Jika paragraf melebihi enam atau tujuh kalimat, pertimbangkan untuk memecahnya. Line break tunggal dalam paragraf (tanpa baris kosong) akan diperlakukan sebagai spasi, bukan baris baru. Jika Anda membutuhkan line break keras tanpa paragraf baru, akhiri baris dengan dua spasi atau gunakan tag `
` — meskipun ini jarang diperlukan dalam praktik. ## Penekanan - **Teks tebal** dengan `**tanda bintang ganda**` - *Teks miring* dengan `*tanda bintang tunggal*` - ***Tebal dan miring*** dengan `***tanda bintang tiga***` - ~~Coret~~ dengan `~~tilde ganda~~` ### Kapan Menggunakan Setiap Gaya **Tebal** paling cocok untuk istilah kunci, peringatan penting, atau definisi — apapun yang tidak boleh terlewat pembaca bahkan saat memindai. Gunakan untuk frasa paling penting dalam paragraf, bukan untuk seluruh kalimat. *Miring* untuk penekanan dalam kalimat, judul buku dan publikasi, istilah teknis saat penggunaan pertama, dan frasa asing. Memberikan penekanan lebih ringan dari tebal. ~~Coret~~ berguna untuk menunjukkan koreksi, informasi yang sudah usang, atau item yang selesai dalam changelog. Memiliki cakupan penggunaan yang lebih sempit tapi berharga saat dibutuhkan. ## Link [Link inline](https://astro.build) dengan sintaks `[teks](url)`. Link juga bisa mereferensikan post lain di situs Anda menggunakan path relatif. Gunakan teks link yang deskriptif — "baca panduan markdown" lebih baik dari "klik di sini." Teks link yang baik membantu pembaca dan mesin pencari memahami ke mana link mengarah. Anda juga bisa membuat link yang terbaca alami dalam konteks kalimat. Misalnya: [dokumentasi Astro](https://docs.astro.build) mencakup setiap fitur secara detail. ## Daftar Daftar tak berurutan: - Item pertama - Item kedua - Item bersarang - Item bersarang lain - Item ketiga Daftar berurutan: 1. Langkah pertama 2. Langkah kedua 1. Sub-langkah satu 2. Sub-langkah dua 3. Langkah ketiga Daftar tugas: - [x] Setup proyek - [x] Tulis post pertama - [ ] Deploy ke produksi ### Tips Format Daftar Daftar adalah salah satu alat paling efektif dalam penulisan web. Mereka memecah teks padat, membuat informasi bisa dipindai, dan mengkomunikasikan urutan atau koleksi item dengan jelas. **Gunakan daftar tak berurutan** saat item tidak memiliki urutan inheren — fitur, persyaratan, opsi, atau contoh. **Gunakan daftar berurutan** saat urutan penting — langkah dalam proses, item berperingkat, atau instruksi yang harus diikuti secara berurutan. **Gunakan daftar tugas** untuk melacak kemajuan, checklist proyek, atau item to-do. Jaga item daftar parallel dalam struktur. Jika item pertama dimulai dengan kata kerja, semua item harus dimulai dengan kata kerja. ## Kutipan > Tujuan abstraksi bukan untuk menjadi samar, tapi untuk menciptakan level semantik baru di mana seseorang bisa sepenuhnya presisi. > > — Edsger W. Dijkstra Kutipan bersarang: > Level pertama > > > Level kedua > > > > > Level ketiga ### Penggunaan Kutipan Kutipan melayani beberapa tujuan di luar mengutip orang terkenal: - **Mengutip sumber** — saat mereferensikan artikel, buku, atau dokumen lain - **Callout** — menyoroti informasi penting atau peringatan - **Kutipan gaya email** — menunjukkan apa yang seseorang katakan dalam percakapan yang Anda tanggapi - **Pull quote** — menarik perhatian pada bagian kunci dari artikel Anda sendiri Saat menggunakan kutipan dengan atribusi, tempatkan nama penulis di baris terpisah didahului dengan tanda dash em, seperti yang ditunjukkan pada contoh Dijkstra di atas. ## Kode `Kode` inline dengan backtick. Gunakan kode inline untuk nama fungsi seperti `getPublishedPosts()`, path file seperti `src/content/posts/`, instruksi command-line seperti `pnpm dev`, dan nilai literal apapun yang muncul dalam teks berjalan. Blok kode dengan syntax highlighting: ```typescript interface Post { title: string; date: Date; description?: string; tags?: string[]; draft?: boolean; } function getPublishedPosts(posts: Post[]): Post[] { return posts .filter((post) => !post.draft) .sort((a, b) => b.date.getTime() - a.date.getTime()); } ``` ```css @theme { --font-sans: 'system-ui', sans-serif; --font-serif: 'ui-serif', 'Georgia', serif; } ``` ### Tips Blok Kode Selalu tentukan identifier bahasa setelah triple backtick pembuka. Ini mengaktifkan syntax highlighting, yang secara dramatis meningkatkan keterbacaan. Identifier umum termasuk `typescript`, `javascript`, `css`, `html`, `bash`, `json`, `python`, dan `markdown`. Untuk perintah shell, gunakan `bash` atau `sh`: ```bash # Install dependensi pnpm install # Jalankan server development pnpm dev # Build untuk produksi pnpm build ``` Untuk file konfigurasi JSON: ```json { "name": "my-blog", "version": "1.0.0", "scripts": { "dev": "astro dev", "build": "astro build" } } ``` Jaga blok kode tetap fokus. Tampilkan hanya baris yang relevan daripada menempel seluruh file. Jika konteks diperlukan, tambahkan komentar yang menunjukkan di mana kode berada. ## Tabel | Fitur | Status | Catatan | |---|---|---| | Mode gelap | Didukung | Terang / Gelap / Sistem | | Umpan RSS | Bawaan | `/rss.xml` | | Sitemap | Otomatis | Via `@astrojs/sitemap` | | SEO | Bawaan | Open Graph + URL kanonik | Kolom rata kanan dan tengah: | Kiri | Tengah | Kanan | |:---|:---:|---:| | Teks | Teks | Teks | | Teks lebih panjang | Teks lebih panjang | Teks lebih panjang | ### Panduan Tabel Tabel paling cocok untuk data terstruktur dengan kolom dan baris yang jelas. Ideal untuk perbandingan fitur, opsi konfigurasi, parameter API, dan data referensi. Jaga tabel tetap sederhana. Jika tabel memiliki lebih dari lima atau enam kolom, akan sulit dibaca di perangkat mobile. Pertimbangkan untuk memecah tabel kompleks menjadi beberapa tabel lebih kecil, atau gunakan format daftar sebagai gantinya. Perataan kolom dikontrol dengan tanda titik dua di baris pemisah: - `:---` untuk rata kiri (default) - `:---:` untuk rata tengah - `---:` untuk rata kanan Gunakan rata kanan untuk data numerik agar titik desimal sejajar secara visual. ## Garis Horizontal Gunakan `---` untuk membuat garis horizontal: --- Konten setelah garis. Garis horizontal berguna untuk memisahkan seksi utama post, menandakan pergeseran topik, atau memecah secara visual artikel yang sangat panjang. Gunakan dengan bijak — jika Anda membutuhkan pemisah yang sering, heading mungkin pilihan struktural yang lebih baik. ## Gambar Gambar didukung dengan sintaks Markdown standar: ```markdown ![Teks alt](./image.jpg) ``` Theme ini berfokus pada tipografi, tapi gambar berfungsi saat Anda membutuhkannya. ### Praktik Terbaik Gambar - **Selalu sertakan teks alt** — penting untuk aksesibilitas dan juga muncul saat gambar gagal dimuat - **Gunakan nama file deskriptif** — `dashboard-error-state.png` lebih baik dari `screenshot-2.png` - **Optimalkan ukuran file** — kompres gambar sebelum menambahkannya ke repositori; gambar besar memperlambat loading halaman - **Pertimbangkan alur baca** — tempatkan gambar dekat teks yang mereferensikannya, bukan paragraf jauhnya ## Kesimpulan Fitur Markdown yang dijelaskan dalam panduan ini mencakup sebagian besar yang Anda butuhkan untuk menulis blog. Kunci Markdown yang baik adalah menggunakan elemen yang tepat untuk tujuan yang tepat: heading untuk struktur, penekanan untuk kepentingan, daftar untuk koleksi, blok kode untuk konten teknis, dan paragraf untuk yang lainnya. Tulis dengan jelas, format dengan konsisten, dan biarkan tipografi bekerja.

👋 Halo Dunia

Thu, 01 Jan 2026 08:00:00 GMT

Selamat datang di Astro-Theme-Aither. Ini adalah tema blog yang dibangun atas satu keyakinan: tulisan yang baik layak mendapat tipografi yang baik. Font sans-serif, ritme baca yang bersih, dan tata letak yang tidak menghalangi. Semuanya di sini melayani satu tujuan — membuat kata-kata Anda terlihat dan terasa indah. ## Mengapa Tema Blog Lagi Web penuh dengan tema blog, jadi pertanyaan yang wajar: mengapa membuat yang lain? Jawabannya ada pada prioritas. Kebanyakan tema mengoptimalkan dampak visual — gambar unggulan besar, tata letak kompleks, dan transisi animasi. Ini terlihat memukau dalam demonstrasi, tetapi menghalangi saat seseorang benar-benar duduk membaca artikel 2.000 kata. Astro-Theme-Aither dimulai dari premis berbeda. Konten adalah produknya. Tugas tema adalah menyajikan konten itu dengan perhatian yang layak. Filosofi ini juga berlaku untuk keputusan teknis. Tema ini mengirim sekitar 0,5 KB JavaScript sisi klien — cukup untuk toggle tema. Sisanya adalah HTML dan CSS statis. Tidak ada pergeseran layout, spinner loading, atau framework JavaScript yang melakukan hydration di latar belakang. ## Memulai 1. **Klon repositori** — gunakan tombol template GitHub atau klon langsung dengan `git clone` 2. **Instal dependensi** — jalankan `pnpm install` 3. **Konfigurasi situs** — edit `src/config/site.ts` 4. **Ganti konten sampel** — ganti post di `src/content/posts/` dengan file Markdown Anda 5. **Mulai pengembangan** — jalankan `pnpm dev` 6. **Rilis** — push ke GitHub dan biarkan alur CI menangani penerapan ke Cloudflare Pages ### Struktur Proyek ``` src/ ├── components/ # Komponen Astro yang dapat digunakan ulang ├── config/ # Konfigurasi situs ├── content/ # Post Markdown dan konten Anda ├── layouts/ # Layout halaman (Layout.astro) ├── pages/ # Halaman route └── styles/ # CSS global dengan token Tailwind v4 ``` ### Menulis Post Pertama Buat file `.md` baru di `src/content/posts/` dengan frontmatter berikut: ```markdown --- title: Judul Post Anda date: "2026-01-15T16:00:00+08:00" category: General description: Ringkasan singkat untuk SEO dan pratinjau sosial tags: [Topik, Lainnya] --- Konten Anda dimulai di sini. ``` ## Yang Anda Dapatkan ### Fitur Konten - **Umpan RSS** — otomatis di `/rss.xml` - **Sitemap** — otomatis via `@astrojs/sitemap` - **Tag meta SEO** — Open Graph, Twitter cards, URL kanonik - **Mode gelap** — toggle tiga arah (Terang / Gelap / Sistem) dengan persistence `localStorage` - **Halaman kategori dan tag** — arsip terorganisir ### Fitur Developer - **TypeScript** — mode strict, komponen dan utilitas bertipe penuh - **Content Collections** — Markdown type-safe dengan validasi frontmatter - **Tailwind CSS v4** — token desain `@theme` - **Vitest + Playwright** — unit test dan E2E test terintegrasi di CI - **Cloudflare Pages** — alur penerapan dengan URL pratinjau PR ### Performa Karena tema menghasilkan HTML statis dengan JavaScript minimal, performa sangat baik secara default. Harapkan skor Lighthouse 100 di semua kategori. ## Kustomisasi - **Warna** — edit custom properties CSS di `src/styles/global.css` - **Font** — ganti nilai font-family di konfigurasi tema Tailwind - **Navigasi** — update array link navigasi di `src/config/site.ts` - **Analytics** — tambahkan ID Google Analytics di konfigurasi situs ## Catatan tentang Filosofi Desain Kesederhanaan visual tema ini disengaja, tapi bukan berarti kesederhanaan teknis. Di balik layar, tema ini menangani banyak hal: skala tipografi responsif, rasio kontras warna yang aksesibel, struktur HTML semantik yang benar, dan perhatian cermat pada pengalaman baca di semua ukuran layar. Desain yang baik tidak terlihat. Saat Anda membaca artikel dengan tema ini dan hanya menikmati tulisannya tanpa menyadari temanya — itulah desain bekerja seperti yang dimaksudkan. Selamat menulis.