{"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/308420/9xlgnxxtpxnmyyfanvn4wwq4u1pc/article-toc-sidebar-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308419/anzis15zt533vqsfgfjpehjawg0v/article-toc-sidebar-mobile.jpg"},"componentPath":"blocks/article/article-toc-sidebar.tsx","code":"import { ArticleTocSidebar } from \"@opensite/ui/blocks/article/article-toc-sidebar\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\";\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={ARTICLE_IMAGE_URL}\n      authorHref=\"#\"\n      publishDate=\"January 12, 2026\"\n      readTime=\"20 min read\"\n      heroImageSrc={ARTICLE_IMAGE_URL}\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":true,"maxLength":90},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":true,"maxLength":240},"authorName":{"type":"string","description":"Author name","required":false,"maxLength":80},"authorImage":{"type":"string","description":"Author image URL","required":false,"mediaHints":{"path":"authorImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author avatar or portrait image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false,"maxLength":40},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false,"maxLength":30},"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,"maxLength":40},"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":true,"minItems":3,"maxItems":8},"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":true,"mediaHints":{"path":"heroImageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Primary article hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":true,"maxLength":140},"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,"maxItems":2},"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":true,"maxLength":12000},"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},"sections[].id":{"type":"object","description":"","required":true},"sections[].title":{"type":"object","description":"","required":true,"maxLength":60}},"exampleProps":{"category":"Development","title":"Building Scalable Systems","description":"A source-backed guide to patterns that help applications grow from prototype to production.","authorName":"Michael Zhang","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","authorHref":"#","publishDate":"January 12, 2026","readTime":"20 min read","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"Scalable architecture planning session","sections":[{"id":"overview","title":"Overview"},{"id":"implementation","title":"Implementation"},{"id":"conclusion","title":"Conclusion"}],"ctaTitle":"Explore More Guides","ctaDescription":"Read the next source-backed article in this series.","ctaActions":[{"label":"View Guides","href":"#","variant":"default"}],"markdownString":"## Overview\nModern article layouts need clear hierarchy, source-backed metadata, and media that supports the story.\n\n## Implementation\nUse concise section headings that map to the navigation items and keep body copy grounded in the article source.\n\n## Conclusion\nClose with a practical takeaway and one clear next action for readers."},"dependencies":["@opensite/ui"],"tags":["article","blog-post","toc","table-of-contents","sidebar","sticky","navigation","tutorial","guide","cta"],"performance":{},"importantUsageNotes":"Use for technical tutorials, guides, and long-form articles that need sticky table-of-contents navigation. sections[].id must map to real headings in markdownString when tracking is enabled. heroImageSrc and authorImage must be absolute image URLs only. Do not use placeholder media variables, relative /images paths, logos, favicons, or video URLs.","usageRequirements":{"requiredProps":["title","description","sections","heroImageSrc","heroImageAlt","markdownString"],"propConstraints":{"title":{"required":true,"maxLength":90},"description":{"required":true,"maxLength":240},"category":{"required":false,"maxLength":40},"authorName":{"required":false,"maxLength":80,"note":"Must identify a real article author or organization byline when supplied."},"publishDate":{"required":false,"maxLength":40},"readTime":{"required":false,"maxLength":30},"sections":{"required":true,"minItems":3,"maxItems":8},"sections[].id":{"required":true,"note":"Must match a heading id in markdownString."},"sections[].title":{"required":true,"maxLength":60},"heroImageSrc":{"required":true,"note":"Absolute article hero image URL. IMAGE MEDIA ONLY."},"heroImageAlt":{"required":true,"maxLength":140},"authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"ctaActions":{"required":false,"maxItems":2,"note":"Use ActionConfig objects; do not use ctaText, ctaHref, or ctaButtonText."},"markdownString":{"required":true,"maxLength":12000,"note":"Long-form markdown article body."}},"mediaSlots":{"heroImageSrc":{"path":"heroImageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Primary article hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"authorImage":{"path":"authorImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author avatar or portrait image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["blog_posts","team_members","media_library"],"notes":["Article titles, authors, dates, summaries, chapter names, and body copy must come from source-backed article or blog data. Do not invent bylines or publication metadata.","All article media values must be absolute URLs to real image assets. Do not use relative paths, placeholder media variables, logos, favicons, or video URLs in image props.","When TOC or chapter tracking is enabled, every sections[].id or chapters[].id value must match a real heading id generated from markdownString content."]}}},"timestamp":"2026-06-27T19:57:18.621Z"}