Add table of contents sidebar to public page view

[PttCodingMan]

Summary

Adds a table of contents (TOC) sidebar to the public page view, displaying an auto-generated list of headings from markdown content. The sidebar appears on large screens (lg breakpoint and up) and is hidden on print.

Changes

• Import useCallback hook and new TableOfContents component
• Add state to track headings extracted from markdown content via handleHeadings callback
• Pass onHeadings prop to MarkdownViewer to capture heading structure
• Restructure main content layout:
  • Wrap content in a responsive grid: single column on mobile/tablet, two-column on lg+ screens
  • Move page title and metadata into an <article> element
  • Add hidden <aside> sidebar (lg+ screens, no-print) containing the TOC component
  • Increase max-width constraints to accommodate sidebar (max-w-6xl → max-w-7xl → max-w-[100rem])
  • Adjust gap spacing for larger screens (gap-8 → gap-12 on 2xl)

Implementation Details

• The handleHeadings callback is memoized with useCallback to prevent unnecessary re-renders
• TOC sidebar uses Tailwind's responsive grid and breakpoint utilities for progressive enhancement
• Print stylesheet compatibility maintained via no-print class on sidebar
• Layout scales gracefully: mobile (single column) → tablet (single column) → desktop (two columns with TOC)

https://claude.ai/code/session_011zywk9ykwqjZnvsBEzB9Di