Introduce Article Info Sidebar and Improve Markdown Page Layout: TOC, Mermaid

Summary

Refactored the OneArticleOnPage.astro layout to properly handle table of contents, mermaid charts, and a new document info sidebar.

Why Care

These improvements significantly enhance usability and structure of long markdown documents, providing more navigability (TOC), visual clarity (chart expansion), and metadata context (info sidebar).

Implementation

Changes Made

  • Added a sticky info-sidebar on the left for showing document metadata (path, id, author, etc.)
  • Refactored TableOfContents.astro to apply styles correctly when called from AstroMarkdown
  • Resolved issues where .toc-sidebar styles were not being applied when injected dynamically
  • Prevented chart overflow from breaking layout by constraining .mermaid-breakout width to container
  • Completely rewrote fullscreen logic for Mermaid charts using toggleMermaidExpand() with lightbox behavior
  • Ensured responsive resizing and modal structure for fullscreen Mermaid rendering
  • Added global styles for mermaid-fullscreen-modal
  • Preserved all sidebar widths across breakpoints
  • Ensured fallback TOC title rendering inherits proper styles

Technical Details

  • OneArticleOnPage.astro:
    • Introduced .info-sidebar and styled it consistently with .toc-sidebar
    • Removed duplicate .toc-sidebar markup; rendering now fully handled via AstroMarkdown and TableOfContents.astro
    • Ensured .content-wrapper uses flexbox and align-items: flex-start to keep sidebar positioning stable
  • TableOfContents.astro:
    • Renders nested ToC nodes recursively with unified styles
    • Removed redundant hover and text color rules
    • Applied .toc-scroll-area wrapper only when content exists, with scroll disabled
  • Mermaid chart styling:
    • .mermaid-chart-shell now respects container width and avoids overflow
    • .mermaid-fullscreen-modal gives fullscreen chart display with high z-index and escape key support
    • Added expand/collapse toggle using inline SVG

Integration Points

  • AstroMarkdown.astro: calls <TableOfContents /> based on node.type === "tableOfContents"
  • Relies on remark-toc injecting a valid tableOfContents node with data.map as list

Documentation

  • No external docs modified yet, but README could benefit from a "Markdown Layout Structure" section
  • All changes tested in /pages/vocabulary/[slug].astro via live Markdown rendering
  • Will need follow-up to generalize info-sidebar metadata fields from frontmatter