Lewati ke konten
Menambah komponen
Dokumentasi Pratinjau

Menambah komponen

Alur kerja delapan langkah, penjaga otomatis, dan daftar periksa sebelum mengirim perubahan.

Alur kerja

  1. 1
    Cari dulu, jangan bikin
    Periksa 42 halaman pratinjau. Kalau ada komponen dengan peran yang sama, ubah yang itu.
  2. 2
    Tambahkan token bila perlu
    Nilai baru masuk ke tokens.css dulu, lalu dua turunannya. Lihat Token.
  3. 3
    Tulis gaya
    Di bagian komponen pada themekit/classroom.css. Ikuti susunan blok, elemen, varian, keadaan.
  4. 4
    Buat halaman galeri
    Berkas baru di components/: contoh hidup, blok "Lihat kode", dan tombol salin.
  5. 5
    Daftarkan di tools/build.py
    Tambahkan ke daftar kelompok. Navigasi seluruh halaman dibangun dari daftar itu.
  6. 6
    Bangun ulang navigasi
    python3 tools/build.py — menulis ulang sidebar semua halaman sekaligus.
  7. 7
    Perbarui pratinjau
    python3 tools/build.py --thumbs memotret ulang halaman pratinjau.
  8. 8
    Jalankan penjaga
    python3 tools/check.py — semua harus lolos sebelum dikirim.

Kenapa navigasi dibangun, bukan disalin

Sebelumnya sidebar disalin ke 42 berkas. Satu perubahan harus diulang di semuanya, dan setiap kali ada halaman yang tertinggal. Sekarang tools/build.py memegang daftar halaman, dan setiap berkas hanya menyimpan penanda:

<nav class="ck-sidebar__nav" data-ck-nav="komponen" aria-label="Navigasi themekit">
<!-- ck:nav -->
</nav>

Isi di antara penanda itu yang ditulis ulang. Jangan menyunting hasilnya langsung — akan tertimpa pada pembangunan berikutnya.

Penjaga otomatis

tools/check.py menjalankan tujuh pemeriksaan. Semuanya harus lolos.

PemeriksaanMenangkap
Tautan internalTautan yang menunjuk berkas yang tidak ada
Nilai mentahWarna hex, rgb(), atau ukuran px di luar blok token
Token sinkronToken yang ada di tokens.css tapi belum di tokens.json atau preset Tailwind
Cakupan komponenKomponen CSS tanpa halaman galeri
Skrip sebaris<script> di halaman komponen
Navigasi sinkronSidebar yang melenceng dari tools/build.py
Aksesibilitas dasarTombol tanpa label, gambar tanpa teks alternatif, judul melompat
 
$ python3 tools/check.py
classroom-themekit — uji mandiri
  halaman komponen : 42
  ukuran CSS       : 57 KB
  ukuran JS        : 21 KB
  token            : 138

Semua pemeriksaan lolos.

Gaya penulisan

  • Bahasa Indonesia, kalimat pendek, tanpa basa-basi.
  • Jelaskan mengapa, bukan hanya apa. "Jangan lupa defer" kurang berguna; "tanpa defer skrip berjalan sebelum markup ada" berguna.
  • Setiap contoh harus bisa disalin dan langsung jalan.
  • Sebut nama kelas yang sebenarnya, jangan menyamarkan.
  • Kalau ada nilai yang bisa diukur (rasio kontras, ukuran berkas, jumlah token), tulis angkanya.

Daftar periksa sebelum mengirim

classroom-themekitdokumentasi