[Enhancement]: Notes Pages Have No Table of Contents — Add Auto-Generated TOC from Markdown Headings

[divyanshim27]

Summary

openCSE's notes content is structured around subjects and topics, but when a user opens a long notes page, there is no table of contents sidebar. They must scroll through the entire document to find a specific section. This is particularly painful for content-dense topics like OS Process Management, DBMS Normalization, or DSA Arrays where a single page may cover 10+ subtopics.

Problem

• Long notes pages have no section navigation.
• There is no auto-generated TOC from the ## and ### headings in the markdown content.
• Users on mobile cannot quickly jump between sections.
• This is a standard feature on every documentation platform (MDN, ReadTheDocs, GitBook, etc.).

Proposed Solution

I will build a TableOfContents component in TypeScript/React that:

1. Parses headings from the rendered page's DOM (or directly from the markdown AST if remark is already used in the pipeline).
2. Renders a sticky sidebar (on desktop) or a collapsible dropdown (on mobile) listing all H2 and H3 headings with anchor links.
3. Highlights the active section using IntersectionObserver as the user scrolls — the current section is visually distinguished in the TOC.

// components/TableOfContents.tsx
export function TableOfContents({ headings }: { headings: Heading[] }) {
  const [activeId, setActiveId] = useState('');

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) setActiveId(entry.target.id);
        });
      },
      { rootMargin: '-20% 0% -80% 0%' }
    );
    headings.forEach(h => {
      const el = document.getElementById(h.id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, [headings]);

  return (
    <nav className="toc-sidebar">
      {headings.map(h => (
        
          key={h.id}
          href={`#${h.id}`}
          className={activeId === h.id ? 'toc-active' : ''}
          style={{ paddingLeft: h.level === 3 ? '1rem' : '0' }}
        >
          {h.text}
        </a>
      ))}
    </nav>
  );
}

4. Auto-IDs will be added to headings via the existing markdown rendering pipeline.
5. Fully responsive — collapses on screens below 768px.

Please assign this to me. This is a self-contained component with no new dependencies.

Labels: enhancement, ux, documentation, help wanted, GSSoC 2026

[parthkulkarni2004]

Hi, I’d like to contribute to this project. Could you please assign me an issue that I can work on? I’d be happy to contribute. Thank you! 🙌