feat: Add toc

[Yusu-f]

added toc feature.

use [toc-ignore] in MDX file to exclude a heading from the TOC

[vercel[bot]]

@Yusu-f is attempting to deploy a commit to the Helicone Team on Vercel.

A member of the Team first needs to authorize it.

[LinaLam]

Merged a new TOC

[fumedev[bot]]

Summary

• Introduces a Table of Contents (TOC) feature for MDX files.
• Allows exclusion of headings from the TOC using the syntax [toc-ignore].
• Adds a new component TableOfContents to render the TOC based on extracted headings.
• Updates existing blog page to integrate new TOC feature dynamically.
• Implements heading extraction logic using unist-util-visit and github-slugger for generating IDs.

🧪 2 passed

🟢 Browser Testing: TOC Scroll Behavior With Dynamic Content

# TOC Scroll Behavior With Dynamic Content Test

Summary

I tested the Table of Contents (TOC) scroll behavior and section highlighting functionality in blog posts, specifically verifying dynamic content interaction, rapid scrolling effects, and synchronization between TOC and visible content.

Implementation

I first set up the development environment by installing dependencies and starting the bifrost app on port 3002, then navigated to the blog post at /blog/open-webui-alts which contained multiple sections for testing. I performed rapid scrolling through sections and clicked TOC links to verify navigation and highlighting behavior.

Expected Behavior

The TOC was expected to maintain accurate section highlighting during rapid scrolling, provide smooth scrolling when clicking TOC links, update URL anchors correctly, and maintain proper scroll position synchronization with the visible content. The TOC should also remain sticky while scrolling and properly highlight the current section in view.

Actual Behavior

The TOC implementation worked as expected - section highlighting remained accurate during rapid scrolling, links smoothly scrolled to correct sections, URL anchors updated properly, and the TOC stayed synchronized with visible content. The sticky positioning worked correctly and section highlighting accurately reflected the current viewing position throughout all scroll behaviors.

Conclusion

The TOC scroll behavior with dynamic content test passed successfully, with all functionality working as intended.

🟢 Browser Testing: Verify TOC Component Across Devices and Screen Orientations

# TOC Component Responsive Layout Testing

Summary

I tested the Table of Contents (TOC) component's responsive behavior across different screen sizes and orientations to verify proper display and functionality.

Implementation

I set up the local development environment by starting the bifrost server on port 3002, navigated to the blog post at /blog/open-webui-alts, and tested the TOC component across three viewport sizes:

• Mobile (375x667 portrait, 667x375 landscape)
• Tablet (768x1024)
• Desktop (default browser size)

Expected Behavior

The TOC component should:

• Maintain visibility and usability across all screen sizes
• Stay fixed/sticky during scrolling
• Provide working touch/click interactions for navigation
• Show proper highlighting of current section
• Adapt its layout appropriately for different screen orientations
• Not interfere with main content readability

Actual Behavior

The TOC component:

• Remained visible and properly positioned on all tested viewports
• Maintained sticky behavior during scrolling
• Successfully handled touch/click interactions
• Correctly highlighted active sections
• Adapted well to both portrait and landscape orientations
• Preserved content readability across all screen sizes
• Links successfully scrolled to correct sections when clicked

Conclusion

Test passed - the TOC component demonstrated proper responsive behavior across all required viewport sizes and orientations while maintaining full functionality.