Garis TOC Blog yang Memudar Kayak Timeline Notes

Garis kotak yang bikin TOC kerasa kaku

Gue lagi ngecek tampilan Table of Contents (TOC) di blog pribadi, buka file frontend/src/components/BlogToc.tsx. Yang keliatan di layar itu daftar sub-heading pakai garis pembatas kiri datar: border-l border-border pl-3. Kerasa kaku banget, kayak kurung vertikal yang nggak nyambung ke mana-mana. Pengen efek "timeline" yang halus.

Gue kepikiran, gimana bikin garisnya menipis ke bawah biar sub-heading terakhir nggak gantung nanggung di garis tegas. Di aplikasi notes kayak Things atau Apple Notes, garisnya fade out pelan-pelan. Itu yang bikin mata nyaman pas scroll. Commit 2eaa16e gue bikin buat ngubah ini.

Ternyata harus pakai elemen sendiri. Gue cabut border-l dari div pembungkus child itu dan ganti dengan <span> absolut yang nyampe tinggi container.

Spine gradient yang memudar

Awalnya gue duga cukup ganti warna border-l jadi transparan di bawah. Tapi CSS border nggak bisa gradient, dia garis solid yang nggak kenal stop warna, jadi pendekatan "opacity di ujung" langsung mentok. Makanya gue pakai elemen sendiri, bukan ngutil border.

Potongan yang gue ubah di BlogToc.tsx kira-kira gini:

<div className="relative ml-[11px] border-l border-border pl-3">
  {children.map((child) => (
    <a className="relative block ...">
      <span className="absolute -left-3 top-1/2 h-px w-2.5 bg-border" />
      {child.text}
    </a>
  ))}
</div>

<div className="relative ml-[11px] pl-3">
  <span
    aria-hidden="true"
    className="absolute top-0 bottom-1 left-0 w-px bg-gradient-to-b from-primary/40 via-border to-transparent"
  />
  {children.map((child) => (
    <a className="relative block ...">
      <span className="absolute -left-3 top-1/2 h-px w-3 bg-border" />
      {child.text}
    </a>
  ))}
</div>

Di CSS, arah default linear-gradient emang to bottom [1], jadi garisnya otomatis lari ke bawah dan memudar ke transparan tanpa gue tulis sudut apa-apa. Tiga stop warnanya: mulai dari primary di 40% opacity, lewat border di tengah, terus transparent di ujung bawah. Hasilnya bukan garis mati, tapi "tulang" yang menipis.

Detail kecil yang gue pelajari: tinggi spine gue kasih top-0 bottom-1, bukan bottom-0. Alasannya simpel — node stub terakhir di tiap child itu top-1/2, dan kalau spine sampai mentok ke bawah (bottom-0) garisnya bakal nembus lewat bawah stub terakhir. Kasih jeda bottom-1 biar spine "berhenti" pas di stub terakhir, nggak keliatan nerusak garis.

Kenapa tetep pakai bg-gradient-to-b? Tailwind v4 udah resmi ganti utility itu jadi bg-linear-to-b [2]. Dokumentasi v4 malah kasih contoh bg-linear-to-r di upgrade guide-nya [3]. Tapi pas gue ngecek di project yang pakai tailwindcss 4.3.3, syntax lama itu masih ter-compile jadi CSS valid. Legacy-nya di-alias, nggak broken sama sekali. Gue tinggal di commit ini karena kebiasaan, tapi dokumentasi resmi udah minta pindah ke bg-linear-*.

Node stub tiap child juga gue utak-atik dikit. Dari w-2.5 gue perpanjang ke w-3 biar nyambung mulus ke spine gradient tadi, nggak ada celah kosong antara baris dan garis. Murni CSS utility, nggak butuh JS sama sekali buat dapet efek ini.

Gue pribadi lebih suka gradient spine ketimbang border polos buat TOC. Border polos tuh keliatan kayak dokumen hukum, padahal ini blog yang mau dibaca santai. Garis yang memudar ngasih tau mata: "daftar ini kelar di sini," tanpa kasih batas keras.

Gue push commit 2eaa16e itu dengan pesan "style(blog): timeline spine on TOC child list". Skrng sub-heading terakhir di TOC udah bisa napas, nggak kebelenggu garis tegas lagi.

Satunya hal: efek ini emang cuma estetika, bukan aksesibilitas. Kalau pembaca pakai "reduce motion" atau skala abu-abu, spine gradient tetep keliatan beda dari border polos, tapi nggak sampe bikin konten susah dibaca. Gue taruh aria-hidden="true" di span itu persis buat alasan ini — dia murni hiasan, nggak usah dibacakan screen reader sebagai garis. Buat kasus lain kayak indikator progress atau connector timeline event, teknik absolute + w-px + gradient ini bisa dipakai lagi persis sama.

Intinya, jangan takut buang border-l kalau efeknya kerasa kaku. Satu <span> absolut plus gradient udah cukup buat bikin daftar isi yang napasnya lega, dan di Tailwind itu cuma soal ganti satu utility class.

Sumber

• [1] MDN Web Docs - linear-gradient()
• [2] Tailwind CSS v4 Docs - Gradient color stops
• [3] Tailwind CSS v4 Docs - Upgrade guide