How to Automatically Generate Table of Contents from Headings

function generateTOC(contentSelector, tocSelector, levels = 'h2, h3') {
  const content = document.querySelector(contentSelector);
  const tocContainer = document.querySelector(tocSelector);
  const headings = content.querySelectorAll(levels);

  if (headings.length < 2) return; // Skip TOC on short articles

  const list = document.createElement('ol');

  headings.forEach((heading, index) => {
    if (!heading.id) {
      heading.id = `section-${index}`;
    }

    const listItem = document.createElement('li');
    const link = document.createElement('a');
    link.href = `#${heading.id}`;
    link.textContent = heading.textContent;

    listItem.appendChild(link);
    list.appendChild(listItem);
  });

  tocContainer.appendChild(list);
}

generateTOC('.article-content', '#toc');

function slugify(text) {
  return text
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, '')   // Remove special characters
    .replace(/[\s_]+/g, '-')    // Replace spaces/underscores with hyphens
    .replace(/^-+|-+$/g, '');   // Trim leading/trailing hyphens
}

function assignUniqueIds(headings) {
  const usedIds = new Set();

  headings.forEach(heading => {
    if (heading.id) {
      usedIds.add(heading.id);
      return;
    }

    let baseId = slugify(heading.textContent);
    let finalId = baseId;
    let counter = 1;

    // Handle duplicate headings by appending a counter
    while (usedIds.has(finalId)) {
      finalId = `${baseId}-${counter}`;
      counter++;
    }

    heading.id = finalId;
    usedIds.add(finalId);
  });
}

function generateNestedTOC(contentSelector, tocSelector) {
  const content = document.querySelector(contentSelector);
  const tocContainer = document.querySelector(tocSelector);
  const headings = content.querySelectorAll('h2, h3');

  if (headings.length < 2) return;

  assignUniqueIds(headings); // From the slugify function above

  const nav = document.createElement('nav');
  nav.setAttribute('aria-label', 'Table of contents');

  let currentList = document.createElement('ol');
  let currentSubList = null;
  nav.appendChild(currentList);

  headings.forEach(heading => {
    const link = document.createElement('a');
    link.href = `#${heading.id}`;
    link.textContent = heading.textContent;

    const listItem = document.createElement('li');
    listItem.appendChild(link);

    if (heading.tagName === 'H2') {
      currentList.appendChild(listItem);
      currentSubList = document.createElement('ol');
      listItem.appendChild(currentSubList);
    } else if (currentSubList) {
      currentSubList.appendChild(listItem);
    }
  });

  tocContainer.appendChild(nav);
}

function highlightActiveSection(contentSelector, tocSelector) {
  const headings = document.querySelectorAll(`${contentSelector} h2, ${contentSelector} h3`);
  const tocLinks = document.querySelectorAll(`${tocSelector} a`);

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        tocLinks.forEach(link => link.classList.remove('active'));
        const activeLink = document.querySelector(`${tocSelector} a[href="#${entry.target.id}"]`);
        if (activeLink) activeLink.classList.add('active');
      }
    });
  }, { rootMargin: '0px 0px -70% 0px' });

  headings.forEach(heading => observer.observe(heading));
}

highlightActiveSection('.article-content', '#toc');