Desain #Desain#Astro

✨ Mengapa Astro-Theme-Aither

2026-01-03 · 332 kata · 1 menit

Tema Astro yang dirancang untuk AI dan percaya teks itu sendiri sudah indah.

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.

Selesai · Terima kasih telah membaca

Komentar