Premium Docs UI: Sticky TOC + Motion + Code Blocks

Premium bir belge arayüzü sadece iyi görünen değil, okuyucuyu içerikte yönlendiren bir sistemdir. Bu yazıda bu sitenin belge bileşenlerini nasıl kurduğumu anlatıyorum.

Sticky TOC

İçindekiler tablosu, okuyucunun uzun makalelerde kaybolmamasını sağlar. Intersection Observer ile aktif bölümü takip ediyoruz.

toc.tsx

TypeScript

const observer = new IntersectionObserver(
  (entries) => {
    const visible = entries
      .filter((e) => e.isIntersecting)
      .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
    if (visible.length > 0) setActiveId(visible[0].target.id);
  },
  { rootMargin: "-80px 0px -65% 0px" }
);

Kod Blokları

Shiki ile çift tema (light/dark) desteği. CSS değişkenleri ile tema değişimi anında yansır, JavaScript gerektirmez.

Okuma İlerlemesi

--scroll CSS değişkeni GSAP/ScrollTrigger tarafından güncellenir. Okuma çubuğu bu değeri doğrudan CSS ile tüketir:

globals.css

CSS

.reading-progress {
  transform: scaleX(var(--scroll));
  transform-origin: left;
}