{"success":true,"data":{"block":{"id":"article-toc-sidebar","name":"Article TOC Sidebar","title":"Article TOC Sidebar","category":"Article","categorySlug":"article","description":"An article layout with a sticky table of contents sidebar that highlights the active section as users scroll. Includes a CTA card in the sidebar, category badge, author info, and IntersectionObserver-based section tracking. Ideal for technical tutorials, guides, and long-form content that benefits from easy navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293075/6sklzdhioqhnbjryewz6wue05qx4/cleanshot-2026-03-03-at-12-00-32.png","mobile":"https://cdn.ing/assets/i/r/293074/m3131lck7hsql683f9l84ua6wy6d/cleanshot-2026-03-03-at-12-00-44.png"},"componentPath":"blocks/article/article-toc-sidebar.tsx","code":"import { ArticleTocSidebar } from \"@opensite/ui/blocks/article/article-toc-sidebar\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleTocSidebar\n      category=\"Development\"\n      title=\"Building Scalable Systems: A Comprehensive Guide\"\n      description=\"Learn the principles, patterns, and practices that enable applications to grow gracefully from prototype to production scale.\"\n      authorName=\"Michael Zhang\"\n      authorImage={imagePlaceholders[88]}\n      authorHref=\"#\"\n      publishDate=\"January 12, 2026\"\n      readTime=\"20 min read\"\n      heroImageSrc={imagePlaceholders[95]}\n      heroImageAlt=\"Scalable architecture diagram\"\n      sections={[\n        { id: \"introduction\", title: \"Introduction\" },\n        { id: \"getting-started\", title: \"Getting Started\" },\n        { id: \"core-concepts\", title: \"Core Concepts\" },\n        { id: \"best-practices\", title: \"Best Practices\" },\n        { id: \"conclusion\", title: \"Conclusion\" },\n      ]}\n      ctaTitle=\"Want to Learn More?\"\n      ctaDescription=\"Join our upcoming workshop on scalable system design and architecture patterns.\"\n      ctaActions={[\n        {\n          label: \"Register for Workshop\",\n          href: \"#\",\n          variant: \"default\",\n          className: \"w-full\",\n        },\n      ]}\n      enableTocTracking={true}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header section","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false},"authorImage":{"type":"string","description":"Author image URL","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"category":{"type":"object","description":"Category badge text","typeLabel":"React.ReactNode","required":false},"categorySlot":{"type":"object","description":"Custom slot for category badge (overrides category)","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"TOC sections array","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleTocSection"},"typeLabel":"ArticleTocSection[]","required":false},"tocSlot":{"type":"object","description":"Custom slot for TOC (overrides sections array)","typeLabel":"React.ReactNode","required":false},"renderSectionLink":{"type":"object","description":"Render callback for section links (overrides default rendering)","typeLabel":"( section: ArticleTocSection, isActive: boolean, ) => React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"ctaTitle":{"type":"object","description":"CTA section title","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA section description","typeLabel":"React.ReactNode","required":false},"ctaActions":{"type":"array","description":"CTA actions","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides CTA props)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render (when renderMode is \"markdown\")","required":false},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"enableTocTracking":{"type":"boolean","description":"Enable scroll-based section tracking","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","toc","table-of-contents","sidebar","sticky","navigation","tutorial","guide","cta"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to adhere to the required markdown formatting to inject `id` attributes for each section that map exactly to the `sections` `id` value. Ensure to only use the authorName, authorImage, authorHref, and authorImage fields if you have actual data to populate those fields, using empty/fake data is not acceptable! Only provide valid `ctaActions` and only provide a `ctaTitle` and `ctaDescription` if you have actual `ctaActions` (typically only 1 ctaAction looks best)."}},"timestamp":"2026-05-13T10:40:40.977Z"}