Tantangan
Doctype, sumber daya desain yang dipimpin oleh Andrew Korf, membutuhkan cara untuk menstandarisasi pola desain di berbagai halaman dokumentasi dan proyek. Alur kerja yang ada melibatkan copy-paste cuplikan HTML, yang menyebabkan inkonsistensi desain dan mimpi buruk pemeliharaan.
Setiap kali gaya tombol berubah, itu harus diperbarui secara manual di puluhan halaman. Mereka membutuhkan Single Source of Truth—pustaka UI tangguh yang berfungsi seperti kerangka kerja JavaScript modern (seperti komponen React) tetapi berjalan sepenuhnya pada mesin Jekyll yang ringan.
Proses
Kami memanfaatkan kemampuan bawaan Jekyll untuk merekayasa pustaka komponen "cerdas", memperlakukan template Liquid sebagai komponen UI fungsional.
Desain Atomik dengan Liquid
Kami beralih dari template halaman monolitik dan mengadopsi metodologi Atomic Design.
- Smart Includes: Kami mengembangkan pustaka includes Liquid yang diparameterisasi (contoh:
{% include button.html type="primary" link="..." %}). Ini memungkinkan pembuat konten menyisipkan elemen UI kompleks dengan kode yang sederhana dan mudah dibaca. - Kontrol "Props": Kami merekayasa komponen untuk menerima variabel (props) untuk warna, ukuran, dan status, memberikan fleksibilitas kepada tim desain tanpa menyentuh CSS inti.
Pustaka Jekyll Murni
Alih-alih mengandalkan skrip sisi-klien yang berat, kami mengemas sistem ini sebagai Tema/Gem Jekyll.
- Arsitektur Modular: Kami menyusun SCSS dan HTML sedemikian rupa sehingga seluruh sistem desain dapat diimpor ke proyek Jekyll baru mana pun sebagai pustaka.
- Dokumentasi Otomatis: Kami membangun bagian "Style Guide" yang secara otomatis me-render setiap komponen di pustaka, memastikan dokumentasi tidak pernah tidak sinkron dengan kode.
Hasil
Doctype sekarang beroperasi di atas fondasi yang skalabel dan efisien secara kode.
- Kecepatan Pengembangan: Membuat halaman baru 3x lebih cepat karena pengembang cukup merakit komponen yang sudah dibuat sebelumnya daripada menulis HTML dari awal.
- Konsistensi Brand: Pembaruan pada pustaka inti (misalnya, mengubah ukuran font) secara instan menyebar ke seluruh situs selama proses build.
- Tanpa Bloat: Dengan menggunakan fitur asli Jekyll alih-alih menambahkan kerangka kerja JavaScript, situs ini mempertahankan skor Performa 100 yang sempurna di Lighthouse.