Setelah data siap, fokus saya pindah ke pengalaman membaca. Saya ingin pengunjung langsung paham isi blog begitu membuka beranda: ada satu artikel unggulan, daftar artikel terbaru, kategori yang aktif, dan sidebar artikel populer. Pola ini sederhana, tetapi efektif untuk blog yang mengutamakan eksplorasi konten.
Beranda dibagi menjadi tiga lapisan
Di HomeController, saya mengambil satu artikel terbaru sebagai featured article, enam artikel berikutnya sebagai daftar utama, lalu beberapa artikel dengan view tertinggi untuk sidebar populer. Selain itu, kategori juga dihitung berdasarkan jumlah artikel yang sudah published agar sidebar hanya menampilkan kategori yang benar-benar punya isi.
Komponen kecil membuat Blade tetap enak dirawat
Untuk listing artikel, saya membuat komponen x-article-card. Keuntungan paling terasa adalah konsistensi tampilan dan potongan kode view yang jauh lebih bersih. Ketika saya ingin mengubah gaya kartu, saya cukup menyentuh satu komponen tanpa memburu markup yang tersebar di banyak file.
Layout publik dibuat sesederhana mungkin
Layout utama memuat navbar, pencarian artikel, footer, meta Open Graph, dan pemanggilan asset Vite. Saya sengaja menjaga interaksi JavaScript tetap tipis. Bahkan menu mobile cukup ditangani dengan script kecil untuk toggle class. Prinsipnya, selama Blade dan Tailwind masih cukup, saya tidak ingin memaksa kompleksitas tambahan.
Tailwind Typography menyelamatkan banyak waktu
Isi artikel dirender sebagai HTML dari editor admin, lalu dibungkus dengan kelas prose. Plugin typography membuat heading, paragraf, link, blockquote, dan code block langsung punya ritme visual yang nyaman. Saya hanya menambahkan beberapa penyesuaian kecil pada warna, font heading, dan tampilan elemen code agar selaras dengan brand blog.
- Headline memakai font serif agar terasa editorial.
- Metadata artikel dibuat ringkas: tanggal, estimasi baca, dan jumlah view.
- Sidebar berfungsi sebagai pemandu, bukan gangguan.
Hasil akhirnya bukan homepage yang penuh efek, tetapi halaman yang cepat dipahami dan mendorong pembaca untuk membuka artikel kedua, ketiga, dan seterusnya.